Docs / Data and layout / Schema Builder

Schema Builder

Svelte 5 port of the Extend UI schema-builder: a visual JSON-schema field builder with native drag-and-drop reorder, nested objects, arrays, enums, required flags, and a live serialized output.

Dark mode

Schema Builder

Required

{
  "type": "object",
  "properties": {
    "vendor": {
      "type": "string",
      "description": "Invoice vendor"
    },
    "total": {
      "type": "number"
    }
  },
  "required": [
    "total"
  ]
}

Differences from upstream

Exported as both SchemaBuilder and the upstream name SchemaBuilderPanel; className and class are both accepted.
Theme: isDark follows the repo-wide parent-controlled contract. The upstream theme prop ("light" | "dark") is still accepted and wins when given; without either, the builder is light (it does not read an app theme).
The form and the serialized JSON show side by side instead of in Form and JSON tabs, and the JSON is plain text instead of a highlighted code block.
Drag-and-drop reorders top-level fields only (native HTML5 drag-and-drop instead of dnd-kit). Dragging fields into or out of nested objects, reordering enum values, and collapsing nested editors are not ported.
The add buttons read Add field and Add nested field instead of upstream's Add property.
Port additions: a per-field required flag (upstream has none), serialized as a required list on its parent object at every level, including array item objects; onSerializedSchemaChange; and the Remove field and Remove enum value buttons (upstream has no way to remove a field or an enum value).
SchemaJsonView is exported like upstream, but renders plain preformatted JSON instead of the syntax-highlighted, virtualized code file.
Port-only exports, the component under its port name, its props type, and the field factory helpers and type lists: SchemaBuilder, SchemaBuilderProps, createSchemaBuilderEnumValue, createSchemaBuilderId, createSchemaBuilderProperty, normalizePropertyForType, SCHEMA_BUILDER_ARRAY_ITEM_TYPES, and SCHEMA_BUILDER_FIELD_TYPES.

Back to all components