AutoForm

Automatically render forms for your existing data schema.

What is AutoForm? Let’s say you have a zod or yup schema that you already use for your backend:

import { z } from "zod";
 
const userSchema = z.object({
  name: z.string(),
  birthday: z.coerce.date(),
  email: z.string().email(),
});

With AutoForm, you can automatically render a form for this schema:

import { AutoForm } from "@autoform/mui";
import { ZodProvider } from "@autoform/zod";
 
function MyForm() {
  return (
    <AutoForm
      schema={schemaProvider}
      onSubmit={(data) => {
        console.log(data);
      }}
      withSubmit
    />
  );
}

AutoForm itself is agnostic to the schema library, rendering library and UI library you use, but it comes with a set of official packages that make it easy to use with popular libraries like Zod, React, Material UI, etc.

This code produces a form that looks like this (try it out!):

When to use AutoForm?

AutoForm is mostly meant as a drop-in form builder for your internal and low-priority forms with existing schemas. For example, if you already have schemas for your API and want to create a simple admin panel to edit user profiles, simply pass the schema to AutoForm and you’re done.

As forms almost always grow more complex, AutoForm gives you options to customize how forms are rendered (e.g. using the fieldConfig options) and gives you escape hatches to customize the form even further.

However, AutoForm does not aim to be a full-featured form builder. It does not aim to support every edge case in your schema or allow building complex, multi-page forms. If you need more customization, feel free to customize AutoForm’s renderer in your project or use more powerful form builders like Formik - though those require more specialized configuration instead of simple drop-in support for your zod schema. For an example on how AutoForm can be extended for more powerful, YAML-based, multi-page forms, see AutoForm YAML.

Installation

• React

shadcn/ui component

AutoForm started out as a shadcn/ui component but grew so large I decided it’s best to split it into a package instead.

@autoform/react does currently not have full feature-parity with the shadcn/ui component, but it’s getting there. If you want to use the shadcn/ui component, you can still use it as a standalone package.