Install and render with React

For a new web application, use the CLI quickstart. The maintained React and Vite starter includes the binding, configuration, and example schemas.

To add form0 to an existing application:

Code
npm install form0-react form0-core

The host application must also provide compatible peer dependencies:

• Node.js 22 or newer for installation and build tooling
• React 18 or 19
• React DOM 18 or 19
• @vanilla-extract/css 1.17.4 or newer

Render a schema

Code
import { FormRenderer } from "form0-react"
import "form0-react/index.css"
import schema from "./contact.form0.json"

export function ContactForm() {
  return (
    <FormRenderer
      schema={schema}
      onSubmit={(record, meta) => {
        console.log(record)
        console.log(meta.rawValues)
      }}
    />
  )
}

schema must contain a valid form0-core form object. Start with Edit your first schema or review the Form object.

onSubmit receives a structured form0 record. The second argument exposes raw values, repeatable state, timestamps, and the validation summary. See Values, snapshots, and submission.

[!NOTE] FormRenderer runs the engine on the main thread by default. Vite applications can opt into the packaged module worker with engineMode="worker".