Transformar JSON enredado en un árbol interactivo claro con jsontr.ee

Hace poco estaba analizando una respuesta de una API de terceros de un par de cientos de líneas con una docena de arrays y objetos anidados. El formateo del IDE y el familiar visor colapsable en el navegador no ayudaron mucho: para entender las relaciones entre entidades, tenía que desplazarme constantemente hacia arriba y hacia abajo, perdiendo contexto. En momentos como estos, solo quieres ver todo el gráfico de datos en una pantalla.

Me encontré con una librería compacta llamada jsontr.ee en GitHub, diseñada específicamente para resolver este problema exacto. Toma cualquier objeto JSON y genera un árbol interactivo basado en SVG a partir de él.

Lo que puede hacer la librería

El repositorio The-01-Company/jsontr.ee contiene un script JavaScript ligero sin dependencias pesadas. Su propósito principal es renderizar rápidamente jerarquías de datos como diagramas con nodos y conexiones.

La librería tiene varias características útiles:

• Posicionamiento automático de nodos. El script distribuye los bloques para que no se superpongan entre sí.
• Soporte completo de anidamiento. Los objetos dentro de arrays y estructuras complejas obtienen etiquetas de padre legibles.
• Salida SVG vectorial limpia. Los gráficos escalan sin pérdida de calidad en cualquier nivel de zoom.
• Personalización flexible de la apariencia a través de parámetros o CSS regular.

Además de la librería JS en sí, el autor empaquetó la funcionalidad como una extensión de Visual Studio Code llamada JSON Tree Visualizer. Así que para un análisis rápido de archivos, no necesariamente necesitas integrar nada en tu propio proyecto.

Inicio rápido en código

Conectar la librería es sencillo. No se necesitan configuraciones de compilación complejas, solo incluir el archivo del script en tu página.

<script src="path/to/jsontr.ee.js"></script>

Luego declaramos un contenedor en el marcado:

<div id="json-tree"></div>

Y pasamos datos a la función generateJSONTree:

const jsonData = {
    name: "Lou Alcalá",
    projects: [
        {
            name: "JSONtr.ee",
            description: "JSON Formatter, Validator & Viewer Online",
            url: "https://jsontr.ee"
        },
        {
            name: "PixSpeed.com",
            description: "Image compressor",
            url: "https://pixspeed.com"
        }
    ]
};

const container = document.getElementById('json-tree');
container.innerHTML = generateJSONTree(jsonData);

La función devuelve una cadena de marcado SVG lista, que insertamos inmediatamente a través de innerHTML.

Estilos

La apariencia del gráfico es fácil de adaptar al esquema de colores de tu interfaz. Hay dos enfoques de personalización.

La primera opción es pasar un objeto de configuración como segundo argumento:

const options = {
    arrowColor: "#475872",
    nodeBorderColor: "#475872",
    nodeBackgroundColor: "#f6f8fa",
    keyColor: "#b16b2a",
    valueColor: "#008000",
};

container.innerHTML = generateJSONTree(jsonData, options);

El segundo enfoque es aplicar estilos a través de CSS. Como la salida es SVG estándar, puedes aplicar selectores regulares a sus elementos:

rect {
    fill: #ffffff !important;
    stroke: #1e293b !important;
    stroke-width: 2px !important;
}

Este enfoque es útil cuando necesitas implementar un tema oscuro o cambiar dinámicamente los estilos a través de clases.

Uso en VS Code

Si no planeas construir una interfaz web y solo necesitas analizar logs y volcados de datos, es más conveniente instalar un plugin del editor:

1. Abre el panel de Extensiones en VS Code (Ctrl+Shift+X o Cmd+Shift+X).
2. Ingresa JSON Tree Visualizer en la búsqueda.
3. Haz clic en el botón Instalar.
4. Abre el archivo JSON deseado e invoca el comando Visualize JSON as Tree a través de la Paleta de Comandos.

Después de eso, el editor abrirá el diagrama interactivo en la siguiente pestaña.

Escenarios prácticos

Dónde esta visualización realmente ahorra tiempo:

• Depuración de payloads complejos de webhooks e integraciones.
• Creación de documentación interna de API para colegas o clientes.
• Capacitación de desarrolladores junior para leer estructuras de datos de árbol.
• Visualización de archivos de configuración con niveles profundos de anidamiento.

El script no tiene abstracciones innecesarias, por lo que es fácil de integrar en un panel de administración interno o un dashboard de monitoreo.

Resumen

La librería jsontr.ee hace exactamente una cosa: transforma JSON de forma rápida y limpia en un diagrama SVG legible.

La documentación en el repositorio es todavía concisa, pero el código en sí es claro sin necesidad de buscar respuestas. Si necesitas explicar estructuras de datos a colegas regularmente o simplemente estás cansado de desplazarte por paredes de texto al depurar APIs, esta herramienta definitivamente vale la pena guardar. El código fuente es abierto bajo la licencia MIT en The-01-Company/jsontr.ee en GitHub.