Skip to main content

​
Install FormEngine in React Projects

Use this page when you need the right installation path for your stack. FormEngine is distributed as npm packages. Most teams start with FormEngine Core plus a component library, then add the Designer only if they need a visual drag-and-drop builder. Installation is usually a path decision between runtime and builder layers: Installation path example

​
Choose the installation path

There are two main ways to use FormEngine:
  • install FormEngine Core to render and manage JSON-driven forms in your app
  • install FormEngine Designer if your team also needs a visual builder for creating and editing forms
If your goal is first success, go straight to the quickstart. If your goal is choosing the right package setup, continue here.

​
Step 1: Install FormEngine Core

Install the runtime first: 
npm install @react-form-builder/core
Core is the schema-driven runtime. It handles rendering, form data, validation, and dynamic behavior.

​
Step 2: Choose a UI layer

FormEngine Core does not force one visual component set. You pair it with a component library or your own custom components.
OptionPackageBest for
RSuite@react-form-builder/components-rsuitefastest way to get started
Material UI@react-form-builder/components-material-uiapps already using MUI
Mantine@react-form-builder/components-mantineapps already using Mantine
shadcn/ui or custom design systemcustom componentsteams with their own UI layer

​
Install with RSuite

npm install @react-form-builder/components-rsuite

​
Install with Material UI

npm install @react-form-builder/components-material-ui @emotion/react @emotion/styled

​
Install with Mantine

npm install @react-form-builder/components-mantine
If you are building against your own component library, use the custom components guide.

​
Step 3: Install the Designer when needed

The Designer is optional. It is used to create and edit forms visually. It is not required for rendering forms in production. 
npm install @react-form-builder/designer
Use the Designer when:
  • non-developers need to edit forms
  • your team wants drag-and-drop authoring
  • forms change often and should not live only inside developer-owned code
Use only Core when:
  • developers fully own the schema
  • forms are created directly in JSON or code
  • you only need rendering and runtime behavior

​
Framework compatibility

FormEngine works with modern React app setups:
FrameworkStatusGuide
Vite + ReactsupportedQuickstart
Next.jssupportedNext.js integration
RemixsupportedRemix integration
ElectronsupportedElectron integration
Angular wrappersupportedAngular integration
If your stack is React-based, the main question is usually not whether FormEngine can run there. The main question is which UI layer and builder workflow fit your team best.

​
Common installation issues

Most installation problems come from one of these:
  • missing peer dependencies for a chosen UI library
  • using the wrong component package name
  • framework-specific setup details such as client-side rendering boundaries
  • mixing up Core runtime packages and Designer packages
If your package manager does not install peer dependencies automatically, check the package requirements for the UI layer you chose.

​
FAQ

No. Many teams use Core only. Add the Designer when you need visual form authoring.
Core plus the RSuite components package is usually the fastest path to a working form.
Yes. If you do not want a prebuilt component package, use custom components and keep the schema-driven runtime.
Go to the quickstart if you want a working example, or to integrations if you need framework-specific setup guidance.

​
Next steps

Open the quickstart

Render your first working form from JSON.

Browse integrations

See the setup path for your framework or UI stack.

Review custom components

Connect FormEngine to your own component system.

See Designer setup

Continue if your team needs the visual builder.