Beautiful JSON Rendering In Pure JavaScript – JSON Formatter

Preview:

Description:

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();
formatter.openAtDepth(1);

Changelog:

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