A highly-configurable [React](https://github.com/facebook/react) component for editing or viewing JSON/object data ## 🚀️ [Explore the Demo](https://carlosnz.github.io/json-edit-react/)    [](https://deepwiki.com/CarlosNZ/json-edit-react) [](https://github.com/CarlosNZ/json-edit-react/discussions) [](https://github.com/sponsors/CarlosNZ) ### Features include: - ✅ **Easy inline editing** of individual values or whole blocks of JSON text - 🔒 **Granular control** – restrict edits, deletions, or additions per element - 📏 **[JSON Schema](https://json-schema.org/) validation** (using 3rd-party validation library) - 🎨 **Customisable UI** — built-in or custom [themes](https://github.com/CarlosNZ/json-edit-react#appearance--theming), CSS overrides or targeted classes - 📦 **Self-contained** — plain HTML/CSS, no external UI library dependencies, and *zero runtime dependencies* - 🔍 **Search & filter** — find data by key, value or custom function - 🚧 **[Custom components](https://github.com/CarlosNZ/json-edit-react#custom-nodes--components)** — replace keys and/or values with specialised components (e.g. date picker, links, images, `undefined`, `BigInt`, `Symbol`) - 🌏 **[Localisation](https://github.com/CarlosNZ/json-edit-react#localisation)** — easily translate UI labels and messages - 🔄 **[Drag-n-drop](https://github.com/CarlosNZ/json-edit-react#drag-and-drop-reordering)** re-ordering within objects/arrays - 🎹 **[Keyboard customisation](https://github.com/CarlosNZ/json-edit-react#keyboard-control)** — define your own key bindings - 🎮 **[External control](https://github.com/CarlosNZ/json-edit-react#programmatic-control)** via callbacks and imperative methods 💡 Try the **[Live Demo](https://carlosnz.github.io/json-edit-react/)** to see these features in action! > **🚨 IMPORTANT** > > This documentation is for V2 of **json-edit-react**. Looking for V1? See the [V1 docs](https://github.com/CarlosNZ/json-edit-react/tree/v1.x#readme) and [V1 demo](https://carlosnz.github.io/json-edit-react-v1/). > > If you're upgrading from V1, be sure to read the [migration guide](https://github.com/CarlosNZ/json-edit-react/blob/main/migration-guide.md). > > 🎤️ Got feedback? [Open an issue](https://github.com/CarlosNZ/json-edit-react/issues), or join the conversation in [Discussions](https://github.com/CarlosNZ/json-edit-react/discussions/categories/announcements). ## Optional Companion Packages - **THEMES**: [@json-edit-react/themes](https://www.npmjs.com/package/@json-edit-react/themes) — curated, ready-made [themes](https://github.com/CarlosNZ/json-edit-react#using-a-prebuilt-theme-json-edit-reactthemes) - **COMPONENTS**: [@json-edit-react/components](https://www.npmjs.com/package/@json-edit-react/components) - custom node components (links, date picker, etc.) - **UTILITIES**: [@json-edit-react/utils](https://www.npmjs.com/package/@json-edit-react/utils) — a collection of helpers and tools for extending and streamlining your **json-edit-react** experience ## Using the editor (for end users) It's pretty self explanatory (click the "edit" icon to edit, etc.), but there are a few not-so-obvious ways of interacting with the editor: - **Double-click** a value (or a key) to edit it - When editing a string, use Cmd/Ctrl-Enter or Shift-Enter to add a new line (Enter submits the value) - It's the opposite when editing a full object/array node (which you do by **clicking "edit"** on an object or array value) — Enter for new line, and Cmd/Ctrl/Shift-Enter for submit - Escape to **cancel** editing - Use Tab/Shift-Tab to quickly move from one value to another when editing - When clicking the "**clipboard**" icon, holding down Cmd/Ctrl will copy the *path* to the selected node rather than its value - When opening/closing a node, hold down Alt/Option to open/close *all* child nodes at once - For Number inputs, the ↑ / ↓ arrow keys will increment/decrement the value - For Boolean inputs, the Space bar will toggle the value - Easily navigate to the next or previous node for editing using the Tab/Shift-Tab keys. - **Drag and drop** items to change the structure or modify display order - When editing is not permitted, double-clicking a string value will expand the text to the full value if it is truncated due to length (there is also a clickable "..." for long strings) - **JSON text input** can accept "looser" input, if an additional JSON parsing method is provided (e.g. [JSON5](https://json5.org/)). See `jsonParse` prop. [Have a play with the Demo app](https://carlosnz.github.io/json-edit-react/) to get a feel for it! ## Installation ```sh # Depending on your package manager: npm i json-edit-react # OR yarn add json-edit-react # OR pnpm add json-edit-react ``` ## Implementation ```jsx import { JsonEditor } from 'json-edit-react' // In your React component: return ( ); // For a read-only viewer, use the `JsonViewer` component instead: import { JsonViewer } from 'json-edit-react' return ``` --- For **FULL DOCUMENTATION**, visit [https://github.com/CarlosNZ/json-edit-react](https://github.com/CarlosNZ/json-edit-react)