Un embellecedor de JSON que nunca ve tu JSON.

Un JSON beautifier lee un documento, lo parsea hasta convertirlo en un árbol de objetos, arrays, cadenas, números, booleanos y nulos, y vuelve a escribir ese árbol con un valor por línea y una sangría constante. La palabra importante es parsea. No está insertando saltos de línea después de cada coma con una expresión regular, que es como lo hacen muchos fragmentos de código que circulan por la web, y que destruye en silencio cualquier cadena que contenga una coma o una llave.

Eso tiene una consecuencia que aparece de inmediato: un documento que no es JSON válido no se puede embellecer. No hay árbol que imprimir. Por eso aquí embellecer y validar son la misma operación y no dos botones, y por eso un pegado inválido te devuelve una línea, una columna y una descripción de lo que se esperaba, en lugar de un panel de salida vacío.

Los espacios en blanco fuera de las cadenas no significan nada en JSON. El RFC 8259 permite espacio, tabulador, retorno de carro y salto de línea entre dos tokens cualesquiera, así que reformatear no puede cambiar lo que un documento significa. El espacio dentro de una cadena es dato y se deja exactamente como estaba. Un formateador que trabaja sobre texto y no sobre un árbol sintáctico no distingue esos dos casos, y esa es la forma más común de corromper un payload al formatearlo.

El orden de las claves se conserva. La especificación considera los objetos como no ordenados, así que nada debería depender de ello, pero el orden en el que pegaste es casi siempre el que espera un diff, una revisión de código o una persona leyendo, y reordenar claves vuelve ruidosa cualquier comparación posterior sin ganar nada.

Pega en el panel izquierdo y pulsa Embellecer. El documento formateado aparece a la derecha, listo para copiar o descargar. No hay cuenta, ni paso de subida, ni cuota diaria, ni muro de pago en ninguna parte, que es lo que casi todo el mundo busca cuando escribe JSON beautifier online gratis y no la prueba de un producto de escritorio.

La sangría por defecto son dos espacios, que es donde acaban la mayoría de ecosistemas y guías de estilo. Cuatro espacios y tabuladores también están disponibles si tu repositorio ya tomó esa decisión por ti, y la elección se recuerda en tu navegador y no en un servidor, porque no hay ningún servidor donde recordarla.

Todo corre en un Web Worker, así que la interfaz sigue respondiendo mientras se parsea un documento. Un payload de 100 KB se formatea en unos 9 a 13 ms, 1 MB en 70 a 119 ms, y 10 MB en unos 0,6 a 0,8 segundos, medido en una máquina de escritorio a lo largo de dos ejecuciones. Tómalo como un rango y no como un benchmark, pero la forma es lo que importa: 10 MB son trabajo suficiente para congelar un hilo principal por completo, y aquí no corre en uno.

Después de la primera visita la página queda en caché, así que este JSON beautifier online sigue funcionando con la red desconectada. No es un truco de service worker. Es el resultado natural de una página estática que hace su trabajo en local: sin red, el ping de analítica simplemente falla, y todas las herramientas siguen adelante, porque ninguna necesitaba un servidor para empezar.

La mayoría de los formateadores son un área de texto y un botón. Entra lo pegado, sale texto formateado, y si el documento estaba roto vuelves a tu propio editor a adivinar. El panel de aquí es un editor de código real, con resaltado de sintaxis, emparejado de corchetes, plegado de código, búsqueda incremental y marcadores de error en línea, así que puedes arreglar lo que pegaste y reformatearlo sin salir de la página.

El plegado importa más de lo que parece. Un archivo de configuración de 4.000 líneas no es legible solo porque esté sangrado. Lo que lo vuelve legible de verdad es colapsar todas las ramas menos la que te interesa, y eso es una propiedad del editor, no del formateador.

Si quieres el mismo documento como árbol plegable en lugar de como texto, el visor de JSON lo muestra así. La validación informa de todos los problemas en vez de detenerse en el primero. La reparación se ocupa del casi-JSON, como comillas simples, comas finales y claves sin comillas, y enumera cada cambio que hizo para que puedas rechazar los que fueron decisiones discutibles y no arreglos.

Quien busca el mejor visor y JSON beautifier online normalmente no está preguntando por la sangría, que todas las herramientas hacen bien. Está preguntando por los documentos que rompen las herramientas: enteros más grandes de lo que JavaScript puede guardar, claves duplicadas y caracteres invisibles pegados desde un cliente de chat o un procesador de textos. Eso se maneja aquí, está descrito arriba con salida real, y es la única parte sobre la que vale la pena discutir.

Una pestaña del navegador no siempre es donde quieres que esto ocurra. Si el archivo ya está abierto en tu editor, el JSON beautifier más rápido es el que tienes atado a una tecla ahí.

Notepad++ no trae formateador de JSON. La respuesta habitual es el plugin JSTool: abre Plugins, luego Plugins Admin, busca JSTool, instálalo, reinicia, y el comando aparece en Plugins, JSTool, JSFormat. Funciona, y para payloads del día a día es la herramienta correcta. Ten en cuenta que JSTool parsea los números como flotantes de 64 bits, así que un ID estilo Twitter o Snowflake por encima de 9007199254740991 vuelve con dígitos distintos de los que entraron, sin avisar.

Sublime Text usa el paquete Pretty JSON, instalado con Package Control y asignado a Ctrl+Alt+J por defecto. Formatea a través de Python, lo que significa que los enteros grandes sobreviven exactos, una ventaja real frente a las opciones basadas en JavaScript. Lo que sí hace es descartar claves duplicadas sin decir nada, quedándose con la última.

VS Code no necesita ningún plugin. Formatear documento, que es Mayús+Alt+F en Windows y Linux y Mayús+Opción+F en macOS, formatea cualquier archivo que el editor reconozca como JSON. También hay un comando Format JSON en la paleta.

Lo que ninguno de ellos te da es un diagnóstico. Formatean un documento válido y rechazan uno inválido, lo cual está bien hasta que el documento es inválido y tiene 40.000 líneas. Ese es el caso para el que está hecha esta página, y también el de una máquina donde no te dejan instalar plugins.

Una extensión de JSON beautifier para Chrome hace algo realmente útil: intercepta las respuestas servidas como application/json y las muestra formateadas y plegables en la barra de direcciones, así que una API que estás tocando se lee sin pasar por un formateador. Firefox hace eso de forma nativa desde la versión 44 y no necesita extensión alguna.

Vale la pena leer el coste antes de instalar una. Para reescribir la página de cualquier API que visites, la extensión tiene que pedir permiso para leer y cambiar tus datos en todos los sitios web, que es el permiso más amplio que concede Chrome. Ese permiso cubre tu banco, tu correo y la consola de administración de tu empresa, y persiste a través de cada actualización silenciosa que la extensión publique después. Una extensión de JSON beautifier es algo razonable de instalar si viene de alguien en quien tienes motivos para confiar, y algo malo de instalar porque era el primer resultado.

Esta página no necesita nada de eso. Funciona igual en Chrome, Firefox, Safari y Edge, no instala nada y no tiene permisos sobre ningún otro sitio que visites, porque una página no es una extensión: puede leerse a sí misma y nada más. Pegar es una tecla más que una extensión que intercepta, y es toda la diferencia.

Para esto no necesitas una librería. JSON.stringify acepta un tercer argumento que controla la sangría, y está en todos los runtimes de JavaScript: JSON.stringify(valor, null, 2) sangra con dos espacios, y pasar una cadena en vez de un número, como en JSON.stringify(valor, null, "\t"), sangra con tabuladores.

Volcar el resultado en una página es donde un JSON beautifier en HTML se tuerce. La salida tiene que ir dentro de un elemento <pre> o cada secuencia de espacios se colapsa y habrás deshecho el formato, y hay que escaparla antes de insertarla como HTML. Si no, un valor de cadena que contenga </script> o un ángulo se le está entregando al parser como marcado, que es un agujero de cross site scripting con pasos extra.

En React ese escapado ya está hecho por ti. <pre>{JSON.stringify(datos, null, 2)}</pre> es todo un JSON beautifier en React a efectos de depuración, y como React escapa el texto interpolado por defecto, es seguro con entrada no confiable. La regla es simplemente no recurrir nunca a dangerouslySetInnerHTML para renderizar JSON, que es la única manera de perder esa garantía.

La advertencia que vale para todos estos casos es la precisión numérica. JSON.parse convierte cada número en un double, así que un identificador por encima de 2^53-1 ya es el número equivocado antes de que JSON.stringify lo vea, y ningún formateo devuelve esos dígitos. Si tu payload lleva IDs grandes, lee antes qué le pasa a un entero por encima de 2^53-1. El beautifier de esta página vuelve a emitir los dígitos exactos que pegaste, que es la razón por la que su salida y una ida y vuelta por JSON.parse no siempre coinciden.