Tool

Formwork

A headless, accessible form library with schema-driven validation and zero runtime dependencies.

Placeholder preview of the Formwork interface

Project data

Role
Author
Type
Tool
Stack
  • TypeScript
  • React
  • Zod
Duration
Ongoing
Year
2023
Status
Live

The challenge

Accessible forms by default

Most form libraries left error announcements and focus management to the developer.

How it was built

Development process

Six phases from the first conversation to the release. The bar shows how the time was split.

4 weeks in total

  1. Research

    Reading the form code of a dozen teams showed which validation patterns repeat everywhere.

    3 days · Pattern catalogue

  2. Architecture

    Data model, rendering strategy and API contracts were agreed before the first screen was drawn.

    3 days · ADR, data model

  3. Interface

    A component inventory and responsive layouts, built entirely from design tokens.

    2 days · Token set, component inventory

  4. Build

    Features went live in small slices behind flags, with typed boundaries between client and server.

    8 days · Feature slices

  5. Testing

    Unit, end-to-end and accessibility checks ran on every pull request.

    2 days · Test suite in CI

  6. Deployment

    Every branch got a preview environment; the production rollout was a single click.

    2 days · Preview and release pipeline

  7. Result

    Used in production by a dozen teams; 2 kB gzipped.

Screens

Under the hood

One schema, many outputs

The schema generates types, validation and ARIA wiring, so they can never drift apart.

  • TypeScript
  • React
  • Zod

Next project

Want something similar? Let’s talk.

Let’s talk

Tell me about your project. I usually reply within two working days.