SchemaForms Studio

A forma mais rápida de experimentar o SchemaForms é criar um app Studio com um único comando — sem configuração manual.

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

Depois abra 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 os   │  Step → Container →      │  Configure   │  [JSON] [Preview] │
│ campos aqui  │  Fields (grid 12 colunas)│  a seleção   │                   │
└──────────────┴──────────────────────────┴──────────────┴───────────────────┘

Painel	Descrição
Palette	Todos os 30+ tipos de campo. Arraste para o Canvas.
Canvas	Canvas drag-and-drop. Estrutura: Step → Container → Fields.
Config Panel	Configure o campo selecionado (label, obrigatório, opções, condicionais…).
JSON	FormSchema JSON gerado ao clicar em Save / Export. Inclui botão Copiar.
Preview	Renderiza o schema salvo com <FormRenderer> — preencha e envie 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 Save / Export — o painel JSON atualiza com o novo FormSchema
4. Alterne para Preview para preencher o formulário e ver os dados enviados
5. Copie o JSON e use no seu app — ou edite src/exampleSchema.ts diretamente

O schema é salvo automaticamente no localStorage, persistindo entre reloads.

---

Estrutura do projeto gerado

meu-app/
├── src/
│   ├── App.tsx           ← Shell do Studio
│   ├── exampleSchema.ts  ← FormSchema de exemplo — 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 formulário em vez do formulário demo.

---

Dependências instaladas

Pacote	Papel
@schema-forms-data/core	Tipos TypeScript e enums
@schema-forms-data/builder	BuilderProvider, Canvas, Palette, ConfigPanel
@schema-forms-data/renderer	FormRenderer
lucide-react	Ícones usados pelo builder
react-hook-form	Estado do formulário (peer dep do renderer)

---

Migrando para produção

Com o schema pronto, copie o JSON para o seu app de produção e use o <FormRenderer> diretamente:

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

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

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

Veja Primeiros Passos para a API completa do FormRenderer.