SchemaForms Studio

The fastest way to try SchemaForms Data is to create a local Studio with a single command — no manual configuration required.

npx @schema-forms-data/create my-app
cd my-app
npm install
npm run dev

Open http://localhost:5173.

---

What you get

A Vite + React app with four side-by-side panels:

┌──────────────┬──────────────────────────┬──────────────┬───────────────────┐
│   Palette    │         Canvas           │    Config    │   JSON / Preview   │
│              │                          │    Panel     │                   │
│ Drag fields  │  Step → Container →      │  Configure   │  [JSON] [Preview] │
│ here         │  Fields (12-col grid)     │  selected    │                   │
└──────────────┴──────────────────────────┴──────────────┴───────────────────┘

Panel	Description
Palette	All 30+ field types + draggable preset blocks
Canvas	Drag-and-drop canvas. Structure: Step → Container → Fields
Config Panel	Configure the selected item (label, required, options, conditions…)
JSON	Live FormSchema JSON after clicking Save / Export
Preview	Renders the saved schema with <FormRenderer> — fill and submit for real

---

Workflow

1. Drag a field from the Palette to the Canvas
2. Click the field to configure it in the Config Panel
3. Click Save / Export — the JSON panel updates with the new FormSchema
4. Switch to Preview to fill out the form and see the submitted data
5. Copy the JSON and use it in your app — or edit src/exampleSchema.ts directly

The schema is automatically saved to localStorage, persisting across page reloads.

---

Generated project structure

my-app/
├── src/
│   ├── App.tsx           ← Studio shell
│   ├── exampleSchema.ts  ← Initial FormSchema — edit here
│   ├── App.css
│   ├── index.css
│   └── main.tsx
├── index.html
├── vite.config.ts
├── tsconfig.json
└── package.json

Edit src/exampleSchema.ts to start with your own form structure.

---

Installed dependencies

Package	Purpose
@schema-forms-data/core	TypeScript types and enums
@schema-forms-data/templates	Visual templates and preset blocks
@schema-forms-data/renderer	<FormRenderer> — renders the schema
@schema-forms-data/builder	Drag-and-drop builder
@schema-forms-data/ui	Shared UI components
react-hook-form	Form engine (peer dep)
lucide-react	Icons
@dnd-kit/*	Drag-and-drop

---

Studio features

Undo / Redo

Use Ctrl+Z / Ctrl+Y (or Cmd on Mac) to undo/redo on the canvas.

Templates

The template selector at the top of the preview panel lets you visualise the form in different visual styles.

Export JSON

Click Save to export the current FormSchema as JSON. Use the Copy button to copy it directly to the clipboard.

Interactive preview

In the Preview panel, you can fill out and submit the form exactly as an end user would. Submitted values appear in an overlay after submission.

---

Moving to production

Once you have a schema you like, copy the JSON into your production app and use <FormRenderer> directly:

npm install @schema-forms-data/renderer react-hook-form lucide-react

import { FormRenderer } from "@schema-forms-data/renderer";
import mySchema from "./mySchema.json";

export default function MyForm() {
  return (
    <FormRenderer
      schema={mySchema}
      onComplete={async (values) => {
        await fetch("/api/submit", {
          method: "POST",
          body: JSON.stringify(values),
        });
      }}
    />
  );
}

See Getting Started for the full FormRenderer API.

npx @schema-forms-data/create my-app
cd my-app
npm install
npm run dev

Acesse http://localhost:5173.

---

O que você recebe

Um app Vite + React com quatro painéis lado a lado:

┌──────────────┬──────────────────────────┬──────────────┬───────────────────┐
│   Palette    │         Canvas           │    Config    │   JSON / Preview  │
│              │                          │    Panel     │                   │
│ Arraste      │  Step → Container →      │  Configure   │  [JSON] [Preview] │
│ campos aqui  │  Campos (grid 12 colunas)│  selecionado │                   │
└──────────────┴──────────────────────────┴──────────────┴───────────────────┘

Painel	Descrição
Palette	Todos os 30+ tipos de campo + preset blocks arrastáveis
Canvas	Canvas drag-and-drop. Estrutura: Step → Container → Campos
Config Panel	Configure o item selecionado (label, required, opções, condições…)
JSON	FormSchema JSON ao vivo após clicar em Salvar / Exportar
Preview	Renderiza o schema salvo com <FormRenderer> — preencha e submeta de verdade

---

Fluxo de trabalho

1. Arraste um campo da Palette para o Canvas
2. Clique no campo para configurá-lo no Config Panel
3. Clique em Salvar / Exportar — o painel JSON atualiza com o novo FormSchema
4. Mude para Preview para preencher o formulário e ver os dados submetidos
5. Copie o JSON e use na sua app — ou edite src/exampleSchema.ts diretamente

O schema é salvo em localStorage automaticamente, persistindo entre recarregamentos.

---

Estrutura do projeto gerado

my-app/
├── src/
│   ├── App.tsx           ← Shell do Studio
│   ├── exampleSchema.ts  ← FormSchema inicial — edite aqui
│   ├── App.css
│   ├── index.css
│   └── main.tsx
├── index.html
├── vite.config.ts
├── tsconfig.json
└── package.json

Edite src/exampleSchema.ts para começar com a estrutura do seu próprio formulário.

---

Dependências instaladas

Pacote	Função
@schema-forms-data/core	Tipos TypeScript e enums
@schema-forms-data/templates	Templates visuais e preset blocks
@schema-forms-data/renderer	<FormRenderer> — renderiza o schema
@schema-forms-data/builder	Builder drag-and-drop
react-hook-form	Engine do formulário
lucide-react	Ícones
@dnd-kit/*	Drag-and-drop

---

Funcionalidades do Studio

Undo / Redo

Use Ctrl+Z / Ctrl+Y (ou Cmd no Mac) para desfazer/refazer no canvas.

Templates

O seletor de template no topo do painel de preview permite visualizar o formulário em diferentes estilos visuais.

Export JSON

Clique em Salvar para exportar o FormSchema atual como JSON. Use o botão Copiar para copiar direto para o clipboard.

Preview interativo

No painel Preview, você pode preencher e submeter o formulário exatamente como o usuário final faria. Os valores submetidos aparecem em um overlay após o submit. | @schema-forms-data/builder | BuilderProvider, Canvas, Palette, ConfigPanel | | @schema-forms-data/renderer | FormRenderer | | lucide-react | Icons used by the builder | | react-hook-form | Form state (peer dep of renderer) |

---

Moving to production

Once you have a schema you like, copy the JSON into your production app and use <FormRenderer> directly:

npm install @schema-forms-data/renderer react-hook-form lucide-react

import { FormRenderer } from "@schema-forms-data/renderer";
import mySchema from "./mySchema.json";

export default function MyForm() {
  return (
    <FormRenderer
      schema={mySchema}
      onComplete={async (values) => {
        await fetch("/api/submit", {
          method: "POST",
          body: JSON.stringify(values),
        });
      }}
    />
  );
}

See Getting Started for the full FormRenderer API.