Introducing FieldCraft: A Schema-Driven Form Engine for React

FieldCraft is out. It is a schema-driven form engine for React — you define your form as a JSON schema, and the engine handles rendering, validation, conditional visibility, multi-step navigation, draft persistence, and theming.

I have been building it for a while now, and today it is on npm under the MIT license.

Why I built this

I kept rebuilding the same form infrastructure across projects. Every time: wire up inputs, add validation, handle multi-step state, persist drafts, deal with conditional fields. The code was always slightly different but the shape of the problem was always the same.

After the third time I thought "I should extract this into a library," I actually did it.

How it works

You write a schema:

{
  "title": "Contact Form",
  "sections": [
    {
      "id": "main",
      "title": "Get in touch",
      "fields": [
        { "id": "name", "type": "text", "label": "Name", "required": true },
        { "id": "email", "type": "email", "label": "Email", "required": true },
        { "id": "message", "type": "textarea", "label": "Message" }
      ]
    }
  ]
}

And render it:

import { FormEngineRenderer } from '@squaredr/fieldcraft-react'
 
<FormEngineRenderer schema={schema} onSubmit={handleSubmit} />

That is it. The engine reads the schema, renders the right components, runs validation, manages state, and calls your submit handler with clean data.

What is included

The core package is pure TypeScript with zero UI dependencies. The React package builds on top of it with shadcn/ui components and Tailwind CSS.

Out of the box you get:

• 44 field types — text, email, select, date, file upload, signature, rating, matrix, and a lot more
• Validation — required, min/max, regex, custom validators, cross-field validation
• Conditional visibility — show or hide fields based on other field values
• Multi-step forms — sections become steps with progress tracking
• Draft persistence — form state saves to localStorage automatically
• Theming — CSS custom properties, dark mode, multiple presets

The packages

• @squaredr/fieldcraft-core — the engine, pure TypeScript
• @squaredr/fieldcraft-react — React components, theming, renderer
• @squaredr/fieldcraft-adapters — storage adapters (Postgres, Supabase, Webhook)

All MIT. Install from npm, read the source on GitHub.

What is next

More field types, better validation, and adapters for whatever storage people actually ask for. I spent a while building visual tooling — a form builder, response viewer, theme editor — on top of the core, but I have shelved it rather than ship a paid tier I could not support properly. Everything remains MIT.

Check out the docs to get started.