Skip to main content
Get FormEngine Core up and running in your React project in under 5 minutes. Whether you’re starting a new project or adding it to an existing one, we’ve got you covered.

​
Quick Start

​
Step 0: Create a new application (optional)

npm create vite@latest my-formengine-core-app -- --template react-ts
cd my-formengine-core-app
npm install

​
Step 1: Install the Package

First, install FormEngine Core: 
npm install @react-form-builder/core

​
Step 2: Install Material UI

To use Material UI components with FormEngine Core, install these packages: 
npm install @react-form-builder/components-material-ui @emotion/react @emotion/styled

​
Step 3: Create Your First Form

Create a simple contact form by adding this code to your React component:
live
function App() {
  const form = useMemo(() => ({
    "actions": {
      "submitForm": {
        "body": "alert('Thank you for your message! ' + JSON.stringify(e.data));",
        "params": {}
      }
    },
    "tooltipType": "MuiTooltip",
    "errorType": "MuiErrorWrapper",
    "form": {
      "key": "Screen",
      "type": "Screen",
      "children": [
        {
          "key": "muiStack1",
          "type": "MuiStack",
          "props": {
            "spacing": {
              "value": "10px"
            }
          },
          "children": [
            {
              "key": "name",
              "type": "MuiTextField",
              "props": {
                "label": {
                  "value": "Your name"
                }
              },
              "schema": {
                "validations": [
                  {
                    "key": "required"
                  }
                ]
              }
            },
            {
              "key": "email",
              "type": "MuiTextField",
              "props": {
                "label": {
                  "value": "Email address"
                }
              },
              "schema": {
                "validations": [
                  {
                    "key": "required"
                  },
                  {
                    "key": "email"
                  }
                ]
              }
            },
            {
              "key": "message",
              "type": "MuiTextField",
              "props": {
                "multiline": {
                  "value": true
                },
                "label": {
                  "value": "Message"
                }
              }
            },
            {
              "key": "submit",
              "type": "MuiButton",
              "props": {
                "variant": {
                  "value": "contained"
                },
                "children": {
                  "value": "Send message"
                }
              },
              "events": {
                "onClick": [
                  {
                    "name": "validate",
                    "type": "common",
                    "args": {
                      "failOnError": true
                    }
                  },
                  {
                    "name": "submitForm",
                    "type": "code"
                  }
                ]
              }
            }
          ]
        }
      ]
    }
  }), [])

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

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

​
Step 4: Run Your Application

Start your development server: 
npm run dev
Open your browser and navigate to http://localhost:5173/. You should see a working contact form.

​
Framework-Specific Guides

FormEngine Core works with all popular React frameworks and build tools:

​
Next.js

FormEngine Core is fully compatible with Next.js (both pages and app router):
  1. Install FormEngine Core: 
    npm install @react-form-builder/core
  2. Install components library, for example Material UI: 
    npm install @react-form-builder/components-material-ui @emotion/react @emotion/styled
  3. Create your form component (client component): 
    'use client';

import { view } from '@react-form-builder/components-material-ui';
import { FormViewer } from '@react-form-builder/core';
import { useCallback, useMemo } from 'react';

export default function ContactForm() {
  const form = useMemo(() => ({
    // your form definition
  }), [])

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

  return <FormViewer
    view={view}
    getForm={getForm}
  />
}
  4. Use it in your pages: 
    import ContactForm from "./ContactForm";

export default function Home() {
  return <ContactForm/>
}

​
Remix (React Router)

FormEngine Core supports Remix seamlessly (Remix v2 is now part of the React Router):
  1. Install FormEngine Core: 
    npm install @react-form-builder/core
  2. Install components library, for example Material UI: 
    npm install @react-form-builder/components-material-ui @emotion/react @emotion/styled
  3. Create your form component: 
    import { view } from '@react-form-builder/components-material-ui';
import { FormViewer } from '@react-form-builder/core';
import { useCallback, useMemo } from 'react';

export default function MyForm() {
  const form = useMemo(() => ({
    // your form
  }), [])

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

  return <FormViewer
    view={view}
    getForm={getForm}
  />
}
  4. Use it on your page: 
    import MyForm from "./MyForm";

export function Welcome() {
  return <MyForm />;
}

​
Troubleshooting Installation

​
Common Issues

“Module not found” errors
  • Make sure you’ve installed all peer dependencies
  • Try clearing your node_modules and reinstalling: 
    rm -rf node_modules package-lock.json
npm install
Material UI styles not applying
  • Ensure you have the Emotion packages installed: 
    npm install @emotion/react @emotion/styled
  • Check that you’re using compatible versions of Material UI and React
Form not rendering
  • Verify your JSON schema is valid
  • Check the browser console for errors
  • Make sure you’re passing the view prop to FormViewer
TypeScript errors
  • Ensure you’re using TypeScript 5.3 or higher
  • Check that your tsconfig.json includes "jsx": "react-jsx"

​
Getting Help

If you’re stuck, we’re here to help:
For more information:

​
Next steps

  • Rendering Forms — Learn how to render your form using FormViewer with different UI libraries
  • Quick Start — Build and run your first form in minutes
Last modified on April 16, 2026