# Json Schema Form
URL: /docs/web/components/json-schema-form

Json Schema Form component with multiple variants and sizes.

**Demo:**

```tsx
'use client';
// @custom-demo

import { useState } from 'react';

import { JsonSchemaForm } from '@docyrus/ui/components/json-schema-form';
import { type JsonSchema } from '@docyrus/ui/components/json-schema-designer';
import { cn } from '@docyrus/ui/primitives/lib/utils';
import { Button } from '@docyrus/ui/primitives/ui/button';

const SAMPLE_SCHEMA: JsonSchema = {
  type: 'object',
  title: 'Project Intake',
  description: 'Capture a nested project brief with owners, preferences, and repeating milestones.',
  required: [
    'projectName',
    'priority',
    'owner',
    'milestones'
  ],
  properties: {
    projectName: { type: 'string', minLength: 2 },
    summary: {
      type: 'string',
      format: 'textarea',
      maxLength: 500,
      description: 'A concise overview that explains what the team is shipping.'
    },
    priority: {
      type: 'string',
      enum: [
        'low',
        'medium',
        'high',
        'critical'
      ],
      description: 'Four options or less render as a radio group.'
    },
    stage: {
      type: 'string',
      enum: [
        'discovery',
        'design',
        'build',
        'qa',
        'launch',
        'retrospective'
      ],
      description: 'More than four options automatically switch to a select field.'
    },
    launchDate: { type: 'string', format: 'date' },
    owner: {
      type: 'object',
      required: ['name', 'email'],
      properties: {
        name: { type: 'string' },
        email: { type: 'string', format: 'email' },
        timezone: { type: 'string' }
      }
    },
    milestones: {
      type: 'array',
      minItems: 1,
      items: {
        type: 'object',
        required: ['title', 'dueDate'],
        properties: {
          title: { type: 'string' },
          dueDate: { type: 'string', format: 'date' },
          status: {
            type: 'string',
            enum: ['todo', 'in_progress', 'done']
          }
        }
      }
    },
    tags: {
      type: 'array',
      items: {
        type: 'string'
      },
      description: 'Primitive arrays also use SchemaRepeater.'
    }
  }
};

const SAMPLE_DATA = {
  projectName: 'Workspace Permissions',
  summary: 'Introduce scoped role assignments and delegated admin controls across workspace boundaries.',
  priority: 'high',
  stage: 'build',
  launchDate: '2026-06-15',
  owner: {
    name: 'Anil Beyazoglu',
    email: 'anil@example.com',
    timezone: 'Europe/Istanbul'
  },
  milestones: [
    {
      title: 'Access model approved',
      dueDate: '2026-05-30',
      status: 'done'
    },
    {
      title: 'Admin console rollout',
      dueDate: '2026-06-10',
      status: 'in_progress'
    }
  ],
  tags: ['security', 'rbac', 'workspace']
};

export function JsonSchemaFormDemo() {
  const [mode, setMode] = useState<'create' | 'edit' | 'view'>('edit');
  const [data, setData] = useState(SAMPLE_DATA);

  return (
    <div className="w-full space-y-4">
      <div className="flex flex-wrap items-center gap-2">
        {(['create', 'edit', 'view'] as const).map(value => (
          
        ))}
      </div>

      <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_360px]">
        <div className={cn('rounded-2xl border bg-background p-4', mode === 'view' && 'bg-card/40')}>
          <JsonSchemaForm
            schema={SAMPLE_SCHEMA}
            data={mode === 'create' ? undefined : data}
            mode={mode}
            onChange={nextValue => setData(nextValue as typeof SAMPLE_DATA)}
            onSubmit={async nextValue => setData(nextValue as typeof SAMPLE_DATA)}
            submitLabel="Update project" />
        </div>

        <pre className="overflow-auto rounded-2xl border bg-muted/30 p-4 text-xs leading-6">
          {JSON.stringify(data, null, 2)}
        </pre>
      </div>
    </div>
  );
}
```

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/ui-json-schema-form
```

**Dependencies:**
- [class-variance-authority](https://www.npmjs.com/package/class-variance-authority)
- [@tanstack/react-form](https://www.npmjs.com/package/@tanstack/react-form)

## Usage

```tsx
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` | — |