Visor de Árbol JSON
Explora JSON como un árbol plegable y buscable en lugar de un bloque de texto plano.
Entrada JSON
Árbol
Escribe JSON a la izquierda para explorarlo como árbol.
¿Qué es Visor de Árbol JSON?
Un visor de árbol JSON renderiza un documento JSON como un árbol plegable e interactivo en lugar de un muro plano de texto indentado — la misma experiencia de navegación que obtienes del panel Network de las DevTools del navegador o del visor de respuestas de un cliente de API. Cada objeto y array se convierte en un nodo que puedes expandir o plegar de forma independiente, las claves y valores están coloreadas por tipo (cadenas, números, booleanos, null) y puedes buscar en todo el documento para saltar directamente a la clave o el valor que buscas en lugar de desplazarte por cientos de líneas. Esto es especialmente útil para respuestas de API grandes y profundamente anidadas o archivos de configuración donde una vista simplemente formateada dificulta ver la forma general de los datos o encontrar un campo concreto enterrado varios niveles abajo.
Cómo usar Visor de Árbol JSON
- Pega o escribe tu JSON en el panel izquierdo.
- El árbol de la derecha se renderiza al instante — pulsa la flecha junto a cualquier objeto o array para expandirlo o plegarlo.
- Usa "Expandir todo" o "Plegar todo" para controlar el árbol entero de una vez, o el cuadro de búsqueda para resaltar claves/valores que coincidan con un término (las ramas coincidentes se autoexpanden).
- Pasa el ratón sobre cualquier fila y pulsa el icono de copiar para llevar su ruta (p. ej. roles[0].name) para usarla en código o en una consulta JSONPath.
Ejemplos
Explorar una respuesta de API anidada
Entrada
{"user": {"id": 1, "roles": [{"name": "Admin"}, {"name": "Editor"}]}}
Salida
Árbol plegable: user → roles [2] → {name: "Admin"}, {name: "Editor"}
Copiar la ruta de un campo
Entrada
{"data": {"items": [{"sku": "P001"}]}}
Salida
Pulsar copiar en el campo sku da: data.items[0].sku
Errores comunes
- Intentar editar valores directamente en el árbol — esta herramienta es de solo lectura para exploración; usa la herramienta Editor JSON si necesitas modificar valores.
- Esperar que la ruta copiada sea una expresión JSONPath completa (con el $ inicial) — es una ruta simplificada de puntos/corchetes pensada como referencia rápida, no como cadena de consulta JSONPath.
- Asumir que las ramas plegadas se eliminan de los datos — plegar solo las oculta visualmente; no se borra ni se altera nada.
Por qué usar esta herramienta
- Se ejecuta por completo en tu navegador — nada de lo que pegues se sube a ninguna parte.
- Hace que el JSON profundamente anidado sea mucho más fácil de navegar que una vista plana formateada, especialmente para respuestas de API grandes.
- La copia de rutas de un clic te ahorra contar manualmente índices de array o claves anidadas al escribir código contra los datos.