Verwickeltes JSON in einen klaren, interaktiven Baum umwandeln mit jsontr.ee

Kürzlich habe ich eine API-Antwort eines Drittanbieters geparst, die ein paar hundert Zeilen lang war und ein Dutzend verschachtelte Arrays und Objekte enthielt. Die IDE-Formatierung und der vertraute einklappbare Viewer im Browser haben nicht viel geholfen: Um die Beziehungen zwischen Entitäten zu verstehen, musste ich ständig hoch- und runterscrollen und dabei den Kontext verlieren. In solchen Momenten möchte man einfach den gesamten Datengraphen auf einem Bildschirm sehen.

Ich bin auf GitHub auf eine kompakte Bibliothek namens jsontr.ee gestoßen, die genau für dieses Problem entwickelt wurde. Sie nimmt ein beliebiges JSON-Objekt und erzeugt daraus einen interaktiven SVG-basierten Baum.

Was die Bibliothek kann

Das Repository The-01-Company/jsontr.ee enthält ein leichtgewichtiges JavaScript-Skript ohne schwerwiegende Abhängigkeiten. Ihr Hauptzweck ist die schnelle Darstellung von Datenhierarchien als Diagramme mit Knoten und Verbindungen.

Die Bibliothek hat mehrere nützliche Funktionen:

• Automatische Knotenpositionierung. Das Skript verteilt Blöcke so, dass sie sich nicht überlappen.
• Vollständige Verschachtelungsunterstützung. Objekte innerhalb von Arrays und komplexe Strukturen erhalten lesbare übergeordnete Bezeichnungen.
• Sauberes Vektor-SVG-Output. Grafiken skalieren ohne Qualitätsverlust bei jedem Zoomfaktor.
• Flexible Anpassung des Erscheinungsbilds durch Parameter oder normales CSS.

Zusätzlich zur JS-Bibliothek selbst hat der Autor die Funktionalität als Visual Studio Code-Erweiterung namens JSON Tree Visualizer verpackt. Für schnelle Dateianalysen muss man also nicht unbedingt etwas in das eigene Projekt integrieren.

Schnellstart im Code

Die Bibliothek anzubinden ist unkompliziert. Keine komplexen Build-Konfigurationen nötig – einfach die Skriptdatei auf der Seite einbinden.

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

Dann deklarieren wir einen Container im Markup:

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

Und übergeben Daten an die generateJSONTree-Funktion:

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);

Die Funktion gibt einen fertigen SVG-Markup-String zurück, den wir sofort über innerHTML einfügen.

Styling

Das Erscheinungsbild des Graphen lässt sich leicht an das Farbschema deiner Oberfläche anpassen. Es gibt zwei Anpassungsansätze.

Die erste Option ist das Übergeben eines Konfigurationsobjekts als zweites Argument:

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

container.innerHTML = generateJSONTree(jsonData, options);

Der zweite Ansatz ist das Styling über CSS. Da der Output Standard-SVG ist, kannst du normale Selektoren auf seine Elemente anwenden:

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

Dieser Ansatz ist praktisch, wenn du ein dunkles Theme implementieren oder das Styling dynamisch über Klassen ändern musst.

Verwendung in VS Code

Wenn du nicht vorhast, eine Weboberfläche zu erstellen, und nur Logs und Datendumps analysieren musst, ist es bequemer, ein Editor-Plugin zu installieren:

1. Öffne das Erweiterungspanel in VS Code (Strg+Umschalt+X oder Cmd+Umschalt+X).
2. Gib JSON Tree Visualizer in die Suche ein.
3. Klicke auf die Schaltfläche Installieren.
4. Öffne die gewünschte JSON-Datei und rufe den Befehl Visualize JSON as Tree über die Befehlspalette auf.

Anschließend öffnet der Editor das interaktive Diagramm im nächsten Tab.

Praktische Szenarien

Wo diese Visualisierung wirklich Zeit spart:

• Debugging komplexer Webhook- und Integrations-Payloads.
• Erstellung interner API-Dokumentation für Kollegen oder Kunden.
• Schulung von Junior-Entwicklern im Lesen von Baum-Datenstrukturen.
• Visualisierung von Konfigurationsdateien mit tiefen Verschachtelungsebenen.

Das Skript ist nicht mit unnötigen Abstraktionen belastet, daher lässt es sich leicht in ein internes Admin-Panel oder Monitoring-Dashboard einbetten.

Zusammenfassung

Die Bibliothek jsontr.ee macht genau eine Sache: Sie transformiert JSON schnell und sauber in ein lesbares SVG-Diagramm.

Die Dokumentation im Repository ist noch knapp, aber der Code selbst ist klar, ohne dass man nach Antworten suchen muss. Wenn du regelmäßig Datenstrukturen gegenüber Kollegen erklären musst oder einfach das Scrollen durch Textwände beim Debuggen von APIs leid bist, ist dieses Tool definitiv einen Lesezeichen-Platz wert. Der Quellcode ist unter der MIT-Lizenz auf The-01-Company/jsontr.ee auf GitHub verfügbar.