Open source · MIT licensed · self-hosted

Forms are code.
Treat them that way.

FieldCraft is a schema-driven form engine for React. Define a form once in JSON — validation, conditional logic, multi-step navigation, drafts and submission are handled. In your repo, on your infrastructure, with your database.

Get started →
npm i @squaredr/fieldcraft-reactCOPY
MIT
One dependency · zod
TypeScript native
React 18 & 19
Live
{
  "id": "patient-intake",
  "settings": {
    "showProgress": true
  },
  "sections": [
    {
      "id": "details",
      "title": "Patient details",
      "questions": [
        {
          "id": "name",
          "type": "short_text",
          "label": "Full name",
          "required": true
        },
        {
          "id": "email",
          "type": "email",
          "label": "Email",
          "required": true
        },
        {
          "id": "consent",
          "type": "boolean",
          "label": "Share records with my GP"
        },
        {
          "id": "gp",
          "type": "short_text",
          "label": "GP practice",
          "showIf": {
            "field": "consent",
            "operator": "eq",
            "value": true
          }
        }
      ]
    }
  ]
}
44
Field types
314
Tests passing
6
Theme presets
<15 KB
Core, minified
1
Dependency · zod
01 · The problem

Form tooling was not built for the people who ship forms.

You rent a hosted service, license an enterprise SDK, or build the whole thing yourself. Each choice costs you something you would rather keep.

Rented
Hosted form services
Your forms live on someone else’s servers and your submissions sit in their database. The monthly bill never stops, and when it does, the forms go with it.
Licensed
Enterprise form SDKs
Annual seat licensing priced for procurement departments, not for a two-person team adding an intake form to a product.
Rebuilt
Rolling your own
Input libraries handle inputs. Step navigation, conditional visibility, scoring, calculated fields, draft recovery and submission fan-out are still yours to write and maintain.
FieldCraft is the middle path: a complete form engine you install, own, and never pay rent on. MIT-licensed core and renderer. A one-time purchase if you want the visual builder.
02 · How it works

Three steps. One dependency. No account.

01
Install
One package pulls the engine and the React renderer. zod is the only runtime dependency.
$ 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.
<FormRenderer
schema={schema}
onSubmit={save}/>
03 · Architecture

Two layers. Take the one you need, leave the rest.

Each layer is a separate package — install only what your project requires. The core engine has zero UI dependencies, and the React renderer adds 44 pre-built components.

Layer 03 · Pro · coming soonUI
FieldCraft Pro
Visual form builder, theme editor, and submission dashboard. Coming soon.
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.
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-free
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.
ProVisual builder and dashboard on top of the React renderer. Coming soon.
04 · Live demos

What JSON can do. Running here, on this page.

These four demos are the engine’s core behaviours — multi-step navigation, conditional visibility, real-time validation and computed fields — running live in your browser.

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

05 · Batteries included

The parts you would otherwise write twice.

Draft persistence
Zero config
Answers are written to local storage as they change and restored on the next visit. A long intake form survives a closed tab, a refresh, or a dead battery.
Four-layer prefill
URL · props · schema
Initial values resolve in a fixed order: schema defaults, then URL parameters, then props, then explicit initial values. Campaign links and personalised forms need no extra code.
Schema validation at boot
Fail fast
Duplicate question ids, conditions pointing at fields that do not exist, and malformed expressions are reported when the form loads — in development, not in a user’s session.
Safe expressions
No eval
Calculated fields run through a purpose-built parser supporting arithmetic, comparisons and a fixed function set. A schema is data, never executable code.
06 · Production schemas

This is what a real form looks like.

{
  "id": "event-registration",
  "settings": {
    "showProgress": true,
    "progressStyle": "steps"
  },
  "sections": [
    {
      "id": "attendee",
      "questions": [
        {
          "id": "ticket",
          "type": "single_select",
          "required": true,
          "options": [ … ]
        },
        {
          "id": "dinner",
          "type": "boolean"
        },
        {
          "id": "dietary",
          "type": "dropdown",
          "showIf": {
            "field": "dinner",
            "operator": "eq",
            "value": true
          }
        }
      ]
    },
    {
      "id": "workshops",
      "showIf": {
        "field": "ticket",
        "operator": "eq",
        "value": "workshop"
      },
      "questions": [ … ]
    },
    {
      "id": "summary",
      "questions": [
        {
          "id": "subtotal",
          "type": "calculated",
          "config": {
            "expression": "…",
            "format": "currency"
          }
        },
        {
          "id": "consent",
          "type": "boolean",
          "required": true
        }
      ]
    }
  ]
}
What this schema does
Three sections, twelve fields. The ticket answer decides whether the workshop section exists at all, so the progress indicator shows two steps or three. Dietary preferences only appear if the attendee opts into dinner. The summary section calculates a subtotal from earlier answers and formats it as currency.
You can write this JSON by hand — many people do. Or generate it from your admin panel, pull it from an API, or store it in a database. See the visual builder →
08 · Submission pipeline

One submit. Every destination you need.

Adapters run concurrently and independently — if one destination is down, the others still complete, and the failure is reported rather than swallowed.

http
POST to any endpoint with timeouts, payload transforms and custom headers.
Built in
supabase
Insert with row-level security respected and optional field-level encryption.
MIT · free
postgres
Write through Drizzle ORM, with per-field encryption where you need it.
MIT · free
webhook
HMAC-SHA256 signed payloads with automatic retries on failure.
MIT · free
INSTALL: npm i @squaredr/fieldcraft-adapters
09 · How it compares

Rent it, build it, or own it.

Hosted service
Build it yourself
FieldCraft
Where data lives
Vendor’s database
Yours
Yours, self-hosted
Recurring cost
Monthly, per volume
None, but engineering time
None · Pro is one-time
Field types
Whatever the vendor ships
Each one you write
44 included, extensible
Conditional logic
Configured in their UI
From scratch
In the schema, or your own
Multi-step & drafts
Vendor-styled, vendor-stored
From scratch
Built in, with branching
If you walk away
Forms stop working
You maintain it forever
MIT source, keeps running
10 · Form Builder

Visual form builder. Drag, drop, done.

Build forms visually with the FieldCraft Pro builder. Drag fields from the palette, configure properties, and export a clean JSON schema — ready to render anywhere.

Try it locally on npm →

Purchase options available soon.

11 · Get started

Install it, write a schema,
render your first form.

Nothing to sign up for. Nothing to configure. The engine is on npm and the source is 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-free
Starter schemas for common forms
MIT