Registry / devops / json-formatter-js-bb

json-formatter-js-bb

library2.2.0jsnpmunverified

A pure JavaScript library for rendering JSON objects in HTML with a collapsible tree view. Version 2.2.0 is the current stable release. The package is lightweight, supports TypeScript types, and provides customization options including hover preview, themes, and animation toggles. It is an ESM-only, browser-oriented library that requires the JSON input to be an object or array (not a string).

devops

npm install json-formatter-js-bb

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · JSON-FORMATTER-JS-

json-formatter-js-bb

devopsjavascriptv2.2.0

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-bb'

✗ const JSONFormatter = require('json-formatter-js-bb')

Package is ESM-only. Default import is named 'JSONFormatter'.

JSONFormatter type

✓ import type JSONFormatter from 'json-formatter-js-bb'

✗ import { JSONFormatter } from 'json-formatter-js-bb'

For TypeScript types, use type import to avoid runtime issues.

JSONFormatter instance

✓ const formatter = new JSONFormatter(json, 2, { theme: 'dark' })

✗ const formatter = JSONFormatter(json)

Must use 'new' keyword. The constructor expects up to 3 arguments.

Renders a JSON object as a collapsible HTML tree with hover preview and custom depth.

import JSONFormatter from 'json-formatter-js-bb'; const json = { name: 'Example', items: [1, 2, { deep: true }] }; const formatter = new JSONFormatter(json, 2, { hoverPreviewEnabled: true, theme: '', animateOpen: true, animateClose: true }); document.body.appendChild(formatter.render()); formatter.openAtDepth(3);

Debug

Known issues

gotchaThe JSON input must be an object or array, not a raw JSON string.

fix

Parse the string first: const formatter = new JSONFormatter(JSON.parse(str));

affects: >=0.0.0

gotchaThe 'open' parameter defaults to 1, not 0. Use 0 to collapse all levels.

fix

Pass 0 as second argument: new JSONFormatter(json, 0)

affects: >=0.0.0

deprecatedThe 'openAtDepth' method replaces older 'open' argument behavior for dynamic depth control.

fix

Use formatter.openAtDepth(depth) after render() instead of passing open to constructor.

affects: >=2.0.0

gotchaPackage is ESM-only; CommonJS require() will not work.

fix

Use dynamic import() or switch to ESM.

affects: >=2.0.0

Errors

Common errors & fixes

TypeError: JSONFormatter is not a constructor

Using default import incorrectly or wrong import style (CommonJS).

fix

Use 'import JSONFormatter from 'json-formatter-js-bb'' (ESM) and invoke with 'new'.

Cannot read properties of undefined (reading 'render')

The 'render()' method must be called on the formatter instance before appending.

fix

const formatter = new JSONFormatter(json); const element = formatter.render(); document.body.appendChild(element);

Upgrade

Version history

2.2.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

7 hits · last 30 days

node

Resources

githubhttps://github.com/mohsen1/json-formatter-js ↗

packagejson-formatter-js-bb ↗

homepagehttps://github.com/mohsen1/json-formatter-js#readme ↗