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

I am working on FieldCraft Pro — a visual form builder, response viewer, and theme editor that sit on top of the open-source core. The core stays free. Pro adds convenience for people who want a GUI instead of editing JSON.

Check out the docs to get started.