Developer Tools Thiago Castro 4 min de lectura

Formateador JSON Gratis Online

Formatea, valida y minifica JSON en tu navegador. Sin enviar datos a servidores. Por qué importa que tu formateador sea local.

Ver como Web Story
En este artículo
  1. Por Qué Formatear JSON Importa
  2. Las Herramientas Online Tienen un Problema
  3. Local vs Nube: Seguridad de Tus Datos
  4. Qué Hace Nuestro Formateador
  5. Cuándo Lo Uso en Mi Flujo Diario

Estaba depurando un webhook de Stripe cuando me pasó. Copié el payload del JSON (con tokens de cliente, emails, montos de pago) y lo pegué en el primer formateador que me salió en Google. El JSON quedó bonito. También quedó en un servidor que no controlo, con datos de clientes que no debería haber enviado a ningún lado.

Por Qué Formatear JSON Importa

JSON compactado en una sola línea es ilegible para humanos. Cuando depuras un API que devuelve un objeto anidado de 200 campos, necesitas ver la estructura. Necesitas encontrar dónde está el campo que falta, dónde está la coma extra que rompe el parser, dónde el valor es null cuando esperabas un string.

Los IDEs formatean JSON pero no siempre estás en tu IDE. A veces estás en producción revisando logs. A veces estás en una call compartiendo pantalla y necesitas ver un response rápido. A veces estás en tu teléfono a las 11pm porque algo se cayó y necesitas ver qué devuelve un endpoint.

Un formateador online bueno te ahorra de 30 segundos a 5 minutos cada vez que lo usas. Parece poco. Cuando lo usas 10 veces al día, son minutos que se acumulan en horas al mes.

Las Herramientas Online Tienen un Problema

La mayoría de formateadores online que aparecen en la primera página de Google hacen una de dos cosas con tu JSON: lo procesan en el servidor (no en el navegador) o lo almacenan temporalmente para "mejorar el servicio." Algunos hacen ambas.

Eso significa que el JSON con credenciales de API, tokens de usuario, información personal de clientes, o configs de producción que pegaste "rápido para formatear" puede estar en un log de servidor que no controlas. Si trabajas con datos regulados (HIPAA, GDPR, SOC2), eso puede ser una violación seria.

No estoy diciendo que todos los formateadores roben datos. La mayoría probablemente no. Pero "probablemente no" no es suficiente cuando pegaste un JSON con 500 emails de clientes y tokens de sesión activos.

El problema es que no puedes saber qué pasa del lado del servidor a menos que revises el tráfico de red. Y la mayoría de desarrolladores no revisan. Solo pegan, formatean, y siguen trabajando.

Local vs Nube: Seguridad de Tus Datos

La solución es simple: usa un formateador que corra completamente en tu navegador. JavaScript puede parsear y formatear JSON sin enviar un solo byte a ningún servidor. No necesitas backend para indentar texto.

Cómo verificas que un formateador es realmente local: abre las DevTools de tu navegador (F12), ve a la pestaña Network, pega tu JSON y formatea. Si no aparece ningún request HTTP saliente (excepto quizás analytics de página), todo se procesó localmente.

Hice esta prueba con 10 formateadores populares de Google. Tres de ellos enviaban el JSON al servidor. Uno enviaba un hash del contenido (para qué?). Los otros seis eran genuinamente locales. El nuestro es uno de esos seis, pero con una diferencia: ni siquiera cargamos analytics de terceros en la página de la herramienta.

Qué Hace Nuestro Formateador

Formatear y embellecer

Pega JSON comprimido y recibe JSON indentado con 2 o 4 espacios (tú eliges). Maneja objetos anidados, arrays dentro de objetos, strings con caracteres escapados, y unicode. Si el JSON tiene 50 niveles de anidación, los indenta todos correctamente.

También colorea la sintaxis: strings en verde, números en naranja, booleanos y null en rojo, llaves y corchetes en gris. Eso no es decoración. Cuando buscas un número entre 200 campos, el color te lo señala antes de que leas el texto.

Minificar

El reverso de formatear. Toma JSON indentado y lo comprime a una sola línea sin espacios. Útil cuando necesitas meter un JSON en un header HTTP, en una variable de entorno, o en un campo de configuración que no acepta saltos de línea.

La reducción de tamaño varía según la profundidad de anidación. Un JSON típico de API se reduce entre 30% y 60% al minificarlo. Para payloads que se envían miles de veces por segundo, eso es ancho de banda real ahorrado.

Validar con errores claros

El validador no solo dice "JSON inválido." Te muestra exactamente la línea y el carácter donde falla, con un mensaje que explica qué esperaba encontrar y qué encontró. "Línea 23, columna 15: esperaba una coma o cierre de objeto, encontró dos puntos."

Los errores más comunes que detecta: trailing commas (la coma después del último elemento), comillas simples, comentarios (// o /* */), undefined como valor, NaN, y Infinity. Todos son válidos en JavaScript pero no en JSON estricto, y esa confusión genera el 80% de los errores de parsing.

Cuándo Lo Uso en Mi Flujo Diario

Depuración de APIs: cuando un endpoint devuelve un error y el body viene comprimido. Copio el response, pego en el formateador y en 2 segundos veo la estructura completa con el campo de error resaltado.

Comparar responses: formateo dos JSONs con la misma indentación y los pego en un diff tool. Sin formateo previo, un diff entre dos JSONs comprimidos es inútil porque todo está en una línea.

Escribir configs: empiezo con un JSON formateado legible, lo edito cómodo, y cuando está listo lo minifico para pegarlo en la variable de entorno o en el campo de configuración que necesita una sola línea.

Documentación: cuando escribo docs de API necesito ejemplos de request/response. Formateo el JSON real con 2 espacios de indentación y lo pego en el markdown. Queda legible para quien lee los docs y no tengo que indentar a mano.

Validación antes de deploy: antes de subir un archivo de configuración JSON a producción, lo paso por el validador. Una coma extra que pasa tu linter local puede tumbar el servicio en producción. 5 segundos de validación previenen 30 minutos de downtime.

Lo uso fácil 8-10 veces al día. Ya ni pienso en ello. Es parte del flujo como abrir la terminal o revisar git status. La diferencia es que ahora no me preocupa qué datos estoy pegando porque sé que no salen de mi navegador.

Preguntas frecuentes

Dudas comunes sobre este tema.

¿Es seguro pegar JSON con datos sensibles en un formateador online?+

Depende de si la herramienta procesa todo en el navegador o envía datos a un servidor. Nuestro formateador corre 100% en tu navegador con JavaScript. Nada se envía a ningún servidor. Puedes verificarlo abriendo las herramientas de red del navegador: cero requests salen mientras formateas.

¿Cuál es la diferencia entre formatear y validar JSON?+

Formatear le agrega indentación y saltos de línea para que sea legible. Validar verifica que la estructura sea JSON correcto según el estándar RFC 8259. Puedes tener JSON válido pero ilegible (una sola línea), o JSON bonito pero inválido (con comas extra al final).

¿Cuándo debo minificar mi JSON?+

Minifica cuando el JSON va a transmitirse por red (APIs, configs en producción, almacenamiento). Eliminar espacios y saltos de línea puede reducir el tamaño 30-60%. Para un JSON de 50KB, eso es 15-30KB menos por cada request.

¿Por qué mi JSON muestra error de 'unexpected token'?+

Las causas más comunes son: comas después del último elemento de un array u objeto (trailing commas), comillas simples en vez de dobles, comentarios (JSON no soporta comentarios), o valores sin comillas que no son números/booleanos/null.

¿Hay límite de tamaño para formatear JSON en el navegador?+

Técnicamente el límite es la memoria RAM de tu navegador. En la práctica, archivos de hasta 10MB se formatean sin problema en navegadores modernos. Arriba de 50MB puede que el navegador se congele. Para archivos muy grandes, herramientas de línea de comandos como jq son mejor opción.

Herramientas relacionadas

Sigue leyendo