Schema-driven form engine for React. Define fields, layout, rules, and data sources in TypeScript — the runtime handles conditional logic, validation, and rendering.

Install

npm install formwright@latest react-hook-form

If you want to understand use cases on one shot, please view cookbook here

Quick example

import { defineForm, buildForm, field, layout } from "formwright/schema";
import { createFormRuntime } from "formwright/core";
import { FormRuntimeProvider, FormRuntimeRoot } from "formwright/react";
import { registerBasicPlugins } from "formwright/plugins";
import { useFormContext } from "react-hook-form";

const form = buildForm({
  form: defineForm({ id: "profile" }),
  fields: [field.text("name", { label: "Name", required: true }), field.email("email", { label: "Email" })],
  layout: layout.stack("root", [layout.field("name"), layout.field("email")]),
});

const runtime = createFormRuntime({ form, plugins: registerBasicPlugins() });

function ProfileForm() {
  const { handleSubmit } = useFormContext();
  return (
    <form onSubmit={handleSubmit(console.log)}>
      <FormRuntimeRoot rootLayoutId="root" />
      <button type="submit">Save</button>
    </form>
  );
}

export default function App() {
  return (
    <FormRuntimeProvider runtime={runtime}>
      <ProfileForm />
    </FormRuntimeProvider>
  );
}

Docs

Full documentation at adarshaacharya.github.io/formwright

• Getting started
• Mental model
• Customization
• API reference

Peer dependencies

• react >= 18
• react-dom >= 18
• react-hook-form ^7.53.0

License

MIT

Sponsorship

If you find formwright valuable and would like to support its continued development, please consider:

• Sponsoring project
• Reaching out for consulting or custom implementation at [email protected]

Or just drop casual email on what you're building using formwright in your project.