Formateador JSON

Qué hace esta herramienta

Este formateador toma JSON crudo, lo parsea en tu navegador y lo muestra de tres formas a elegir: vista de texto indentada, vista árbol plegable y la entrada original sin tocar. Funciona con cargas de varios megabytes — el parseo y el renderizado se ejecutan asíncrono para no bloquear la UI.

Además del formateado, incluye:

• Reparación: arregla los problemas más habituales que rompen el parser estándar — comas finales, comillas tipográficas, comillas simples, comentarios estilo JS, BOMs, llaves sin cerrar, dos puntos faltantes. La barra superior te dice qué se reparó.
• Ordenar claves: reordena las claves de objetos alfabéticamente y de forma recursiva. Útil cuando quieres comparar dos archivos JSON con diff y los emisores devuelven las claves en orden distinto.
• JSONPath: ejecuta una consulta tipo $.user.roles[*] y obtienes los nodos coincidentes. Soporta el subconjunto estándar ($, ., [], *, .. para descenso recursivo).
• Exportación CSV: si la raíz es un array de objetos, arrays o primitivos, lo descargas como CSV con un clic.
• Enlace permanente: el botón "Copiar enlace" codifica tu entrada y los ajustes en una URL compartible (decodificada localmente, sin servidor). Para cargas hasta 16 KB.
• Vista árbol con búsqueda: pulsa / y escribe; las coincidencias se resaltan, los nodos vacíos se contraen, doble clic para editar valores en línea.
• Bookmarklet: arrastra el botón a tu barra de marcadores y formatea el JSON de cualquier página en un clic.

Cuándo la usarías

• Cuando tu API devuelve JSON sin formatear y quieres leerlo.
• Cuando alguien te pasa una respuesta minificada y necesitas el árbol expandido.
• Cuando un parser falla y quieres saber exactamente dónde — la herramienta señala línea y columna.
• Cuando un payload trae basura — comas finales de un dump JS, comillas tipográficas de Word, comentarios — y necesitas algo parseable.
• Cuando quieres ver solo unos pocos nodos de un payload enorme — ahí entra JSONPath.

Cómo funciona

El parser principal es JSON.parse nativo del navegador. Cuando JSON.parse falla, intentamos un análisis tolerante que produce los mensajes de "Reparar" detallados. La vista árbol se monta con un parser tokenizador y un renderizador virtualizado para que un payload de 50 MB no haga llorar al navegador.

Nada de lo que pegas se sube. Cada operación — formato, repair, sort keys, JSONPath, CSV — corre íntegramente en la pestaña. El formateado pesado lo hace un Web Worker para que la UI no se congele cuando la entrada es grande.

La edición en línea (doble clic en un nodo) reescribe el árbol en sitio. La edición valida los tipos: las cadenas se reescriben como cadenas, los números como números; un valor inválido (p. ej. coma final pegada) se marca antes de aceptar el cambio.

Notas

¿Y los streams NDJSON? Esta herramienta espera un único valor JSON. Para NDJSON (un JSON por línea), formatea cada línea por separado o únelas en un array primero.

¿Qué profundidad maneja JSONPath? El descenso recursivo .. está limitado a 32 niveles de profundidad para evitar runaway. Si tu árbol va más hondo, dilo explícito.

¿Por qué la barra de progreso a veces salta? Porque mostramos progreso por etapas (parseo, renderizado, validación) en lugar de un único porcentaje difícil de calibrar.

¿Mi entrada queda en algún sitio? En localStorage del navegador (solo en tu dispositivo) por comodidad al recargar. La página de privacidad lo explica completo.

Herramientas relacionadas

• Validador JSON Schema — comprueba que el JSON cumple un contrato
• JSON ↔ YAML — convierte el mismo dato entre formatos
• Comparador — compara dos blobs JSON línea a línea