Visor en árbol de JSON: explora JSON como un árbol plegable

Una respuesta de API de 5.000 líneas es ilegible como texto plano. Un árbol JSON colapsable convierte ese muro de corchetes en una estructura interactiva que puedes expandir y colapsar una rama a la vez —— para que encuentres el campo que te importa sin scrollear pasando por todo lo demás. Esta guía explica qué es un JSON tree viewer, por qué supera al texto plano para datos grandes o muy anidados, y cuándo recurrir a un árbol en vez de a un formatter o validator.

¿Qué es un árbol JSON colapsable?

Un JSON tree viewer parsea tu JSON y lo renderiza como una jerarquía de nodos expandibles en vez de un bloque plano de texto. Cada objeto {} y array [] se vuelve un nodo que puedes colapsar a una sola línea o expandir para ver sus hijos. Es la diferencia entre leer JSON y navegarlo.

// Colapsado —— ves la forma de un vistazo
{
  "user": {…},        ▶ 6 keys
  "orders": […],      ▶ 24 items
  "meta": {…}         ▶ 3 keys
}

Haces clic en un nodo y se expande; vuelves a clicar y se colapsa a un resumen de una línea, normalmente con un conteo de las keys o items ocultos. Los datos nunca cambian —— solo cuántos estás viendo.

Por qué un árbol vence a un muro de texto

Formatear (pretty-print) hace al JSON legible, pero un documento grande pretty-printed sigue siendo miles de líneas que scrollear. Un árbol añade estructura que tú controlas:

• Datos muy anidados —— archivos de config, manifiestos de Kubernetes y respuestas GraphQL anidan muchos niveles. Colapsa las ramas que no te interesan y la sección relevante sube a la superficie.
• Respuestas de API grandes —— colapsa un array de 500 ítems a una sola línea, expande solo el elemento que estás depurando.
• Payloads desconocidos —— colapsar todo al nivel superior te da un mapa instantáneo de la forma de una API antes de escribir una sola línea de código de parseo.
• Comparar estructura —— los nodos colapsados hacen fácil ver qué secciones tienen en común dos payloads.

Expandir, colapsar y navegar

Un buen JSON tree viewer te da más que click-to-toggle:

• Expandir/colapsar por nodo —— abre solo la rama que estás investigando.
• Colapsar todo / expandir todo —— resetea la vista al instante en vez de cerrar nodos uno a uno.
• Conteos de items y keys —— un nodo colapsado muestra ▶ 24 items o ▶ 6 keys para que mantengas el rumbo.
• Resaltado de sintaxis —— keys, strings, números, booleanos y null obtienen colores distintos, así los tipos son obvios de un vistazo.
• Navegación por key —— salta a un campo sin scrollear por miles de líneas.

Buscar por path: JSONPath y JMESPath

Una vez abierto el árbol, la siguiente pregunta suele ser «¿dónde está esta key?». Dos pequeños lenguajes de consulta te dejan direccionar valores por path en vez de hacer clic:

• JSONPath —— inspirado en XPath, estandarizado como RFC 9535. $.user.orders[*].id se lee como «cada id en user.orders». Soporta wildcards, slices, filtros (?(@.price > 10)) y descenso recursivo (..price).
• JMESPath —— lo usa --query del AWS CLI y muchas herramientas cloud. Superficie similar pero con proyecciones y funciones de primera clase: users[?active].name.

Un tree viewer es para exploración; JSONPath/JMESPath son para extracción repetible. Combínalos: usa el árbol para encontrar el path, después captúralo como expresión JSONPath para scripts o en jq.

Tree viewer vs Formatter vs Validator —— cuándo usar cuál

Estos se solapan —— la mayoría de herramientas modernas formatean y renderizan un árbol —— pero la pregunta que decide a cuál recurres es si necesitas salida para copiar (formatter) o estructura para explorar (viewer). Para la comparación completa, ve JSON Viewer vs JSON Formatter.

Maneja JSON roto antes de verlo

Un tree viewer necesita JSON válido para construir el árbol —— no puede renderizar una estructura que no puede parsear. Si tu entrada tiene comas finales, comillas simples o keys sin comillas (común en config editado a mano u output de LLM), repárala primero. Un buen viewer repara errores comunes automáticamente antes de renderizar; si no, límpialo con JSON Fix o comprueba el error exacto con el validator. Para las reglas subyacentes, ve ¿Qué es JSON?

Preguntas frecuentes

¿Qué es un árbol JSON colapsable?

Una vista que renderiza JSON como una jerarquía de nodos expandibles en lugar de texto plano. Cada objeto y array se puede colapsar a un resumen de una línea o expandir para mostrar sus hijos, así puedes navegar documentos grandes sin scrollear por todo.

¿Cómo es un JSON tree viewer distinto de un formatter?

Un formatter saca texto limpio e indentado para copiar; un tree viewer renderiza una estructura interactiva por la que haces clic. Usa un formatter para output, un viewer para explorar. Ve la comparación completa.

¿Puedo colapsar y expandir nodos individuales?

Sí —— haz clic en cualquier objeto o array para alternarlo, y usa «collapse all» / «expand all» para resetear la vista entera. Los nodos colapsados muestran un conteo de las keys o items ocultos.

¿Qué pasa si mi JSON es inválido?

Un árbol solo se puede construir desde JSON parseable. Repara primero los errores comunes con JSON Fix, o encuentra el problema exacto con el JSON validator, luego ve el resultado limpio.

Explora tu JSON como un árbol

Pega cualquier JSON en el JSON Viewer de fixjson y renderiza un árbol colapsable al instante —— expande y colapsa cualquier nodo, ve los conteos de items, y navega payloads grandes anidados. Repara JSON roto antes de renderizar, y todo corre en tu navegador, así nada se sube.

• JSON Viewer —— explora JSON como un árbol colapsable
• JSON Viewer vs JSON Formatter —— qué herramienta encaja con tu tarea
• Cómo formatear JSON —— pretty-print salida de texto legible
• JSON Diff —— compara dos documentos JSON lado a lado
• ¿Qué es JSON? —— los tipos de datos y reglas detrás del árbol