Minimal JSON Data Formatter – JSONViewer

Category: Javascript | February 29, 2020
Views Total:20,318 views
Official Page:Go to website
Last Update:February 29, 2020


Minimal JSON Data Formatter – JSONViewer


A super lightweight, pure JavaScript JSON formatter / viewer which helps render JSON objects just like a collapsible tree view.

How to use it:

Load the following JS and CSS files into your html page.

<script src="json-viewer.js"></script>
<link rel="stylesheet" href="json-viewer.css">

Create an element to place the formatted JSON objects.

<div id="json"></div>

Create a new JSONViewer instance.

var jsonViewer = new JSONViewer();

Append the instance to the DIV element you just created.


Format and beautify your JSON data using the showJSON() method. Available parameters:

  • json: json Input value
  • maxLvl: Process only to max level, where 0..n, -1 unlimited
  • colAt: Collapse at level, where 0..n, -1 unlimited
jsonViewer.showJSON(json, maxLvl, colAt);



  • CSS update


  • fixed xss vulnerability

You Might Be Interested In:

3 thoughts on “Minimal JSON Data Formatter – JSONViewer

  1. pulcino

    The simplest, easiest way to display of a JSON object as a tree I could find. Most other implementations rely on a particular syntax for the tree. This one is flexible, and elegant. Many thanks to Roman Makudera!

  2. Scott Page

    No more than 5 minutes to integrate it into my app, and it’s exactly what I was looking for.
    Really great work, thanks for doing this!


Leave a Reply