Visor de Árbol JSON

Pega o sube JSON y explóralo como un árbol plegable. Busca claves y valores, copia cualquier ruta o valor, y detecta tipos de datos de un vistazo.

Tu JSON

354 B

Vista de Árbol

{7}
id:1024
name:"CodeItBro"
isActive:true
rating:4.8
tags:[3]
0:"tools"
1:"seo"
2:"developer"
address:{3}
city:"Bengaluru"
country:"India"
zip:null
team:[2]
0:{2}
name:"Asha"
role:"Engineer"
1:{2}
name:"Ravi"
role:"Designer"

14 claves, 3 niveles de profundidad

Entiende cualquier estructura JSON de un vistazo

Las respuestas de API, los archivos de configuración y los registros son fáciles de revisar una vez que son un árbol en lugar de un muro de llaves. Este visor crea ese árbol al instante, directamente en tu navegador.

Collapsible JSON Tree
Search · Copy · Inspect

Estructura de árbol al instante

Cada objeto y arreglo se convierte en una rama plegable, así que las respuestas de API anidadas y los archivos de configuración dejan de verse como un muro de texto.

Busca cualquier clave o valor

Escribe unos caracteres y el árbol salta directo a las claves coincidentes, abriendo solo la parte de la estructura necesaria para mostrarlas.

Copia rutas y valores

Haz clic en cualquier nodo para copiar su ruta exacta o su valor, listo para pegar en tu código, pruebas o documentación.

Funciona totalmente en tu navegador

Tu JSON nunca sale de tu dispositivo, así que es seguro inspeccionar claves de API, tokens o datos de producción.

Cómo funciona este Visor de Árbol JSON

Esta herramienta analiza cualquier JSON que pegues o subas y lo muestra como un árbol interactivo y plegable en lugar de un bloque plano de texto. Cada objeto y arreglo se convierte en una rama que puedes expandir o contraer, mientras que cada clave muestra su tipo de valor —cadena, número, booleano o nulo— en un color distinto para que puedas revisar una respuesta grande sin leer cada carácter.

Escribir en el cuadro de búsqueda filtra el árbol hasta las claves y valores coincidentes, abriendo automáticamente solo las ramas necesarias para llegar a cada resultado y cerrando el resto. Al hacer clic en el icono de copiar junto a cualquier nodo se copia ese valor por separado, mientras que el icono de ruta copia la ruta exacta con puntos y corchetes (por ejemplo, data.users[2].email) para que la pegues directamente en tu código, una prueba o un reporte de error. Una línea de estadísticas al final del árbol muestra cuántas claves y cuántos niveles de profundidad tiene el JSON actual.

Si la entrada no es JSON válido, la herramienta marca el error de análisis de inmediato en lugar de mostrar un árbol vacío. Todo el análisis y la visualización ocurren localmente en tu navegador, así que pegar respuestas de API, archivos de configuración o JSON con tokens y credenciales nunca envía esos datos a un servidor.

Cómo usar este Visor de Árbol JSON

1

Pega o sube tu JSON

Coloca el JSON en el panel de entrada o sube un archivo .json. El JSON inválido se marca de inmediato con un mensaje de error.

2

Explora el árbol

Expande o contrae cualquier objeto o arreglo, o busca una clave o valor para llegar directamente a él en la estructura.

3

Copia lo que necesites

Copia un solo valor o su ruta exacta, y pégalo en tu código, una prueba o un reporte de error.

Ejemplo de Uso

Buscar "email" abre automáticamente el arreglo de usuarios y permite copiar la ruta exacta hasta la segunda entrada.

Entrada
{"data":{"users":[{"name":"Asha","email":"[email protected]"},{"name":"Ravi","email":"[email protected]"}]}}
Salida
data.users[1].email → "[email protected]"

Preguntas Frecuentes

¿Para qué sirve un visor de árbol JSON?
Convierte un bloque plano de texto JSON en un árbol plegable, para que puedas revisar una respuesta de API, un archivo de configuración o un registro sin leer cada llave y coma a mano.
¿Mi JSON se sube a un servidor?
No. El análisis y la visualización ocurren por completo en tu navegador. Nada de lo que pegues o subas, incluyendo claves de API, tokens o datos de producción, se envía a ningún lado.
¿Puedo buscar una clave específica dentro de un JSON grande?
Sí. Escribe en el cuadro de búsqueda y el árbol abre automáticamente solo las ramas necesarias para mostrar cada clave o valor coincidente, con la coincidencia resaltada.
¿Cómo copio solo un valor o su ruta?
Pasa el cursor sobre cualquier fila y usa el icono de copiar para obtener el valor solo, o el icono de ruta para copiar la ruta exacta, como data.users[2].email.
¿Qué pasa si pego un JSON inválido?
La herramienta muestra el mensaje de error de análisis de inmediato en lugar de mostrar un árbol vacío o roto, así sabes exactamente qué corregir.
¿Puedo contraer objetos muy anidados para enfocarme en una sección?
Sí. Haz clic en la flecha junto a cualquier objeto o arreglo para contraer o expandir solo esa rama, o usa Contraer Todo y Expandir Todo para controlar todo el árbol a la vez.
¿El visor admite arreglos JSON además de objetos?
Sí. Los arreglos se muestran con índices numéricos y una insignia de cantidad de elementos, y cada elemento del arreglo se puede expandir igual que una propiedad de objeto.
¿Puedo usar esto para depurar una respuesta de API?
Sí. Pega el cuerpo de la respuesta y el árbol facilita confirmar nombres de campos, anidamiento y tipos de datos sin agregar console.log a tu código.
¿Muestra los tipos de datos como cadenas, números y booleanos de forma diferente?
Sí. Las cadenas, números, booleanos y valores nulos tienen colores distintos, similar a la consola de un navegador, para que detectes discrepancias de tipo de un vistazo.
¿Hay un límite de tamaño para el archivo JSON que puedo ver?
La herramienta funciona en tu dispositivo, así que el límite práctico depende de la memoria de tu navegador. Los archivos de unos pocos megabytes se muestran sin problemas; los payloads extremadamente grandes pueden tardar un momento en expandirse por completo.

Herramientas relacionadas

El Visor de Árbol JSON es mantenido por CodeItBro. Nuestro objetivo es ofrecer las mejores herramientas gratuitas para desarrolladores en la web. Si tienes comentarios o sugerencias, visita nuestra página de contacto.

Comentarios

Las preguntas, correcciones y consejos útiles son bienvenidos. Los comentarios se revisan antes de publicarse.

Cargando comentarios...

Los comentarios se almacenan y moderan mediante Cusdis Cloud. El correo es opcional. Política de privacidad

Aparece en

CodeItBro - Free dev tools + practical guides to help you ship faster | Product HuntCodeItBro - Free Online Developer Tools badgeCodeItBro badge