1.13.0Now on npm — read the release notes→Declare the form.
Declare the form.
FieldCraft renders the rest.
A schema-driven form engine for React. Multi-step navigation, conditional logic, validation, computed fields and drafts — all from one typed object you can version, diff and review.
{
"id": "event-registration",
"settings": {
"showProgress": true,
"allowDraftSave": true
},
"sections": [
{
"id": "attendee",
"title": "Attendee",
"questions": [
{
"id": "name",
"type": "short_text",
"label": "Full name",
"required": true
},
{
"id": "email",
"type": "email",
"label": "Work email",
"required": true
},
{
"id": "ticket",
"type": "single_select",
"label": "Ticket",
"options": [
{
"label": "Standard",
"value": "standard"
},
{
"label": "Workshop",
"value": "workshop"
}
]
},
{
"id": "diet",
"type": "short_text",
"label": "Dietary needs",
"showIf": {
"field": "ticket",
"operator": "eq",
"value": "workshop"
}
}
]
},
{
"id": "payment",
"title": "Payment",
"questions": [
{
"id": "card",
"type": "short_text",
"label": "Card number",
"required": true
}
]
}
]
}How it works
Install, describe, render.
01
Install
One package: the engine and the React renderer.
$ npm i @squaredr/fieldcraft-react
02
Describe the form
Plain JSON — versionable, diffable, reviewable in a pull request.
const schema = {
id: "signup",
questions: [ … ]
}
03
Render
One component. Server-rendering safe, React 18 and 19.
<FormEngineRenderer
schema={schema}
onSubmit={save}/>
Batteries included
The parts you would otherwise write twice.
Four behaviours that are tedious to build by hand and easy to get subtly wrong. Each one is already a line of schema.
01Drafts that survive a closed tabOn unless disabled
settings.allowDraftSave: true
options.autoSaveIntervalMs: 2000
02Prefill from the URLFixed precedence
question.config.defaultValue
settings.prefill.source: "both"
03Broken schemas fail at bootBefore first render
validateSchema(schema)
throws: FormEngineSchemaError
04Expressions, never evalOwn parser
expression: "{qty} * {price}"
functions: round · min · max · abs
Demos
Easier to show than to explain.
Four behaviours the engine handles for you, running here on this page — not screenshots. Fill them in, get them wrong, submit them.
enginefieldcraft-react
fields18
operators25
Multi-step forms
Sections become steps. Progress, forward and back navigation are built in. Each step can declare its own showIf condition so the flow adapts to previous answers.
Schema that does this
settings.showProgress: true
settings.progressStyle: "steps"
section.showIf: { … }
Multi-step forms· liveRunning
Try itFill a step, then press Continue
Architecture
Two layers, four packages.
The engine is plain TypeScript with no UI dependencies. The React renderer sits on top of it and adds the field components. Install whichever one you need.
Layer 02 · renderer · MITReact
@squaredr/fieldcraft-react
Accessible components for every field type, themeable from CSS custom properties.
Layer 01 · engine · MITFramework-free
@squaredr/fieldcraft-core
Validation, conditions, navigation, drafts and submission. Zero UI dependencies.
Built for React. Open to every framework.
Layer 01 has no UI dependencies, and the React renderer is MIT in the same repo — a working reference for anyone writing one for Vue, Svelte or Solid.
Contribute on GitHub →Templates
Or start from one of these.
Schemas written for real forms, cleaned up. Copy one, change the fields, render it.
general5 fields · 2 sections
Contact Form
A two-step contact form with personal details and inquiry fields. Includes name, email, phone, subject dropdown, and message.
contact-form
feedback12 fields · 3 sections
Feedback Survey
A comprehensive customer feedback survey with NPS, ratings, Likert scales, feature usage tracking, and conditional follow-up. Three sections covering satisfaction, specifics, and open-ended feedback.
feedback-survey
hr18 fields · 3 sections
Job Application
A comprehensive 3-section job application form with personal info, position preferences (role, type, salary, remote), experience details, cover letter, and consent.
job-application
13 morein the templates package — all MIT, all editable
Scope
Things you should know before you rely on it.
Better to find these here than three days into a project.
5 open gaps
Every one of these is on the roadmap or explicitly out of scope — none of them is an oversight. If one of them blocks you, say so in an issue and it moves up.01
React only
The core is framework-free by design and ships no UI, but React is the only renderer that exists today. Another framework means writing that layer yourself.
02
Schemas are written, not drawn
There is no visual builder. Schemas are hand-written, or started from one of the 16 templates and edited.
03
Three adapters, not an ecosystem
Postgres, Supabase and webhook are included. Anywhere else is a small adapter you write — the interface is one method, but it is still work.
04
Docs cover the common path
Getting started and the field reference are complete. The deeper guides are thin, and some of the API is documented only by its TypeScript types.
05
Releases are irregular
This is one developer working evenings and weekends. Issues get read; timelines are not promised.
Status
Where it stands right now.
Stated plainly, and kept current — the release figure below comes from the changelog, not from this page.
Latest release
@squaredr/fieldcraft-react 1.13.0
What I’m doing next
Writing down how the engine actually works, so the next fix doesn’t start with an hour of reading my own code.
If you want to help
Use it and tell me what broke. Bug reports with a schema attached are the most useful thing I get.
Try it
Install it, write a schema, render a form.
Nothing to sign up for. It’s on npm, the source is on GitHub, and the licence is MIT.
The four packages
@squaredr/fieldcraft-core
Engine, types, validation, expressions
MIT
@squaredr/fieldcraft-react
Renderer, steps, drafts, themes
MIT
@squaredr/fieldcraft-adapters
Postgres, Supabase, webhook
MIT
@squaredr/fieldcraft-templates
16 starter schemas
MIT