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 (0)