DEV Community

Cover image for How to write a simple JSON visualizer using JointJS+
Arthur Khokhlov
Arthur Khokhlov

Posted on • Originally published at jointjs.com

How to write a simple JSON visualizer using JointJS+

The JSON format - as a widely used form of data storage and representation - lacks a simple and convenient view of complex data, forcing developers to use external tools for data visualization and thus more productive work.

At JointJS, we decided to regularly share code samples to help you create visual applications faster and with less effort, and one of them is a simple JSON visualizer.

This gives us the opportunity to connect with other developers and diagramming enthusiasts, hear their ideas and solve their pain points. We often hear them complain about the lack of an intuitive way to visualize their JSON data.

That's why we created this simple demo application that demonstrates how to use a built-in automatic layout to position nodes and add table-like shapes to organize object properties into tables where values have different styles depending on their type.

We release new demos every Wednesday to help developers get inspired and bring their ideas to life faster. If you want to learn with us, follow us on CodePen or join the conversation on Github.

Happy diagramming!

Top comments (1)

Collapse
 
alexis_manach_f91def56c66 profile image
ALEXIS MANACH

This is so good, it's already in my bookmarks. Thanks guys!