Formwright Monorepo

Schema-driven · Signal-reactive · Framework-agnostic

Build forms and data grids from data — not JSX.

Define a form or grid once as JSON, hand-written or LLM-generated. Render to real DOM with surgical updates — no virtual DOM, no full re-render. Use vanilla JS, any bundler, or bring your own React/Vue components.

Try the form playground Try Gridwright Browse Storybook

Live playgrounds

Interactive demos shipped with this repo — edit schemas, drag fields, and watch the UI update in real time.

Forms

Form Playground

Live schema editor with wizards, consent-based draft cache, URL step sync, success screens, and submit loading skeletons.

Open playground → Builder

Forge — Form Builder

Drag field types onto a canvas, inspect properties, preview the live form, and export the schema JSON.

Open Forge → Theme

Theme Builder

Shopify-style section settings — each panel is a Formwright form driving a live theme preview from one payload.

Open theme builder → Settings

Settings Builder

iOS-style settings app with sidebar navigation, drill-down sections, and per-field save endpoints.

Open settings builder → Grid

Gridwright — Data Grid

Virtualized 50k rows, server pagination, master/detail selection, grouping with aggregation, CSV export, and column controls.

Open grid demo → Catalog

Storybook

Interactive component catalog — forms, wizards, grids, Forge/theme/settings mini embeds, and full-page playground iframes.

Open Storybook →

What we support

  • Fields — text, email, select, toggle, file upload, date/time, color, range, groups, collections, multi-step wizards
  • Conditional logic — visibleWhen, enabledWhen, requiredWhen with JSONLogic
  • Validation — declarative rules, real-time per-field errors, custom messages
  • Wizard UX — progress bar / tabs / fill bar, URL sync, resume draft, success screen, consent-based caching
  • Submission — transform → send → handlers, action buttons, loading states, skeleton overlay
  • Bring your own UI — custom widgets per field type; same clean payload
  • Gridwright — virtualized rows, sorting, filtering, pagination, grouping, master/detail, CSV export
  • AI-native — @formwright/ai turns natural language into a validated schema (Claude, GPT, Gemini, local models)

Quick start

# Install
npm i @formwright/core @formwright/dom

# Grid (optional)
npm i @formwright/grid-core @formwright/grid-dom
import "@formwright/dom"; // registers DOM renderer
import { Form } from "@formwright/core";

const form = new Form(schema, { email: "" });
form.mount(document.getElementById("root"));

const result = await form.submit();
if (result.ok) console.log(result.data);

Full docs: README on GitHub ↗

Packages

Published on npm under the @formwright scope. Apps in apps/ are for demos and are not published.

Formwright

Gridwright

Run locally

git clone https://github.com/aliarsalan177/formwright.git
cd formwright && pnpm install
pnpm --filter @formwright/playground dev   # http://localhost:5173
pnpm storybook                             # http://localhost:6006 (live: ./storybook/)