Getting started with React Form Builder component

23 Sep 20265 minutes to read

The Form Builder is an intuitive, visual form designer that lets you create and customize forms interactively by dragging and dropping fields—no code required. You can visually design forms, configure field properties, and preview the generated form in real time. The Form Builder also allows you to export the form schema for use with the Form Renderer control.

This guide provides step-by-step instructions for setting up a Vite + React project with TypeScript and integrating the Syncfusion® React Form Builder component. For other setup flows (Create React App, framework host setups), see See Also.

Prerequisites

Set up the Vite project

To create a new React application, run one of the following commands based on your preferred language:

React with JavaScript

npm create vite@latest my-project -- --template react
yarn create vite my-project --template react

React with TypeScript

npm create vite@latest my-project -- --template react-ts
yarn create vite my-project --template react-ts

During the setup process, the CLI will prompt you for a few configuration options. Select the following:

  • Which linter to use? → ESLint
  • Install with npm and start now? → Yes

Selecting Yes automatically installs the project dependencies and starts the development server.

After verifying that the application starts successfully, terminate the development server in the terminal and proceed to the next step.

Then, navigate to the project directory:

cd my-project

Add Syncfusion® React packages

All Syncfusion Essential® JS 2 packages are published to the npm registry.

To install the React Form Builder package, use the following command:

npm install @syncfusion/ej2-react-form-builder
yarn add @syncfusion/ej2-react-form-builder

Import Syncfusion® CSS styles

Themes for Syncfusion® React components can be applied using CSS or SASS files from the npm theme packages, CDN, CRG, or Theme Studio. For more information, see the themes documentation.

This guide uses the Material 3 theme as an example, sourced from the theme package. To install the Material 3 theme package, use the following command:

npm install @syncfusion/ej2-material3-theme
yarn add @syncfusion/ej2-material3-theme

By default, Vite projects include a src/index.css file with default styles. These default styles may conflict with Syncfusion component styles. Clear all content from the src/index.css file to prevent style conflicts.

The required styles for the Form Builder are imported in the src/App.css file:

@import "@syncfusion/ej2-material3-theme/styles/material3.css";

Adding the Form Builder component

Now, add the React Form Builder component to the src/App.tsx file by importing and using it within the application.

Add the following code to the src/App.tsx file:

import { FormBuilderComponent, Schema } from '@syncfusion/ej2-react-form-builder';
import './App.css';

function App() {
  return (
    <FormBuilderComponent />
  );
}

export default App;
import { FormBuilderComponent } from '@syncfusion/ej2-react-form-builder';
import './App.css';

function App() {
  return (
    <FormBuilderComponent />
  );
}

export default App;

Run the application

Run the npm run dev command in the terminal to start the development server. This command compiles your code and serves the application locally, opening it in the browser.

npm run dev

When the build succeeds, Vite reports a local URL (default: http://localhost:5173). Open that URL in a browser to view the Form Builder. If the port is already in use, Vite automatically picks the next free port and prints the new URL in the terminal.

The output will appear as follows:

React Form Builder

Basic components of the Form Builder

The Form Builder control consists of the following sections:

  1. Left Pane / Toolbox — Displays all the supported form fields, which can be dragged and dropped.
  2. Central design canvas — Holds the dropped form fields to construct the form.
  3. Right Pane — Provides options to customize the form settings as well as the selected form fields.
  4. Code view — Displays the form schema during the form design process.
  5. Form Preview — Allows you to preview and interact with the generated form in real time once it is created.

Adding form fields to the design canvas

Form fields can be added to the central design canvas in the following ways:

  • Form Components Panel — A toolbox of form fields is available in the left-side pane to drag and drop them onto the design canvas.
  • Context Menu in the Design Canvas — After the first form field is dropped, a button at the end of the central canvas can be used to add additional form fields using a context menu that appears when the button is clicked.

Form Builder with context menu

See Also