Render JSON Data As A Tree View – json-view

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

Preview:

Render JSON Data As A Tree View – json-view

Description:

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="https://use.fontawesome.com/releases/v5.2.0/css/all.css" 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);

Changelog:

10/09/2019

  • Fix caret directions

See Also:

You Might Be Interested In:

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

Leave a Reply