Beautiful JSON Rendering In Pure JavaScript – JSON Formatter

Category: Javascript , Recommended , Text | April 9, 2024
Views Total:180 views
Official Page:Go to website
Last Update:April 9, 2024


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
import JSONFormatter from 'json-formatter-js'

Or directly include the JavaScript in your HTML document.

<script src="dist/json-formatter.umd.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
  maxArrayItems: 100,
  exposePath: false

Open a specific depth.

const formatter = new Formatter();


v2.5.6 (04/09/2024)

  • Update

v2.4.0 (05/27/2022)

  • Allow users to choose to expose path

v2.3.4 (03/05/2020)

  • Update

v2.3.3 (02/07/2020)

  • Fix bug that assign undefined to empty keys

v2.2.1 (09/20/2018)

  • Bugfix & add more options

You Might Be Interested In:

3 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