Transforming tangled JSON into a clear interactive tree with jsontr.ee

Recently I was parsing a third-party API response a couple hundred lines long with a dozen nested arrays and objects. IDE formatting and the familiar collapsible viewer in the browser didn't help much: to understand the relationships between entities, I had to constantly scroll up and down, losing context. In moments like these, you just want to see the entire data graph on one screen.

I came across a compact library called jsontr.ee on GitHub, purpose-built for solving this exact problem. It takes any JSON object and generates an interactive SVG-based tree from it.

What the library can do

The repository The-01-Company/jsontr.ee contains a lightweight JavaScript script with no heavy dependencies. Its main purpose is to quickly render data hierarchies as diagrams with nodes and connections.

The library has several nice features:

• Automatic node positioning. The script spreads blocks so they don't overlap each other.
• Full nesting support. Objects inside arrays and complex structures get readable parent labels.
• Clean vector SVG output. Graphics scale without quality loss at any zoom level.
• Flexible appearance customization through parameters or regular CSS.

Beyond the JS library itself, the author packaged the functionality as a Visual Studio Code extension called JSON Tree Visualizer. So for quick file analysis, you don't necessarily need to integrate anything into your own project.

Quick start in code

Connecting the library is straightforward. No complex build configurations needed—just include the script file on your page.

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

Then we declare a container in the markup:

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

And pass data to the generateJSONTree function:

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

The function returns a ready SVG markup string, which we immediately insert via innerHTML.

Styling

The graph's appearance is easy to adapt to your interface's color scheme. There are two customization approaches.

The first option is passing a configuration object as the second argument:

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

container.innerHTML = generateJSONTree(jsonData, options);

The second approach is styling through CSS. Since the output is standard SVG, you can apply regular selectors to its elements:

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

This approach comes in handy when you need to implement a dark theme or dynamically change styling through classes.

Using in VS Code

If you're not planning to build a web interface and just need to analyze logs and data dumps, it's more convenient to install an editor plugin:

1. Open the Extensions panel in VS Code (Ctrl+Shift+X or Cmd+Shift+X).
2. Enter JSON Tree Visualizer in the search.
3. Click the Install button.
4. Open the desired JSON file and invoke the Visualize JSON as Tree command via Command Palette.

After that, the editor will open the interactive diagram in the next tab.

Practical scenarios

Where this visualization really saves time:

• Debugging complex webhook and integration payloads.
• Creating internal API documentation for colleagues or clients.
• Training junior developers to read tree data structures.
• Visualizing configuration files with deep nesting levels.

The script isn't burdened with unnecessary abstractions, so it's easy to embed in an internal admin panel or monitoring dashboard.

Summary

The jsontr.ee library does exactly one thing: quickly and cleanly transforms JSON into a readable SVG diagram.

The documentation in the repository is still concise, but the code itself is clear without needing to search for answers. If you regularly need to explain data structures to colleagues or just got tired of scrolling through walls of text when debugging APIs, this tool is definitely worth bookmarking. The source code is open under the MIT license at The-01-Company/jsontr.ee on GitHub.