form0-react

React bindings for form0, the open-source schema-driven form ecosystem by paqu.io. Hooks and components that render a JSON form schema with your own design system.

latest

Source

npm

Version: 0.2.1

Version published: last week

Maintainers: 1

Created: last year

Source

form0-react

NPM License NPM Last Update

[!NOTE] form0 is in active development and is available to use today. Its schema format and core concepts are stable in practice, but releases before 1.0 may include breaking changes. Pin your versions and review the release notes when upgrading. A formally stable release is coming.

form0-react is the React UI layer for the form0 ecosystem. It combines the form0-core engine with accessible default field renderers while allowing applications to replace the presentation with their own components and design system.

🚀 Start with the CLI

For a new project, install form0-cli and follow the quickstart. Choose the web application option to start from the maintained React and Vite template.

Install form0-react directly when integrating it into an existing React application.

📦 Installation

npm install form0-react form0-core

Install compatible React peer dependencies if the application does not already provide them.

⚡ Quick example

import { FormRenderer } from 'form0-react';
import 'form0-react/index.css';

const schema = {
  form: {
    name: 'Contact form',
    status_field: null,
    elements: [
      {
        type: 'TextField',
        key: 'name',
        data_name: 'name',
        label: 'Name',
        display: 'default',
        description: null,
        description_mode: null,
        required: true,
        required_conditions: null,
        visible: true,
        visible_conditions: null,
        read_only: false,
        read_only_conditions: null,
        default_value: null,
        pattern: null,
        pattern_description: null,
        supporting_image: false,
        supporting_image_path: null,
        supporting_image_display: null,
      },
    ],
  },
};

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

Custom renderers

Applications can replace or extend field components without forking the package. Use the exported field registry APIs or a FieldRegistryProvider to keep application-specific UI outside the form engine.

FormRenderer also supports consumer-owned state and layout integration:

headerAccessory renders application UI between the form summary and body.
externalDirty includes application-owned changes in discard confirmation.
submitBlockedReason prevents submission while an external condition is unresolved.
recordMetadataFields can provide read-only display data that never enters engine values.

✅ Requirements

Node.js 22 or newer
React 18 or 19
React DOM 18 or 19
@vanilla-extract/css 1.17.4 or newer

Worker mode requires a bundler that supports ESM module workers and rewrites new Worker(new URL(..., import.meta.url), { type: 'module' }). Vite-based applications are supported. FormRenderer uses the packaged worker when engineMode="worker"; custom worker URLs and factories are not part of its public API.

📚 Documentation

🔒 Security

Schema expressions are evaluated by form0-core. Only use schemas from trusted authors and review the form0-core security policy. Report vulnerabilities according to this repository's security policy.