Show HN: I created a lightweight JavaScript library to visualize JSON as a graph
github.com
github.com
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!
To showcase it better, I'd like to see more complex objects on the initial reveal, so I don't have to go and find & format a JSON object just to see if the app/library is worth using yet!
I could definitely see using this, but don't think it solves anything for me right now.
I think if the diagrams didn't require horizontal panning, and/or supported interactive collapsing, it would be more effective. As it stands, the text view on the left side of the screen is actually easier to parse at a glance than the tree.
Generally, vertical scrolling is more natural for reading this kind of data, and also works better on mobile.
So a first guess of an improvement is something like: the tree diagram generally grows flat & vertical, with horizontal panning (or a manual "expand" click) reserved for deeply nested objects.
Looks great! Thanks OP for sharing!
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.
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.
Even though I understood your point, a cursory glance suggests it only maps a JavaScript object to a SVG. Hardly something with more than one responsibility, or something you need anything other than plain JavaScript to do.
If you publish a repo with many features, bells and whistles, it is lost on me.
If you publish a repo that aims to do one thing in the best way possible, I will take a look at it, might use it, might contribute if I stumble across something that can be improved.
Repos like this should stay as small and focussed as they are. New features should go into new repos that make use of repos like this one.
Pretty-printed JSON shows siblings down, and children down and to the right. TFA's library shows siblings down and children to the right, plus with squiggly lines and boxes. So I'm not sure how TFA visualizes JSON more than JSON itself already visualizes JSON. It says it's interactive, and I don't see any interaction either other than scrolling, so I may be missing something.
But, assuming that the interaction is supposed to be stuff like hiding children in order to get a higher level view of the data, then drill down to the lower levels of the data, and provide other tools for exploring the data (searching, filtering, etc) then jless does all that too.
<div id="json-tree"></div>
...
const container = document.getElementById('json-tree');
container.innerHTML = generateJSONTree(jsonData);
<json-tree id="json-tree"></json-tree>
...
const container = document.getElementById('json-tree');
container.jsonTree = jsonData;
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 :-)
Other than that, looks beautiful
One suggestion - Make the JSON editor panel collapsible or resizable.