A highly-configurable React component for editing or viewing JSON/object data

🚀️ Explore the Demo

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 validation (using 3rd-party validation library)
• 🎨 Customisable UI — built-in or custom themes, 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 — replace keys and/or values with specialised components (e.g. date picker, links, images, undefined, BigInt, Symbol)
• 🌏 Localisation — easily translate UI labels and messages
• 🔄 Drag-n-drop re-ordering within objects/arrays
• 🎹 Keyboard customisation — define your own key bindings
• 🎮 External control via callbacks and imperative methods

💡 Try the Live Demo to see these features in action!

🚨 IMPORTANT

This documentation is for V2 of json-edit-react. Looking for V1? See the V1 docs and V1 demo.

If you're upgrading from V1, be sure to read the migration guide.

🎤️ Got feedback? Open an issue, or join the conversation in Discussions.

Optional Companion Packages

• THEMES: @json-edit-react/themes — curated, ready-made themes
• COMPONENTS: @json-edit-react/components - custom node components (links, date picker, etc.)
• UTILITIES: @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). See jsonParse prop.

Have a play with the Demo app to get a feel for it!

Installation

# Depending on your package manager:

npm i json-edit-react
# OR
yarn add json-edit-react
# OR
pnpm add json-edit-react

Implementation

import { JsonEditor } from 'json-edit-react'

// In your React component:
return (
  <JsonEditor
    data={ jsonData }
    setData={ setJsonData }
    { ...otherProps } />
);

// For a read-only viewer, use the `JsonViewer` component instead:
import { JsonViewer } from 'json-edit-react'

return <JsonViewer data={ jsonData } { ...otherProps } />

For FULL DOCUMENTATION, visit https://github.com/CarlosNZ/json-edit-react