Mischief

21 / Documents

Schema Builder

Build the shape you want extracted from a document. Fields carry a name, type, description, and requirement, and object and array fields nest.

Live previewSource

Installation

Copy the source into your project, or keep it behind a package.

Copy the component into your project and make it yours.

Usage

export function Extraction() {
  return (
    <SchemaBuilder
      defaultFields={[{ id: "total", name: "total", type: "number" }]}
      onFieldsChange={saveSchema}
    />
  )
}

API

fields, defaultFieldsSchemaField[]The schema, controlled or uncontrolled.
onFieldsChange(fields: SchemaField[]) => voidRuns on every edit.
typesreadonly SchemaFieldType[]The type options offered. Defaults to string, number, boolean, date, object, and array.
maxDepthnumberHow far object and array fields may nest. Defaults to 3.
createId() => stringSupplies ids for new fields when you need them stable.

Accessibility

Every input has a label naming the field it belongs to, so a screen reader user knows which row they are editing rather than hearing a run of unlabelled boxes. Nesting controls say which field they open, and remove buttons name the field they delete. Only object and array fields offer nesting, and nesting stops at maxDepth.

Dependencies

lucide-react