Blog post preview

October 19, 2022

Demo Wednesday: JSON Visualization

Blog post authors

Marek Hozak

No items found.

We've published a new demo: JSON Visualization

Today's demo shows how to write a simple JSON visualizer using JointJS+. Use TreeLayout to automatically position nodes and add Record shapes to organize object properties into tables where values have different styles depending on their type.

See the Pen JointJS+: JSON Visualization by JointJS (@jointjs) on CodePen.

For more examples of JointJS and JointJS+, see our CodePen profile and our official documentation.

To see all the awesome demos we've created so far, check out our Github Discussions.

Every Wednesday we share diagramming tips, interesting features and news in JointJS. Learn with us, get content delivered straight to your inbox and become a real diagramming pro:

Authors

Blog post author

Marek Hozak

Marketing guy, father, and sports fanatic who loves to learn about new technologies.

No items found.

Stay in the loop

Read next

Browse all news

JointJS blog post preview

Blog post author

Marek Hozak

Feb 8, 2024

Introducing a 'dependency-free' version 4.0

We're excited to announce version 4.0 of JointJS and JointJS+, the first no-dependency version of our diagramming library.

JointJS blog post preview

Blog post author

Marek Hozak

Jan 23, 2024

Kicking 2024 off with a great news: We're SOC 2 compliant

We're excited to announce that client IO, the creators of JointJS, is now SOC 2 compliant. Learn more in our official announcement.

JointJS blog post preview

Roman Bruckner

Dec 13, 2023

Demo Wednesday: Spreadsheet Shapes with Handsontable

In today's demo, we showcase the integration of a third-party spreadsheet library Handsontable and JointJS.

Speed up your development with a powerful library

Leverage a time-tested JavaScript diagramming library using the best of HTML5 and SVG to accelerate your development.

EXPLORE ALL DEMOS

GET STARTED FOR FREE