Formatea · Valida · Minifica

Formateador de JSON

Embellece, valida o minifica JSON. Todo en tu navegador.

JSON de entrada
Salida
Publicidad

Sobre el Formateador de JSON

Formatea, valida y minifica JSON en tu navegador. Pega JSON en bruto para obtener una salida embellecida con sangría configurable; pega JSON embellecido para minificarlo para producción. Los errores de validación se muestran con números de línea y columna para que arregles el JSON mal formado sin adivinar. Nada sale de tu navegador.

Qué hace el Formateador de JSON

El JSON parece simple. No son más que llaves, corchetes, dos puntos y comas. Pero en cuanto empiezas a editarlo a mano, el formato se vuelve tedioso. Una coma mal puesta en una respuesta de API de 2.000 líneas hace que el archivo entero falle al analizarse. Una coma final, perfectamente legal en JavaScript, es un error de sintaxis en JSON. Una sola comilla sin escapar dentro del valor de una cadena corrompe en silencio todo lo que viene después. El Formateador de JSON resuelve tres tareas que aparecen sin parar al desarrollar: convertir un JSON minificado y feo en un JSON con sangría legible, convertir un JSON con sangría en un JSON compacto listo para producción, y encontrar exactamente dónde está roto tu JSON cuando no se analiza.

Las tres operaciones corren al instante en el navegador con el parser de JSON nativo. El validador es el mismo que usará tu entorno de ejecución, así que si se analiza aquí, se analiza en todas partes. Y si falla aquí, el mensaje de error te dice exactamente dónde mirar.

Casos de uso reales

Leer respuestas de API. La mayoría de las API devuelven JSON minificado para ahorrar ancho de banda. Pegar la respuesta en el formateador con sangría de 2 espacios la vuelve de verdad legible. Puedes ver la estructura, encontrar el campo que buscas y copiar un subárbol sin recorrer una sola línea gigante.

Depurar cargas útiles de webhooks. Los webhooks de Stripe, GitHub, Slack o cualquier SaaS moderno llegan como JSON. Cuando la integración se rompe, necesitas ver qué se envió en realidad. Formatea la carga útil, revisa la estructura a ojo y encuentra el campo con el tipo equivocado o el null inesperado.

Preparar JSON para la documentación. Los bloques de código en la documentación se leen mejor con una sangría consistente. El formateador normaliza lo que sea que produjo el copiar y pegar en un JSON con sangría limpio y predecible, listo para colocar en Markdown.

Minificar para producción. Las cadenas de compilación deberían minificar el JSON de forma automática, pero a veces necesitas enviar un archivo de configuración a mano o pegar un bloque de JSON en un script. El modo Minificar quita todos los espacios innecesarios y produce la representación válida más pequeña.

Atrapar errores de sintaxis antes del despliegue. Un package.json, tsconfig.json o manifest.json roto no siempre falla con estruendo. A veces una herramienta simplemente usa los valores por defecto en silencio. Validar antes de hacer commit atrapa los errores en el momento justo.

Limpiar exportaciones. Los volcados de bases de datos, las exportaciones de registros y las copias de seguridad de un CMS suelen producir JSON con formato inconsistente. Vuelve a formatear para normalizar.

Comparar dos respuestas. Cuando necesitas comparar dos respuestas de API, formatea ambas con la misma sangría primero. Los espacios distintos producen diferencias ruidosas que ocultan los cambios reales.

Reglas de sintaxis de JSON que hacen tropezar

El JSON válido es más estricto que la sintaxis de objetos válida de JavaScript. Las diferencias causan una cantidad sorprendente de errores.

Sin comas finales. {"a": 1, "b": 2,} es JavaScript válido. Es JSON inválido. Hay que quitar la coma final que va después del 2.

Las claves deben ser cadenas entre comillas dobles. {a: 1} funciona en JavaScript. JSON exige {"a": 1}. Las comillas simples tampoco funcionan: {'a': 1} es inválido.

Las cadenas deben usar comillas dobles. {"a": 'value'} es inválido; solo funciona {"a": "value"}.

Sin comentarios. JSON no tiene sintaxis para comentarios. Tanto // como este como /* como este */ fallarán al analizarse. El JSON con comentarios (JSONC) es un formato aparte, no estándar, que algunas herramientas admiten; el JSON estándar no.

Sin undefined ni NaN. Los tipos de valor de JSON se limitan a cadena, número, booleano, null, objeto y arreglo. undefined y NaN no tienen representación válida. null es el sustituto más cercano.

Los números no pueden llevar ceros a la izquierda. 007 es inválido; 7 funciona. Los decimales deben tener un dígito antes del punto: .5 es inválido; 0.5 funciona.

Los caracteres especiales en las cadenas deben escaparse. La barra invertida, la comilla, el salto de línea, la tabulación y los caracteres de control Unicode necesitan secuencias de escape (\\, \", \n, \t, \u0000). Un salto de línea literal dentro de una cadena es inválido.

Sangría: 2 espacios, 4 espacios o tabulaciones

El formateador admite sangría de 2 espacios, 4 espacios y tabulaciones. Elegir entre ellas es sobre todo cuestión de la convención del ecosistema.

La sangría de 2 espacios es la convención dominante en los proyectos modernos de JavaScript y TypeScript. La mayoría de los linters populares (Prettier, ESLint con las reglas por defecto) formatean los archivos JSON con 2 espacios. Si editas JSON dentro de una base de código de JavaScript, 2 espacios es la opción segura.

La sangría de 4 espacios es más común en los proyectos de Python y en ciertos entornos corporativos. Produce estructuras anidadas algo más legibles a costa de más espacio horizontal. Algunos proyectos heredados todavía se estandarizan en 4.

La sangría con tabulaciones es rara en JSON. Funciona (la especificación de JSON permite cualquier espacio en blanco entre tokens), pero casi todas las herramientas usan espacios por defecto, y tendrás una representación inconsistente entre editores que interpretan el ancho de la tabulación de forma distinta. Evítala salvo que tu proyecto exija tabulaciones de forma explícita.

Errores frecuentes

Comillas tipográficas de los editores de texto. Cuando pegas JSON en Word, Pages, Google Docs o algunas apps de chat, las comillas dobles rectas (") se convierten solas en comillas curvas (", "). Las comillas curvas no son válidas en JSON; el parser las rechaza. Si tu JSON se ve correcto pero no se analiza, esta es la causa más común. Vuelve a pegarlo desde una fuente de texto plano.

BOM al inicio de los archivos. Los archivos JSON guardados desde algunos editores de Windows incluyen una marca de orden de bytes (BOM): un carácter invisible en el byte 0. La mayoría de los parsers lo toleran; algunos no. Si pegar desde un archivo produce «Unexpected token» en la posición 0, la causa es el BOM.

JSONP confundido con JSON. JSONP envuelve el JSON en una llamada a función: callback({"a": 1});. Eso no se puede analizar como JSON. Quita el envoltorio antes de formatear. Busca un identificador y un paréntesis de apertura al inicio, y un paréntesis de cierre (y quizá un punto y coma) al final.

JSON concatenado («JSON Lines»). Algunos formatos de registro y API de streaming producen un objeto JSON por línea, separados por saltos de línea pero sin envolver en un arreglo externo. Eso es JSON Lines (NDJSON) válido, pero JSON inválido. Envuelve las líneas en [...] con comas entre ellas para convertirlo.

Números que pierden precisión. Los números de JSON son flotantes de doble precisión. Los enteros mayores que 2^53 (alrededor de 9 × 10^15) pierden precisión al analizarse en JavaScript. Si necesitas la representación exacta de enteros muy grandes (IDs snowflake de Twitter, IDs de Discord, valores de blockchain), codifícalos como cadenas.

Formateador de JSON frente a JSON Schema y JSONLint

Esta herramienta valida la sintaxis de JSON. ¿Se analiza? Solo formatea y minifica.

JSON Schema valida el contenido del JSON contra un esquema. ¿Están los campos obligatorios?, ¿son correctos los tipos?, ¿están los valores dentro de los rangos permitidos? Usa un validador de JSON Schema (Ajv, JSON Schema Validator) cuando necesites comprobar la forma del JSON, no solo si se analiza.

JSONLint y los linters en línea parecidos suelen hacer justo lo que hace esta herramienta: analizar y embellecer. La diferencia está en si confías tus datos a la herramienta. Esta corre por completo del lado del cliente, así que tu JSON nunca sale de tu navegador. Muchos linters en línea envían el JSON a un servidor.

Cómo funciona la herramienta

Pega JSON en el cuadro de entrada. La herramienta llama al JSON.parse() nativo de JavaScript para validar y analizar, y luego a JSON.stringify() con la sangría que elijas para formatear. Si el análisis falla, el error del motor de JavaScript se muestra con números de línea y columna calculados a partir de la posición en la entrada.

La minificación llama a JSON.stringify() sin argumento de sangría. El resultado es la representación válida más compacta, con todos los espacios innecesarios eliminados. También está disponible solo la validación (sin cambio de formato): útil cuando quieres confirmar que el JSON se puede analizar sin modificarlo.

El rendimiento escala con el tamaño de la entrada. El JSON de hasta varios megabytes se formatea y minifica en mucho menos de un segundo en los navegadores modernos.

Consejos de flujo de trabajo

Valida siempre antes de hacer commit de los archivos de configuración. Un package.json o tsconfig.json roto puede hacer que tu compilación recurra en silencio a los valores por defecto, lo que provoca errores misteriosos que cuestan horas de rastrear. Una pasada de validación de 5 segundos antes del commit lo evita.

Minifica antes de guardar en una columna de base de datos. Si guardas JSON en una columna TEXT o VARCHAR, el JSON minificado ahorra una cantidad de espacio considerable (a menudo del 20 al 40 %) sin perder información.

Formatea antes de compartir. Pegar JSON minificado en Slack o en un correo obliga a quien lo recibe a formatearlo por su cuenta. Formatéalo primero.

Usa minificar + formatear como una comprobación de ida y vuelta. Formatea tu JSON, luego minifícalo y luego formatéalo de nuevo. Si la salida final coincide con la primera versión formateada, tu JSON no tiene problemas de espacios con significado semántico.

Preguntas frecuentes

¿Por qué mi objeto de JavaScript válido no funciona como JSON?

La sintaxis de objetos literales de JavaScript es más permisiva que JSON. JavaScript admite claves sin comillas, comillas simples, comas finales y comentarios; nada de lo cual permite JSON. Para convertir un objeto de JS a JSON, el camino más seguro es JSON.stringify(obj) en una consola de JavaScript.

¿Puedo formatear JSON5 o HJSON?

Con esta herramienta no. JSON5 y HJSON son extensiones que permiten comentarios, comas finales, claves sin comillas y otras comodidades. Requieren parsers dedicados. Esta herramienta solo maneja JSON estándar.

¿El formateador conserva el orden de las claves?

Sí. El JSON.stringify de JavaScript conserva el orden de inserción para las claves de cadena, así que las claves de tu salida aparecen en el mismo orden que las de tu entrada. (El orden de las claves de objeto era comportamiento indefinido en las especificaciones antiguas, pero está garantizado desde ES2015 para las claves de cadena.)

¿Y el JSON muy anidado?

Los navegadores manejan profundidades de anidamiento de miles sin problema. Solo es una preocupación práctica en profundidades extremas (más de 10.000), donde el desbordamiento de pila se vuelve posible.

¿Por qué el mensaje de error es vago («Unexpected token at position N»)?

Ese es el formato de error del motor nativo de JavaScript. Mira la posición N en la entrada. El error real suele estar unos caracteres antes de lo que se reporta (una coma o una comilla que falta y que el parser solo notó al llegar al siguiente token).

¿Puedo pegar un archivo JSON con un BOM de UTF-8?

La herramienta tolera un BOM inicial y lo quita antes de analizar. Algunas otras herramientas no, así que si produces JSON para sistemas posteriores, guarda sin BOM para ir seguro.

Relacionado

Publicidad

Más sobre el formateador de JSON