AutoForm

Instant React forms for the schemas you already have. Pass a Zod schema, get labels, inputs, defaults and validation.

Monthly downloads: 219k
GitHub stars: 3.5k
Since: 2023
Source: GitHub

import { z } from "zod";
import { ZodProvider } from "@autoform/zod";
const schema = z.object({
});
<AutoForm schema={new ZodProvider(schema)} withSubmit />

Hover a field to see where it ends up. Click one to take it out of the schema.

About

AutoForm started as a single shadcn/ui component I wrote because I kept hand-wiring admin forms for schemas that already existed on the backend. It has since grown into a small open source library: the schema stays the source of truth, AutoForm turns it into a form, and you keep using your form and UI library the way you normally would.

The form above is not a mock. It is the published package rendering the schema on the left, with a UI adapter I wrote for this page in about a hundred lines.

Tech

@autoform/zod · yup · joi
Schema providerWalks a Zod, Yup or Joi schema into a plain field tree
@autoform/core
CoreLabels, defaults and validation, without React or any UI
@autoform/react
Form adapterBinds every field to React Hook Form or TanStack Form
shadcn, MUI, ...
UI packageMaps field types to components of your design system

Each layer is its own package, so a project only ships the schema and UI adapters it needs. Adding a UI library means implementing a handful of components, which is exactly what the demo on this page does. The monorepo is built with Turborepo, tested with Cypress component tests and released with Changesets.

TypeScript
React
Zod
React Hook Form
TanStack Form
Turborepo