FieldCraft

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

I built this to learn how to publish and maintain npm packages. It works and I use it, but it's a spare-time project — releases are irregular and there are known gaps. MIT, so it's yours if it's useful.

Packages

Package	Description	Version
@squaredr/fieldcraft-core	Headless TypeScript engine — schema, validation, conditional visibility, state management
@squaredr/fieldcraft-react	React renderer — 41 field components, hooks, theming, pluggable field registry
@squaredr/fieldcraft-adapters	Submission adapters — HTTP, Postgres, Supabase, Webhook
@squaredr/fieldcraft-templates	16 free form templates — general, HR, and more

Install

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

Quick Start

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: "Contact Info",
      questions: [
        { id: "name", type: "short_text", label: "Full Name", required: true },
        { id: "email", type: "email", label: "Email", required: true },
        {
          id: "subject",
          type: "dropdown",
          label: "Subject",
          options: [
            { value: "general", label: "General Inquiry" },
            { value: "support", label: "Support" },
            { value: "feedback", label: "Feedback" },
          ],
        },
        { id: "message", type: "long_text", label: "Message" },
      ],
    },
  ],
};

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

Features

• Headless core -- pure TypeScript engine with zero UI dependencies; bring your own renderer or use the React package
• 41 field types -- ratings, NPS, matrix grids, file uploads, signatures, address blocks, and all the standard inputs
• JSON schemas -- define entire forms as plain objects in TypeScript or JSON
• Display modes -- stepped (wizard), classic (all-at-once), or conversational (one question at a time, Typeform-style)
• Multi-step flows -- wizard-style sections with progress tracking and back/next navigation
• Conditional visibility -- show/hide fields based on answers, with AND/OR combinators
• Validation -- required, regex, min/max, custom sync/async validators
• Computed fields -- derive values automatically from other responses, with aggregate functions (SUM, AVG, COUNT, MIN, MAX) for repeater fields
• Draft persistence -- save and resume in-progress forms
• Theme system -- CSS custom properties with auto-inherit from host page; drive it from your own design tokens
• Pluggable fields -- swap any field component via the field registry
• Type-safe -- full TypeScript types for schemas, configs, and responses

Field Types

Category	Types
Text	short_text long_text email phone phone_international url legal_name
Numeric	number slider rating nps likert opinion_scale
Selection	single_select multi_select dropdown boolean country_select ranking
Date/Time	date date_range time appointment
Media	file_upload signature image_capture
Advanced	address payment matrix repeater calculated hidden scoring
Structural	consent info_block section_header page_break
Content	welcome-screen thank-you-screen rich-text image video divider spacer

Adapters

Persist form submissions, drafts, and schemas to any backend. All adapters ship in a single package with subpath imports:

npm install @squaredr/fieldcraft-adapters

import { createPostgresAdapter } from '@squaredr/fieldcraft-adapters/postgres'
import { createSupabaseAdapter } from '@squaredr/fieldcraft-adapters/supabase'
import { createWebhookAdapter } from '@squaredr/fieldcraft-adapters/webhook'

Adapter	Highlights
HTTP	Built into core — POST to any endpoint with timeouts and custom headers
Postgres	Drizzle ORM, AES-256-GCM encryption, draft persistence
Supabase	Field-level encryption, RLS, schema CRUD
Webhook	HMAC-SHA256 signing, exponential backoff retries

Templates

16 production-ready form schemas included in @squaredr/fieldcraft-templates:

npm install @squaredr/fieldcraft-templates

Contact form, feedback survey, NPS, job application, event registration, bug report, employee onboarding, leave request, and more.

Project Structure

fieldcraft/
├── packages/
│   ├── core/                  # Form engine (pure TypeScript)
│   ├── react/                 # React renderer + 41 field components
│   ├── adapters/              # Submission adapters (HTTP, Postgres, Supabase, Webhook)
│   └── templates/        # 16 free form schemas
├── website/                   # Docs site (fieldcraft.squaredr.tech)
└── tooling/                   # Shared configs (TypeScript, Tailwind, ESLint)

Community

• Docs — fieldcraft.squaredr.tech/docs
• Bugs and feature requests — Open an issue. A schema that reproduces the problem is the most useful thing you can attach.

Development

# Prerequisites: Node.js 18+, pnpm 9+

# Install
pnpm install

# Build all packages
pnpm build

# Run tests (824 core + 271 react + 56 adapters = 1,151 passing)
pnpm test

# Start docs site
pnpm --filter @squaredr/fieldcraft-website dev

Contributing

Contributions are welcome. This is a spare-time project, so reviews can be slow — please open an issue first to agree on the approach before writing code. See CONTRIBUTING.md.

License

MIT