json-edit-react

json-edit-react is a self-contained React component that lets users view and edit JSON or plain object data directly in the browser, with no external UI library dependencies and zero runtime dependencies at all. It supports inline editing of individual values or whole blocks of JSON text, granular restrictions on adding, editing, or deleting nodes, JSON Schema validation, drag-and-drop reordering, search and filtering by key/value, full theme customization, localisation, and custom components for specialized value types like dates, links, or images.

The library is aimed at developers who need a drop-in JSON viewer/editor for admin panels, config UIs, debugging tools, or any interface where structured data needs to be inspected or modified without building a bespoke editor from scratch. It exposes a single JsonEditor component with a large, well-documented props surface for controlling behavior, styling, and callbacks, and ships with TypeScript types out of the box.

What You Get

• A JsonEditor React component for viewing and editing JSON/object data with plain HTML/CSS and zero runtime dependencies
• Granular editing restrictions (restrictEdit, restrictDelete, restrictAdd, restrictTypeSelection) down to the individual node level via callback functions
• Built-in JSON Schema validation support via a third-party validation library
• Full theme system with built-in themes plus granular style overrides, and drag-and-drop reordering of object/array entries
• Search and filter by key, value, or custom function, plus localisation support for translating UI labels and messages

Common Use Cases

• Building admin panels or internal tools that need a generic editor for arbitrary JSON configuration or record data
• Adding a JSON/config viewer to a developer-facing dashboard where users inspect API responses or stored settings
• Letting non-technical users tweak structured application settings without exposing raw text-based JSON editing
• Debugging tools that display and let engineers modify in-memory state or fixtures during development

Under The Hood

Architecture - The package is structured as a pnpm workspace monorepo with the core JsonEditor component in src/ alongside sibling packages under packages/ (utils, themes, components) that are published independently for tree-shaking. The core component orchestrates recursive rendering of JSON nodes through a tree of collapsible node components, backed by React Context providers (src/contexts, including a dedicated ThemeProvider) for propagating theme, restriction, and callback configuration down the tree without prop drilling, and custom hooks (src/hooks) encapsulate cross-cutting concerns like undo/redo state and drag-and-drop behavior.

Tech Stack - Written in TypeScript (91% of the codebase) and built with Rollup (rollup.config.mjs) into dual ESM/CJS bundles with generated .d.ts types, targeting React as a peer dependency so it can be dropped into any React 17+ application. The demo app under demo/ is a separate Vite/Yarn-managed project used both for manual QA and as the live GitHub Pages demo.

Code Quality - The project has an extensive Jest test suite (test/) covering the JSON Editor component itself, drag-and-drop, filtering, undo/redo, clipboard behavior, path-manipulation utilities, and even server-side rendering compatibility (ssr.test.tsx), with a dedicated benchmark config (jest.bench.config.mjs) for performance regression tracking. ESLint and Prettier are enforced via lint/format scripts, and a prebuild script runs lint plus a custom prebuild test runner before every release build.

API Design - The component exposes a single required data prop with everything else optional and sensibly defaulted, following a clear naming convention (restrict*, on* for callbacks) that keeps the surface predictable; documentation is unusually thorough for an npm README, with a full props reference table, dedicated sections per feature area, and a published migration guide for breaking changes between major versions.