Render JSON Data As A Tree View – json-view

Category: Javascript | May 26, 2020
Author: pgrabovets
Views Total: 13,064 views
Official Page: Go to website
Last Update: May 26, 2020
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="/path/to/dist/jsonview.bundle.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="/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

// collapse tree

// treverse tree object
jsonView.traverseTree(tree, function(node) {



  • Use scss


  • Bugfix


  • Fix false boolean value


  • Updated


  • Fix caret directions

You Might Be Interested In:

3 thoughts on “Render JSON Data As A Tree View – json-view

  1. jsonView is not defined

    Hi pgrabovets,
    I downloaded the latest code. However I am getting this error.
    jsonView is not defined

    this is the way i am using it:

    jsonView.format(data, ‘.call-output-tree’);

    what is the problem?

    Thank you

  2. Justyn

    Hi, first of all thank you so much for this neat javascript library. It works wonderfully!

    May I suggest a feature to re-build JSON data if there’s been some edits to it (via traversing the tree?)

    I’m currently trying to implement it myself but if the lib would come preloaded with this feature, may help some in the future 🙂


Leave a Reply