Copy page

Forms, routes, and presentations

Schema files live under src/forms. The registry in src/forms/registry.js gives each form an application route, display metadata, a dynamic schema import, and optional initial values.

Code
const forms = [
  {
    id: "contact",
    title: "Contact us",
    description: "Send a message to the team.",
    loadSchema: () => import("./contact/schema.json"),
  },
]

Create the matching schema file, then add the registry entry. Dynamic imports keep schema files in separate build chunks.

Routes

The starter provides:

• / for the form list and overlay examples;
• /:formId for the default standard presentation; and
• /:formId/:variant for standard or simplified page presentations.

FormPage validates the form identifier and presentation before loading the schema. Home owns the modal and spotlight examples.

Presentations

The four included presentation keys are:

Key	Placement
standard	Full form page
simplified	Step-by-step page
modal	Dialog overlay
spotlight	Drawer overlay

Layout defaults for each presentation live in form0.config.js. The application wrapper passes the resolved theme, placement, interaction mode, and sizing to FormRenderer.

Use Edit your first schema for schema authoring and Modes, placement, and navigation for the underlying React binding behavior.