JSON Tree Viewer

1. 1

   Abre tu JSON

   Arrastra un archivo .json, .jsonl, .geojson, .har o .map al área de soltar, busca uno, o pega JSON directamente en el cuadro de texto. Nada se sube: el archivo se lee en tu dispositivo.

2. 2

   Explora el árbol

   Los objetos y las listas se abren y cierran con la flecha que tienen al lado, y cada uno indica cuántos hijos contiene. Usa Abrir hasta profundidad o Contraer todo para cambiar la forma completa de una vez.

3. 3

   Encuentra lo que necesitas

   Busca cualquier clave o valor, con expresiones regulares si quieres, y recorre las coincidencias. Para un corte preciso, filtra con una expresión JSONPath como $..author o $.items[0:10].

4. 4

   Cambia a la tabla

   Cuando el documento es una lista de registros, la vista de tabla los dispone en columnas en lugar de repetir la misma rama cientos de veces.

5. 5

   Copia o exporta

   Copia la ruta, la clave o el valor de cualquier nodo, o descarga el documento entero -o solo el subárbol seleccionado- formateado, minificado, sin cambios o como NDJSON.

Abrir un archivo JSON y leerlo: ese es todo el trabajo, y hacerlo bien con un archivo de cualquier tamaño o forma resulta exigir más que una lista plegable. Este visor indexa el archivo en lugar de convertirlo en objetos, así que abre rápido, muestra exactamente lo que el archivo contiene y sigue respondiendo tanto si el documento tiene dos líneas como dos millones de nodos.

• Un árbol que escala. Los objetos y las listas se expanden y contraen a cualquier profundidad, y solo se dibujan las filas visibles, así que una exportación de 200.000 registros se desplaza con la misma suavidad que un archivo de configuración pequeño.
• Una tabla cuando los datos son tabulares. Una lista de registros se convierte en filas y columnas, con las columnas deducidas de los datos.
• Buscar y filtrar. Coincidencias en claves, valores o ambos, con expresiones regulares; o un corte preciso con una expresión JSONPath.
• Exactamente lo que dice el archivo. Los números grandes conservan todos sus dígitos, las claves duplicadas se conservan y se señalan, y las secuencias de escape del archivo sobreviven.
• Lectura tolerante. Comentarios, comas sobrantes, comillas simples y claves sin comillas pueden leerse, informando de cada cambio.
• Copiar y exportar. Cualquier ruta, clave, valor o subárbol al portapapeles; el documento entero o una rama a un archivo.

El tamaño es donde la mayoría de los visores JSON del navegador dejan de ser útiles. El método habitual convierte el documento en objetos de JavaScript y luego dibuja un elemento por nodo, lo que consume memoria en proporción al archivo y compone el documento entero antes de mostrar nada. Pasados unos pocos megabytes, eso se convierte en una pestaña congelada.

Qué hace este visor en su lugar

• Indexa en lugar de convertir. El archivo se recorre una vez hacia una tabla compacta de posiciones. No se crea ningún objeto de JavaScript para ninguna parte del documento.
• Trabaja fuera de la página. El recorrido, la búsqueda, el filtrado y la exportación ocurren fuera del hilo que dibuja la pantalla, así que la página nunca se congela y el desplazamiento nunca se entrecorta.
• Dibuja solo lo que se ve. Existen unas cuarenta filas a la vez, tenga el documento las que tenga.
• Descodifica texto bajo demanda. Una clave o un valor se convierte en texto legible cuando aparece en pantalla, y no antes.
• Gestiona la profundidad sin fallar. El anidamiento se recorre de forma iterativa, así que un documento muy anidado se lee como cualquier otro en lugar de agotar la pila.

Encontrar un campo en un documento grande es la tarea para la que existe un visor, y detrás hay dos preguntas distintas: dónde aparece este texto, y qué hay en esta ruta. Aquí se responden las dos, y ambas se resuelven sobre el índice en lugar de sobre las filas dibujadas, así que una coincidencia al final de un archivo enorme se encuentra tan rápido como una al principio.

Las dos formas de mirar

• Búsqueda. Escribe cualquier texto para encontrar claves, valores o ambos. Distinguir mayúsculas es opcional y se admiten expresiones regulares, con ^ y $ coincidiendo en los límites de línea como en un editor.
• Recorrer las coincidencias. Las coincidencias se listan en orden de documento; ir a una abre todas las ramas por encima y resalta el texto dentro de la fila.
• Filtro JSONPath. Expresiones como $.store.book[*].author, $..price, $.rows[0:100] y $['clave rara'] reducen la vista exactamente a los nodos que has pedido, cada uno con su propia estructura.
• Filtrar y buscar juntos. Busca dentro de una vista filtrada para acotar dos veces: útil cuando una ruta selecciona mil registros y quieres los tres que mencionan un nombre.

La mayor parte del JSON real es una lista de registros: una respuesta de API, una exportación, un archivo de registro. Dibujado como árbol son cientos de ramas idénticas, y leerlo significa abrirlas una a una. La vista de tabla muestra los mismos datos como filas y columnas, que es como se debe leer una lista de registros.

Cómo se comporta

• Las columnas salen de los datos. Los nombres de campo se recogen a lo largo de los registros en vez de suponerse del primero, así que un campo que solo tienen algunos registros también tiene columna.
• Los registros irregulares se ven, no se ocultan. Un registro al que le falta un campo muestra una celda vacía, y una entrada que ni siquiera es un objeto aparece igualmente en lugar de omitirse.
• Los valores anidados siguen siendo navegables. Una celda con un objeto o una lista indica qué es y cuánto contiene; seleccionarla te lleva a ese nodo en el árbol.
• Encuentra los registros por ti. Tanto si la lista es todo el documento como si es un campo dentro de él, la tabla ofrece la lista de registros más cercana a lo que tengas seleccionado.

Dentro de casi todos los visores JSON pasan dos cosas que nunca se mencionan y que cambian lo que se te muestra. Ambas vienen de la misma decisión -convertir el documento en valores de JavaScript- y ambas se evitan aquí leyendo el propio texto del archivo.

Qué se pierde en otros sitios

• Los números grandes se redondean. Un número de JavaScript guarda unos 15 dígitos significativos. Un identificador como 12345678901234567890 se convierte en 12345678901234567000, y nada en pantalla lo dice. Aquí cada número se muestra a partir de los caracteres del propio archivo, y cualquier número que no sobreviviría a una conversión queda señalado.
• Las claves duplicadas desaparecen. JSON permite que un objeto repita una clave. Un analizador que construye un objeto se queda solo con la última, así que un documento que está mal en silencio parece correcto. Aquí se muestran los dos miembros, ambos señalados, y el recuento aparece en el resumen.
• Las secuencias de escape se reescriben. Formatear un documento en otro sitio puede convertir cada \u00e9 en un carácter literal. Exportar aquí cambia los espacios y nada más, así que la diferencia con tu original sigue siendo legible.
• Los decimales de alta precisión se truncan. El mismo techo de 15 dígitos vale para las fracciones, así que un valor con más precisión de la que cabe se acorta en silencio. Aquí se muestra entero.

El JSON estricto no tiene comentarios, ni comas sobrantes, ni comillas simples, ni claves sin comillas, y los archivos de configuración reales tienen las cuatro cosas. Un visor que simplemente los rechaza no ayuda mucho cuando el archivo que tienes delante es justo el que necesitas leer.

El modo tolerante y sus límites

• Se ofrece, nunca es automático. El archivo se lee primero de forma estricta. El modo tolerante aparece solo cuando la lectura estricta ha fallado y una reparación cambiaría realmente algo.
• Todo lo que cambia se informa. Comentarios eliminados, comas sobrantes quitadas, comillas convertidas, claves entrecomilladas, NaN e Infinity sustituidos: cada uno con su nombre, su recuento y la línea de la primera aparición.
• Nunca inventa estructura. Un corchete que falta, una coma que falta o un archivo truncado son corrupción, no dialecto. Eso se informa como error, porque adivinar pondría en pantalla datos que no están en tu archivo.
• Los errores dicen dónde. Cuando un archivo no puede leerse, el mensaje da la línea y la columna y muestra el texto alrededor del problema, en lugar de un desplazamiento en bytes al que ningún editor te lleva.

El JSON llega con varias extensiones y, de vez en cuando, en una codificación en la que no debería estar. Aquí se leen todas, y lo que se ha detectado se muestra en lugar de suponerse en silencio.

Qué se abre

• JSON. .json, y .txt simple que contenga JSON.
• JSON Lines y NDJSON. .jsonl y .ndjson, donde cada línea es su propio documento. Se presentan como una sola lista para poder recorrer, buscar y exportar todo el flujo a la vez.
• GeoJSON, HAR y mapas de código. .geojson, .har y .map son JSON corriente con formas concretas, y los tres se abren con normalidad.
• UTF-8, UTF-16 y Windows-1252. Una marca de orden de bytes se respeta y se elimina en lugar de informarse como error de sintaxis, y un archivo que no es UTF-8 válido se descodifica en vez de llenarse de caracteres de sustitución.

Leer un documento suele terminar con llevarse algo de él: una ruta para una prueba, un valor para un informe de error, una rama para un compañero. Cada una de esas cosas es un clic, y ninguna cambia lo que dicen tus datos.

Qué puedes llevarte

• La ruta. $.store.book[0].author, en la forma que puedes pegar en otra herramienta. Las claves que necesitan comillas las llevan.
• La clave o el valor. Una cadena copia su texto sin las comillas que la rodean; cualquier otro valor copia exactamente lo que contiene el archivo.
• Un subárbol. Cualquier objeto o lista, formateado, sin exportar el resto del documento.
• El archivo entero, de cuatro formas. Formateado con sangría, minificado, los bytes originales sin cambios, o NDJSON con un elemento de lista por línea.

Nada se sube. El archivo se abre, se indexa, se busca y se exporta enteramente en tu propia máquina, que es a la vez la respuesta de privacidad y la de velocidad: no hay ida y vuelta que esperar, así que un archivo grande lo limita tu dispositivo y no una red.

Qué significa en la práctica

• Funciona sin conexión. Una vez cargada la página, el visor sigue funcionando sin ninguna conexión.
• No se guarda nada. Cerrar la pestaña es el final. No hay historial, ni caché de tus documentos, ni cuenta asociada a ellos.
• Seguro para datos sensibles. Exportaciones de producción, registros de acceso y cualquier cosa bajo un acuerdo que prohiba el tratamiento por terceros pueden abrirse aquí, porque ningún tercero los recibe.
• Tu dispositivo pone el techo. El plan gratuito abre archivos de hasta 100 MB. Pro sustituye ese número por lo que tu máquina pueda gestionar de verdad.

Unas pocas costumbres hacen que un documento grande o desconocido se lea mucho más rápido, sea cual sea el visor.

Consejos

• Contrae primero, luego desciende. Contrae todo y abre una rama cada vez; la forma de un documento se ve mejor con diez filas en pantalla que con diez mil.
• Filtra antes de buscar. Una expresión JSONPath que acote a los registros que te importan hace que una búsqueda de texto posterior sea mucho más legible.
• Usa la tabla para las listas. Si el documento es una lista de registros, la tabla responde preguntas que el árbol no puede, como a qué registros les falta un campo.
• Mira el resumen. El número de nodos, la profundidad máxima, las claves duplicadas y los números inusuales aparecen al abrir el archivo, y a menudo explican un error antes de que lo busques.
• Exporta la rama, no el archivo. Al compartir un problema, un subárbol es más fácil de leer para otra persona que un enlace a un documento de 40 MB.

Usos habituales

• Depurar una API. Pega una respuesta, encuentra el campo que está mal y copia su ruta directamente a una prueba.
• Revisar una exportación. Abre una exportación de base de datos o de analítica, confirma el número de registros y busca los que no encajan con el resto.
• Leer un archivo HAR. Una captura de red es JSON con una forma muy profunda, que es exactamente para lo que sirven la búsqueda y el filtrado.
• Auditar configuración. Las claves duplicadas y los nulos inesperados en un archivo de configuración se ven aquí en lugar de aplicarse en silencio.
• Inspeccionar registros. Los archivos de registro NDJSON se abren como una sola lista navegable en vez de miles de documentos sueltos.

• Formateador JSON
• Validador JSON
• Minificador JSON
• Comparar JSON
• JSON a YAML
• JSON a XML