Hi HN,

I’ve been working on JSONtr.ee, a web platform for visualizing and graphing JSON data. While building it, I ended up creating my own lightweight JavaScript library to help anyone convert a JSON file into a schema graph.

Before creating this library, I used MermaidJS, but I ran into significant limitations, especially with large and deeply nested JSON objects. My library was built to handle these cases better and to offer more flexibility for customization. After solving my own problem, I decided to make it available for free to anyone who might find it useful.

Key features: Transforms JSON into schema graphs. Handles large and complex JSON objects seamlessly. Built with simplicity in mind – dependency-free and easy to integrate.

Why I made this: While working with APIs and large webhook payloads, I struggled to understand nested structures using standard tools. This library makes it easier to visualize the data as a graph and explore it interactively.

I’d love to hear your feedback, suggestions, or any ideas for improvement.

Thanks for taking a look!

Very cool project and would be super useful with something like GraphQL, which tends to produce big nested JSON objects. Thanks for sharing it!

One improvement in my eyes would be to remove the "connector" boxes, like `members (2): "Array"` and `powers (3): "Array"` and have the arrow go straight to the array property. Those connector boxes take up a lot of real estate without conveying new information.

Beautiful.

Single file, 187 lines of JavaScript, no dependencies, does one thing and does it well.

I wish there was a way to search for libraries like this one. Almost every time I look for some piece of open source software, I end up writing it myself because all the solutions I find are overcomplicated and try to do too many things.

Am I missing something or does this just completely not do anything on iOS/mobile? I see in the json editor a single object with two keys, and then no visual tree rendering whatsoever

This seems a lot like jless, which I've used a _lot_ for exploring complex json files. https://jless.io/

Perfect candidate for a nice, simple, self-contained web component / custom element. Instead of:

    <div id="json-tree"></div>
    ...
    const container = document.getElementById('json-tree');
    container.innerHTML = generateJSONTree(jsonData);

You'd have this:

    <json-tree id="json-tree"></json-tree>
    ...
    const container = document.getElementById('json-tree');
    container.jsonTree = jsonData;

Attributes not necessary, simply pass the json data as a prop. Granted, the difference isn't that big, but this is where web components shine.

Really clean design. I generated a bunch of complex deeply strucutred dummy JSON data and the resulting visual wasn't bad!

I like the name too! A small suggestion is don't force yourself to call it Jsontr.ee because of the cool domain. Getting to the line "Render the Tree Diagram: Use the jsontr.ee function to visualize the JSON data." -- Just use jsontree :-)

Note that HTML tags contained in the json will be injected into the DOM.

Other than that, looks beautiful

Cool stuff! Found a bug: Changing e.g. "Jane Wilson" to something longer like "Jane Sarah Hildegard Wilson" in your example renders the arrows to the powers incorrectly.

Cool project! If the input is an array of objects, the output graph is just a single block. Is this the expected output?

This is an amazing project.

One suggestion - Make the JSON editor panel collapsible or resizable.

Very nice, what's the main use case? vs just looking at the formatted JSON?

Looks gorgeous! It looks like a MindMap!!

How is this different to jsoncrack.com?

A VSCode extension would be cool

pretty cool! there's a limit to how much you can zoom out, I'd have liked that. Also the ability to hide the json input area.