create-schema-form

Scaffold a SchemaForms Studio — a Vite + React app with a drag-and-drop form builder, live JSON viewer, and form preview — in one command.

Usage

npx create-schema-form my-app
cd my-app
npm install
npm run dev

Then open http://localhost:5173.

What you get

my-app/
├── src/
│   ├── App.tsx           ← Studio shell (builder + JSON + preview)
│   ├── exampleSchema.ts  ← Starter FormSchema — edit or replace
│   ├── App.css
│   ├── index.css
│   └── main.tsx
├── index.html
├── vite.config.ts
├── tsconfig.json
└── package.json

Studio layout

┌─────────────────────────────────────────────────────────────────────┐
│  SchemaForms Studio                         [JSON] [Preview]  Save  │
├──────────────┬───────────────────────┬──────────────┬───────────────┤
│   Palette    │       Canvas          │   Config     │  JSON / Form  │
│              │  drag fields here     │   Panel      │  Preview      │
└──────────────┴───────────────────────┴──────────────┴───────────────┘

• Palette — drag field types onto the canvas
• Canvas — build multi-step forms visually (Step → Container → Fields)
• Config Panel — configure the selected field
• JSON — see the live FormSchema JSON; click Copy to grab it
• Preview — actually fill in the form and see the submitted data

Click Save / Export to convert the current canvas state to a FormSchema and update both panels. The schema is also saved to localStorage so it survives a page refresh.

Packages installed

| Package | Role | | ----------------------------- | ----------------------------------------------------- | | @schema-forms-data/core | TypeScript types & enums | | @schema-forms-data/builder | BuilderProvider, Canvas, Palette, ConfigPanel | | @schema-forms-data/renderer | FormRenderer |

Docs

https://schemaformsdata.github.io/schema-forms-data