Install FormEngine Core - Quick Start Guide

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

FormEngine Core works beautifully with Material UI components. If you want to use them (and we highly recommend you do!), install these packages:

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

Step 3: Create Your First Form

info

Starting with FormEngine Core 8.0.0, styles for Core components are not injected using the emotion library, but are packaged separately, so you should import the styles yourself.

This is especially useful if you are in an environment with a strict Content Security Policy.

import "@react-form-builder/core/assets/styles.css"

Now for the fun part! Create a simple contact form by adding this code to your React component:

Live Editor

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}
  />
}

Result

Loading...

Step 4: Run Your Application

Start your development server:

npm run dev

Open your browser and navigate to http://localhost:5173/. You should see your beautiful, fully functional 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';
   
   import "@react-form-builder/core/assets/styles.css";
   
   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';
   
   import "@react-form-builder/core/assets/styles.css";
   
   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:

• 🐛 Open an issue on GitHub for bugs
• 📧 Email us at support@formengine.com for personalized support

---

For more information:

• Form JSON structure
• Rendering forms
• Validation
• Handling form data
• Components library