¿Qué hace el Formateador JSON?
El Formateador JSON toma cualquier cadena JSON —una respuesta de API que copiaste desde una pestaña del navegador, un archivo de configuración, una fila de base de datos, lo que sea— y la expande a forma legible con sangría o la comprime a una sola línea. También valida la entrada: si tu JSON tiene una coma extra, una comilla suelta o un corchete sin cerrar, el formateador te dice exactamente dónde.
Pega {"name":"Alice","age":30,"hobbies":["reading","coding"]} y el formateador lo expande a:
{
"name": "Alice",
"age": 30,
"hobbies": [
"reading",
"coding"
]
}
Cambia el sentido y el formateador elimina todos los espacios, devolviendo la versión compacta de una línea. Ambas operaciones se ejecutan al instante en tu navegador: no hay viaje al servidor y tus datos nunca salen de la página.
Cuándo vas a usar el Formateador JSON
El JSON está en todas partes en el desarrollo web moderno, así que el formateador aparece en el día a día de varios roles:
- Desarrolladores backend depurando respuestas de API: pega el cuerpo de una respuesta desde la pestaña Network o un log del servidor para ver la estructura.
- Desarrolladores frontend inspeccionando payloads recibidos de APIs o webhooks antes de parsearlos en código.
- Ingenieros de datos revisando salidas de pipelines, mensajes de Kafka o registros de documentos NoSQL.
- Ingenieros de QA comparando respuestas esperadas vs reales en informes de fallos de tests.
- DevOps leyendo archivos de configuración minificados (planes de Terraform, manifiestos de Kubernetes, salidas de GitHub Actions) que llegan en una sola línea.
- Cualquiera que trabaje con bases de datos JSON como MongoDB, DynamoDB o columnas JSONB de PostgreSQL.
El formateador también sirve en sentido inverso: cuando necesitas incrustar JSON dentro de otro archivo (una clave YAML, una cadena JavaScript, una cabecera HTTP), minificarlo a una línea suele ser obligatorio. Ambos sentidos van con un clic.
La validación es la parte que menos se valora. El formateador rechaza JSON mal formado con un puntero de error preciso: mucho más útil que el críptico "SyntaxError: Unexpected token" de la consola del navegador. Si intentas averiguar por qué falla tu llamada a la API o por qué no carga tu configuración, el formateador suele encontrar el fallo en segundos.
Cómo funciona el formateador
Por dentro, el formateador pasa tu entrada por el parser JSON nativo del navegador. JSON.parse() convierte la cadena en un objeto JavaScript; JSON.stringify() lo vuelve a cadena con la sangría que hayas elegido. Las mismas APIs que usa cualquier desarrollador de Node.js y navegador, ejecutándose del lado del cliente.
La ventaja de usar el parser nativo es la corrección: el formateador sigue exactamente la especificación JSON (RFC 8259). No hay parseo "a lo mejor": si tu JSON tiene una coma final tras el último elemento de un array, el formateador la rechaza, porque JSON prohíbe las comas finales. (Los literales de objeto de JavaScript las permiten; JSON no. Es una confusión habitual.)
El paso de expansión usa por defecto sangría de 2 espacios, que coincide con la convención de la mayoría de APIs y archivos de configuración en JSON. Cada elemento de array y cada propiedad de objeto va en su propia línea, con comillas consistentes (siempre dobles, nunca simples).
Nada de esto requiere procesamiento en servidor: cualquier navegador moderno parsea JSON nativamente en milisegundos, incluso con payloads grandes. El formateador maneja documentos JSON de un megabyte sin sufrir.
Patrones de formateo habituales
Distintos casos de uso pide distintas salidas. Así maneja el formateador los escenarios habituales:
| Entrada | Salida (expandida) | Salida (minificada) |
|---|---|---|
| Objeto simple | Varias líneas con claves sangradas | Una línea, sin espacios |
| Array de objetos | Cada objeto en su propio bloque de líneas | Una línea, separados por comas |
| Estructura muy anidada | La sangría refleja el nivel de anidamiento | Una línea conserva la profundidad mediante los corchetes |
| Objetos / arrays vacíos | {} y [] se quedan en una línea | Igual: sin espacios dentro |
| Cadenas con caracteres especiales | Escapadas (saltos de línea como \n, etc.) | Mismo escape; cambia el ajuste de línea |
| Números (entero, decimal, científico) | Se conservan tal cual | Se conservan tal cual |
Fíjate en que el contenido de las cadenas se conserva exactamente. Si tu JSON contiene una cadena con saltos de línea incrustados (escapados como \n en el origen), el formateador los mantiene tal cual: no expande \n a saltos de línea reales, lo que rompería el JSON.
Los números también pasan sin cambios. JSON admite varios formatos (entero, decimal, notación científica), y el Formateador JSON mantiene el estilo que viniera en la entrada: no normaliza 1e3 a 1000.
El orden de las propiedades en la salida expandida coincide con el de tu entrada. Si pegas un objeto con claves en orden {name, age, email}, el formateador las saca en ese mismo orden. La especificación de JSON no exige un orden concreto de propiedades (los parsers pueden ignorarlo), pero la mayoría de stringifiers, incluido el Formateador JSON, conservan el orden de inserción por legibilidad. Si trabajas con código que depende de un orden de claves concreto, esta consistencia importa.
Trucos y consejos
Algunos detalles habituales al trabajar con JSON:
- Las comas finales no son válidas.
[1, 2, 3,]parece bien en JavaScript pero rompe JSON. Quita la última coma antes de pegar. - Los comentarios no están permitidos. Las líneas
// notay/* bloque */son errores de sintaxis en JSON. Quítalos o usa JSON5/JSONC si tu herramienta los soporta (la mayoría no). - Las comillas simples no funcionan. Las claves y los valores de cadena JSON deben usar comillas dobles.
{'name':'Alice'}no parsea. - Las claves sin comillas no están permitidas.
{name: "Alice"}es un literal de objeto JavaScript, no JSON. JSON requiere comillas en todas las claves. - Los números no pueden tener ceros a la izquierda.
007es válido en algunos lenguajes pero inválido en JSON. Usa"007"como cadena si los ceros importan.
Truco: si copias JSON desde la pestaña Network del navegador, usa "Copy → Copy response" en vez de seleccionar y copiar a mano. La selección manual a veces arrastra caracteres Unicode ocultos o códigos de control del terminal que rompen el parseo.
Los archivos JSON grandes (1 MB o más) funcionan bien en el formateador, pero la salida se vuelve larguísima rapidísimo. Si intentas inspeccionar una estructura muy anidada dentro de un documento enorme, considera una herramienta que soporte colapsar ramas: el formateador es ideal para formatear y validar de principio a fin, no para explorar interactivamente documentos gigantes.
Herramientas de desarrollo relacionadas
El Formateador JSON combina bien con varias herramientas de Microapp para desarrolladores:
- Conversor CSV a JSON: convierte datos de hoja de cálculo en arrays de objetos JSON, listos para formatear y usar como fixtures de prueba o datos de semilla.
- Conversor JSON a CSV: aplana arrays JSON en filas CSV para revisión en hojas de cálculo o herramientas de análisis.
- Codificador/Decodificador Base64: para codificar payloads JSON dentro de tokens JWT, data URIs u otros contextos envueltos en base64.
- Codificador/Decodificador URL: cuando necesitas incrustar JSON de forma segura en parámetros de URL.
- Probador de Regex: para extraer valores específicos de cadenas JSON cuando necesitas un patrón en lugar de un parseo.
Preguntas frecuentes
¿Se envía mi JSON a algún servidor?
No. El formateador usa las APIs JSON.parse y JSON.stringify del navegador, las dos se ejecutan completamente del lado del cliente. Tus datos no cruzan la red. Al cerrar la pestaña, todo desaparece.
¿Cuál es el tamaño máximo de JSON que puede manejar?
En la práctica, lo que tu navegador pueda mantener en memoria: típicamente varios cientos de MB antes de que el rendimiento se resienta. Documentos de varios MB se formatean al instante. A partir de ~50 MB pueden aparecer pequeñas pausas mientras el navegador trocea el trabajo.
¿Por qué el formateador rechaza mi JSON si parece correcto?
Las causas más comunes: comas finales ([1, 2, 3,]), comentarios (// nota), comillas simples en lugar de dobles o claves de objeto sin comillas. JSON es más estricto que los literales de objeto de JavaScript: cosas que funcionan en código JS no siempre son JSON válido.
¿Puedo personalizar la sangría (tabs vs espacios, 2 vs 4 espacios)?
El formateador usa actualmente sangría de 2 espacios, que coincide con la convención de la mayoría de APIs JSON (Stripe, GitHub, Twilio). Si tu equipo usa 4 espacios o tabs, pasa la salida por el reformateador de tu editor tras pegarla.
¿Valida el formateador JSON Schema?
No. Valida sintaxis JSON (¿parsea?), no JSON Schema (¿coincide con una definición de esquema concreta?). Para validar esquemas, usa una herramienta dedicada como Ajv o json-schema-validator.
¿Cuál es la diferencia entre JSON minificado y compacto?
Son lo mismo. "Minificado" enfatiza la reducción de tamaño (útil para payloads HTTP y ratios de gzip); "compacto" enfatiza el aspecto visual (una sola línea). Ambas producen una salida idéntica: JSON.stringify(parsed) sin espacios.
¿Puede el formateador manejar JSON5 o JSONC?
No: son superconjuntos de JSON que permiten comentarios, comas finales y otra sintaxis relajada. El formateador sigue JSON estricto según el RFC 8259. Para trabajar con JSON5/JSONC, quita primero los comentarios y las comas finales, o usa una herramienta consciente de JSON5 como el paquete npm json5.
¿Modificará el Formateador JSON mis datos?
Solo reescribe el espaciado. Las claves de objeto, los valores de cadena, los números, los booleanos y null pasan sin cambios. Las salidas expandida y minificada parsean a objetos JavaScript idénticos: son representaciones equivalentes del mismo dato.
¿Puedo usar el formateador para validar JSON sin cambiarlo?
Sí: pega la entrada y mira si parsea correctamente. Si el Formateador JSON acepta tu entrada sin error, el JSON es sintácticamente válido. (Para validación semántica contra un esquema, usa un validador de JSON Schema.)
¿Por qué el formateador usa específicamente sangría de 2 espacios?
La sangría de 2 espacios coincide con la convención de la mayoría de APIs JSON y herramientas para desarrolladores (Stripe, GitHub, Twilio, el valor por defecto de JSON.stringify). Es lo bastante compacta para mantener legibles las estructuras muy anidadas sin desperdiciar espacio horizontal, y es lo que esperan la mayoría de editores al reformatear JSON pegado. Si la guía de estilo de tu equipo difiere, pasa la salida del formateador por el reformateador de tu editor para mantener la consistencia.