{"library":"react-json-tree","title":"React JSON Tree Viewer","description":"react-json-tree is a React component that provides an interactive JSON viewer, allowing developers to inspect JavaScript objects and arrays in a collapsible tree format. It was originally extracted from the Redux DevTools project and maintains active development within the same monorepo. The current stable version is 0.20.0, indicating a mature library. It differentiates itself by supporting iterable objects, including those from Immutable.js, and offering extensive theming capabilities through the base16 specification or custom styling functions. The component is regularly maintained, though its release cadence for major versions is tied to the broader Redux DevTools ecosystem. It's primarily used in development tools, debugging interfaces, and administrative dashboards where visual inspection of data structures is crucial.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-json-tree"],"cli":null},"imports":["import { JSONTree } from 'react-json-tree'","import type { JSONTreeProps } from 'react-json-tree'","import { JSONTree } from 'react-json-tree'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { JSONTree } from 'react-json-tree';\nimport { Map } from 'immutable'; // Optional: if using Immutable.js\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\n\nconst jsonExample = {\n  array: [1, 2, 3],\n  bool: true,\n  object: {\n    foo: 'bar',\n    nested: { value: 42, label: 'answer' }\n  },\n  immutableMap: Map({ key: 'value', another: 'item' }),\n  nullValue: null,\n  undefinedValue: undefined,\n  complexArray: [{ id: 1, name: 'one' }, { id: 2, name: 'two' }]\n};\n\nconst App = () => (\n  <div>\n    <h1>JSON Tree Viewer Example</h1>\n    <p>Displays a complex JSON object using `react-json-tree`:</p>\n    <div style={{ backgroundColor: '#282c34', padding: '20px', borderRadius: '8px' }}>\n      <JSONTree\n        data={jsonExample}\n        theme=\"monokai\"\n        invertTheme={false}\n        shouldExpandNodeInitially={(keyPath, value, depth) => depth < 2}\n        valueRenderer={(raw) => <span style={{ color: '#61dafb' }}>{raw}</span>}\n      />\n    </div>\n  </div>\n);\n\n// Assumes an HTML file with `<div id=\"root\"></div>`\nconst rootElement = document.getElementById('root');\nif (rootElement) {\n  const root = ReactDOM.createRoot(rootElement);\n  root.render(\n    <React.StrictMode>\n      <App />\n    </React.StrictMode>\n  );\n} else {\n  console.error('Root element with ID \"root\" not found in the document.');\n}\n","lang":"typescript","description":"This quickstart demonstrates how to render a complex JavaScript object, including Immutable.js `Map` instances, using the `JSONTree` component with a custom theme and initial expansion logic.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}