A side project · MIT licensed · early

Forms are just code, so I wrote them that way.

FieldCraft is a schema-driven form engine for React. You describe a form once in JSON and it handles validation, conditional logic, multi-step navigation, drafts and submission.

I built it to learn how to publish and maintain npm packages. It works, I use it, and the source is MIT if it’s useful to you.

Read the docs →
npm i @squaredr/fieldcraft-reactCOPY
MIT
TypeScript
React 18 & 19
Live
Revealed by showIf
1,151
Tests passing
27
Built-in validators
25
Condition operators
~27 KB
Core, gzipped
4
Packages
Why I built it

I wanted to see how a package of mine holds up once it’s published.

So I picked something big enough to find out: a form engine. Forms have enough real problems — validation, branching, steps, drafts, submission — that you can’t fake your way through them.

Somewhere in the middle I stopped writing things down. Coming back to it now, I spend more time relearning my own code than adding to it, which is why fixes and features have slowed. This page is part of fixing that.

If you’re here from a CV or a link: the interesting part isn’t the marketing, it’s the code, the tests, and the parts I got wrong. Those are all in the repo.

Read the source →
How it works

Three steps, and no account anywhere.

01
Install
One package pulls the engine and the React renderer. The engine depends only on zod. The renderer adds Radix for the accessible primitives and dompurify for sanitising rich text — deliberately, so I’m not maintaining my own dropdown or writing my own sanitiser.
$ npm i @squaredr/fieldcraft-react
02
Describe the form
Sections, questions, conditions and validation are plain JSON — versionable, diffable, reviewable in a pull request.
const schema = {
id: "signup",
questions: [ … ]
}
03
Render
One component. Server-rendering safe, works in React 18 and 19, themeable from a preset or your own tokens.
<FormEngineRenderer
schema={schema}
onSubmit={save}/>
Demos

Easier to show than to explain.

Four behaviours the engine handles for you, running here on this page: steps, conditional fields, validation and computed values.

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.

settings.showProgress: true
settings.progressStyle: "steps"
section.showIf: { ... }
1 / 3

Contact

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
Pre-built, accessible React components for every field type. Themeable with CSS custom properties or Tailwind presets.
Layer 01 · engine · MITFramework-free
@squaredr/fieldcraft-core
Pure TypeScript engine — validation, conditions, navigation, drafts, and submission. Zero UI dependencies.
Built for React. Open to every framework.
The core engine is pure TypeScript with zero UI dependencies. React is the official renderer, but the engine API is designed for any framework. Vue, Svelte, Angular, Solid — community renderers are welcome and the architecture supports them out of the box.
Contribute on GitHub →
Reading the diagram
Each box nests inside the one above it. The inner-most layer has no dependencies; each outer layer adds capability. Install only the outermost layer you need — its dependencies come along automatically.
@squaredr/fieldcraft-adapters
Plug-in adapters for loading schemas and submitting responses over HTTP, from localStorage, or from a custom source. Depends on core types only — no React.
@squaredr/fieldcraft-templates
Ready-made form schemas for common use cases — contact, feedback, onboarding, and more. Drop one into your project and customise.
Pick your entry point
CoreBring your own UI. You get the engine, validation, and state management.
ReactFull renderer with accessible, themeable components out of the box.
What’s missing

Things you should know before you rely on it.

I’d rather you find these here than three days into a project.

React only, for now
The core is framework-free by design, but React is the only renderer that exists. Anything else, you’d be writing yourself.
No visual builder you can install
One exists and runs on localhost — I use it to write schemas. Making it something other people can rely on is a different amount of work, and I’ll only do it if people actually want it. For now, schemas are written by hand or copied from a template.
Four adapters, not a plugin ecosystem
http, supabase, postgres and webhook. Anywhere else, you write a small adapter — the interface is simple, but it’s still work.
Docs cover the basics
Getting started and the field reference are there. The deeper guides are thin, and some of the API is only documented by its types.
Releases are irregular
This is evenings and weekends. If you file an issue I’ll read it; I can’t promise when I’ll get to it.
What I learned

Mostly that shipping is the hard part.

The engine was the fun bit. Everything around it is where the actual lessons were.

Publishing is a whole skill

A scoped npm org, four packages that depend on each other, build outputs that work in both ESM and CJS, and versions that don’t contradict one another. None of that is writing features.

Tests are how you come back

1,151 tests weren’t for correctness so much as for me — they’re the only reason I can still change the engine after forgetting how it works.

Validate the input, not the user

Checking the schema at boot instead of trusting it at runtime removed a whole category of confusing bugs. Obvious afterwards; wasn’t obvious to me at the start.

Write it down as you go

The main thing I’d do differently. Undocumented decisions cost me more time than any bug did.

Templates

Or start from one of these.

Schemas I wrote 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.

contactsupportgeneral
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.

feedbacksurveynps
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.

hrjob-applicationrecruiting
Explore all templates →
Status

Where it stands right now.

Latest release
@squaredr/fieldcraft-core 1.7.0
Published 2026-08-27. Full history in the changelog.
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.
Open an issue →Changelog →
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.

Read the docs →View on GitHub
The four packages
@squaredr/fieldcraft-core
Engine, types, validation, expressions
MIT
@squaredr/fieldcraft-react
Renderer, steps, drafts, themes
MIT
@squaredr/fieldcraft-adapters
HTTP, Supabase, Postgres, webhooks
MIT
@squaredr/fieldcraft-templates
Starter schemas for common forms
MIT