Render JSON Data As A Tree View – json-view

Yet another JSON viewer library that renders your JSON data as a collapsible and expandable tree structure for better readability.

How to use it:

Download and import the json-view’s files into the document.

<link rel="stylesheet" href="/path/to/dist/jsonview.bundle.css" />

The library uses Font Awesome for the collapse/expand icons.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

<script src="/path/to/dist/jsonview.bundle.js"></script>

Create a container to place the JSON viewer.

<div class="root"></div>

Format and render your JSON data in the container.

let data = '{}';
let target = '.root';
jsonView.format(data, target);

API methods.

// expand tree
jsonView.expandChildren(tree);

// collapse tree
jsonView.collapseChildren(tree);

// treverse tree object
jsonView.traverseTree(tree, function(node) {
  console.log(node);
});

Changelog:

12/03/2025

• v2.7.6: bugfix

03/29/2025

• v2.7.6: bugfix

10/17/2023

• v2.7.5: bugfix

10/07/2023

• v2.7.4: bugfix

07/07/2023

• v2.7.3: bugfix

07/05/2022

• v2.7.2: bugfix

01/11/2022

• v2.7.0

05/26/2020

• Use scss

05/26/2020

• Bugfix

05/25/2020

• Fix false boolean value

05/23/2020

• Updated

10/09/2019

• Fix caret directions

The post Render JSON Data As A Tree View – json-view appeared first on CSS Script.