JsonSchemaEditor

Multi-view editor for authoring JSON Schema documents with form, raw JSON, and diff modes plus undo history and validation.

Usage

<script lang="ts">
  import JsonSchemaEditor from '@lostgradient/cinder/json-schema-editor';
  import type { JsonSchemaValue } from '@lostgradient/cinder/json-schema-editor';

  let schema = $state<JsonSchemaValue | string>({ type: 'string' });
</script>

<JsonSchemaEditor
  id="schema-editor"
  {schema}
  onValueChangeRequest={({ schema: nextSchema }) => (schema = nextSchema)}
/>

State ownership

Pass schema with onValueChangeRequest when the parent owns the current schema. Every committed edit asks the parent to update its value, and a later schema value from the parent becomes authoritative. The handler may return the accepted or replacement schema, including through a promise, to settle a request without changing the prop—for example, when rejecting it with the same current schema. While a request is pending, a later commit is restored to the authoritative parent schema instead of creating a second request. Use the optional onSchemaChange callback to observe changes the parent accepts. Supplying schema without onValueChangeRequest preserves the previous locally managed behavior: it is an initial value, not a controlled contract.

<JsonSchemaEditor
  id="controlled-schema-editor"
  {schema}
  onValueChangeRequest={({ schema: nextSchema }) => (schema = nextSchema)}
/>

Pass defaultSchema when the editor should own changes after initialization. Omitting both starts with an empty JSON Schema. Do not pass schema and defaultSchema together.

<JsonSchemaEditor id="local-schema-editor" defaultSchema={{ type: 'object', properties: {} }} />

Guidance

Use When

• Letting users edit a JSON Schema with a guided form alongside the raw source.
• Reviewing schema changes against a baseline via the built-in diff view.

Avoid When

• Editing arbitrary free-form JSON with no schema semantics — use a plain code editor instead.