Installation

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

tip

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
import React from 'react'
import {BuilderView, FormBuilder} from '@react-form-builder/designer'

const builderView = new BuilderView([])

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

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

tip

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
import React from 'react'
import {rSuiteComponents} from '@react-form-builder/components-rsuite'
import {BuilderView, FormBuilder} from '@react-form-builder/designer'

const components = rSuiteComponents.map(c => c.build())
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

tip

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 rxjs@7.8.0 stylis-plugin-rtl@2.1.1 --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
import React from 'react'
import {view} from '@react-form-builder/components-rsuite'
import {FormViewer} from '@react-form-builder/core'

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. Two bundles are provided:

designer bundle: https://unpkg.com/@react-form-builder/designer-bundle@latest/dist/index.iife.js
viewer bundle: https://unpkg.com/@react-form-builder/viewer-bundle@latest/dist/index.iife.js

Here's an example of the usage:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>FormEngine bundle embedding example</title>
  <script src="https://unpkg.com/@react-form-builder/designer-bundle@latest/dist/index.iife.js" async defer></script>
  <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="designer"></div>
<div id="viewer"></div>

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

    const designerBundle = window.FormEngineDesignerBundle;
    window.reactRoot = designerBundle.renderFormBuilder('designer', props)

    const viewerBundle = window.FormEngineViewerBundle;
    window.designerRoot = 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>

Designer​

Viewer​

CDN​

Designer

Viewer

CDN