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#themes--styles), 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)** — 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-n-drop)** re-ordering within objects/arrays
- 🎹 **[Keyboard customisation](https://github.com/CarlosNZ/json-edit-react#keyboard-customisation)** — define your own key bindings
- 🎮 **[External control](https://github.com/CarlosNZ/json-edit-react#external-control-1)** via callbacks and triggers
💡 Try the **[Live Demo](https://carlosnz.github.io/json-edit-react/)** to see these features in action!
----
> **📣️ ANNOUNCEMENT**
>
> V2 of **json-edit-react** is now available in beta, with significant refactors and performance improvements.
> ```
> npm install json-edit-react@beta
> yarn add json-edit-react@beta
> pnpm add json-edit-react@beta
> ```
> ❗️ 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).
>
> 📖️ **[FULL DOCS](https://github.com/CarlosNZ/json-edit-react/blob/main/README_V2.md)**
>
> If you've got any suggestions, please join the discussion [here](https://github.com/CarlosNZ/json-edit-react/discussions/198).
## Installation
```sh
# Depending on your package manager:
npm i json-edit-react
# OR
yarn add json-edit-react
```
## Implementation
```jsx
import { JsonEditor } from 'json-edit-react'
// In your React component:
return (
);
```
## Usage
**(for end user)**
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/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
- 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, **arrow-up** and **down** keys will increment/decrement the value
- For Boolean inputs, **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!
---
For **FULL DOCUMENTATION**, visit [https://github.com/CarlosNZ/json-edit-react](https://github.com/CarlosNZ/json-edit-react#json-edit-react)