Installation
One package gets you the engine and the renderer. zod is the only peer dependency — if your project already has it, nothing is duplicated.
Add the package
The React package includes the core engine as a dependency. One install gives you everything.
pnpm add @squaredr/fieldcraft-reactnpm install @squaredr/fieldcraft-reactyarn add @squaredr/fieldcraft-reactRequirements
| Requirement | Supported |
|---|---|
| React | 18.2 · 19.x |
| Node (build only) | ≥ 18.17 |
| zod (peer) | ^3.22 |
| Rendering | SSR · RSC · SPA |
If your project doesn't already have zod installed, add it:
pnpm add zodOptional packages
| Package | What it adds | Licence |
|---|---|---|
@squaredr/fieldcraft-core | Engine only — no React. Use this if you're building a custom renderer or running validation server-side. | MIT |
@squaredr/fieldcraft-adapters | Submission targets: HTTP, Supabase, Postgres, webhooks. Includes field-level encryption and retry logic. | MIT |
@squaredr/fieldcraft-templates | 16 production-ready form schemas across 7 categories — contact, feedback, NPS, job application, event registration, and more. Copy and edit. | MIT |
@squaredr/fieldcraft-pro | Drag-and-drop visual builder, schema editor, theme editor, response viewer. Coming soon. | Commercial |
Install any combination:
pnpm add @squaredr/fieldcraft-adapters @squaredr/fieldcraft-templatesVerify the install
The engine validates schemas at creation time. The fastest way to verify the install is to render a minimal form:
import { FormEngineRenderer } from '@squaredr/fieldcraft-react'const schema = { id: 'install-test', version: '1.0.0', title: 'Install test', sections: [ { id: 'main', title: 'Quick check', questions: [ { id: 'name', type: 'short_text', label: 'Your name', required: true, }, ], }, ], submitAction: { type: 'callback' },}export default function TestPage() { return ( <FormEngineRenderer schema={schema} onSubmit={(response) => { console.log('Submitted:', response) }} /> )}If the form renders with a text input and a submit button, the install is working. If the schema is invalid, the engine throws FormEngineSchemaError with a descriptive message at render time — you won't get a silent failure.
TypeScript
All packages ship with TypeScript declarations. The core schema type is exported from both packages:
import type { FormEngineSchema } from '@squaredr/fieldcraft-core'// orimport type { FormEngineSchema } from '@squaredr/fieldcraft-react'Next steps
Build your first real form in Your first form, or jump to Schema anatomy to understand the full schema structure.
Related reading
- Introducing FieldCraft — what FieldCraft is and why it exists
- Why Schema-Driven? — the architecture behind FieldCraft