FormEngine Core

@react-form-builder/core is a free, open-source tool that helps you create beautiful, functional forms using Material UI components without writing complex code. Build forms visually using simple JSON configuration and get fully functional, validated forms in minutes.

Why Choose FormEngine Core?

🎯 Perfect for Material UI

FormEngine Core is designed to work seamlessly with @mui/material components. If you're already using Material UI in your React project, FormEngine Core will feel like a natural extension:

• Use familiar Material UI components (TextField, Button, Select, etc.)
• Maintain Material Design aesthetics automatically
• Consistent look and feel with your existing application

❤️ Perfect for your components library

FormEngine Core is designed to work seamlessly with your custom component library. Whether you use Chakra UI, Ant Design, Tailwind CSS components, or your own design system, FormEngine Core provides the flexibility and extensibility you need:

• Use any React component: Integrate custom buttons, inputs, selects, and layouts from your existing library
• Extensible type system: Define custom component types with full TypeScript support and auto-completion
• Preserve your design system: Maintain consistent styling, spacing, and behavior across all forms
• Full control over behavior: Customize validation, event handling, and state management for each component
• Future-proof architecture: Easily adapt to new component libraries or design system updates

No need to rewrite your components - FormEngine Core works with what you already have while providing powerful form-building capabilities.

⚡ Build Forms Faster

Stop writing repetitive form code. With FormEngine Core, you can:

• Create complex forms in minutes, not hours
• Use simple JSON to define entire forms
• Automatically get validation, error handling, and state management
• Reuse components across multiple forms
• Update forms instantly without redeploying code

✅ Key Benefits

For Developers:

• Reduce development time
• Eliminate repetitive form boilerplate
• Built-in validation and error handling
• Type-safe with TypeScript support
• Easy to maintain and update

For Your Users:

• Smooth, responsive forms that work on any device
• Real-time validation provides instant feedback
• Accessible and user-friendly interface
• Fast loading and great performance

For Your Business:

• Completely free and open-source
• No licensing fees or restrictions
• Commercial-use friendly
• Active community support
• Full control over your forms

What Can You Build?

FormEngine Core is incredibly versatile. Here are just a few examples:

📝 Contact Forms

Create beautiful contact forms with validation in under 5 minutes:

Live Editor

function App() {
  const contactForm = {
    "tooltipType": "MuiTooltip",
    "errorType": "MuiErrorWrapper",
    "form": {
      "key": "Screen",
      "type": "Screen",
      "children": [
        {
          "key": "name",
          "type": "MuiTextField",
          "props": {
            "label": {"value": "Name"}
          },
          "schema": {
            "validations": [{"key": "required"}]
          }
        },
        {
          "key": "email",
          "type": "MuiTextField",
          "props": {
            "label": {"value": "Email address"}
          },
          "schema": {
            "validations": [
              {"key": "required"},
              {"key": "email"}
            ]
          }
        },
        {
          "key": "sendButton",
          "type": "MuiButton",
          "props": {
            "children": {"value": "Send message"}
          },
          "events": {
            "onClick": [
              {"name": "validate", "type": "common", "args": {"failOnError": true}},
              {"name": "onSubmit", "type": "custom"}
            ]
          }
        }
      ]
    }
  }

  const getForm = useCallback(() => JSON.stringify(contactForm), [contactForm])

  const actions = useMemo(() => {
    return {
      onSubmit: (e) => {
        // submit the form to the backend
        alert('Form data: ' + JSON.stringify(e.data))
      },
    }
  }, [])

  return <FormViewer
    view={muiView}
    getForm={getForm}
    actions={actions}
  />
}

Result

Loading...

🛒 E-commerce Forms

Build order forms, checkout processes, and product configurators with complex logic:

• Dynamic pricing calculations
• Product customization options

📊 Business Applications

Create powerful data entry forms for internal tools:

• Employee onboarding forms
• Inventory management
• Project tracking
• Report generation

How It Works

FormEngine Core uses a simple three-step process. FormEngine Core is designed to work with any React component library. The core engine handles form state, validation, and logic, while the rendering is delegated to an external component library. This means you can use:

• Material UI
• React Suite
• Mantine
• Your custom component library

The component library can be any React component library, including your own custom components. This flexibility allows you to maintain your design system while leveraging FormEngine Core's powerful form-building capabilities.

1. Define Your Form Structure

Create a JSON object that describes your form. Think of it as a blueprint:

{
  "form": {
    "key": "Screen",
    "type": "Screen",
    "children": [
      {
        "key": "muiBox1",
        "type": "MuiBox",
        "props": {},
        "children": [
          {
            "key": "muiTextField1",
            "type": "MuiTextField",
            "props": {
              "label": {
                "value": "First name"
              }
            }
          }
        ]
      }
    ]
  }
}

2. Render Your Form

Use the FormViewer component to display your form:

import {FormViewer} from '@react-form-builder/core'
import {view as muiView} from '@react-form-builder/components-material-ui'
import {myForm} from './myForm.json'

function MyApp() {
  return <FormViewer view={muiView} getForm={() => JSON.stringify(myForm)}/>
}

The view parameter is a component library adapter that maps JSON component types to actual React components. FormEngine Core is designed to work with any React component library:

• Material UI: Beautiful Material Design forms
• React Suite: Enterprise-ready forms with React Suite
• Mantine: Modern forms with Mantine components
• Your Custom Components: Forms with your own design system

You can use pre-built adapters for popular UI libraries or create your own adapter to integrate with any component library, including your company's design system.

3. That's It! 🎉

Your form is now live with:

• Automatic state management
• Built-in validation
• Responsive design
• Material UI styling
• Multi-Language Support

Powerful Features Made Simple

📱 Responsive Design (Works on Any Device)

Forms automatically adapt to desktops, tablets, and mobile phones. No extra work needed!

{
  "form": {
    "key": "Screen",
    "type": "Screen",
    "css": {
      "desktop": {
        "string": "padding: 30px;"
      },
      "mobile": {
        "string": "padding: 10px;"
      },
      "any": {
        "string": "padding: 20px;"
      }
    }
  }
}

🌍 Multi-Language Support

Easily create forms in multiple languages. Perfect for international applications:

Live Editor

function App() {
  const form = {
    "tooltipType": "MuiTooltip",
    "form": {
      "key": "Screen",
      "type": "Screen",
      "props": {},
      "children": [
        {
          "key": "muiTextField1",
          "type": "MuiTextField",
          "props": {
            "label": {
              "computeType": "localization"
            }
          }
        }
      ]
    },
    "localization": {
      "en-US": {
        "muiTextField1": {
          "component": {
            "label": "Name"
          }
        }
      },
      "es-ES": {
        "muiTextField1": {
          "component": {
            "label": "Nombre"
          }
        }
      },
      "fr-FR": {
        "muiTextField1": {
          "component": {
            "label": "Nom"
          }
        }
      }
    },
    "languages": [
      {
        "code": "en",
        "dialect": "US",
        "name": "English",
        "description": "American English",
        "bidi": "ltr"
      },
      {
        "code": "fr",
        "dialect": "FR",
        "name": "Français",
        "description": "French",
        "bidi": "ltr"
      },
      {
        "code": "es",
        "dialect": "ES",
        "name": "Español",
        "description": "Spanish",
        "bidi": "ltr"
      }
    ],
    "defaultLanguage": "en-US"
  }

  const getForm = useCallback(() => JSON.stringify(form), [form])

  return <FormViewer
    view={muiView}
    getForm={getForm}
    language={'es-ES'}
  />
}

Result

Loading...

✅ Smart Validation

Add validation rules using build-in rules powered by Zod:

Live Editor

function App() {
  const form = {
    "errorType": "MuiErrorWrapper",
    "tooltipType": "MuiTooltip",
    "form": {
      "key": "Screen",
      "type": "Screen",
      "props": {},
      "children": [
        {
          "key": "muiTextField1",
          "type": "MuiTextField",
          "props": {
            "label": {
              "value": "Email"
            }
          },
          "schema": {
            "validations": [
              {
                "key": "email"
              }
            ]
          }
        },
        {
          "key": "validateButton",
          "type": "MuiButton",
          "props": {
            "children": {"value": "Validate"}
          },
          "events": {
            "onClick": [
              {"name": "validate", "type": "common"}
            ]
          }
        }
      ]
    }
  }

  const getForm = useCallback(() => JSON.stringify(form), [form])

  return <FormViewer
    view={muiView}
    getForm={getForm}
  />
}

Result

Loading...

🎨 Beautiful Material UI Styling

All forms use Material UI components, ensuring they look professional and modern:

• Consistent with Google's Material Design
• Smooth animations and transitions
• Professional color schemes
• Accessible and user-friendly

⚡ Dynamic Behavior

Create smart forms that respond to user input:

Live Editor

function App() {
  const form = {
    "form": {
      "key": "Screen",
      "type": "Screen",
      "props": {},
      "children": [
        {
          "key": "hasDiscount",
          "type": "MuiFormControlLabel",
          "props": {
            "control": {
              "value": "Switch"
            },
            "label": {
              "value": "Has discount"
            }
          }
        },
        {
          "key": "muiTextField1",
          "type": "MuiTextField",
          "props": {
            "label": {
              "value": "Discount code"
            }
          },
          "renderWhen": {
            "value": "form.data.hasDiscount === true"
          }
        }
      ]
    }
  }

  const getForm = useCallback(() => JSON.stringify(form), [form])

  return <FormViewer
    view={muiView}
    getForm={getForm}
  />
}

Result

Loading...

🎯 Event Handling

Easily handle form submissions and user interactions:

Live Editor

function App() {
  const contactForm = {
    "tooltipType": "MuiTooltip",
    "errorType": "MuiErrorWrapper",
    "form": {
      "key": "Screen",
      "type": "Screen",
      "children": [
        {
          "key": "name",
          "type": "MuiTextField",
          "props": {
            "label": {"value": "Name"}
          },
          "schema": {
            "validations": [{"key": "required"}]
          }
        },
        {
          "key": "email",
          "type": "MuiTextField",
          "props": {
            "label": {"value": "Email address"}
          },
          "schema": {
            "validations": [
              {"key": "required"},
              {"key": "email"}
            ]
          }
        },
        {
          "key": "sendButton",
          "type": "MuiButton",
          "props": {
            "children": {"value": "Send message"}
          },
          "events": {
            "onClick": [
              {"name": "validate", "type": "common", "args": {"failOnError": true}},
              {"name": "onSubmit", "type": "custom"}
            ]
          }
        }
      ]
    }
  }

  const getForm = useCallback(() => JSON.stringify(contactForm), [contactForm])

  function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

  const actions = useMemo(() => {
    return {
      onSubmit: async (e) => {
        // wait for 1000 ms
        await sleep(1000)
        // submit the form to the backend
        alert('Form data: ' + JSON.stringify(e.data))
      },
    }
  }, [])

  return <FormViewer
    view={muiView}
    getForm={getForm}
    actions={actions}
  />
}

Result

Loading...

Perfect for Material UI Projects

If you're already using @mui/material, FormEngine Core is the perfect companion. Just use ready-made components @react-form-builder/components-material-ui.

Maintain Material Design

Your forms will automatically inherit:

• Material UI's color system
• Typography settings
• Spacing and layout
• Component variants (outlined, filled, standard)
• Dark mode support

What's Included

📦 Lightweight & Fast

• Small bundle size
• Tree-shakeable
• Only loads what you use

🔒 Reliable & Tested

• Comprehensive test coverage
• Production-ready
• Active maintenance
• Community support

📚 Complete Documentation

• Step-by-step guides
• Real-world examples
• API reference

Who Is Using FormEngine Core?

FormEngine Core is trusted by:

• Startups building MVPs quickly
• Enterprises modernizing legacy systems
• Agencies delivering client projects faster
• Developers who value productivity
• Teams who need maintainable code

Support & Community

• 📖 Documentation - Get started with step-by-step guides
• 💬 GitHub Discussions - Ask questions, share ideas
• 🐛 Issue Tracker - Report bugs, request features
• ⭐ Star on GitHub - Show your support

License

Completely Free - FormEngine Core is open-source and free for commercial use (MIT). No hidden costs, no restrictions, no attribution required.

---

Ready to Build Amazing Forms?

Start with the Installation Guide and create your first form in minutes!

📄️ Installation

Get FormEngine Core up and running in your React project in under 5 minutes with our simple installation guide

📄️ Rendering Forms

FormEngine Core provides a flexible and powerful system for rendering forms defined in JSON format. This document covers the fundamentals of

📄️ Handling Form Data

Complete guide to working with form data in FormViewer - from basic data binding to advanced data manipulation

📄️ Validation

Comprehensive guide to form validation in FormEngine Core

📄️ Styling Components and Forms

Learn how to style forms and components in FormEngine Core using CSS, JSON, and responsive design techniques

📄️ Adaptive Layout

Learn how FormEngine Core automatically adapts forms to different screen sizes with device-specific styling and view modes

📄️ Conditional rendering

Show or hide components with renderWhen based on current form state.

📄️ Actions and Events

Actions and events are the core building blocks for creating interactive forms in FormEngine Core. They allow you to define what happens

📄️ Localization and Internationalization

FormEngine Core provides comprehensive support for localization and internationalization, allowing you to create forms that can be displayed

📄️ Disabled and Read-Only Components

Many component libraries expose disabled and readOnly flags. disabled usually blocks interaction, while readOnly allows viewing

📄️ Tooltip

Tooltips let you attach contextual help to form fields without taking up layout space. In FormEngine Core, tooltips are rendered by wrapping

📄️ HTML attributes

Add custom HTML attributes to components for testing, accessibility, and integration.

📄️ User defined properties

Override component properties at runtime using userDefinedProps and setUserDefinedProps.

📄️ Computed Properties

Define component properties that recalculate automatically based on form state.

📄️ Embedded forms

Nest forms inside other forms using the EmbeddedForm component and the getForm function.

📄️ Modal

📄️ Form JSON

Understand the shared structure of FormEngine form JSON and how component sets extend it.

📄️ JSON schema

🗃️ Custom components

Custom components are the heart of FormEngine Core's extensibility