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’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
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 :-)
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
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
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
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
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.
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.
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.