Forms

JsonSchemaEditor

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

import { JsonSchemaEditor } from '@lostgradient/cinder/json-schema-editor';
formeditor
01

Overview

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

Usage

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

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.
Live preview
02

When to use

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.
03

Examples

Basic JSON Schema editor

Edit a flat object schema with form, JSON, and diff views.

Composition (oneOf)

A schema using oneOf alongside type — both render as separate sections.

Invalid initial schema

When the input cannot be parsed, the form is disabled and the JSON view is the entry point.

04

Props

Props for json-schema-editor
Name Type Default Required Bindable Description
view 'form' | 'json' | 'diff' 'form' bind Active view: form / json / diff. Bindable.