react-json-tree

import { JSONTree } from 'react-json-tree'; import { Map } from 'immutable'; // Optional: if using Immutable.js import React from 'react'; import ReactDOM from 'react-dom/client'; const jsonExample = { array: [1, 2, 3], bool: true, object: { foo: 'bar', nested: { value: 42, label: 'answer' } }, immutableMap: Map({ key: 'value', another: 'item' }), nullValue: null, undefinedValue: undefined, complexArray: [{ id: 1, name: 'one' }, { id: 2, name: 'two' }] }; const App = () => ( <div> <h1>JSON Tree Viewer Example</h1> <p>Displays a complex JSON object using `react-json-tree`:</p> <div style={{ backgroundColor: '#282c34', padding: '20px', borderRadius: '8px' }}> <JSONTree data={jsonExample} theme="monokai" invertTheme={false} shouldExpandNodeInitially={(keyPath, value, depth) => depth < 2} valueRenderer={(raw) => <span style={{ color: '#61dafb' }}>{raw}</span>} /> </div> </div> ); // Assumes an HTML file with `<div id="root"></div>` const rootElement = document.getElementById('root'); if (rootElement) { const root = ReactDOM.createRoot(rootElement); root.render( <React.StrictMode> <App /> </React.StrictMode> ); } else { console.error('Root element with ID "root" not found in the document.'); }