{"id":11171,"library":"json-edit-react","title":"React JSON Editor Component","description":"json-edit-react is a highly configurable React component designed for both viewing and interactively editing JSON or arbitrary JavaScript object data. It provides features like inline editing, granular control over edit/delete/add permissions per element, optional JSON Schema validation (with a third-party library), and extensive UI customization through themes and CSS. The package, currently at version 1.29.0, receives frequent minor and patch updates, indicating active maintenance and ongoing feature development. Key differentiators include its self-contained nature (minimal external UI dependencies), search and filtering capabilities, support for custom components to render specific node types, localization, and drag-and-drop re-ordering. It offers a comprehensive solution for applications requiring dynamic JSON data manipulation within a React environment.","status":"active","version":"1.29.0","language":"javascript","source_language":"en","source_url":"https://github.com/CarlosNZ/json-edit-react","tags":["javascript","react","component","components","interactive","interactive-json","json","json-component","json-display","typescript"],"install":[{"cmd":"npm install json-edit-react","lang":"bash","label":"npm"},{"cmd":"yarn add json-edit-react","lang":"bash","label":"yarn"},{"cmd":"pnpm add json-edit-react","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for the React component to function.","package":"react","optional":false}],"imports":[{"note":"Main component for JSON editing/viewing. While CommonJS might work in some setups, modern React applications generally use ES Modules.","wrong":"const JsonEditor = require('json-edit-react');","symbol":"JsonEditor","correct":"import { JsonEditor } from 'json-edit-react';"},{"note":"Since v1.19.0, built-in themes must be imported explicitly rather than referenced by string name, improving tree-shaking.","wrong":"import { 'dark' } from 'json-edit-react/themes';","symbol":"BuiltInThemes","correct":"import { BuiltInThemes } from 'json-edit-react';"},{"note":"TypeScript type definition for the component's props, useful for type-checking and IDE assistance.","symbol":"JsonEditorProps","correct":"import type { JsonEditorProps } from 'json-edit-react';"}],"quickstart":{"code":"import React, { useState, useCallback } from 'react';\nimport { JsonEditor } from 'json-edit-react';\n// Import a built-in theme (since v1.19.0)\nimport { darkTheme } from 'json-edit-react/themes';\n\nfunction MyJsonEditorComponent() {\n  const [jsonData, setJsonData] = useState({\n    user: {\n      id: 1,\n      name: \"Alice Smith\",\n      email: \"alice@example.com\",\n      isActive: true,\n      roles: ['admin', 'editor'],\n      settings: {\n        theme: 'dark',\n        notifications: true,\n        dataLimit: 1000\n      }\n    },\n    products: [\n      { id: 'a1', name: 'Laptop', price: 1200 },\n      { id: 'b2', name: 'Mouse', price: 25 }\n    ]\n  });\n\n  // Callback to handle changes from the editor\n  const handleDataChange = useCallback((updatedData) => {\n    console.log('JSON data updated:', updatedData);\n    setJsonData(updatedData);\n  }, []);\n\n  return (\n    <div style={{ maxWidth: '800px', margin: '20px auto', padding: '20px', border: '1px solid #ccc', borderRadius: '8px' }}>\n      <h2>Interactive JSON Data</h2>\n      <JsonEditor\n        data={jsonData}\n        setData={handleDataChange}\n        restrictAdd={(path, value) => path.length < 3} // Example: only allow adding at root or first level\n        restrictDelete={(path) => path[0] !== 'products'} // Example: prevent deleting top-level 'products'\n        rootName=\"MyAppData\"\n        theme={darkTheme}\n        highlightUpdates={true}\n        showArrayIndices={true}\n        showObjectSize={true}\n      />\n      <pre style={{ marginTop: '20px', backgroundColor: '#eee', padding: '10px', borderRadius: '4px' }}>\n        <code>{JSON.stringify(jsonData, null, 2)}</code>\n      </pre>\n    </div>\n  );\n}\n\nexport default MyJsonEditorComponent;\n","lang":"typescript","description":"This quickstart demonstrates rendering an editable JSON structure, updating state, applying a built-in theme, and configuring basic editing restrictions using a functional React component."},"warnings":[{"fix":"Replace `theme=\"yourThemeName\"` with `import { yourThemeName } from 'json-edit-react/themes';` and then `theme={yourThemeName}`.","message":"The way themes are applied changed in v1.19.0. Instead of passing a theme name as a string (e.g., `theme=\"dark\"`), you must now explicitly import the theme object and pass it (e.g., `theme={darkTheme}`). This change was implemented for better tree-shaking.","severity":"breaking","affected_versions":">=1.19.0"},{"fix":"Pass a `setData` prop that updates your component's state (e.g., using `useState`'s setter) with the new data object provided by the editor.","message":"When handling data updates, it is recommended to use the `setData` prop for external updates rather than relying solely on the `onUpdate` prop, especially since v1.14.0. This ensures proper state management within React.","severity":"gotcha","affected_versions":">=1.14.0"},{"fix":"For extremely large datasets, consider debouncing `setData` calls, implementing virtualized lists if possible, or using server-side processing for complex operations. Limit the initial `collapsed` depth or use `shouldExpandNodeInitially` to prevent rendering a massive DOM tree upfront.","message":"Displaying and editing very large JSON objects (e.g., hundreds of thousands of keys/values or deeply nested structures) can lead to performance issues due to React's rendering cycle and the component's interactive features. Users might experience UI lag.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Utilize the `customComponents` prop to provide specific React components for rendering and editing non-standard data types. Also, explore options like `handleCustomCollections` (since v1.27.0) to treat custom objects as 'Value' nodes.","message":"The `json-edit-react` component, while flexible, may not automatically handle custom object types (like `Date`, `Map`, `Set`) as distinct editable entities without explicit configuration. By default, these might be stringified or treated as plain objects, potentially losing type fidelity.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"If 0-indexed display is preferred, ensure the `arraysIndexFrom1` prop (or similar configuration) is explicitly set to `false` or left at its default value if it defaults to `false`. Communicate this display choice to end-users if it deviates from standard programming conventions.","message":"The v1.29.0 release introduced an option for '1-indexed arrays' display. If enabled, this changes how array indices are presented in the UI (starting from 1 instead of 0), which might confuse users accustomed to 0-indexed arrays in programming contexts. It is a display-only option and does not change the underlying data structure.","severity":"gotcha","affected_versions":">=1.29.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `import { JsonEditor } from 'json-edit-react';` is correct. If using themes, verify that `import { yourThemeName } from 'json-edit-react/themes';` is used and the theme object is passed as `{theme={yourThemeName}}`.","cause":"This error often occurs when the `JsonEditor` component is imported incorrectly or when the `theme` prop receives an invalid value (e.g., a string instead of an imported theme object after v1.19.0).","error":"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object."},{"fix":"Ensure the `data` prop always receives a valid JavaScript object or array. Initialize your state with an empty object `{}` or array `[]` if the data is fetched asynchronously, or conditionally render the `JsonEditor` component only when `data` is available.","cause":"Often indicates that the `data` prop passed to `JsonEditor` is `undefined`, `null`, or not a valid object/array when the component expects one, especially during initial render or asynchronous data loading.","error":"Cannot read properties of undefined (reading 'map') or 'forEach'"},{"fix":"Ensure that any updates to the `data` prop passed to `JsonEditor` are done immutably (e.g., using spread syntax `...` to create new objects/arrays) to avoid unexpected re-renders or state conflicts. The `setData` prop provided by `json-edit-react` typically handles this correctly.","cause":"While less common directly from `json-edit-react`, this can arise if an external state update (e.g., from `setData`) interferes with an internal input element's state within the editor, especially if `data` is mutated directly rather than creating a new object.","error":"Unhandled Runtime Error: A component is changing an uncontrolled input of type [text/number] to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa)."}],"ecosystem":"npm"}