Render JSON Data As A Tree View – json-view

Category: Javascript | September 14, 2018
Author: pgrabovets
Views Total: 576
Official Page: Go to website
Last Update: September 14, 2018
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);

Leave a Reply