Getting Started

Installation

npm install raven-form-engine
# or
yarn add raven-form-engine
# or
pnpm add raven-form-engine

With React Hook Form adapter

npm install raven-form-engine react-hook-form

With ShadCN UI adapter

npm install raven-form-engine react-hook-form
# ShadCN components are added via shadcn CLI
npx shadcn@latest add input textarea select checkbox switch

With Ant Design adapter

npm install raven-form-engine antd

Quickstart (3 steps)

Step 1 — Wrap your app with `RavenFormProvider`

app/layout.tsx
import { RavenFormProvider } from "raven-form-engine";
import { RavenRHFAdapter } from "raven-form-engine/adapters/ravenRHFAdapter";
import { RavenShadcnUIAdapter } from "raven-form-engine/ui/ravenShadcnAdapter";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <RavenFormProvider
          formAdapter={RavenRHFAdapter}
          uiAdapter={RavenShadcnUIAdapter}
        >
          {children}
        </RavenFormProvider>
      </body>
    </html>
  );
}

Step 2 — Define a schema

schema.ts
import type { FormSchema } from "raven-form-engine";

export const loginSchema: FormSchema = {
  fields: [
    {
      name: "email",
      type: "email",
      label: "Email address",
      placeholder: "you@example.com",
      validation: { required: "Email is required" },
      colSpan: 12,
    },
    {
      name: "password",
      type: "password",
      label: "Password",
      placeholder: "••••••••",
      validation: {
        required: "Password is required",
        minLength: 8,
      },
      colSpan: 12,
    },
  ],
};

Step 3 — Render `<RavenForm>`

LoginForm.tsx
import { RavenForm } from "raven-form-engine";
import { loginSchema } from "./schema";

export function LoginForm() {
  return (
    <RavenForm
      schema={loginSchema}
      onSubmit={(values) => console.log(values)}
      submitLabel="Sign In"
    />
  );
}

That's it! You now have a fully validated, accessible form.

Adapter Variants

Using DevTools in Development

Replace RavenFormProvider with RavenDevToolsProvider to add the floating inspector:

app/layout.tsx
import { RavenDevToolsProvider } from "raven-form-engine/devtools/RavenDevToolsProvider";

<RavenDevToolsProvider
  formAdapter={RavenRHFAdapter}
  uiAdapter={RavenShadcnUIAdapter}
  devTools={process.env.NODE_ENV === "development"}
>
  {children}
</RavenDevToolsProvider>;

Per-form adapter override

Every <RavenForm> accepts its own adapter and ui props to override the provider:

<RavenForm
  schema={schema}
  onSubmit={handleSubmit}
  adapter={myCustomFormAdapter} // override form state library
  ui={myCustomUIAdapter} // override UI components
/>

TypeScript Support

All exports are fully typed. The main types you will use:

Type	Description
`FormSchema`	Top-level schema with `fields[]` and optional `steps[]`
`FormField<T>`	Individual field descriptor
`FieldType`	Union of all supported field type strings
`FormAdapter`	Contract for form state adapters
`UIAdapter`	Contract for UI component adapters
`RavenFormProps`	Props for `<RavenForm>`
`RavenWizardFormProps`	Props for `<RavenWizardForm>`

Installation​

With React Hook Form adapter​

With ShadCN UI adapter​

With Ant Design adapter​

Quickstart (3 steps)​

Step 1 — Wrap your app with RavenFormProvider​

Step 2 — Define a schema​

Step 3 — Render <RavenForm>​

Adapter Variants​

Using DevTools in Development​

Per-form adapter override​

TypeScript Support​