Form Engine: Headless Schema-Driven Forms for React
A lightweight React form engine that turns scattered per-page form logic into one consistent abstraction. It reduces boilerplate, standardizes validation + error handling, and stays UI-agnostic so it can plug into any design system.
⚡ Engineering Challenge: “Forms are Always the Mess”
In real products, forms aren’t a UI problem — they’re an architecture problem. Every new page often re-implements the same patterns: state wiring, validation rules, error rendering, submit flows, dirty checks, and resets.
Form Engine moves that logic into one reusable layer that scales with the product instead of fighting it. You define one schema, and the engine handles the lifecycle consistently.
Headless by Design Freedom
No UI components shipped. Only logic. This keeps the package compatible with Tailwind, MUI, shadcn, or any custom system.
Schema-First API Consistency
Form behavior is described in one place: initial values, rules, and messages. It becomes portable, testable, and easy to evolve without touching the UI.
🧠 Core Ideas
The engine treats every form as a schema contract. You can share schemas across components, compose them, and upgrade validation rules without rewriting the page logic.
The goal is “small surface area”: predictable naming, explicit outputs, and minimal mental overhead when wiring inputs.
🏗️ How It Fits
🧩 Implementation Snapshot
One schema, one engine, clean bindings — no per-page validation duplication:
// Define your schema once
const schema = {
email: {
value: "",
validate: [
{ rule: "required" },
{ rule: "email" },
],
},
};
// Bind schema to the engine
const {
data,
getValue,
setValue,
setInputField,
save,
reset,
isChanged,
updateChanges,
} = useFormEngine(schema);
// Attach to your input
<input {...setInputField("email")} placeholder="Email" />
// Validate + read result
save((result) => {
if (result.error)
console.log("Validation errors:", result.fields);
else
console.log("Valid data:", result.data);
});