Registry / productivity / json-formatter-js

json-formatter-js

JSON →
library2.5.23jsnpmunverified

Renders JSON objects as interactive, collapsible HTML trees. Current version 2.5.23. stable, infrequent releases. Key differentiator: lightweight, zero-dependency core library (not a web component), with hover preview, animation, theming (dark mode), and configurable folding depth. Suitable for browser and Node.js (DOM required).

npm install json-formatter-js
INSTALL
IMPORT
SIG · JSON-FORMATTER-JS
J
json-formatter-js
productivityjavascriptv2.5.23
harness data pending
Install & Compatibility
Where this runs

No compatibility data collected yet for this library.

Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

JSONFormatter
import JSONFormatter from 'json-formatter-js';
const JSONFormatter = require('json-formatter-js');
Default export; ESM-only package (no CJS). TypeScript types are included.
JSONFormatter
const formatter = new JSONFormatter(json, open, config);
new JSONFormatter(JSON.stringify(json));
Constructor expects a parsed object/array, not a JSON string.
JSONFormatter
formatter.render() returns an HTMLElement node; appendChild() to document.
formatter.render() returns a string; innerHTML = formatter.render();
render() returns a DOM node (not HTML string).
JSONFormatter
formatter.openAtDepth(depth);
formatter.openAtDepth({ depth: 3 });
openAtDepth expects a number, not an options object.
JSONFormatter
new JSONFormatter(obj, 0);
new JSONFormatter(obj, false);
Second argument 'open' is a number (default 1), not boolean.

Renders a JSON object with custom config and demonstrates collapsing all levels via openAtDepth().

import JSONFormatter from 'json-formatter-js'; const sampleJSON = { name: 'JSON Formatter', version: '2.5.23', features: ['collapsible', 'themed', 'hover preview'], nested: { enabled: true, count: 42 } }; const formatter = new JSONFormatter(sampleJSON, 2, { hoverPreviewEnabled: true, animateOpen: true, theme: 'dark' }); const container = document.getElementById('json-view'); container.appendChild(formatter.render()); // Collapse all levels later formatter.openAtDepth(0);
Debug
Known issues
gotchaConstructor expects parsed Object/Array, not a JSON string
fix
Pass JSON.parse(string) instead of the raw string.
affects: >=2.0.0
gotcharender() returns a DOM node (HTMLElement), not a string
fix
Use appendChild(render()) instead of innerHTML = render().
affects: >=2.0.0
gotchaSecond argument 'open' must be a number, not boolean
fix
Use 0 (collapsed) or 1 (default) instead of true/false.
affects: >=2.0.0
deprecatedConfig option 'animateOpen' and 'animateClose' may be deprecated
fix
Check changelog; still works in v2.5.23.
affects: >=2.5.0
gotchaopenAtDepth() expects a number, not an object
fix
Call openAtDepth(depth) with a numeric argument.
affects: >=2.0.0
breakingFrom v2, package is ESM-only (no CommonJS)
fix
Use import syntax; require() will fail.
affects: >=2.0.0
Errors
Common errors & fixes
Uncaught TypeError: formatter.render is not a function
Using require() to import the package (v2 is ESM-only).
fix
Switch to import JSONFormatter from 'json-formatter-js'; or use dynamic import().
TypeError: Cannot read properties of undefined (reading 'appendChild')
render() returns a DOM node, not a string; trying to set innerHTML.
fix
Use document.getElementById('container').appendChild(formatter.render());
TypeError: argument is not an Object or Array
Passing a JSON string instead of a parsed object to the constructor.
fix
Parse the string first: new JSONFormatter(JSON.parse(jsonString));
TypeError: openAtDepth is not a function
Attempting to call openAtDepth before render() is called or after DOM removal.
fix
Ensure render() has been called and formatter variable is still valid.
Upgrade
Version history
2.5.23latest on npm
Audit
Dependencies

No dependency data recorded yet.

Agent activity
29 hits · last 30 days
node
28
OpenAI (training)
1
Resources
json-formatter-js — npm install json-formatter-js · libregistry