SchemaForm

Render an accessible form from a JSON Schema object and submit one validated value.

Usage

<script lang="ts">
  import SchemaForm, { readSchemaFormData } from '@lostgradient/cinder/schema-form';

  const schema = {
    type: 'object',
    properties: {
      name: { type: 'string', minLength: 1 },
      count: { type: 'integer', minimum: 1 },
    },
    required: ['name', 'count'],
  };

  function save(value: unknown) {
    // Called only after validation passes.
  }

  function mirrorDraft(value: unknown) {
    // Called after every edit, even when the value is not schema-valid yet.
  }
</script>

<SchemaForm {schema} name="payload" onDraftChange={mirrorDraft} onsubmit={save} />

SchemaForm always renders a real <form> and a hidden serialized output field. After valid submission, readSchemaFormData(new FormData(form), 'payload') returns the same object delivered to onsubmit.

The three value channels have distinct ownership. value seeds internal state on mount and is not a live binding, so later value changes do not discard active edits. onDraftChange reports the complete current draft after each edit, before schema validation, so consumers can mirror nested or temporarily invalid values. In-progress numeric editors and temporarily unparseable JSON fields are reported as their current raw text until the value commits or parses successfully. onsubmit reports only schema-valid output after submission.