Introduction

A headless, pure TypeScript form engine with a React renderer. Define forms as JSON schemas, render them with 36 pre-built field components, and get multi-step flows, conditional visibility, validation, and computed fields out of the box.

Two Packages

@squaredr/fieldcraft-core — Pure TypeScript engine. Handles schema parsing, state management, validation, conditional visibility, computed fields, and section navigation. Zero UI dependencies.
@squaredr/fieldcraft-react — React renderer with 36 field components built on shadcn/ui and Tailwind CSS. Includes hooks, theming with 6 presets, and a pluggable field registry.

Quick Install

npm install @squaredr/fieldcraft-core @squaredr/fieldcraft-react

Minimal Example

import { FormEngineRenderer } from "@squaredr/fieldcraft-react";
import "@squaredr/fieldcraft-react/styles.css";

const schema = {
  id: "contact",
  version: "1.0.0",
  title: "Contact Us",
  submitAction: { type: "callback" },
  sections: [{
    id: "main",
    title: "Info",
    questions: [
      { id: "name", type: "short_text", label: "Name", required: true },
      { id: "email", type: "email", label: "Email", required: true },
      { id: "message", type: "long_text", label: "Message" },
    ],
  }],
};

export default function App() {
  return <FormEngineRenderer schema={schema} onSubmit={console.log} />;
}

That's it. FormEngineRenderer creates its own engine, renders all fields, handles validation, and calls your onSubmit callback with a FormResponse object.

Storage Adapters

Three free, open-source (MIT) adapters handle persistence so you don't have to write storage logic yourself:

Adapter	Package	Use Case
Supabase	`@squaredr/fieldcraft-supabase`	Fastest setup, built-in auth & RLS
Postgres	`@squaredr/fieldcraft-postgres`	Direct PostgreSQL via Drizzle ORM
Webhook	`@squaredr/fieldcraft-webhook`	Send to any HTTP endpoint with HMAC signing

Next Steps

Head to Installation to set up your project, or jump straight to the Quick Start guide.

Next →Installation