modern-json-react

A production-grade, fully-featured JSON editor React component. Combines code editing, tree view navigation, JSON Schema validation, and accessibility-first design in a single, zero-config package.

Screenshots

Code Mode (Light)

Syntax-highlighted editor with line numbers, bracket matching, and real-time validation:

Tree Mode (Light)

Collapsible tree view with inline editing, type badges, and hover actions:

Code Mode (Dark)

Full dark theme support with VS Code-inspired color palette:

Features

• Dual editing modes — Syntax-highlighted code editor, collapsible tree view, or side-by-side split mode
• JSON Schema validation — Built-in Draft-07 support with real-time error markers and human-readable messages
• Tree view editing — Inline value editing, type changing, key renaming, drag-drop reordering, and node deletion
• Undo / Redo — Full history stack with time-based action grouping and keyboard shortcuts
• Search — Full-text search across keys and values with regex support and match highlighting
• Theming — Light and dark presets with 22 CSS custom properties for full customization
• Formatting — Pretty-print, minify, sort keys (ascending, descending, or custom comparator)
• Accessibility — WCAG 2.1 AA compliant with full keyboard navigation, ARIA roles, and screen reader announcements
• TypeScript — Complete type definitions with JSDoc comments
• Zero peer dependencies — Only requires React 18+

Installation

npm install modern-json-react

Quick Start

import { JsonEditor } from 'modern-json-react';

function App() {
  const [data, setData] = useState({ name: "John", age: 30 });

  return (
    <JsonEditor
      value={data}
      onChange={(value) => setData(value)}
      height={500}
    />
  );
}

Props

Prop	Type	Default	Description
value	unknown	—	JSON value (object, array, string, etc.) or raw JSON string
onChange	(value, rawText) => void	—	Called when the JSON value changes
mode	'code' | 'tree' | 'split'	'code'	Active editing mode
onModeChange	(mode) => void	—	Called when the user switches modes
schema	JSONSchema	—	JSON Schema for validation (Draft-07, 2019-09, 2020-12)
validators	CustomValidator[]	—	Custom validation functions
validationMode	'onChange' | 'onBlur' | 'onSubmit' | 'manual'	'onChange'	When to trigger validation
onValidate	(errors) => void	—	Called when validation completes
theme	'light' | 'dark' | 'auto' | ThemeConfig	'light'	Theme preset or custom config
height	string | number	400	Editor height (CSS value or pixels)
readOnly	boolean	false	Disable editing
searchable	boolean	true	Show search bar
sortable	boolean	true	Enable key sorting
indentation	2 | 4 | 'tab'	2	Indentation style
lineNumbers	boolean	true	Show line numbers in code mode
className	string	—	Additional CSS class

Schema Validation

Pass a JSON Schema to get real-time validation with inline error markers:

const schema = {
  type: 'object',
  properties: {
    name: { type: 'string', minLength: 1 },
    age: { type: 'number', minimum: 0 },
    email: { type: 'string', format: 'email' },
  },
  required: ['name', 'email'],
};

<JsonEditor
  value={data}
  onChange={setData}
  schema={schema}
  onValidate={(errors) => console.log(errors)}
/>

Custom Validators

Add your own validation rules alongside schema validation:

const noEmptyArrays = (value, path) => {
  if (Array.isArray(value) && value.length === 0) {
    return [{ message: 'Array must not be empty', path, severity: 'warning' }];
  }
  return [];
};

<JsonEditor value={data} validators={[noEmptyArrays]} />

Theming

Use a preset or provide a full custom theme:

// Preset
<JsonEditor theme="dark" />

// Auto (follows OS preference)
<JsonEditor theme="auto" />

// Custom theme
<JsonEditor theme={{
  name: 'ocean',
  bg: '#0d1b2a',
  fg: '#e0e1dd',
  border: '#1b263b',
  keyColor: '#48cae4',
  stringColor: '#90e0ef',
  numberColor: '#ade8f4',
  // ... see ThemeConfig for all 22 properties
}} />

Override individual tokens with CSS custom properties:

.my-editor {
  --mjr-bg: #fafafa;
  --mjr-key: #d63384;
  --mjr-string: #198754;
}

Exported Utilities

The package also exports core utilities for advanced use cases:

import {
  // Parsing
  parseJson, stringifyJson, isValidJson,

  // Validation
  validateSchema, runCustomValidators,

  // Formatting
  formatJson, minifyJson, sortJsonKeys, computeStats,

  // Path operations (immutable)
  getByPath, setByPath, deleteByPath, parsePath,

  // Hooks (for building custom editors)
  useJsonParser, useUndoRedo, useSearch,

  // Themes
  lightTheme, darkTheme,
} from 'modern-json-react';

Keyboard Shortcuts

Shortcut	Action
Ctrl/Cmd + Z	Undo
Ctrl/Cmd + Shift + Z	Redo
Ctrl/Cmd + F	Open search
Escape	Close search
Tab	Indent (code mode)
Enter	Edit selected node (tree mode)
Delete	Delete selected node (tree mode)
Arrow keys	Navigate tree nodes

Browser Support

Chrome/Edge 90+, Firefox 90+, Safari 15+. Requires React 18 or later.

Development

# Install dependencies
npm install

# Run tests
npm test

# Type checking
npm run typecheck

# Build for production
npm run build

# Open interactive demo
open demo/index.html

Project Structure

src/
├── index.ts                 # Public API exports
├── JsonEditor.tsx           # Root component
├── components/
│   ├── CodeEditor/          # Syntax-highlighted text editor
│   ├── TreeEditor/          # Collapsible tree with inline editing
│   ├── Toolbar/             # Mode switcher, search, actions
│   └── StatusBar/           # Validation status, cursor position, stats
├── hooks/
│   ├── useJsonParser.ts     # Parse + validate
│   ├── useUndoRedo.ts       # History management
│   └── useSearch.ts         # Search state + matching
├── core/
│   ├── parser.ts            # JSON parsing with error locations
│   ├── validator.ts         # JSON Schema validation engine
│   ├── formatter.ts         # Format, minify, sort, stats
│   └── path.ts              # JSONPath get/set/delete (immutable)
├── themes/                  # Light + dark presets
└── types/                   # TypeScript interfaces

License

MIT