Registry / devops / react-json-schema-builder

react-json-schema-builder

library1.1.1jsnpmunverified

React component to build JSON Schema interactively via a visual UI. Current stable version is 1.1.1, published as a single package with minimal updates. Differentiators: drag-and-drop schema construction, live preview, localization support, and TypeScript definitions. It is a lightweight alternative to form builders like react-jsonschema-form but focused on schema editing rather than form rendering.

devops

npm install react-json-schema-builder

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-JSON-SCHEMA-

react-json-schema-builder

devopsjavascriptv1.1.1

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.

JSONSchemaBuilder

✓ import JSONSchemaBuilder from 'react-json-schema-builder'

✗ const JSONSchemaBuilder = require('react-json-schema-builder')

ESM-only; no default CommonJS export. Requires React 16.8+.

Schema

✓ import { Schema } from 'react-json-schema-builder'

✗ import Schema from 'react-json-schema-builder'

Schema is a named export (TypeScript type). Do not use default import.

CSS

✓ import 'react-json-schema-builder/dist/index.css'

CSS must be imported separately; no automatic injection.

Shows basic usage of JSONSchemaBuilder component with TypeScript, state management, and CSS import.

import React, { useState } from 'react'; import JSONSchemaBuilder, { Schema } from 'react-json-schema-builder'; import 'react-json-schema-builder/dist/index.css'; const initialSchema: Schema = { type: 'object', properties: { name: { type: 'string' }, age: { type: 'integer' } } }; export default function App() { const [schema, setSchema] = useState<Schema>(initialSchema); return ( <JSONSchemaBuilder locale="en" schema={schema} onChange={setSchema} renderModal={true} /> ); }

Debug

Known issues

breakingVersion 1.0.0 export path changed: use named exports instead of default for Schema type.

fix

Update imports: import { Schema } from 'react-json-schema-builder'.

affects: >=1.1.0

deprecatedThe 'renderModal' prop is deprecated in v1.1.0; use 'showAdvanced' instead.

fix

Replace renderModal={true} with showAdvanced={true}.

affects: >=1.1.0

gotchaDo not import from subpaths like 'react-json-schema-builder/lib/...' – they may change without notice.

fix

Only import from the package root: import JSONSchemaBuilder from 'react-json-schema-builder'.

affects: >=1.0.0

gotchaThe component requires React 16.8+ (hooks). Does not work with React <16.8.

fix

Upgrade React to 16.8 or higher.

affects: >=1.0.0

deprecatedThe 'initialSchema' prop was renamed to 'schema' in v1.0.0.

fix

Replace 'initialSchema' with 'schema'.

affects: >=1.0.0

Errors

Common errors & fixes

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

Package is not installed or path is incorrect.

fix

Run npm install react-json-schema-builder --save

TypeError: Cannot read property 'map' of undefined

Schema prop is not correctly initialized or is null/undefined.

fix

Provide a valid schema object: const schema = { type: 'object', properties: {} }

Attempted import error: 'Schema' is not exported from 'react-json-schema-builder'.

Using wrong syntax: import Schema from '...' instead of import { Schema } from '...'.

fix

Use curly braces for named export: import { Schema } from 'react-json-schema-builder'

Uncaught Error: Target container is not a DOM element.

The component is rendered before the DOM is ready (e.g., in SSR without a mounted element).

fix

Ensure the component is mounted in the browser's DOM: use useEffect or render in client-side only.

Upgrade

Version history

1.1.1latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React components

react-domrequiredPeer dependency for DOM rendering

Agent activity

9 hits · last 30 days

node

Amazon

Resources

githubhttps://github.com/viczaca/react-json-schema-builder ↗

packagereact-json-schema-builder ↗

homepagehttps://github.com/viczaca/react-json-schema-builder ↗