better-formbetter-form
v1.0 Now Available

better-form

Build powerful multi-step wizard forms with conditional logic, validation, and beautiful UI — all from JSON configuration.

DocumentationView ExamplesGitHub
const wizardConfig: WizardConfig = {
  id: 'contact-form',
  title: 'Contact Us',
  steps: [
    {
      id: 'personal',
      title: 'Personal Info',
      fieldGroups: [{
        id: 'info',
        fields: [
          { id: 'name', name: 'name', label: 'Name', type: 'text', required: true },
          { id: 'email', name: 'email', label: 'Email', type: 'email', required: true },
          {
            id: 'company',
            name: 'company',
            label: 'Company',
            type: 'text',
            showIf: { field: 'userType', operator: 'equals', value: 'business' }
          }
        ]
      }]
    }
  ]
};

Everything you need for wizard forms

A complete solution for building complex multi-step forms with minimal code.

{}

JSON-Driven

Define your entire form structure, validation, and conditional logic in a single JSON configuration.

?

Conditional Logic

Show/hide fields and steps based on user input with powerful showIf/hideIf conditions.

!

Built-in Validation

Required, email, min/max, regex patterns, and custom validators with clear error messages.

->

Multi-Step Wizard

Create complex multi-step forms with progress indicators, navigation, and step callbacks.

TS

TypeScript First

Full TypeScript support with strict typing for configs, fields, and components.

+

Extensible

Register custom field components, add plugins, and extend functionality as needed.

Works with your favorite framework

better-form integrates seamlessly with React-based frameworks. Choose your stack and get started in minutes.

Next.js

App Router & Pages Router

React

Vite, CRA & custom setups

Remix

Actions & Loaders

Partial

Astro

React Islands

Extensible

Powerful Plugin System

Extend better-form with official plugins for specialized field types. Each plugin integrates seamlessly with your existing configuration.

Google Places

Address autocomplete with interactive map picker and editable detail fields.

AutocompleteMap PickerReverse GeocodingDetail Fields
@better_form/plugin-google-places
Coming Soon

Rich Text Editor

WYSIWYG editor with formatting, links, and media embedding.

Bold/ItalicListsLinksImages
Coming Soon

Digital Signature

Capture signatures with touch/mouse drawing and export as image.

Touch SupportPNG ExportUndo/RedoClear

Plugin Integration

View Live Demo
import { WizardProvider, defaultFieldComponents } from '@better_form/core';
import { googlePlacesPlugin } from '@better_form/plugin-google-places';

// Create plugin instance
const googlePlaces = googlePlacesPlugin({
  apiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY!,
  defaultCountryRestrictions: ['IT'],
});

// Merge with default components
const fieldComponents = {
  ...defaultFieldComponents,
  ...googlePlaces.fieldComponents,
};

export default function App() {
  return (
    <WizardProvider config={config} fieldComponents={fieldComponents}>
      {/* Your form */}
    </WizardProvider>
  );
}

Get started in seconds

Install better-form and start building wizard forms immediately.

Terminal
$ npm install @better_form/core
Read the DocsExplore Examples