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.
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.
The example on the site is a very simple JSON object that doesn't demonstrate JSONtr.ee's potential at all.
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!
You're absolutely right! Thank you for pointing that out. I've updated the initial JSON example to include a more complex and realistic object that better showcases
I like it, one piece of feedback I have is - the export to PNG button, I wasn't expecting it to be a screenshot of the JSON, I thought it would be the graph; at least to me that would make more sense... paste JSON, see graph, export image of graph. What do you think.
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.
> Single file, 187 lines of JavaScript, no dependencies, does one thing and does it well.
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.
That is what I mean with "does one thing". The author made the right choice to put just one feature into this repo.
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.
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
Sorry this was intensionally, I couldn't find a way to show the graph in mobile so I just hide the div. I will add a tab or a button to switch between the json and the graph.
Good question, and TBH... I might be a bit unclear too.
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.
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.
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 :-)
Seems like jsoncrack is a product with a paid plan, this one jsontr.ee is standalone (so far). I also found the performance of the graph wasn't very smooth on jsoncrack.
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.
Great idea! Maybe they can write "members" and "powers" above the "column" with actual data boxes.
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!
The example on the site is a very simple JSON object that doesn't demonstrate JSONtr.ee's potential at all.
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!
You're absolutely right! Thank you for pointing that out. I've updated the initial JSON example to include a more complex and realistic object that better showcases
I like it, one piece of feedback I have is - the export to PNG button, I wasn't expecting it to be a screenshot of the JSON, I thought it would be the graph; at least to me that would make more sense... paste JSON, see graph, export image of graph. What do you think.
I agree with this. Since it's rendered as an SVG, saving it as an SVG would be great. PNG as backup perhaps.
Looks great! Thanks OP for sharing!
Thanks for the feedback, the option to take a snapshot of the graph sounds good, I will add it to the TODO
This is quite beautiful. I love it! Will use this as an alternative to my mindmap software!
In safari, the text is rendering outside of the shape. You might want to take a look at that.
Good call! Thanks for letting me know! I will check it.
This should be fixed now. Thanks
Very cool, I shared with the team! We (Svix) show a lot of JSON, so this could be super useful for us. Thanks!
Thanks! I really appreciate you sharing it with your team. If you try it out and have any feedback or ideas for improvement, I’d love to hear them
very nice approach to create svg from json and using css transform for zoom translate.Lightweight and efficient kudos.
Perfect candidate for a nice, simple, self-contained web component / custom element. Instead of:
You'd have this: 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.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.
My thoughts exactly. I was expecting the classic millions of dependencies. Very nice!
Except this file does almost nothing compared to the actual website. The website is worth 1Mb of dependencies
> Single file, 187 lines of JavaScript, no dependencies, does one thing and does it well.
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.
That is what I mean with "does one thing". The author made the right choice to put just one feature into this repo.
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.
You clearly don’t know how much js devs love dependencies! Look up “left-pad incident”
I do. I know that colors.js is a meme by now.
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
Sorry this was intensionally, I couldn't find a way to show the graph in mobile so I just hide the div. I will add a tab or a button to switch between the json and the graph.
I fix the issues in mobile, I found other issues with dragging the graph
Appreciate the quick iteration!
This seems a lot like jless, which I've used a _lot_ for exploring complex json files. https://jless.io/
Can you explain a little what are the similarities you found?
Good question, and TBH... I might be a bit unclear too.
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.
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.
Thanks for letting me know this. I will fix asap
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 :-)
+1 for the JSONTree naming.
This is an amazing project.
One suggestion - Make the JSON editor panel collapsible or resizable.
Note that HTML tags contained in the json will be injected into the DOM.
Other than that, looks beautiful
Very nice, what's the main use case? vs just looking at the formatted JSON?
Hi, I used for debug raw json from webhooks
Cool project! If the input is an array of objects, the output graph is just a single block. Is this the expected output?
Thanks for letting me know this, I will make some tests and deploy the fix.
A VSCode extension would be cool
Looks gorgeous! It looks like a MindMap!!
How is this different to jsoncrack.com?
Seems like jsoncrack is a product with a paid plan, this one jsontr.ee is standalone (so far). I also found the performance of the graph wasn't very smooth on jsoncrack.
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.