Skip to main content
FormEngine Designer installed in a React application

​
Designer

The form designer in Form Builder is represented by the React component FormBuilder. The FormBuilder component is located in the package @react-form-builder/designer. To install the package in your application, use the command: 
npm install @react-form-builder/designer
If your package manager does not support automatic installation of peer dependencies, for example you use the --legacy-peer-deps flag in npm, then you need to install peer dependencies manually.
npm install @emotion/css@11.10.5 @emotion/react@11.10.5 @emotion/styled@11.10.5 mobx@6.9.0 rsuite@5.59.1 rsuite-table@5.10.3 --save-exact
Below is sample code for embedding the FormBuilder component into your application:
App.tsx

// optional
const formStorage = new IndexedDbFormStorage('example-db', 'example-store')

const builderView = new BuilderView([])

function App() {
  const [ready, setReady] = useState<boolean>(false)

  // optional
  useEffect(() => {
    formStorage.init({
      example: buildForm().json()
    }).then(() => {
      setReady(true)
    }).catch(console.error)
  }, [])

  if (!ready) return null

  return <FormBuilder view={builderView} formStorage={formStorage} formName="example"/>
}

export default App
You can find a description of the component properties in the FormBuilderProps API. The only mandatory property is view, which is a description of the component metadata used to design the form. You can use the pre-built components found in the @react-form-builder/components-rsuite package to start a form designer with a populated set of components. Run the following command to install the package: 
npm install @react-form-builder/components-rsuite
If your package manager does not support automatic installation of peer dependencies, for example you use the --legacy-peer-deps flag in npm, then you need to install peer dependencies manually.
npm install @emotion/css@11.10.5 @emotion/react@11.10.5 @emotion/styled@11.10.5 @rsuite/icons@1.0.2
react-number-format@5.1.4 rsuite@5.59.1 --save-exact
Then copy and paste the code below:
App.tsx
// highlight-next-line

// highlight-next-line
const components = rSuiteComponents.map(c => c.build())
// highlight-next-line
const builderView = new BuilderView(components)

function App() {
  return <FormBuilder view={builderView}/>
}

export default App
This is the minimal React component code with which you can add a form designer to your application.

​
Viewer

The FormViewer component is responsible for displaying the form in Form Builder. The FormBuilder uses the FormViewer component to display the form in the center panel. To install the package in your application, use the command: 
npm install @react-form-builder/core
If your package manager does not support automatic installation of peer dependencies, for example you use the --legacy-peer-deps flag in npm, then you need to install peer dependencies manually.
npm install @emotion/cache@11.10.5 @emotion/css@11.10.5 @emotion/react@11.10.5 mobx@6.9.0 mobx-react@7.6.0 --save-exact
The FormViewer component receives as input the properties described in the type FormViewerProps. Let’s look at an example of a simple application using a FormViewer component with a set of components from the React Suite library:
App.tsx

const form = `{
  "form": {
    "key": "Screen",
    "type": "Screen",
    "props": {},
    "children": [
      {
        "key": "RsInput 1",
        "type": "RsInput",
        "props": {}
      }
    ]
  }
}`

function App() {
  return <FormViewer view={view} getForm={_ => form}/>
}

export default App
This code sample creates a form variable that contains a JSON form string, there is one input field on the form. In the component FormViewer is passed the mandatory view property, which is a set of component metadata for the React Suite library. As well as the getForm property, which accepts a function that returns the value of the form variable.

​
CDN

You can immediately start using the FormEngine without using npm, bundlers and other frontend infrastructure by installing it via CDN. The following bundles are provided:

​
Using Designer bundle

Here’s an example of the usage: 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>FormEngine Designer bundle embedding example</title>
  <script src="https://unpkg.com/@react-form-builder/designer-bundle@latest/dist/index.iife.js" async defer></script>
</head>
<body style="margin: 0">
<div id="designer"></div>

<script type="text/javascript">
  window.onload = function () {
    const props = {
      getForm: () => form
    }

    const designerBundle = window.FormEngineDesignerBundle;
    window.designerRoot = designerBundle.renderFormBuilder('designer', props)
  }
  const form = `
{
  "version": "1",
  "form": {
    "key": "Screen",
    "type": "Screen",
    "props": {},
    "children": [
      {
        "key": "RsInput",
        "type": "RsInput",
        "props": {}
      }
    ]
  },
  "localization": {},
  "languages": [
    {
      "code": "en",
      "dialect": "US",
      "name": "English",
      "description": "American English",
      "bidi": "ltr"
    }
  ],
  "defaultLanguage": "en-US"
}
`
</script>
</body>
</html>
By default, the renderFormBuilder function creates a designer with a full set of available components. If you want to change the list of added components, you can use the createBuilderView function: 
window.onload = function () {
  const {
    renderFormBuilder,
    createBuilderView,
    rSuiteComponents,
    richTextComponent,
    signatureComponent,
    fastQrComponent,
    googleMapComponent
  } = window.FormEngineDesignerBundle

  const {
    formEngineRsuiteCssLoader,
    ltrCssLoader,
    rsErrorMessage,
    RsLocalizationWrapper,
    rsTooltip,
    rtlCssLoader
  } = rSuiteComponents

  const filteredRSuiteComponents = rSuiteComponents.rSuiteComponents.filter(component => {
    return component.data.component.displayName !== 'RsTimePicker'
  })

  const myComponentsSet = [
    ...filteredRSuiteComponents,
    richTextComponent.richTextComponent,
    signatureComponent.signatureComponent,
    fastQrComponent.fastQrComponent,
    googleMapComponent.googleMapComponent
  ].map(component => component.build())

  const view = createBuilderView(myComponentsSet)
    .withViewerWrapper(RsLocalizationWrapper)
    .withCssLoader('ltr', ltrCssLoader)
    .withCssLoader('rtl', rtlCssLoader)
    .withCssLoader('common', formEngineRsuiteCssLoader)

  window.designerRoot = renderFormBuilder('designer', {
    getForm: () => form,
    view
  })
}

​
Using Viewer bundle

Here’s an example of the usage: 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>FormEngine Viewer bundle embedding example</title>
  <script src="https://unpkg.com/@react-form-builder/viewer-bundle@latest/dist/index.iife.js" async defer></script>
</head>
<body style="margin: 0">
<div id="viewer"></div>

<script type="text/javascript">
  window.onload = function () {
    const props = {
      getForm: () => form
    }

    const viewerBundle = window.FormEngineViewerBundle;
    window.viewerRoot = viewerBundle.renderFormViewer('viewer', props)
  }
  const form = `
{
  "version": "1",
  "form": {
    "key": "Screen",
    "type": "Screen",
    "props": {},
    "children": [
      {
        "key": "RsInput",
        "type": "RsInput",
        "props": {}
      }
    ]
  },
  "localization": {},
  "languages": [
    {
      "code": "en",
      "dialect": "US",
      "name": "English",
      "description": "American English",
      "bidi": "ltr"
    }
  ],
  "defaultLanguage": "en-US"
}
`
</script>
</body>
</html>

​
Using Viewer premium bundle

Here’s an example of the usage: 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>FormEngine Viewer premium bundle embedding example</title>
  <script src="https://unpkg.com/@react-form-builder/viewer-bundle-premium@latest/dist/index.iife.js" async defer></script>
</head>
<body style="margin: 0">
<div id="viewer"></div>

<script type="text/javascript">
  window.onload = function () {
    const props = {
      getForm: () => form
    }

    const viewerBundle = window.FormEngineViewerBundle;
    window.viewerRoot = viewerBundle.renderFormViewer('viewer', props)
  }
  const form = `
{
  "version": "1",
  "form": {
    "key": "Screen",
    "type": "Screen",
    "props": {},
    "children": [
      {
        "key": "RsInput",
        "type": "RsInput",
        "props": {}
      }
    ]
  },
  "localization": {},
  "languages": [
    {
      "code": "en",
      "dialect": "US",
      "name": "English",
      "description": "American English",
      "bidi": "ltr"
    }
  ],
  "defaultLanguage": "en-US"
}
`
</script>
</body>
</html>
By default, in the premium bundle, the renderFormViewer function creates a viewer with a full set of available components. If you want to change the list of added components, you can use the createView function: 
window.onload = function () {
  const {
    renderFormViewer,
    createView,
    rSuiteComponents,
    richTextComponent,
    signatureComponent,
    fastQrComponent,
    googleMapComponent
  } = window.FormEngineViewerBundle

  const {
    formEngineRsuiteCssLoader,
    ltrCssLoader,
    RsLocalizationWrapper,
    rtlCssLoader
  } = rSuiteComponents

  const filteredRsuiteComponents = rSuiteComponents.rSuiteComponents.filter(component => {
    return component.data.component.displayName !== 'RsTimePicker'
  })

  const myComponentsSet = [
    ...filteredRsuiteComponents,
    richTextComponent.richTextComponent,
    signatureComponent.signatureComponent,
    fastQrComponent.fastQrComponent,
    googleMapComponent.googleMapComponent
  ].map(component => component.build().model)

  const view = createView(myComponentsSet)
    .withViewerWrapper(RsLocalizationWrapper)
    .withCssLoader('ltr', ltrCssLoader)
    .withCssLoader('rtl', rtlCssLoader)
    .withCssLoader('common', formEngineRsuiteCssLoader)

  window.viewerRoot = renderFormViewer('viewer', {
    getForm: () => form,
    view
  })
}

​
Next steps

Last modified on April 16, 2026