Visor de Árbol JSON - Visualizar JSON Interactivamente Online
Visualiza JSON como árbol interactivo. Expande, colapsa, busca nodos y copia rutas JSON — 100% del lado del cliente, sin envío al servidor.
Preguntas Frecuentes
¿Qué es un Visor de Árbol JSON?
Un Visor de Árbol JSON es una herramienta en línea que analiza datos JSON y los muestra como una estructura de árbol jerárquica e interactiva. En lugar de leer texto sin formato con corchetes y llaves, puede explorar visualmente objetos y matrices anidados expandiendo y colapsando nodos.
¿Cómo uso este Visor de Árbol JSON?
Pegue sus datos JSON en el área de entrada de la izquierda (o suba un archivo .json). La vista de árbol se renderiza automáticamente a la derecha. Haga clic en los iconos de triángulo para expandir o colapsar nodos, use los botones de profundidad (1, 2, 3, Todo) y busque claves o valores específicos.
¿Mis datos están seguros? ¿Se envía algo a un servidor?
Todo el análisis JSON y la visualización del árbol se realizan 100% del lado del cliente en su navegador usando JSON.parse() nativo. Ningún dato se transmite a ningún servidor ni se almacena en ninguna base de datos. Es seguro para respuestas API sensibles y datos confidenciales.
¿Qué es JSONPath y cómo funciona la copia de rutas?
JSONPath es un lenguaje de consulta para JSON, similar a XPath para XML. Proporciona una forma de referenciar elementos específicos dentro de una estructura JSON (ej., $.data.users[0].name). Haga clic en cualquier nodo del árbol para ver su JSONPath completo y copiarlo con un clic.
¿Cuál es el tamaño máximo de JSON que puede manejar?
Esta herramienta puede procesar archivos JSON de hasta 5MB. Para archivos menores de 1MB, el análisis es casi instantáneo. Use los botones de profundidad para comenzar con una vista colapsada y expandir solo las secciones que necesite.
¿En qué se diferencia del JSON Formatter?
JSON Formatter se enfoca en la manipulación de texto — formatear, embellecer y minificar texto JSON. JSON Tree Viewer se enfoca en la exploración visual — renderizar JSON como un árbol interactivo con expansión/colapso, búsqueda y copia de rutas. Son herramientas complementarias.
¿Puedo buscar claves o valores específicos?
Sí. La barra de búsqueda busca tanto en claves como en valores simultáneamente. Los nodos coincidentes se resaltan, los nodos padre se expanden automáticamente y un contador muestra los resultados. Navegue entre coincidencias con los botones Anterior/Siguiente.
¿Qué tipos de datos JSON son compatibles?
Todos los tipos de datos JSON estándar: cadenas (verde), números (naranja), booleanos (púrpura), null (gris cursiva), objetos (expandibles con conteo de claves) y matrices (expandibles con conteo de elementos).
Ejemplos de Código
// Build a tree from JSON and search it
function buildJsonTree(data, key = '$', path = '$', depth = 0) {
const node = { key, path, depth, type: getType(data) };
if (data === null) { node.value = null; return node; }
if (Array.isArray(data)) {
node.children = data.map((item, i) =>
buildJsonTree(item, `[${i}]`, `${path}[${i}]`, depth + 1));
return node;
}
if (typeof data === 'object') {
node.children = Object.entries(data).map(([k, v]) =>
buildJsonTree(v, k, `${path}.${k}`, depth + 1));
return node;
}
node.value = data;
return node;
}
function getType(v) {
if (v === null) return 'null';
if (Array.isArray(v)) return 'array';
return typeof v;
}
const json = { name: 'John', tags: ['dev', 'js'] };
const tree = buildJsonTree(json);
console.log(JSON.stringify(tree, null, 2));