Performant Large JSON Viewer In Vanilla JavaScript

The Big JSON Viewer enables you to efficiently renders large JSON data in a collapsible, beautify tree view.

Basic usage:

Install the Big JSON Viewer.

# NPM
$ npm install big-json-viewer  --save

Import the module.

import { BigJsonViewerDom, BigJsonViewerOptions } from 'big-json-viewer';

Render the JSON data you provide as follows:

BigJsonViewerDom.fromData(JSON.stringify({
  test: 23,
  someArray: [45, 2, 5, true, false, null]
})).then(viewer => {
  const node = viewer.getRootElement();
  document.body.appendChild(node);
  node.openAll(1);

});

Possible options to customize the JSON viewer.

{

  // the maximum number of nodes
  objectNodesLimit: 50, 
  arrayNodesLimit: 50,

  // if true the label for every node will show the full path to the element
  labelAsPath: false,

  workerPath: null,
  collapseSameValue: 5,
  showExtendedJson: false,
  maxStringPreviewLength: 250,
  
}

Changelog:

v0.2.2 (12/01/2025)

• Improve rendering for Extended JSON and for long strings

v0.1.7 (03/23/2019)

• Allow undefined and any types

v0.1.6 (01/16/2019)

• Fix search and add tests

v0.1.5 (01/15/2019)

• Fix event dispatching and collapse of objects

The post Performant Large JSON Viewer In Vanilla JavaScript appeared first on CSS Script.