Render JSON Data As A Tree View – json-view

Category: Javascript | October 9, 2019
Author: pgrabovets
Views Total: 2,338
Official Page: Go to website
Last Update: October 9, 2019
License: MIT


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="jsonview.css">

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

<link rel="stylesheet" href="" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<script src="jsonview.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);



  • Fix caret directions

You Might Be Interested In:

One thought on “Render JSON Data As A Tree View – json-view

Leave a Reply