Project Structure

FieldCraft is split into two packages so the core logic stays UI-agnostic.

@squaredr/fieldcraft-core

The headless engine. Pure TypeScript, zero UI dependencies.

• Schema parsing — validates and normalizes your FormEngineSchema
• State management — tracks values, errors, touched state, visibility, and section progress
• Validation — built-in rules (required, regex, min/max) + custom sync/async validators
• Conditional visibility — evaluates showIf expressions to show/hide fields
• Computed fields — derives values from other field responses
• Section navigation — next/prev/jumpTo with progress tracking
• Draft persistence — save and resume in-progress forms

Key exports

import {
  createEngine,       // Create a form engine instance
  validateSchema,     // Validate a schema object (throws on error)
  type FormEngineSchema,
  type FormEngine,
  type FormResponse,
  type FormState,
  type Question,
  type Section,
} from "@squaredr/fieldcraft-core";

@squaredr/fieldcraft-react

The React renderer. Depends on @squaredr/fieldcraft-core.

• FormEngineRenderer — drop-in component: pass a schema, get a working form
• 36 field components — text, email, phone, rating, NPS, matrix, file upload, signature, and more
• Hooks — useFormEngine, useFieldValue, useFieldError, useSectionProgress
• Theme system — 6 built-in presets + full CSS variable control
• Field registry — swap or add field components without forking

Key exports

import {
  FormEngineRenderer,   // Self-contained form component
  useFormEngine,        // Hook for custom rendering
  defaultRegistry,      // Built-in field component map
  mergeRegistries,      // Override specific field types
  darkPreset,           // Theme preset
  type FieldProps,      // Props every field component receives
} from "@squaredr/fieldcraft-react";