Registry / productivity / json-formatter-js-extended

json-formatter-js-extended

JSON →
library2.4.9jsnpmunverified

A pure JavaScript library that renders JSON objects as collapsible HTML trees, featuring hover preview, theme support (e.g., dark mode), animation toggles, and property sorting. Current stable version 2.4.9, maintained on GitHub with weekly releases. Unlike other JSON viewers, it provides configurable open depth, hover preview for arrays and objects, and uses the object's toJSON method. Requires peer dependency 'select', ships TypeScript definitions.

productivity
npm install json-formatter-js-extended
github ↗package ↗homepage ↗
INSTALL
IMPORT
SIG · JSON-FORMATTER-JS-
J
json-formatter-js-extended
productivityjavascriptv2.4.9
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.

default
✓ import JSONFormatter from 'json-formatter-js'
✗ import { JSONFormatter } from 'json-formatter-js'
This package exports a default class, not named. Named import will result in undefined.
JSONFormatter type
✓ import type JSONFormatter from 'json-formatter-js'
✗ import JSONFormatter from 'json-formatter-js' (when using as type only, but still valid for value)
TypeScript types are included. Use 'import type' for type-only imports.
CommonJS require
✓ const JSONFormatter = require('json-formatter-js').default
✗ const JSONFormatter = require('json-formatter-js')
CommonJS require returns the module with a default property. Direct require returns an object with default key.

Renders a JSON object as a collapsible HTML tree with initial open depth of 2 and hover preview enabled.

import JSONFormatter from 'json-formatter-js'; const myJSON = { ans: 42, nested: { foo: 'bar' }, arr: [1,2,3] }; const formatter = new JSONFormatter(myJSON, 2, { hoverPreviewEnabled: true }); document.body.appendChild(formatter.render());
Debug
Known issues
gotchajson argument must be an object or array, not a string.
fix
If you have a JSON string, parse it first: JSON.parse(str). The library does not accept raw strings.
affects: >=1.0.0
gotchaCommonJS require returns an object with a default key.
fix
Use require('json-formatter-js').default to get the class.
affects: >=2.0.0
deprecatedThe 'open' parameter is set to 1 by default; using 0 collapses all, Infinity expands all. No breaking changes.
fix
No fix needed, but be explicit with depth.
affects: >=1.0.0
gotchaPeer dependency 'select' must be installed; otherwise the library may fail at runtime.
fix
Run npm install select@^1.1.2 alongside json-formatter-js.
affects: >=2.0.0
gotchaThe 'useToJSON' option defaults to true, which may cause unexpected string rendering for objects with toJSON method (e.g., Date).
fix
Set config: { useToJSON: false } if you want to show the object structure instead of the string output.
affects: >=1.0.0
Errors
Common errors & fixes
TypeError: JSONFormatter is not a constructor
Using named import instead of default import.
fix
Use import JSONFormatter from 'json-formatter-js' (no curly braces).
Error: Cannot find module 'select'
Peer dependency 'select' is not installed.
fix
Run npm install select@^1.1.2 to install the peer dependency.
Uncaught TypeError: formatter.render(...).appendChild is not a function
Attempting to call appendChild on the result of render() which is an HTMLElement; you likely meant to append formatter.render() to another element.
fix
Use document.body.appendChild(formatter.render()); — render() returns an element, not a function.
Upgrade
Version history
2.4.9latest on npm
Audit
Dependencies
selectrequiredPeer dependency used for text selection functionality
Agent activity
14 hits · last 30 days
node
12
Amazon
1
OpenAI (training)
1
Resources
githubhttps://github.com/mohsen1/json-formatter-js ↗
packagejson-formatter-js-extended ↗
homepagehttps://github.com/mohsen1/json-formatter-js#readme ↗
json-formatter-js-extended — npm install json-formatter-js-extended · libregistry