# json-edit-react

> React component for editing or viewing JSON/object data

Latest version **1.30.2** (published 2026-06-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install json-edit-react
pnpm add json-edit-react
yarn add json-edit-react
bun add json-edit-react
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.30.2 |
| Published | 2026-06-24 |
| First published | 2023-05-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 139.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 644 |
| Author | Carl Smith |
| Maintainers | carlosnz |
| Keywords | react, component, components, interactive, interactive-json, json, json-component, json-display, json-tree, json-viewer, json-inspector, json-schema, json-editor, editor, data-viewer, form-builder, drag-and-drop, customizable, typescript, react-component, react-json, theme, tree-view, treeview, react-json-view |

## Links

- npm: https://www.npmjs.com/package/json-edit-react
- Repository: https://github.com/CarlosNZ/json-edit-react
- Homepage: https://carlosnz.github.io/json-edit-react
- npm.io page: https://npm.io/package/json-edit-react

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.30.2 (latest) — 2026-06-24
- 2.0.0-beta.10 (beta) — 2026-09-15
- 2.0.0-beta.9 — 2026-09-07
- 2.0.0-beta.8 — 2026-06-29
- 2.0.0-beta.7 — 2026-06-28
- 2.0.0-beta.6 — 2026-06-27
- 2.0.0-beta.5 — 2026-06-26
- 2.0.0-beta.4 — 2026-06-25
- 2.0.0-beta.3 — 2026-06-25
- 2.0.0-beta.2 — 2026-06-24
- 2.0.0-beta.1 — 2026-06-24
- 2.0.0-beta.0 — 2026-06-24
- 1.30.1 — 2026-05-20
- 1.30.0 — 2026-05-20
- 1.29.1 — 2026-05-05
- … 115 more at https://npm.io/package/json-edit-react/versions

## README

<!-- The README that will appear on the package's NPM page: https://www.npmjs.com/package/json-edit-react
On publish, this file is temporarily renamed to the main README so it gets published to npm,
then renamed back to this file, so the primary README remains published to Github repo.

The {{BLOCKS}} below are replaced from the equivalent blocks in the main README file when the
`yarn prepareReadme` script is run (which also happens before publish).
 -->

<img width="60" alt="screenshot" src="image/logo192.png" style="float:left; margin-right: 1em;">

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/) <!-- omit in toc -->

![NPM Version](https://img.shields.io/npm/v/json-edit-react)
![GitHub License](https://img.shields.io/github/license/carlosnz/json-edit-react)
![NPM Downloads](https://img.shields.io/npm/dm/json-edit-react)

[![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/CarlosNZ/json-edit-react)
[![Discuss on GitHub](https://img.shields.io/badge/Discussions-Join%20the%20conversation-blue?logo=github)](https://github.com/CarlosNZ/json-edit-react/discussions)
[![Sponsor](https://img.shields.io/badge/Sponsor-♥-pink.svg)](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!

<img width="392" alt="screenshot" src="image/screenshot.png">


----

> **📣️ 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).

<img width="838" alt="breaking changes" src="image/admonition_npm.png">

## 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 (
  <JsonEditor
    data={ jsonData }
    setData={ setJsonData } // optional
    { ...otherProps } />
);
```

## 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)

---
_Source: https://npm.io/package/json-edit-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._