Visor de árbol JSON

¿Qué es esta herramienta?

Un visor de árbol JSON convierte un documento JSON en un esquema navegable: cada objeto y cada array se convierte en un nodo que puedes expandir o contraer, cada clave muestra su tipo inferido y cada valor final se muestra en línea. En lugar de desplazarte por miles de líneas de texto, solo profundizas en las ramas que realmente te interesan.

Esto es distinto de un formateador de JSON. Un formateador reescribe el texto de tu JSON con sangría para que se vea más ordenado; es la herramienta adecuada cuando solo necesitas embellecer, minificar o validar la sintaxis. Un visor de árbol sirve para explorar y navegar la estructura en sí, especialmente cuando el JSON es grande, está profundamente anidado o aún no sabes dónde se encuentra el dato que necesitas. Si solo quieres embellecer o validar texto JSON, usa el Formateador de JSON.

¿Por qué utilizarlo?

• Navega respuestas de API o archivos de configuración muy anidados sin perder de vista a qué nivel pertenece cada llave.
• Busca por nombre de clave o por valor y salta directamente a la coincidencia, con la ruta expandida automáticamente.
• Maneja JSON muy grandes (varios megabytes) sin problemas: los nodos hijos solo se construyen cuando los expandes, así que la pestaña nunca se bloquea.
• Ve el tipo de cada valor de un vistazo: cadena, número, booleano, null, objeto o array, con etiquetas claras.
• 100% privado: el análisis y el renderizado ocurren enteramente en tu navegador; nada se sube ni se guarda.

Cómo utilizarlo

1. Pega tu JSON en el cuadro de entrada, o usa el selector de archivos para cargar un archivo JSON desde el disco.
2. Haz clic en "Renderizar árbol" para construir la vista interactiva.
3. Haz clic en la flecha junto a cualquier objeto o array para expandirlo o contraerlo; los nodos con más de un par de niveles de profundidad empiezan contraídos automáticamente para que los archivos grandes sigan siendo fluidos.
4. Escribe un nombre de clave o un valor en el cuadro de búsqueda para encontrar coincidencias; la herramienta expande cada nodo padre en el camino y se desplaza hasta el resultado resaltándolo.
5. Usa los botones de siguiente/anterior para recorrer varias coincidencias.

Ejemplo

Entrada

{"user":{"id":42,"name":"Ada","roles":["admin","editor"],"active":true,"manager":null}}

Resultado

user: { 4 claves }
  id: 42 (número)
  name: "Ada" (cadena)
  roles: [ 2 elementos ]
    0: "admin"
    1: "editor"
  active: true (booleano)
  manager: null

Cada fila muestra la clave, su tipo inferido, y el valor (si es una hoja) o un contador contraído (si es un objeto o array) hasta que lo expandas.

Consejos prácticos

• Para respuestas de API enormes, busca primero un nombre de campo distintivo (como un id o un código de error) en lugar de expandir nodo por nodo manualmente: la búsqueda te lleva directamente hasta allí.
• Los nodos más allá de los dos primeros niveles empiezan contraídos a propósito, para que una carga de varios megabytes siga respondiendo bien; expande solo la rama que necesitas.
• Las etiquetas de tipo (cadena, número, booleano, null, objeto, array) son especialmente útiles para detectar un campo que es null inesperadamente o un array donde esperabas un objeto.
• Si solo necesitas embellecer o validar un fragmento de JSON en lugar de explorar su estructura, el Formateador de JSON es más rápido para esa tarea.

Dónde encaja en flujos de trabajo reales

Las respuestas de API muy anidadas, las exportaciones de bases de datos y los archivos de configuración son difíciles de entender como texto plano: pierdes de vista qué llave de cierre corresponde a qué clave. Cargar esa misma carga útil en una vista de árbol te permite contraer todo lo que no necesitas y centrarte solo en la rama que importa, lo cual es mucho más rápido que desplazarte por un muro de texto formateado buscando un solo campo.

Un flujo habitual: pega aquí primero una carga útil grande de un webhook para entender su forma y encontrar el campo que necesitas, y luego cambia al Formateador de JSON si necesitas una copia de texto limpia y con sangría para pegar en un informe de errores o una revisión de código.

→ Formateador JSON

Casos de uso comunes

• Explorar una respuesta de API grande y profundamente anidada para encontrar dónde vive un campo concreto antes de escribir código contra él.
• Revisar un archivo de configuración o exportación grande sin desplazarte por miles de líneas de texto sin procesar.
• Comprobar la forma y los tipos de una carga útil JSON desconocida antes de analizarla en tu propio código.
• Localizar un valor específico (un ID, un mensaje de error, una marca de tiempo) enterrado en algún lugar dentro de un documento JSON grande.

Preguntas frecuentes