Skip to main content

How do I use bundled JavaScript files to integrate custom tools in Unlayer?

Khizar Tanveer avatar
Written by Khizar Tanveer
Updated over 3 months ago

How to Use Bundled JavaScript Files for Custom Tools in Unlayer

Creating custom tools and tabs in Unlayer often involves using JavaScript files to incorporate new functionalities. Whether or not these files need to be bundled depends on the type of JavaScript used.

Overview of Custom Tool Integration

Unlayer allows developers to extend its functionality by integrating custom tools into its editor. This may include custom tabs or features you build to enhance the editor's capabilities. These tools are hosted as JavaScript (JS) files that are linked through the customJS property in the editor configuration.

Do You Need to Bundle Your JavaScript Files?

The necessity to bundle your JavaScript file depends on how the custom tool is developed:

  1. React Components: If your custom tool or feature is built using React components, you must bundle the JS file using tools like Webpack. Bundling ensures that dependencies are included in a single file, making it compatible with Unlayer’s editor environment.

  2. Vanilla JavaScript: If your tool is developed using plain JavaScript (vanilla JS), bundling is not required. You can directly link the unbundled JavaScript file without any additional processing.

Process for Bundling JavaScript Files

If your custom tool is built using React components or includes other dependencies, follow these general steps to bundle your file:

  1. Set Up a Bundling Tool: Use tools such as Webpack, Vite, Rollup, or Parcel to configure your bundling process.

  2. Include Necessary Dependencies: Ensure all required dependencies (e.g., React libraries) are included in your project.

  3. Configure the Entry Point: Identify the main JavaScript file that serves as the entry point for your tool.

  4. Generate the Bundled File: Run the bundling command (e.g., webpack --config webpack.config.js) to produce a single minified JavaScript file.

  5. Host the File: Deploy the bundled file to a static file server or hosting service. You’ll need the hosted file’s URL to configure Unlayer.

  6. Link to Editor Configuration: Add the URL of the bundled file to the Unlayer customJS property in your editor's configuration.

Additional Notes

  • For clarity, you might include comments in your code referencing the original unminified version of the bundled file, especially when working with large teams.

  • Make sure to thoroughly test the bundled file in the Unlayer environment to confirm no issues arise from dependencies.

By following these instructions, you can effectively use bundled JavaScript files to add custom tools and enhance the functionality of the Unlayer editor.

Did this answer your question?