README.md

morphos/react-schema-editor

Overview

React editor for building and maintaining JSON Schemas in a web UI.

The editor follows the same component/label override pattern as morphos/react, including optional Bootstrap component packs.

Installation

react is declared as an optional peer dependency. Install it (and react-dom) in your app:

npm install react react-dom

Install morphos if it is not already part of the app:

npm install morphos

Quick start

import { useState } from 'react';
import { SchemaEditor } from 'morphos/react-schema-editor';
import type { JsonSchema } from 'morphos/react-schema-editor';

const initialSchema: JsonSchema = {
	type: 'object',
	properties: {
		invoiceNumber: { type: 'string' },
		totalAmount: { type: 'number' },
		billTo: {
			type: 'object',
			properties: {
				name: { type: 'string' }
			}
		},
		lines: {
			type: 'array',
			items: {
				type: 'object',
				properties: {
					sku: { type: 'string' },
					quantity: { type: 'number' }
				}
			}
		}
	},
	required: ['invoiceNumber']
};

function Example() {
	const [schema, setSchema] = useState<JsonSchema>(initialSchema);

	return (
		<>
			<SchemaEditor value={schema} onChange={setSchema} />
			<pre>{JSON.stringify(schema, null, 2)}</pre>
		</>
	);
}

Themes

Built-in defaults render bare HTML with dm-schema-editor-* class hooks for styling. Bootstrap themes are available as separate subpath exports:

import bootstrap34 from 'morphos/react-schema-editor/bootstrap34';
import bootstrap53 from 'morphos/react-schema-editor/bootstrap53';

<SchemaEditor components={bootstrap53} />

The Bootstrap themes only emit class names. Load the corresponding Bootstrap CSS in your app. Individual components are also exported from each theme if you want to replace only one slot:

import { Row, TextFieldSetting } from 'morphos/react-schema-editor/bootstrap53';

API

<SchemaEditor
	value={schema}
	onChange={setSchema}
	hideRootElement
	exposeTitle
	exposeDescription
	readOnly
	components={components}
	labels={labels}
/>

Prop	Type	Description
value	JsonSchema	Controlled schema value.
defaultValue	JsonSchema	Uncontrolled initial schema. Used once on mount.
onChange	(next: JsonSchema) => void	Called after each edit with the complete current schema.
hideRootElement	boolean	Hide the root row and render only the root object's properties or array item editor.
exposeTitle	boolean	Show each field's title in the main field row.
exposeDescription	boolean	Show each field's description in the main field row.
readOnly	boolean	Render the schema without allowing edits or calling onChange.
components	Partial<SchemaEditorComponents>	Override any built-in UI slot.
labels	Partial<SchemaEditorLabels>	Override any user-visible strings.

Use hideRootElement when the parent UI already shows the root context. The root schema still comes from value or defaultValue, including its type, properties, and items.

<SchemaEditor
	value={schema}
	onChange={setSchema}
	hideRootElement
/>

The component exposes a ref handle:

interface SchemaEditorHandle {
	readonly value: JsonSchema;
}

The editor supports object properties, required flags, nullable fields, scalar types, nested objects, arrays, and array item schemas. String schemas can also define format; when present, the type dropdown adds the capitalized format as a separate option. Selecting the standard String option clears the field's format. String schemas with a non-empty enum show Enum in the type dropdown. Selecting String for an enum field only changes the dropdown display and leaves the enum unchanged; removing the enum from field settings returns the dropdown to String. Schema enum and examples values are edited as multi-line values where each line becomes one value.

Field settings are rendered through separate theme components:

Component	Purpose
SettingsGroup	Wraps the expanded settings area.
TextFieldSetting	Renders text-based settings such as title, description, min/max, and pattern.
CheckboxFieldSetting	Renders boolean settings such as nullable.
TextareaFieldSetting	Renders multi-line settings such as enum and examples.

Override these components to replace the inline settings block with a custom panel, popover, or modal while keeping the editor state handling unchanged.