Beautiful JSON Rendering In Pure JavaScript – JSON Formatter

Category: Javascript , Text | September 20, 2018
Author: mohsen1
Views Total: 5,795
Official Page: Go to website
Last Update: September 20, 2018
License: MIT


Beautiful JSON Rendering In Pure JavaScript – JSON Formatter


JSON Formatter is a pure JavaScript plugin used for rending local JSON objects and/or external JSON files in an elegant way (just like the collapsible tree structure).

How to use it:

Install the JSON Formatter via NPM.

npm install --save json-formatter-js

Or directly include the JavaScript in your html document.

<script src="dist/json-formatter.js"></script>

Create a new JSONFormatter object with the following parameters:

  • json: json object or array
  • open: indicates how many levels the rendered tree should expand
  • config: configuration options
JSONFormatter(json, open, config)

All default configuration options.

  hoverPreviewEnabled: false,
  hoverPreviewArrayCount: 100,
  hoverPreviewFieldCount: 5,
  animateOpen: true,
  animateClose: true,
  theme: null, // or 'dark'
  useToJSON: true // use the toJSON method to render an object as a string as available

Open a specific depth.

const formatter = new Formatter();


v2.2.1 (09/20/2018)

  • Bugfix & add more options

You Might Be Interested In:

2 thoughts on “Beautiful JSON Rendering In Pure JavaScript – JSON Formatter

  1. Athaphian

    Doing exactly what this article states results in:

    json-formatter.js:1 Uncaught ReferenceError: module is not defined
    Uncaught ReferenceError: JSONFormatter is not defined


Leave a Reply