Registry / productivity / react-schema-based-json-editor

react-schema-based-json-editor

library8.3.0jsnpmunverified

A React component for editing JSON objects based on a JSON schema. This package provides a form-like UI that dynamically generates input fields from a schema definition, allowing users to edit JSON data without writing raw JSON. Version 8.3.0 is the latest stable release, with active development and updates. Key differentiators include support for nested schemas, custom validation, and integration with popular form libraries. It ships TypeScript types and works in modern browsers and Node.js.

productivity

npm install react-schema-based-json-editor

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-SCHEMA-BASED

react-schema-based-json-editor

productivityjavascriptv8.3.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

ReactSchemaBasedJsonEditor

✓ import { ReactSchemaBasedJsonEditor } from 'react-schema-based-json-editor'

✗ import ReactSchemaBasedJsonEditor from 'react-schema-based-json-editor'

Default export is not available; use named import.

SchemaBasedJsonEditorProps

✓ import { SchemaBasedJsonEditorProps } from 'react-schema-based-json-editor'

✗ import { SchemaBasedJsonEditorProps } from 'schema-based-json-editor'

Type definitions are re-exported from this package.

EJSONEditorMode

✓ import { EJSONEditorMode } from 'react-schema-based-json-editor'

Enum for editor modes like 'text', 'tree', etc.

Example of using ReactSchemaBasedJsonEditor to edit a simple object schema.

import React from 'react'; import { ReactSchemaBasedJsonEditor } from 'react-schema-based-json-editor'; const schema = { type: 'object', properties: { name: { type: 'string', title: 'Name' }, age: { type: 'number', title: 'Age' }, }, }; const App = () => { const [value, setValue] = React.useState({ name: 'John', age: 30 }); return ( <ReactSchemaBasedJsonEditor schema={schema} value={value} onChange={setValue} editorMode="tree" /> ); }; export default App;

Debug

Known issues

breakingVersion 8.0.0 removed the 'mode' prop in favor of 'editorMode' enum. Old code using mode='tree' will break.

fix

Use editorMode={EJSONEditorMode.Tree} or editorMode='tree' for string.

affects: >=8.0.0

gotchaThe component expects a controlled value; if undefined, it may crash. Always provide initial value.

fix

Initialize state with an empty object or default values matching schema.

affects: all

deprecatedThe 'options' prop for customizing UI is deprecated since v7.5. Use 'uiSchema' instead.

fix

Replace 'options' with 'uiSchema' following the new format.

affects: >=7.5.0

Errors

Common errors & fixes

TypeError: Cannot read property 'properties' of undefined

Missing or invalid schema prop

fix

Ensure schema is correctly defined and passed as an object with type and properties.

Module not found: Can't resolve 'react-schema-based-json-editor'

Package not installed or peer dependencies missing

fix

Run 'npm install react-schema-based-json-editor react'

Warning: React does not recognize the `editorMode` prop on a DOM element

Using string value for editorMode in older version that required enum

fix

Use EJSONEditorMode enum or upgrade to v8+. Or pass as string if v8+ supports it.

Upgrade

Version history

8.3.0latest on npm

Audit

Dependencies

reactrequiredReact peer dependency for rendering the editor component

schema-based-json-editorrequiredCore editor logic and utilities

Agent activity

11 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/plantain-00/schema-based-json-editor ↗

packagereact-schema-based-json-editor ↗

homepagehttps://github.com/plantain-00/schema-based-json-editor#readme ↗