Schema-driven form engine for React. Define fields, layout, rules, and data sources in TypeScript — the runtime handles conditional logic, validation, and rendering.
npm install formwright@latest react-hook-formFormwright is agent ready, use our skills and let agent do rest of the work. Refer full docs on agents skills setup for different coding agents .
npx skills add adarshaacharya/formwright --skill formwrightIf you want to understand different use cases of Formwright without thinking too much, please view cookbook here
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>
);
}Full documentation at adarshaacharya.github.io/formwright
For npm package check here
react >= 18react-dom >= 18react-hook-form ^7.53.0
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 hi@adarsha.dev
Or just drop casual email on what you're building using formwright in your project.