Visualize JSON with vanilla Javascript

 

Online Demo

Paste any valid JSON object in the area below to convert it into interactive HTML

Supported types and syntax

Onto topic

Some of our extensions are quite complex and their descriptions required visualizing some JSON examples into human-readable format as HTML. Moreover, we wanted to have the JSON not only displayed in a tree format but interactive as well so customers can expand or collapse the JSON tree directly in the page and review contents such as dataLayer[] states, pushes etc. mainly related to our GA4 extension for Magento 2 where understanding how module interacts with dataLayer is paramount.

After exploring multiple tools and libraries, we quickly figured that it is hard to justify loading an entire library for displaying a small chunk of code, just like cars, a 2 ton vehicle carries 1 person with total weight of 80 kg. Numbers just didn't add up.

That being said, we have prepared a really basic, really quick, vanilla based Javascript snippet that can handle this simple rendering and allow you to have your JSON displayed in beautiful easy to understand format and rendered as HTML. The idea is simple, we first create a DIV element with data-json attribute where we add the JSON that we need displayed, from then on the script will automatically pick this data and render the JSON inside the very same DIV but this time in human-readable format.

To generate this, we shall use the following short PHP example.

HTML content

It generates a DIV element with data-json attribute set to desired JSON.

Vanilla Javascript code

Once, we have this element rendered in the page, we can add the actual JS code that will do the rendering.

Styling

Last but not least, we should also add some CSS in the HEAD

The result

The result would be beautiful JSON rendered directly in the HTML page as seen below. You can also click any of the elements from the tree to expand or collapse it's contents.