Formateador de JSON

Casos de uso

• Leer la respuesta de una API que llega minificada, toda en una línea.
• Encontrar por qué un archivo de configuración no carga, cuando el programa solo dice «JSON inválido» y se queda tan ancho.
• Pegar un objeto copiado de la consola del navegador o de un archivo de JavaScript y convertirlo en JSON de verdad.
• Meter un texto largo con saltos de línea y comillas dentro de un campo de un JSON, escapado como debe.
• Sacar un JSON que venía metido dentro de otra cadena, con todas las comillas escapadas, y volver a dejarlo legible.
• Revisar un JSON grande buscando una clave o un valor concretos, sin desplegarlo entero.
• Cambiar cuatro valores de un archivo de configuración sin arriesgarte a romper la sintaxis.
• Pasar una lista de objetos a CSV para abrirla en Excel o en una hoja de cálculo.
• Sacar los tipos de TypeScript de una respuesta de API sin escribirlos a mano.
• Comparar la configuración de dos entornos y ver de un vistazo qué campo cambia.
• Convertir un volcado de registros en JSON Lines a una lista normal, y al revés.
• Minificar un JSON antes de meterlo en una URL, en una variable de entorno o en un campo de base de datos.

Cómo se usa

1. Pega el JSON en el cuadro de la izquierda, o arrastra el archivo encima.
2. Si hay un error, debajo verás la línea y la columna exactas, qué se esperaba ahí y, cuando se pueda, un botón para arreglarlo solo.
3. Elige la sangría (2 espacios, 4 o tabulador) y pulsa «Formatear», o «Minificar» si lo que quieres es que ocupe lo menos posible.
4. A la derecha tienes el mismo documento como lista de campos: escribe encima de un valor, cámbiale el tipo, añade o borra campos y el texto se reescribe solo.
5. Usa el buscador del árbol para encontrar una clave o un valor, y el icono de copiar de cada fila para llevarte su ruta.
6. En el bloque de texto y cadenas, escribe a la izquierda y tendrás a la derecha el texto listo para pegar dentro de un JSON, o al revés.
7. En el bloque de conversiones, elige CSV, JSON Lines o tipos de TypeScript y copia o descarga el resultado.
8. Para comparar dos versiones, pégalas abajo y verás la lista de campos que cambian.

Qué incluye Formateador de JSON

• Validación con el error señalado en su línea y su columna, con la línea impresa y una flecha debajo del carácter que falla.
• Mensajes que explican qué se esperaba ahí, en vez del «Unexpected token» de siempre.
• Reparación automática de lo que no es JSON pero se le parece: comas sobrantes, comillas simples, claves sin comillas, comentarios // y /* */, True y None de Python, NaN e Infinity, comas que faltan y el «var datos =» de delante.
• Detección de los caracteres invisibles que rompen un archivo sin que se vea nada: la marca BOM y los espacios duros que se cuelan al copiar de una web.
• Formateado con 2 espacios, 4 espacios o tabulador, y minificado en un clic.
• Ordenación alfabética de las claves de todos los objetos.
• Editor visual campo a campo, sincronizado con el texto en los dos sentidos.
• Cambio de tipo de cualquier valor, alta y baja de campos, y copiado de la ruta de cada dato.
• Buscador dentro del árbol por clave o por valor, con las ramas que no casan escondidas.
• Los números largos se conservan tal como venían: un identificador de veinte cifras no se redondea al formatear.
• Aviso de claves repetidas y de números que no caben en un número de JavaScript.
• Resumen del documento: tamaño, tamaño minificado y lo que se ahorra, profundidad, campos, claves distintas y recuento por tipos.
• Conversión a CSV (con coma, punto y coma o tabulador), a JSON Lines y de JSON Lines a lista.
• Generación de interfaces de TypeScript a partir de los datos, con los campos que no aparecen en todos los elementos marcados como opcionales.
• Escapado y desescapado de textos para meterlos en un campo JSON, con la opción de escapar tildes y eñes como \uXXXX.
• Comparador de dos documentos que enseña campo a campo lo que se añade, lo que desaparece y lo que cambia.
• Todo funciona sin conexión y sin enviar nada a ningún servidor.

Preguntas frecuentes

¿Se sube mi JSON a algún sitio?

No. Todo el análisis, el formateado y las conversiones se hacen en tu navegador, con código que se descargó al abrir la página. No hay servidor detrás al que enviar nada, ni petición de red que llevárselo. Es lo que hace que se pueda pegar aquí sin pensárselo un volcado de datos de trabajo, un token o una configuración de producción. Una vez cargada la página, la herramienta sigue funcionando sin conexión.

Mi JSON funciona en JavaScript pero aquí da error, ¿por qué?

Porque no es JSON, es un objeto de JavaScript, y JavaScript admite cosas que JSON no. Las tres más habituales: la coma detrás del último campo, las comillas simples y las claves sin comillas. También sobran los comentarios, los números en hexadecimal y los valores undefined, NaN e Infinity. Pega el texto y pulsa «Reparar»: la herramienta lo lee con las reglas de JavaScript y lo devuelve escrito como JSON, y te dice qué ha tenido que tocar.

¿Qué puede haber dentro de un JSON?

Seis clases de valor y ninguna más: cadenas entre comillas dobles, números, true, false, null, y objetos y listas que contienen a los anteriores. No existen las fechas (se guardan como cadena en formato ISO 8601), ni los infinitos, ni los comentarios, ni las referencias. Un documento es un único valor: casi siempre un objeto o una lista, aunque un JSON que solo contenga el número 42 también es válido.

¿De verdad no se pueden poner comentarios?

En JSON no. Es una de las decisiones más discutidas del formato y su autor la explicó en su día: los comentarios se estaban usando para meter instrucciones al programa que lo leía, y eso rompía la idea de que un JSON sea solo datos. Como en los archivos de configuración se echan mucho de menos, han aparecido variantes que sí los admiten, como JSONC (el de los archivos de Visual Studio Code) o JSON5. Esta herramienta los lee sin problema y te los quita al reparar.

¿Qué hace exactamente el botón «Reparar»?

Vuelve a leer el texto con las reglas relajadas y lo reescribe como JSON válido, y antes de tocar nada te enseña la lista de lo que va a cambiar. Quita comentarios y comas sobrantes, pone comillas dobles en claves y cadenas, pone las comas que faltan, pasa True, False y None a true, false y null, sustituye NaN, Infinity y undefined por null, pasa los números hexadecimales a decimal y quita lo que hubiera antes o después del JSON, como un «var datos =» o un punto y coma final. Lo que no hace es adivinar: si falta una llave o una cadena se queda sin cerrar, te lo dice y lo arreglas tú, porque ahí cualquier arreglo automático se estaría inventando dónde va.

Tengo un identificador larguísimo y otras herramientas me lo cambian, ¿aquí también?

No, y es una diferencia importante. Los números de JavaScript solo guardan enteros exactos hasta 9.007.199.254.740.991, así que un identificador de más de quince o dieciséis cifras se redondea en cuanto pasa por JSON.parse: 10000000000000000001 se convierte en 10000000000000000000 y nadie te avisa. Esta herramienta guarda los números tal como venían escritos y los devuelve iguales al formatear, y además te pone un aviso cuando detecta uno que no cabría. Si el dato es un identificador y no una cantidad, lo suyo es guardarlo como cadena.

¿Y si el mismo objeto tiene dos veces la misma clave?

Es válido según la norma, aunque desaconsejado, y cada lector hace lo que quiere: la mayoría se queda con la última y algunos con la primera. Como es una fuente de errores silenciosos, aquí se avisa cuando ocurre y se conservan las dos, en su sitio, para que puedas ver cuál te sobra y borrarla. Al ordenar las claves también se mantienen ambas.

¿Se me va a cambiar el orden de las claves al formatear?

No. Se respeta el orden en que venían, incluso el de las claves que son números, que es donde fallan casi todas las herramientas: si el JSON se lee a un objeto de JavaScript, las claves "2" y "10" se reordenan solas y salen antes que las demás. Aquí el documento no se guarda como objeto de JavaScript sino como una lista de campos, así que sale como entró. Si lo que quieres es justo ordenarlas, está el botón «Ordenar claves».

¿Cómo meto un texto con saltos de línea dentro de un JSON?

Escapándolo: dentro de una cadena, un salto de línea se escribe \n, un tabulador \t, una comilla doble \" y una barra invertida \\. No se puede pulsar Intro dentro de las comillas, por eso las cadenas largas van todas en una sola línea por larga que sea. Para eso está el bloque «Texto y cadenas»: pega el texto tal cual a la izquierda y a la derecha lo tienes listo para pegar en el JSON. Y al revés, si tienes la cadena escapada y quieres leer el texto.

¿Cuánto se ahorra minificando?

Depende de la sangría que llevara: entre un 10 % y un 30 % es lo normal, y en documentos muy anidados puede pasar del 40 %. Minificar solo quita espacios, tabuladores y saltos de línea, que son los caracteres que JSON permite entre un valor y otro: los datos no cambian ni un ápice y cualquier lector devuelve exactamente lo mismo con el texto formateado y con el minificado. Es lo que hay que enviar por la red; lo formateado es para leerlo tú.

¿Qué es JSON Lines y para qué sirve?

Es un JSON por línea, sin corchetes alrededor y sin comas entre ellos. Se usa para registros y para volcados grandes porque se puede leer e ir procesando línea a línea sin cargar el archivo entero en memoria, y porque añadir un registro es escribir una línea al final. Su extensión suele ser .ndjson o .jsonl. Aquí puedes convertir una lista a ese formato y juntar un archivo así en una lista normal.

¿Me puedo fiar de los tipos de TypeScript que genera?

Como punto de partida sí, pero no son un contrato. Los tipos se deducen de los datos que le des, no de un esquema: si en tu muestra un campo siempre viene relleno, saldrá obligatorio aunque la API lo mande vacío de vez en cuando, y un campo que en esta respuesta es null saldrá como null a secas. Cuando la raíz es una lista de objetos se fusionan todos sus elementos y los campos que no están en todos salen marcados como opcionales, que es lo que suele acertar. Revísalos antes de darlos por buenos.

El archivo parece correcto y sigue dando error en el carácter 1, ¿qué pasa?

Casi siempre es la marca BOM: tres bytes invisibles que algunos editores de Windows ponen al principio al guardar en UTF-8. No se ven en ninguna parte, pero JSON no los admite y el error sale en el primer carácter. Lo mismo ocurre con los espacios duros que se cuelan al copiar de una página web o de un documento de Word: se ven igual que un espacio normal y no lo son. Esta herramienta los detecta, te dice cuál es y los quita al reparar.

¿Hay un límite de tamaño?

El de tu equipo. La validación y el formateado aguantan documentos de varios megabytes sin despeinarse. Lo que sí se frena es el editor visual: a partir de unos 300 kB no se monta solo, porque un árbol de cientos de miles de filas atasca la pestaña, aunque puedes pedir que se monte igualmente. Con archivos así, lo cómodo es validar y formatear aquí y editar en un editor de código.

Privacidad

Formateador de JSON funciona íntegramente en tu navegador. No hay servidor detrás: los datos que introduces no se envían a ninguna parte y desaparecen al cerrar la pestaña.