# FormEngine

> FormEngine is a React library for building JSON-driven forms. FormEngine Core (MIT) renders form schemas at runtime; FormEngine Designer (commercial) is an embeddable visual form builder. Both target fullstack and backend teams who need dynamic, configurable forms without re-deploying code.

## Getting started

- [Introduction](/): What FormEngine is, product overview, documentation structure
- [FormEngine Core](/core): JSON-schema driven form rendering, architecture overview, capabilities
- [Architecture](/core/architecture): How FormEngine works under the hood — ComponentStore, FormViewer, IFormData, renderWhen pipeline, validation, actions
- [Core vs Designer](/core/core-vs-designer): MIT Core (free) vs commercial Designer — what each does, licensing, which teams need which
- [Installation](/core/installation): npm install, peer dependencies, first render
- [Rendering forms](/core/rendering-forms): FormViewer component, ComponentStore setup, form schema structure
- [Working with form data](/core/form-data): Reading and writing values, submit handling, data flow
- [JSON forms guide](/json-forms-guide): Complete guide to JSON-driven forms in React — concepts, library comparison, real-world patterns

## Core concepts

- [Validation](/core/validation): Built-in validators (required, email, min, max, regex, etc.), custom validators, Zod integration, async validation, cross-field rules
- [Conditional logic](/core/conditional-logic): renderWhen expressions and functions, progressive disclosure, section toggles
- [Actions and events](/core/actions-events): onChange, onSubmit, setValues, custom actions
- [Computed properties](/core/computed-properties): Derive values from other fields at runtime
- [Form JSON](/core/form-json): Complete form schema structure reference
- [JSON Schema](/core/json-schema): JSON Schema validation integration
- [Custom components](/core/custom-components): Register third-party or custom React components
- [Styling](/core/styling): CSS, theme integration with MUI/Mantine, responsive layout
- [Localization](/core/localization): i18n, react-i18next integration, multi-language forms
- [Responsive layout](/core/responsive-layout): Grid layout, breakpoints
- [Conditional rendering](/core/conditional-logic): renderWhen reference
- [Embedded forms](/core/embedded-forms): Embedding forms in existing layouts
- [Modal forms](/core/modal-forms): Forms rendered in modal dialogs
- [Disabled and read-only](/core/disabled-readonly): Disable fields or make forms read-only
- [Tooltips](/core/tooltips): Contextual help on form fields

## Tutorials

- [Dynamic form from JSON](/tutorials/dynamic-form-from-json): Step-by-step: render a React form from a JSON schema with validation, conditional logic, and submit handler
- [Multi-step form (Wizard)](/tutorials/multi-step-form-json): Build a 3-step registration wizard with per-step validation using FormEngine's Wizard component
- [Conditional fields](/tutorials/conditional-fields): Four patterns for showing/hiding fields: checkbox toggle, dropdown branching, cascading reveal, section toggle
- [Validation with Zod](/tutorials/zod-validation): Use Zod schemas as FormEngine custom validators — field validation, password confirmation, async checks
- [Migrate from React Hook Form](/tutorials/migrate-from-react-hook-form): Step-by-step migration with before/after code — useForm, register, Controller, useFieldArray, Zod resolver
- [Migrate from Formik](/tutorials/migrate-from-formik): Step-by-step migration — useFormik, Field, Yup validationSchema, FieldArray, setFieldValue
- [Building forms via code](/building-forms-via-code): Programmatic form schema construction
- [Dynamic dropdowns](/tutorials/dynamic-dropdowns): Populate dropdown options from API at runtime
- [Cascading dropdowns](/tutorials/cascading-dropdowns): Linked dropdowns where second depends on first
- [Tracking form changes](/tutorials/tracking-form-changes): Subscribe to field-level and form-level change events
- [Form data handling](/tutorials/form-data-handling): Submit patterns, data extraction, reset
- [Styling forms](/tutorials/styling-forms): CSS overrides, theming, component-level styles
- [Writing values via actions](/tutorials/writing-values-via-actions): setValues action patterns
- [Components with multiple children](/tutorials/components-with-multiple-children): Nested component trees
- [Dynamic form fields](/tutorials/dynamic-form-fields): Add/remove fields at runtime
- [Google Maps autocomplete](/tutorials/enabling-google-maps-autocomplete): Integrate the Google Maps Places API as an autocomplete field

## Integrations

- [Integrations overview](/integrations): All supported frameworks and UI libraries
- [Next.js](/integrations/nextjs): App Router setup, server-side schema loading, API routes
- [Angular](/integrations/angular): Angular integration with reactive and template-driven approaches
- [Remix](/integrations/remix): Remix loader pattern for server-side schemas
- [Electron](/integrations/electron): Desktop app forms with Electron
- [Material UI](/integrations/material-ui): MUI component adapter
- [Mantine](/integrations/mantine): Mantine component adapter
- [Formik](/integrations/formik): Migrate from Formik to FormEngine

## Use cases

- [React form builder](/react-form-builder): Code-first and visual form authoring in one stack
- [JSON forms in React](/json-forms): Schema-driven form architecture
- [Drag and drop form builder](/drag-and-drop-form-builder): Visual drag-and-drop form building
- [SaaS form builder](/use-cases/saas-form-builder): Embed a visual form builder in your SaaS product; multi-tenant form storage, custom component palette, Designer licensing
- [Workflow approval forms](/use-cases/workflow-approval-forms): Multi-step approval workflows with role-based field visibility, conditional routing, and schema versioning for in-flight approvals
- [Customer onboarding forms](/use-cases/customer-onboarding-forms): Plan-tiered onboarding with CRM pre-fill, dynamic dropdowns, geo-conditional compliance fields, and save/resume
- [Inspection and data collection forms](/use-cases/inspection-data-collection): Repeating equipment check items, conditional failure follow-ups, signature capture, computed failure summaries, and operations-managed templates

## Comparisons

- [Best React form libraries 2026](/comparison/best-react-form-libraries-2026): Honest comparison of React Hook Form, Formik, TanStack Form, RJSF, FormEngine, SurveyJS, Uniforms, Formily — trade-offs, bundle sizes, maintenance status
- [Bundle size comparison](/bundle-size-comparison): Measured gzipped bundle sizes for FormEngine, RJSF, SurveyJS, Vueform across login and booking form scenarios
- [vs Form.io](/comparison/formio-alternative): Platform vs library — Form.io full-stack vs FormEngine frontend-only, migration path
- [vs React Hook Form](/comparison/react-hook-form-alternative): JSON-first vs code-first architecture, feature table, migration
- [vs Formik](/comparison/formik-alternative): Maintenance status, architecture diff, migration from Formik
- [vs RJSF](/comparison/react-jsonschema-form-alternative): JSON Schema vs FormEngine UI schema, feature table, migration
- [vs SurveyJS](/comparison/surveyjs-alternative): Pluggable adapter vs bundled UI, bundle size benchmarks
- [vs TanStack Form](/comparison/tanstack-form-alternative): Headless/code-first vs JSON runtime
- [vs React Final Form](/comparison/react-final-form-alternative): Maintenance reality, architecture, migration
- [vs Uniforms](/comparison/uniforms-alternative): Data schema derivation vs UI schema
- [vs Formily](/comparison/formily-alternative): Reactive two-layer vs declarative, Ant Design stacks
- [vs Ant Design Form](/comparison/ant-design-form-alternative): antd-native API vs FormEngine JSON runtime
- [vs React Schema Form](/comparison/react-schema-form-alternative): Maintenance mode libraries, migration

## FormEngine Designer

- [Designer overview](/designer): What FormEngine Designer is, visual form builder, embedding
- [Getting started with Designer](/designer/getting-started-overview): Quick start
- [Designer installation](/designer/installation): Install and configure the embeddable visual builder
- [Designer usage](/designer/usage): onSave callback, form loading, tenant storage patterns
- [Custom components in Designer](/designer/custom-components): Register your design system in the Designer palette
- [Designer styling](/designer/styling): Brand the Designer to match your product
- [Designer validation](/designer/validation): Configure validation rules through the Designer UI
- [Designer actions](/designer/actions): Action configuration in the visual editor
- [Conditional rendering in Designer](/designer/conditional-rendering): renderWhen configuration through the UI
- [Form storage](/designer/form-storage): Saving and loading form schemas
- [Designer localization](/designer/localization): Translate the Designer UI
- [Designer license](/designer/license): Commercial licensing for production use

## Components reference

- [Components overview](/components-library): All available components by category
- [Input](/components/input), [Dropdown](/components/dropdown), [Checkbox](/components/checkbox), [Radio group](/components/radio-group)
- [Date picker](/components/datepicker), [Time picker](/components/timepicker), [Textarea](/components/textarea), [Toggle](/components/toggle)
- [Autocomplete](/components/autocomplete), [Tag picker](/components/tag-picker), [Uploader](/components/uploader), [Search](/components/search)
- [Wizard](/components/wizard): Multi-step form component with navigation and per-step validation
- [Wizard step](/components/wizard-step): Individual step container for Wizard
- [Repeater](/components/repeater): Repeating field groups
- [Tab](/components/tab), [Card](/components/card), [Container](/components/container), [Modal](/components/modal)
- [Button](/components/button), [Header](/components/header), [Label](/components/label), [Message](/components/message)
- [Data grid](/components/data-grid), [Signature](/components/signature), [Rich text editor](/components/rich-text-editor), [QR code](/components/qr-code)

## Support

- [Troubleshooting and support](/support): GitHub issues, community, commercial support contacts