DEV Community

Play Button Pause Button
Optimajet Limited
Optimajet Limited

Posted on

A True React Hook Form Alternative โ€“ FormEngine Core 4.0 Is Now MIT Licensed and Free! ๐Ÿš€

React developers, here's big news! On May 15, 2025, Optimajet released FormEngine Core 4.0, making essential libraries available under the permissive MIT license free even for commercial use. FormEngine is now the leading alternative to React Hook Form, especially for teams building complex, interactive forms.

Why switch from React Hook Form to FormEngine?

โšก๏ธ Rapid and Simple Setup

React Hook Form requires extensive manual setup of controllers, hooks, and validation logic. FormEngine simplifies this by leveraging intuitive, schema-based definitions.

๐ŸŽจ Powerful Drag-and-Drop FormEngine Visual Designer

Unlike React Hook Formโ€™s code-only approach, FormEngine includes an intuitive visual editor, allowing instant form creation and modification, significantly speeding up development. (Note: FormEngine Visual Designer is a paid component for commercial use; however, its full functionality is available for unlimited testing.)

๐Ÿ”Œ Easy Custom Components Integration

React Hook Formโ€™s custom component integration can be cumbersome. FormEngine makes this seamless, simplifying component binding and custom logic implementation.

๐Ÿ“ฑ Real-Time Form Previews

Get instant visual feedback as you build forms. React Hook Form needs extra setup or third-party tools for similar functionality.

Built-In Component Library

Unlike React Hook Form, FormEngine comes with a built-in library of ready-to-use components (@react-form-builder/components-rsuite), further accelerating development and reducing the need to create components from scratch.

Completely Free and MIT Licensed

FormEngineโ€™s core libraries are now MIT-licensed and fully free, even for commercial use:

๐Ÿ“ฆ @react-form-builder/core
๐Ÿ“ฆ @react-form-builder/components-rsuite
๐Ÿ“ฆ @react-form-builder/viewer-bundle

๐Ÿ’ก Highlights of FormEngine Core 4.0:

  • UI-Agnostic: Integrate effortlessly with UI libraries like MUI, Ant Design, shadcn/ui, and more.
  • Framework-Friendly: Built-in support for Next.js, Remix, and framework-agnostic CDN deployment.
  • Multi-Database Compatibility: Seamlessly use MySQL, PostgreSQL, MongoDB, SQLite, and more.
  • Robust Validation: Powered by Zod, with extensible support for Yup, AJV, Superstruct, and Joi.
  • Dynamic & Responsive: Create reactive, adaptive layouts with MobX-powered dynamic properties.
  • Flexible Storage: Store forms as JSON or generate them programmatically.

๐ŸŽฌ Watch the video to see FormEngine in actionโ€”start building your forms faster, smarter, and with greater ease than ever before!

In this step-by-step tutorial, I'll walk you through building a simple React demo app using FormEngine. You'll see how quickly you can design, render, and manage forms โ€” without writing endless custom code.

Install

npm install @react-form-builder/core
Enter fullscreen mode Exit fullscreen mode

Quickstart

import {viewWithCss} from '@react-form-builder/components-rsuite'
import {buildForm, FormViewer} from '@react-form-builder/core'

const simpleForm = buildForm({errorType: 'RsErrorMessage'})
  .component('container', 'RsContainer')
  .style({flexDirection: 'row'})
  .children((builder) =>
    builder
      .component('firstName', 'RsInput')
      .prop('placeholder', 'Enter your first name')
      .prop('label', 'First Name')
      .validation('required')

      .component('lastName', 'RsInput')
      .prop('placeholder', 'Enter your last name')
      .prop('label', 'Last Name')
      .validation('required')
  )

  .component('birthDate', 'RsDatePicker')
  .prop('label', 'Birth Date')
  .prop('oneTap', true)
  .validation('min').args({value: '1900-01-07T12:25:37.000Z'})

  .component('submit', 'RsButton')
  .prop('children', 'Submit')
  .prop('color', 'blue')
  .prop('appearance', 'primary')
  .event('onClick')
  .commonAction('validate').args({failOnError: true})
  .customAction('onSubmit')
  .json()

export const App = () => {
  return <FormViewer
    view={viewWithCss}
    getForm={() => simpleForm}
    actions={{
      onSubmit: (e) => {
        // submit the form to the backend
        alert('Form data: ' + JSON.stringify(e.data))
      },
    }}
  />
}
Enter fullscreen mode Exit fullscreen mode

What you'll learn:

  1. How to install and set up the FormEngine Core Library
  2. Creating and editing forms using JSON
  3. Running your app and previewing form behavior
  4. Using the FormEngine Visual Designer to create forms

๐ŸŒ Help us grow the ecosystem, if you like the project:

โญ Star us on GitHub

๐Ÿ’ฌ Share feedback! Have feature requests or thoughts on the docs? Share them in the comments below!

๐Ÿ”— Mention @optimajet Formengine X / Twitter

๐Ÿš€ This is just the beginning โ€” part two is on the way!

We'll provide a detailed comparison between React Hook Form and FormEngine Core.

๐Ÿ“˜ Docs, Live Demo & Examples: formengine.io/documentation

Weโ€™d love to address your specific questions, so please leave your questions in the comments, and we'll include the answers in our upcoming comparison!

Top comments (2)

Collapse
 
ttsoares profile image
Thomas TS

It would be possible to use Tailwind for styling ?

Collapse
 
optimajet profile image
Optimajet Limited

It is important to understand that FormEngine itself does not include any styles. Styling is applied at the level of the form components you connect to it, such as Input, Calendar, Labels, etc.

Optimajet has created a free component library based on RSuite. This RSuite-based component library is best styled using RSuiteโ€™s own styling system.

If you prefer to use Tailwind CSS, it is better to choose a component library that is more suitable for it, such as shadcn/ui. You can also find and integrate ready-made styled Tailwind form components, for example Flowbite, or any other that fits your needs.