How to Access and Integrate Custom Tools in the Unlayer Editor and React Applications

Unlayer provides flexible customization for its users, allowing the addition of custom tools to enhance functionality. This guide explains how to access these tools within the Unlayer editor and integrate them with the "react-email-editor" package in React-based projects.

Overview of Custom Tools in Unlayer

Custom tools in Unlayer allow developers to extend the functionality of the editor by introducing specific actions or content blocks. They can be configured to appear in the content panel and embedded in the editor interface.

The amount of custom tools allowed per plan is limited as well. However, you can always procure more custom tools as Add-Ons. Current limitations are as follows:

Legacy Plans:

Startup - 1 custom tool

Business - 2 custom tools

Growth - 5 custom tools

New Plans:

Launch - 1 custom tool

Scale - 3 custom tools

Optimize - 5 custom tools

Setting Up a Custom Tool in a React Application

To integrate a custom tool into Unlayer’s builder within a React application, follow the steps below:

1. Bundle Your Custom Tool

Use a module bundler like Webpack or Vite to bundle your custom tool code into a standalone JavaScript file. Organize your tool code in a dedicated directory for maintainability.

2. Host the Custom Tool

After bundling, upload the output JavaScript file to a publicly accessible URL (e.g., https://yourdomain.com/custom-tool.js).

3. Add `customJS` to Builder Configuration

Use the customJS option in the EmailEditor component to load your custom tool at runtime.

<EmailEditor
  ref={emailEditorRef}
  onReady={onReady}
  options={{
    projectId: 123456, // Replace with your actual Unlayer project ID
    displayMode: "email", // replace with "web", "document", or "popup"
    version: "latest",
    customJS: "https://yourdomain.com/custom-tool.js" // Replace with your actual custom JS file URL
  }}
/>

4. Custom Tool Code with JSX

Inside your custom tool script, you can use JSX for the viewer and exporter components.

If you want to import other components into the custom tool code, you can add JSX to the Unlayer’s viewer component.

For exporters, make sure to convert JSX to string using ReactDOMServer.renderToStaticMarkup(). Here is the code example for the same:

If you want to import other components into the custom tool code, you can add JSX to the Unlayer’s viewer component.
For exporters, make sure to convert JSX to string using ReactDOMServer.renderToStaticMarkup().

Example Code:

unlayer.registerTool({
  // ... your tool configuration here
  renderer: {
    Viewer: MyColorPicker, // this is your React component
    exporters: {
      web: function (values) {
        return ReactDOMServer.renderToStaticMarkup(
          <MyColorPicker />
        );
      },
      email: function (values) {
        return ReactDOMServer.renderToStaticMarkup(
          <MyColorPicker />
        );
      }
    },
    head: {
      css: function (values) {
        // Optional: return custom CSS as string
      },
      js: function (values) {
        // Optional: return custom JS as string
      }
    }
  }
});

Debugging Tips

If issues persist with the customJS parameter, create a simplified reproducible example (e.g., using CodeSandbox) to troubleshoot the tool behavior more effectively.
Make sure that your custom tool code is publicly accessible.

Conclusion

By following these steps, you can efficiently access, configure, and integrate custom tools in both the Unlayer editor and React applications. If you encounter specific issues, verify the setup details and ensure configurations are aligned with Unlayer’s API and editor options.

We also have a Live Example of how to create a custom tool in React application.

How can I access and integrate custom tools in the Unlayer editor and React applications?