Components
Client Only
Installation
pnpm dlx @docyrus/cli add @docyrus/ui-json-schema-formRequired Packages(1 package)
pnpm add @tanstack/react-formUI Primitives(2 components)
npx shadcn@latest add button cardUsage
import {
JsonSchemaForm
} from "@docyrus/ui/components/json-schema-form";
<JsonSchemaForm
mode="create"
schema={...}
data={...}
mode="create"
disabled
submitLabel="..."
onChange={() => {}}
onSubmit={() => {}}
emptyState={...}
ref={...}
/>Mode
| Mode | Description |
|---|---|
create | Create — space-y-6 |
edit | Edit — space-y-6 |
view | View — space-y-6 |
API Reference
| Prop | Type | Default |
|---|---|---|
mode | "create" | "edit" | "view" | "default" |
schema | JsonSchema | — |
data | JsonSchemaFormData | null | — |
mode | JsonSchemaFormMode | — |
disabled | boolean | — |
submitLabel | string | — |
onChange | (value: JsonSchemaFormData) => void | — |
onSubmit | (value: JsonSchemaFormData) => void | Promise<void> | — |
emptyState | ReactNode | — |
ref | Ref<HTMLDivElement> | — |
className | string | — |
Json Schema Designer
A row-based JSON Schema designer ported from extend-hq's schema-builder. Edit property name, type, description and enum values inline; add children directly from each container; preview the live JSON Schema in the side tab.
Jsonata Editor
A three-pane workbench for writing and evaluating JSONata expressions — a JSON input pane, an expression editor with IntelliSense, and a live result pane.