Visor de árbol JSON

¿Qué es un visor de árbol JSON?#

Un visor de árbol JSON analiza un documento JSON y lo dibuja como un esquema plegable, igual que el explorador de archivos muestra el árbol de un directorio. En lugar de leer una sola pared de texto indentado y contar llaves para averiguar qué está anidado dentro de qué, ves la estructura de un vistazo: los objetos y los arrays son ramas que puedes abrir o cerrar con un clic, y los valores hoja —cadenas, números, booleanos, null— quedan en las puntas.

Esto importa sobre todo cuando el documento es profundo o desconocido. Una sola respuesta de API puede alcanzar fácilmente cientos de líneas; un archivo de configuración puede tener ajustes anidados cuatro o cinco niveles por debajo de nombres parecidos. En un formateador plano, te desplazas y pierdes el hilo. En un árbol, colapsas todo salvo la rama que te interesa y el resto deja de competir por tu atención.

Esta página analiza tu JSON en el navegador y renderiza un árbol plegable nodo a nodo, usando texto plano en lugar de interpretar la entrada como HTML, de modo que incluso un documento que contiene etiquetas <script> o cadenas con aspecto de HTML se muestra inerte, sin ejecutarse.

Cómo usarlo#

1. Pega tu JSON en el panel de Entrada a la izquierda. El análisis se realiza mientras escribes.
2. El árbol aparece a la derecha. Cada objeto o array muestra un conmutador ▼, su corchete de apertura ({ o [), el número de entradas que contiene y su corchete de cierre. Pulsa el conmutador —o los propios corchetes— para plegar o desplegar esa rama.
3. Usa Expandir todo para abrir todas las ramas hasta sus hojas, y Contraer todo para reducir todo el documento a solo la raíz. Contraer es la forma de obtener una visión general en una sola línea de un payload extenso antes de profundizar.
4. La cabecera de la derecha muestra un conteo de las entradas de nivel superior de la raíz (por ejemplo 5 elementos), para que sepas de un vistazo cuán grande es el documento.
5. Ejemplo carga un documento de demostración anidado; Limpiar vacía ambos paneles.

Características principales#

• Pliega cualquier rama de forma independiente. Cada contenedor se abre y se cierra por su cuenta, así que puedes mantener un sub-objeto desplegado como referencia mientras el resto permanece colapsado.
• Guías de profundidad. Los hijos aparecen sangrados bajo una línea guía vertical, lo que deja claro a qué llave pertenece cada entrada incluso en documentos densos.
• Renderizado seguro frente a XSS. Cada etiqueta y cada valor se escribe como contenido de texto plano: la entrada nunca se interpreta como HTML. Una cadena con apariencia maliciosa simplemente se muestra como texto.
• Valores hoja fieles. Las cadenas conservan sus comillas y los números se renderizan exactamente como los escribiría JSON.stringify, de modo que true (booleano) se distingue visualmente de "true" (cadena).
• Conteo en vivo. La cabecera indica cuántas entradas tiene la raíz, actualizado mientras editas.

Ejemplo detallado#

Carga Ejemplo y el árbol analizado muestra un objeto raíz con cinco entradas de nivel superior:

▼ { 5
    "name": "ArpGate DevTools"
    "version": 1
    "active": true
  ▼ "tags": [ 3 ]
  ▼ "features": { 2 }

Dos de esas entradas son a su vez contenedores. Desplegar tags muestra el array de tres elementos ("json", "encoding", "crypto"), y desplegar features revela que static es true mientras que backend es null, una distinción que el árbol refleja de forma explícita en lugar de dejarte adivinarla a partir de un volcado plano.

Si solo te interesa el sub-objeto features, pulsa todos los demás ▼ del nivel superior para plegarlos. El conteo 5 de la raíz sigue siendo correcto, y la guía de profundidad deja claro que static y backend pertenecen a features y no a la raíz.

Preguntas frecuentes#

¿Esto modifica o reformatea mi JSON?#

No. El árbol es una vista de solo lectura del valor analizado. Tu texto de entrada nunca se reescribe, se resangra ni se emite. Si quieres el documento embellecido como texto, usa mejor el formateador; esta herramienta sirve para navegar, no para normalizar.

¿Por qué las cadenas siguen llevando comillas en el árbol?#

Porque así es como el propio JSON distingue una cadena de una palabra clave suelta. Sin las comillas, true y "true" parecerían idénticos, y lo mismo null y la cadena "null". Mantener las comillas (exactamente como las produce JSON.stringify) conserva esa distinción de un vistazo.

¿Cómo gestiona documentos muy grandes?#

El análisis y el renderizado ocurren por completo en tu navegador, así que no hay subida ni round-trip al servidor. Para configuraciones y respuestas de API habituales es instantáneo. Para un documento de varios megabytes, el árbol tiene que crear un nodo por cada valor, lo cual puede volverse lento: contrae las ramas que no necesites para mantener manejable el número de nodos visibles.

¿Una cadena que contenga HTML se renderizará como HTML?#

Nunca. La herramienta escribe cada valor como contenido de texto, que el navegador trata como caracteres inertes. Una cadena que casualmente contenga <script> o <img onerror=...> se muestra tal cual, como texto: no se interpreta como marcado y no puede ejecutarse.