Formateador JSON
Formatea, valida y minifica JSON. Errores con línea exacta, vista árbol, sort keys. Sin registro, sin servidor.
¿Necesitas generar contraseñas seguras o contar palabras en un documento?
¿Cómo usar el formateador JSON?
- 1
Pega tu JSON o carga un ejemplo
Pega cualquier JSON en el panel izquierdo o pulsa el botón Ejemplo para cargar un JSON de muestra con objetos anidados, arrays y diferentes tipos de valores. El validador analiza el contenido al instante, carácter a carácter.
- 2
Revisa los errores con línea y columna exactos
Si el JSON contiene algún error de sintaxis, aparece un banner rojo en la parte inferior indicando la línea y la columna exactas donde se produjo el problema, junto con el mensaje de error original del intérprete JavaScript. Compatible con Chrome, Firefox y Safari.
- 3
Formatea, minifica o activa Sort Keys
Usa el selector de indentación (2 espacios / 4 espacios / tabulación) para embellecer el JSON. Pulsa Minify para compactarlo en una sola línea sin espacios. Activa Sort Keys para ordenar todas las claves del JSON recursivamente en orden alfabético, lo que facilita comparar dos JSONs.
- 4
Explora la vista árbol, copia o descarga
Cambia a la vista Tree para navegar la estructura del JSON de forma visual: haz clic en cualquier objeto o array para expandirlo o colapsarlo. Los nodos más profundos que el nivel 2 aparecen colapsados por defecto. Cuando tengas el resultado listo, cópialo al portapapeles o descárgalo como archivo .json.
Características del formateador
✅ Validación en tiempo real
El JSON se valida a medida que escribes, sin necesidad de pulsar ningún botón. El error se detecta con la posición exacta extrayendo la información del mensaje nativo del motor JavaScript, funcionando de forma consistente en Chrome, Firefox y Safari.
🌈 Syntax highlighting sin dependencias
El coloreado de sintaxis está implementado con una expresión regular pura sobre el texto formateado. Las claves se muestran en violeta, los strings en verde esmeralda, los números en azul cielo, los booleanos en ámbar y los nulls en rojo. Sin Monaco, sin CodeMirror, carga instantánea.
🌲 Vista árbol interactiva
La vista árbol renderiza el JSON como un árbol de componentes React colapsables. Cada nodo muestra el tipo con color: objetos, arrays, strings, números, booleanos y null. Los nodos colapsados muestran un resumen del contenido ('3 keys', '5 items'). Auto-expande hasta profundidad 2 al cargar.
🔡 Sort Keys recursivo
Al activar Sort Keys, todas las claves de todos los objetos del JSON (incluidos los anidados a cualquier profundidad) se ordenan alfabéticamente. El resultado es determinista: el mismo JSON siempre produce el mismo output, lo que facilita hacer diff entre dos versiones.
📊 Panel de estadísticas
Cuando el JSON es válido aparece automáticamente un panel verde con métricas: número de objetos, arrays, claves totales, profundidad máxima del árbol, strings, números, nulls, booleanos y tamaño en bytes o KB del output actual.
🔒 100% en el navegador
Todo el procesamiento —parseo, formateo, análisis, coloreado— ocurre íntegramente en tu navegador con JavaScript puro. Ningún dato se envía a ningún servidor. Puedes usar esta herramienta con JSONs que contengan datos confidenciales o credenciales de entorno.
Preguntas frecuentes
¿Cómo sé en qué línea está el error?
El formateador extrae la posición del error directamente del mensaje que lanza el motor JavaScript nativo del navegador. En Chrome y Edge obtiene la posición de carácter y calcula la línea y columna recorriendo el texto. En Firefox y Safari lee directamente 'line N column M' del mensaje. El resultado es un banner rojo con la línea y columna exactas.
¿Qué es minificar JSON y cuándo usarlo?
Minificar JSON consiste en eliminar todos los espacios en blanco, saltos de línea e indentación innecesarios para obtener el JSON más compacto posible. Es útil cuando quieres reducir el tamaño de datos que se envían por red (APIs, cabeceras HTTP), almacenar JSON en bases de datos o incluirlo como valor en un atributo HTML.
¿Para qué sirve Sort Keys?
Sort Keys ordena todas las claves de todos los objetos del JSON en orden alfabético de forma recursiva. Es especialmente útil para comparar dos JSONs con herramientas de diff (como git diff), para generar outputs deterministas en tests automatizados, o simplemente para mejorar la legibilidad cuando el JSON tiene muchas claves.
¿Qué es la vista árbol?
La vista árbol representa el JSON como una estructura de árbol visual donde puedes expandir y colapsar objetos y arrays haciendo clic. Es más cómoda que el código cuando el JSON tiene muchos niveles de anidamiento y quieres explorar una rama concreta sin perder el contexto del resto de la estructura.
¿Se envía mi JSON a algún servidor?
No. Todo el procesamiento —parseo, validación, formateo, análisis de estadísticas y syntax highlighting— ocurre íntegramente en tu navegador con JavaScript puro, sin ninguna petición de red. Puedes usar esta herramienta con JSONs que contengan tokens de API, credenciales de base de datos o cualquier dato sensible.
Incrusta el formateador en tu web
Puedes integrar este formateador JSON en cualquier página web con un simple iframe:
<iframe
src="https://miguelacm.es/embed/json-formatter"
width="100%"
height="700"
frameborder="0"
title="JSON Formatter"
></iframe>