{"id":41333,"library":"json-formatter-js","title":"json-formatter-js","description":"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).","status":"active","version":"2.5.23","language":"javascript","source_language":"en","source_url":"https://github.com/mohsen1/json-formatter-js","tags":["javascript","json","typescript"],"install":[{"cmd":"npm install json-formatter-js","lang":"bash","label":"npm"},{"cmd":"yarn add json-formatter-js","lang":"bash","label":"yarn"},{"cmd":"pnpm add json-formatter-js","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Default export; ESM-only package (no CJS). TypeScript types are included.","wrong":"const JSONFormatter = require('json-formatter-js');","symbol":"JSONFormatter","correct":"import JSONFormatter from 'json-formatter-js';"},{"note":"Constructor expects a parsed object/array, not a JSON string.","wrong":"new JSONFormatter(JSON.stringify(json));","symbol":"JSONFormatter","correct":"const formatter = new JSONFormatter(json, open, config);"},{"note":"render() returns a DOM node (not HTML string).","wrong":"formatter.render() returns a string; innerHTML = formatter.render();","symbol":"JSONFormatter","correct":"formatter.render() returns an HTMLElement node; appendChild() to document."},{"note":"openAtDepth expects a number, not an options object.","wrong":"formatter.openAtDepth({ depth: 3 });","symbol":"JSONFormatter","correct":"formatter.openAtDepth(depth);"},{"note":"Second argument 'open' is a number (default 1), not boolean.","wrong":"new JSONFormatter(obj, false);","symbol":"JSONFormatter","correct":"new JSONFormatter(obj, 0);"}],"quickstart":{"code":"import JSONFormatter from 'json-formatter-js';\n\nconst sampleJSON = {\n  name: 'JSON Formatter',\n  version: '2.5.23',\n  features: ['collapsible', 'themed', 'hover preview'],\n  nested: { enabled: true, count: 42 }\n};\n\nconst formatter = new JSONFormatter(sampleJSON, 2, {\n  hoverPreviewEnabled: true,\n  animateOpen: true,\n  theme: 'dark'\n});\n\nconst container = document.getElementById('json-view');\ncontainer.appendChild(formatter.render());\n\n// Collapse all levels later\nformatter.openAtDepth(0);","lang":"typescript","description":"Renders a JSON object with custom config and demonstrates collapsing all levels via openAtDepth()."},"warnings":[{"fix":"Pass JSON.parse(string) instead of the raw string.","message":"Constructor expects parsed Object/Array, not a JSON string","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Use appendChild(render()) instead of innerHTML = render().","message":"render() returns a DOM node (HTMLElement), not a string","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Use 0 (collapsed) or 1 (default) instead of true/false.","message":"Second argument 'open' must be a number, not boolean","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Check changelog; still works in v2.5.23.","message":"Config option 'animateOpen' and 'animateClose' may be deprecated","severity":"deprecated","affected_versions":">=2.5.0"},{"fix":"Call openAtDepth(depth) with a numeric argument.","message":"openAtDepth() expects a number, not an object","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Use import syntax; require() will fail.","message":"From v2, package is ESM-only (no CommonJS)","severity":"breaking","affected_versions":">=2.0.0"}],"env_vars":null,"search_vec":"'2.5.23':15 'anim':34 'browser':44 'collaps':10 'compon':30 'configur':39 'core':25 'current':13 'dark':36 'depend':24 'depth':41 'differenti':20 'dom':47 'fold':40 'formatt':3 'hover':32 'html':11 'infrequ':17 'interact':9 'javascript':49 'js':4 'json':2,6,50 'json-formatter-j':1 'key':19 'librari':26 'lightweight':21 'mode':37 'node.js':46 'object':7 'preview':33 'releas':18 'render':5 'requir':48 'stabl':16 'suitabl':42 'theme':35 'tree':12 'typescript':51 'version':14 'web':29 'zero':23 'zero-depend':22","created_at":"2026-06-04T18:51:54.538142+00:00","updated_at":"2026-06-04T18:51:54.538142+00:00","problems":[{"fix":"Switch to import JSONFormatter from 'json-formatter-js'; or use dynamic import().","cause":"Using require() to import the package (v2 is ESM-only).","error":"Uncaught TypeError: formatter.render is not a function"},{"fix":"Use document.getElementById('container').appendChild(formatter.render());","cause":"render() returns a DOM node, not a string; trying to set innerHTML.","error":"TypeError: Cannot read properties of undefined (reading 'appendChild')"},{"fix":"Parse the string first: new JSONFormatter(JSON.parse(jsonString));","cause":"Passing a JSON string instead of a parsed object to the constructor.","error":"TypeError: argument is not an Object or Array"},{"fix":"Ensure render() has been called and formatter variable is still valid.","cause":"Attempting to call openAtDepth before render() is called or after DOM removal.","error":"TypeError: openAtDepth is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/mohsen1/json-formatter-js#readme","github":"https://github.com/mohsen1/json-formatter-js","docs":null,"changelog":null,"pypi":null,"npm":"json-formatter-js","openapi_spec":null,"status_page":null,"smithery":null,"categories":["productivity"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-04","next_check":"2026-09-02","install_tag":null}}