Remix clone Hacker News

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!

▲

politelemon 10 hours ago | parent | next [-]

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.

	▲	retSava 8 hours ago \| parent \| next [-]
		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!
	▲	lou_alcala 10 hours ago \| parent \| prev [-]
		Thanks for the feedback, the option to take a snapshot of the graph sounds good, I will add it to the TODO

▲

mattvr 13 hours ago | parent | prev | next [-]

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!

▲

lou_alcala 13 hours ago | parent [-]

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

	▲	mattvr 4 minutes ago \| parent [-]
		Looks much better! 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.

▲

santa_boy 10 hours ago | parent | prev | next [-]

This is quite beautiful. I love it! Will use this as an alternative to my mindmap software!

▲

codetiger 15 hours ago | parent | prev | next [-]

In safari, the text is rendering outside of the shape. You might want to take a look at that.

▲

lou_alcala 15 hours ago | parent [-]

Good call! Thanks for letting me know! I will check it.

	▲	lou_alcala 14 hours ago \| parent [-]
		This should be fixed now. Thanks

▲

tasn 18 hours ago | parent | prev | next [-]

Very cool, I shared with the team! We (Svix) show a lot of JSON, so this could be super useful for us. Thanks!

	▲	lou_alcala 18 hours ago \| parent [-]
		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

▲

newusertoday 11 hours ago | parent | prev [-]

very nice approach to create svg from json and using css transform for zoom translate.Lightweight and efficient kudos.