Skip to content

adarshaacharya/formwright

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

78 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Formwright

Formwright

npm version npm downloads license

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

Skills

Formwright 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 formwright

Cookbook

If you want to understand different use cases of Formwright without thinking too much, 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

For npm package check here

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 hi@adarsha.dev

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

About

Schema-driven dynamic form engine for React apps. Bring your own components, use our rendering engine.

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors