alpha · v0.1

morphorm

Type-safe, schema-driven forms for React. Define once. Render everywhere. Zero boilerplate.

$bun add morphorm
examples →github
why morphorm
schema-first

Zero boilerplate

Define a Zod schema. Morphorm derives your fields, layout, and validation — automatically.

reactive

Watch system

Fields subscribe to other fields. Labels, placeholders, disabled — all update live without wiring.

composable

Bring your own

Override any field with your own component. Full access to field state via useFieldContext.

grid layout

12-col grid

Responsive 12-column grid built in. Each field has a size prop. Fill spacers break rows.

live demo

Try it right now

more examples →
<Form schema={demoSchema} showSubmit />
get started

As simple as it looks

form.tsx
morphorm

import { Form } from "morphorm"
import * as z from "zod"

const schema = z.object({
  name: z.string().min(1),
  email: z.string().email(),
  notify: z.boolean(),
})

export function MyForm() {
  return (
    <Form
      schema={schema}
      onSubmit={save}
      fields={[
        { name: "name"},
        { name: "email" },
        { name: "notify" },
      ]}
      showSubmit
    />
  )
}