Árbol JSON
Explore JSON como árbol plegable con badges de tipo, rutas JSON Pointer y búsqueda
JSON
Árbol
Pegue JSON a la izquierda y pulse Construir árbol.
Árbol JSON
Explore JSON como árbol plegable con badges de tipo, rutas JSON Pointer y búsqueda
Características
- Árbol plegable recursivo: cada nodo objeto y array tiene su propio interruptor expandir/plegar, raíz expandida por defecto para que la estructura sea inmediatamente visible
- JSON Pointer (RFC 6901) por nodo — pase el ratón por cualquier clave para ver la ruta completa, pulse el icono cadena para copiarla y usarla en parches, diffs o instancePath de esquema
- Badges con tipos colorean cada nodo según su tipo real (string / number / boolean / null / array / object) — null ya no se esconde tras 'object' como en typeof de JavaScript
- Columna preview muestra resumen en una línea: escalares en línea, arrays como `[ N ]` con su cardinal, objetos como `{ N }` con su número de claves — tamaño escaneable antes de expandir
- Filtro de búsqueda hace match sobre claves, rutas JSON Pointer y texto de preview; el árbol se pliega solo a ramas que contienen un hit, haciendo búsquedas en documentos de 10 MB tratables
- Botón copiar valor escribe el valor del nodo al portapapeles — strings como texto bruto, tipos complejos como JSON pretty-print listo para pegar en otra herramienta
- Errores de parseo incluyen el mensaje completo del motor JavaScript (a menudo con línea/columna) para corregir la entrada en vez de adivinar
- Puramente del lado cliente: la entrada nunca sale del navegador, el árbol entero se construye en memoria, sin telemetría, y la página funciona sin conexión tras cachearse
Cómo usar
- Pegue JSON en el área izquierda o pulse Cargar ejemplo para un ejemplo pequeño.
- Pulse Construir árbol. La raíz se muestra expandida; pulse el chevron junto a cualquier nodo objeto/array para profundizar.
- Use la caja de búsqueda para filtrar por nombre de clave, valor o ruta JSON Pointer — solo las ramas coincidentes permanecen visibles.
- Pase el ratón por una clave para ver su ruta JSON Pointer en el tooltip; pulse el icono cadena para copiarla.
- Pulse el icono copiar para obtener el valor del nodo — escalares en bruto, objetos/arrays como JSON pretty-print.
- Use Expandir todo / Plegar todo para voltear el árbol entero de una vez.
Consejos y buenas prácticas
- Mantenga pulsado Shift al hacer clic en un toggle para plegar/desplegar ramas enteras más rápido — cuando el atajo del sistema está mapeado, el botón toggle sigue funcionando individualmente.
- Busque un valor (no solo una clave) al depurar — el texto de preview está incluido en el match.
- Copie un JSON Pointer aquí y péguelo en el informe de errores del validador JSON Schema para confirmar el nodo exacto que rompió la validación.
- Si el árbol se siente lento, pliegue el array más grande primero — los arrays largos dominan el coste de renderizado.
- Combine con JSON Diff: copie un valor antes/después de un cambio para ver la edición precisa a nivel de nodo.
Preguntas frecuentes
¿Qué es un JSON Pointer y cómo se usa?
Un JSON Pointer (RFC 6901) es una ruta separada por barras que nombra exactamente un nodo en un documento JSON: `/owner/name` es el campo name del objeto owner; `/tags/1` es el segundo elemento del array tags. La raíz es la cadena vacía (mostrada aquí como `/`). Esta herramienta usa el mismo formato que los errores instancePath de JSON Schema y herramientas como fast-json-patch, así puede copiar un pointer de aquí y usarlo como referencia directa en otro sitio.
¿En qué se diferencia el badge de tipo de typeof de JavaScript?
De dos formas. Primero, null se muestra como 'null' (typeof null === 'object' en JavaScript — una verruga histórica). Segundo, los arrays se muestran como 'array' en vez del 'object' de typeof, porque se renderizan y comportan diferente. Esto encaja con los seis tipos de valor de la spec JSON: string, number, boolean, null, array, object.
¿Cómo funciona la búsqueda?
La consulta se matchea insensible a mayúsculas contra la clave, ruta JSON Pointer y la cadena preview del nodo. Una rama permanece visible si ella o cualquier descendiente coincide — así puede buscar un valor profundamente anidado y aún ver las claves del camino hasta él. Vacíe la caja para restaurar el árbol completo.
¿Puede manejar JSON muy grande?
Construye el árbol entero en memoria una vez, así documentos a escala de megabyte renderizan cómodamente. JSON de varios cientos de megabytes puede ir justo en teléfonos con poca RAM; para ese rango prefiera herramientas de streaming o ejecute JSON Minify primero para quitar espacios. El renderizado no es virtualizado — cada nodo visible renderiza a un elemento DOM — así que plegar ramas grandes es el truco si se siente lento.
¿Plegar un nodo pierde sus datos?
No. Plegar es puramente visual — el objeto parseado subyacente permanece en memoria, así reexpandir muestra el mismo contenido al instante. La búsqueda ignora el estado plegado y revela hits dentro de nodos plegados.
¿Por qué la preview muestra `{ 0 }` para un objeto vacío?
El número entre llaves es el número de claves para objetos y la longitud para arrays. Objetos con cero claves y arrays de longitud cero son JSON válido y no son el mismo valor (`{}` vs `[]`), así que mostrar el conteo y las llaves hace tipo y tamaño obvios de un vistazo.
¿Cuál es la diferencia con la vista árbol de JSON Formatter?
El árbol de JSON Formatter es una de muchas pestañas (junto con pretty-print, JSONPath, validación de esquema, transformaciones, diff). Esta herramienta es la vista árbol-solo independiente: una URL, un trabajo, interacción más profunda por nodo (badges de tipo, copia de pointer por nodo, copia de valor por nodo) sin la superficie de formateo/transformación/validación.
¿Se envía algo a un servidor?
No. El JSON se queda en su navegador, parseo y construcción del árbol corren síncronamente en el mismo contexto JavaScript que renderizó la página, y la pestaña Red no muestra peticiones al pulsar Construir árbol. Tras el primer carga la página funciona sin conexión.