react-jsoneditor

A React 19 wrapper for vanilla-jsoneditor v3, with native React alternatives for text mode (CodeMirror 6) and read-only tree view. Includes a full demo application showcasing 13 interactive examples.

Features

• Three rendering modes — text mode (CodeMirror 6), tree mode, table mode — auto-selected based on props
• Native React text editor — full-featured CodeMirror 6-based JSON editor with syntax highlighting, linting, autocomplete, search, format/compact/repair, and validation UI
• Native React tree view — read-only tree view with expand/collapse, JSON Pointer navigation, and validation display
• Svelte-based vanilla host — full vanilla-jsoneditor tree/table/text modes wrapped in a React host
• Imperative handle — 18 methods exposed via forwardRef: get, set, update, patch, select, expand, collapse, transform, validate, acceptAutoRepair, scrollTo, findElement, focus, refresh, updateProps, destroy
• Custom value renderers — bridge React components into vanilla-jsoneditor's renderer system via createReactValueAction
• JSON Schema validation via Ajv
• Custom JSON parser support (e.g., lossless-json)

Installation

npm install react-jsoneditor

Requires React 19 as a peer dependency.

Quick Start

import { useRef } from 'react'
import { ReactJsonEditor } from 'react-jsoneditor'
import type { ReactJsonEditorHandle, Content } from 'react-jsoneditor'

function App() {
  const editorRef = useRef<ReactJsonEditorHandle>(null)
  const [content, setContent] = useState<Content>({ text: '{"hello":"world"}' })

  return (
    <ReactJsonEditor
      ref={editorRef}
      content={content}
      onChange={(newContent) => setContent(newContent)}
    />
  )
}

Using the imperative handle

editorRef.current?.get()
editorRef.current?.set({ text: '{"foo":"bar"}' })
editorRef.current?.patch([{ op: 'add', path: '/baz', value: 'qux' }])
editorRef.current?.validate()
editorRef.current?.focus()

Props

ReactJsonEditorProps extends JSONEditorPropsOptional from vanilla-jsoneditor with:

Prop	Type	Description
className	string	CSS class name
style	CSSProperties	Inline styles

See vanilla-jsoneditor documentation for all editor props.

Modes

Mode	Condition	Implementation
text	Always	NativeTextMode — CodeMirror 6
tree + readOnly	readOnly=true	NativeTreeMode — React tree
tree or table	Otherwise	VanillaJsonEditorHost — Svelte editor

Custom Value Renderers

Use createReactValueAction to wrap a React component as a Svelte action:

import { createReactValueAction } from 'react-jsoneditor'

const PasswordRenderer = createReactValueAction(({ value }) => (
  <span>{'•'.repeat(String(value).length)}</span>
))

Development

Prerequisites

• Bun 1.2.15+
• Node.js 20+

Setup

bun install

Scripts

Command	Description
bun run dev	Start demo dev server at http://localhost:4178
bun run build	Build demo + library
bun run build:demo	Build demo app for production
bun run build:lib	Build library (ESM + CJS + types) to dist-lib/
bun run check	Type-check with tsc --noEmit
bun run lint	Lint with Biome
bun run format	Format with Biome

Library Build Output

dist-lib/
├── index.js     # ESM
├── index.cjs    # CommonJS
└── index.d.ts   # TypeScript declarations

Demo Examples

#	Example	Description
1	Basic Usage: One-way binding	Controlled content via onChange
2	Basic Usage: Two-way binding	Shared state between editor and preview
3	Custom Context Menu Buttons	Extend right-click menu
4	Custom Dynamic Styling	Dynamic className based on path/value
5	Custom JSON Parser	Use lossless-json instead of native JSON
6	Custom Menu Buttons	Extend main toolbar
7	Custom Theme Color	CSS variable overrides
8	Custom Validation	Custom validator function
9	Custom Value Renderer	React action + native renderer hybrid
10	Custom Value Renderer 2	Editable inline React component
11	JSON Schema Validation	Ajv-based schema + enum rendering
12	Switch Themes	Theme and font-size switcher
13	Use Methods	Ref-based imperative API

Tech Stack

• React 19 — component library and demo UI
• vanilla-jsoneditor v3 — core JSON editor
• CodeMirror 6 — native text editing
• Ant Design v5 — demo UI framework
• Zustand v5 — demo state management
• React Router v7 — demo routing
• Vite 8 — build tool
• Biome — linter and formatter
• TypeScript 5.9 — type safety
• Bun — package manager