← Files DocuSealARCHIVED FILE

skills/docuseal-code/references/embed/form-builder-react-mount-form-builder-component-with-jsx.md

1.3 KB · Oct 8, 2026 · 00:04 UTC

↓ Download file

See the change to this file →

## Mount form builder component with JSX

Open your terminal or command prompt and navigate to your project directory. Then, run the following command to install the `@docuseal/react` package


```
npm install @docuseal/react --save
```

Once the installation is complete, you'll need to import the component in the relevant file where you intend to use DocuSeal. With the component imported, you can now use `<DocusealBuilder />` within your React JSX template wherever you want to integrate the DocuSeal document form builder functionality.

Trigger the API call to your backend endpoint to retrieve a JSON Web Token (JWT) generated on the previous step. The useEffect hook handles this API request upon component mount, fetching the JWT asynchronously.

#### React

```
import { useState, useEffect } from 'react';
import { DocusealBuilder } from '@docuseal/react'

export default function Home() {
  const [token, setToken] = useState(null);

  useEffect(() => {
    fetch('/your_backend/docuseal_builder/init').then(async (resp) => {
      // API should respond with JWT generated on your backend
      const { jwt } = await resp.json()

      setToken(jwt)
    })
  }, []);

  return (
    <div>
      {token ? (
        <DocusealBuilder token={token} />
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}
```

SHA-256: cc30e2469fbb468c790ba163738568adb29bd7a44f6e8d2d5aabc810140744a4