Visor de árbol JSON

¿Qué es el visor de árbol JSON?

Algunos JSON son realmente grandes. Una respuesta de una consulta GraphQL, una exportación de una base NoSQL, un volcado de configuración de un elemento de red — pueden tener miles de líneas con objetos anidados dentro de arrays dentro de más objetos. Leerlos como texto plano agota. El visor de árbol JSON convierte ese muro de llaves en una jerarquía navegable donde cada objeto es una rama desplegable y cada valor una hoja que lees de un vistazo.

La idea de «árbol» viene directamente del propio modelo de datos JSON — la especificación oficial de JSON define JSON como un árbol de objetos, arrays y valores primitivos, con RFC 8259 como versión IETF. El visor solo hace visible esa estructura. Si alguna vez has usado JSONPath para consultar datos anidados (el estándar es RFC 9535), las rutas que se muestran en el árbol se corresponden uno a uno con expresiones JSONPath que puedes copiar y pegar en tu código.

Cómo usar el visor de árbol JSON

1. Pega tu JSON – Suelta tu JSON en el editor de la izquierda, o pulsa «Upload» para cargar un archivo .json directamente. «Sample» te da un pequeño ejemplo trabajado.
2. Mira cómo se construye el árbol – El panel de la derecha renderiza la estructura en vivo. Cada clave de objeto aparece con un triángulo de despliegue; cada valor hoja se muestra con su color según el tipo.
3. Despliega y contrae ramas – Pulsa cualquier rama para abrirla o cerrarla. Útil para ocultar ruido y centrarte en la parte que realmente te interesa.
4. Lee la ruta – Pasa el ratón por encima de cualquier hoja para ver su ruta JSON completa (p. ej. $.profile.plan). Cópiala directamente en tu código o en una consulta JSONPath.
5. Detecta arrays al instante – Los arrays muestran su longitud junto a la clave (p. ej. sectors [3]) para que sepas cuántos elementos contienen antes de desplegarlos.

Consejo: Si una estructura muy anidada cuesta de leer incluso como árbol, cambia a la vista JSON a Tabla — para arrays de objetos de forma similar, una tabla se lee más rápido que un árbol.

Ejemplo

Un registro de suscriptor anidado. El JSON bruto a la izquierda se convierte en un árbol navegable a la derecha — cada objeto es una rama, cada valor una hoja.

{
  "msisdn": "447700900142",
  "profile": {
    "name": "Rosalind",
    "plan": "Unlimited 5G"
  },
  "network": {
    "cellId": "AB12-3CF",
    "rsrp": -92
  },
  "roaming": true
}

▼ root
├── msisdn: "447700900142"
├── ▼ profile
│   ├── name: "Rosalind"
│   └── plan: "Unlimited 5G"
├── ▼ network
│   ├── cellId: "AB12-3CF"
│   └── rsrp: -92
└── roaming: true

Casos de uso habituales

Explorar una respuesta de API desconocida

Llamas a una API nueva por primera vez y la respuesta es un bloque JSON de 400 líneas con cinco niveles de anidamiento. En lugar de scrollear entre llaves, pega la respuesta en el visor de árbol. Las claves de primer nivel aparecen primero; solo despliegas las ramas que te interesan. En unos 30 segundos tienes un modelo mental de la forma de la respuesta — y conoces la ruta exacta a cualquier campo que necesites extraer.

Depurar archivos de configuración anidados

Configuraciones de elementos de red, manifiestos de Kubernetes, archivos de estado de Terraform — todos son JSON (o YAML, el hermano mayor de JSON) muy anidados. Cuando algo se comporta de forma inesperada en staging pero funciona en producción, abrir ambos como árboles y comparar la estructura uno al lado del otro es mucho más rápido que diffear línea a línea. Para la comparación línea a línea propiamente dicha, combínalo con la herramienta JSON Diff.

Enseñanza y documentación

Cuando explicas una respuesta de API en un documento o una revisión de código, un diagrama de árbol gana a un párrafo. Abre la respuesta aquí, despliega las ramas relevantes y haz una captura o copia el diseño en tu escrito. La guía JSON de MDN es un buen sitio al que enviar a quien necesite un repaso del modelo de datos.

Características clave

• Renderizado perezoso – Solo se renderizan las ramas que despliegas, así incluso archivos JSON con miles de claves siguen ágiles.
• Visualización con tipos – Cadenas, números, booleanos y nulls se muestran cada uno con su color y etiqueta propios.
• Anotaciones de longitud de array – Los arrays muestran su número de elementos junto a la clave, así sabes qué vas a desplegar.
• Ruta al pasar el ratón – Pasa el ratón por cualquier nodo para ver la ruta JSON completa; cópiala directamente para usarla en código o en consultas JSONPath.
• Subida de archivo – Suelta un archivo .json en lugar de pegar; útil para archivos demasiado grandes para el portapapeles.
• Privacidad primero – El análisis y el renderizado ocurren en tu navegador; nada se sube.

Preguntas frecuentes

¿Hasta qué profundidad puede llegar el árbol?

No hay un límite fijo de profundidad — la especificación JSON no impone ninguno, y esta herramienta tampoco. En la práctica, los navegadores gestionan bien estructuras profundamente anidadas hasta cientos de niveles. Si llegas a esa profundidad rutinariamente, probablemente los datos tienen un problema de diseño que vale la pena revisar.

¿Puede gestionar archivos JSON muy grandes?

Sí, hasta cierto punto. Archivos por debajo de 10 MB se sienten instantáneos; entre 50 y 100 MB notarás que el análisis inicial tarda un momento. Más allá, el cuello de botella real es la memoria del navegador — a ese tamaño, plantéate herramientas de tipo streaming como jq en línea de comandos, bien cubiertas por la documentación oficial de jq.

Mi JSON tiene claves duplicadas — ¿qué pasa?

Estrictamente, RFC 8259 permite las claves duplicadas pero el comportamiento queda a discreción de cada implementación. La mayoría de parsers (incluido el de todos los navegadores modernos) conservan el último valor y descartan en silencio los demás, así que el árbol muestra solo el último. Si sospechas que esto ocurre, valida primero con un Validador JSON — algunos validadores marcan los duplicados como aviso.

¿El JSONPath que muestra el árbol es compatible con librerías como jq?

Las rutas siguen la forma estándar definida en RFC 9535 (JSONPath), ampliamente compatible con la mayoría de librerías JSONPath. jq usa una sintaxis ligeramente diferente — la traducción es mecánica (reemplaza $. por . y [*] por []) y está bien cubierta en el tag jq de Stack Overflow.

¿Mis datos están seguros?

Sí. El JSON se parsea y renderiza íntegramente en tu navegador. Nada se sube, ni se cachea, ni se registra. Si subiste un archivo, se queda en la memoria del navegador y se descarta al cerrar la pestaña.

Herramientas relacionadas

• Formateador JSON – Da formato al JSON bruto si quieres leerlo como texto junto al árbol.
• Validador JSON – Confirma que la entrada es válida antes de explorarla como árbol.
• JSON a Tabla – Mejor que un árbol cuando tus datos son un array de objetos similares.
• JSON Diff – Compara dos estructuras lado a lado en vez de recorrer mentalmente dos árboles.

Recursos útiles

• RFC 8259 – Especificación JSON de la IETF; define el modelo de datos que el árbol visualiza.
• RFC 9535 — JSONPath – Sintaxis estándar de consulta para navegar por estructuras JSON.
• JSON.org – Especificación original de JSON con diagramas de gramática.
• Guía JSON de MDN – Tutorial JSON nivel principiante a intermedio.
• Manual de jq – Herramienta de línea de comandos para filtrar y transformar JSON; combina bien con este visor para las partes que requieren scripting.
• Tag JSON de Stack Overflow – Respuestas de la comunidad para preguntas de parsing, recorrido y tooling JSON.