Custom JS / CSS

Paid Feature

This feature is only available in paid plans. Learn More

The builder runs inside an iframe, which allows developers to customize its appearance and behavior using custom JavaScript and CSS. You can pass both custom JS and CSS during the builder's initialization. This feature is particularly useful for adjusting the builder's look and feel or extending its functionality with custom tools and custom property editors.

---

Custom CSS

Custom CSS allows you to make design tweaks to the builder. It's useful for branding, adjusting layouts, and styling the builder interface to fit your application's design language.

String or Array

customCSS accepts a string or an array of strings

To add custom CSS to the builder, pass a CSS string or URL to the customCSS option when initializing the builder.

unlayer.init({
  customCSS: 'https://example.com/custom-styles.css',
});

Or, you can pass the CSS source code like this:

unlayer.init({
  customCSS: [
    "
      body {
        background-color: yellow;
      }
    "
  ]
});

Use Cases for Custom CSS

• Branding: Customize colors, fonts, and layouts to match your application.
• Appearance Tweaks: Adjust margins, paddings, and sizes to fit your design.
• Custom Tool Styling: Style custom tools or custom property editors for consistency with your app's UI.

---

Custom JavaScript

Custom JavaScript allows developers to extend the functionality of the builder by creating custom tools, custom property editors, or handling additional events inside the iframe. Unlayer's SDK supports advanced methods like unlayer.registerTool() and unlayer.registerPropertyEditor() to enable these custom features. These methods are only available inside the iframe.

String or Array

customJS accepts a string or an array of strings

You can pass custom JavaScript to the builder using the customJS property during initialization. The custom JavaScript will run inside the iframe, allowing you to register new tools, modify existing ones, or add new property editors.

unlayer.init({
  customJS: '//cdn.muicss.com/mui-0.9.28/js/mui.min.js',
});

Or, you can pass the JS source code like this:

unlayer.init({
  customJS: [
    "
      console.log('I am custom JS!');
    "
  ]
});

Key Methods for Custom JavaScript

• unlayer.registerTool()
  This method is used to create custom tools that appear in the builder's toolbox. You can define the behavior, properties, and UI of the custom tool. Learn More
• unlayer.registerPropertyEditor()
  This method allows you to create custom property editors for tools. Custom property editors allow users to input data and modify the behavior or content of a tool. Learn More

---

Use Cases for Custom JavaScript

• Custom Tools: Build tools tailored to your end-users, such as special forms, custom buttons, or complex layout elements.
• Property Editors: Add custom input fields or property editors to allow users to customize the behavior and appearance of the custom tools.
• Event Handling: Handle custom events or extend the functionality of existing tools by reacting to actions taken by the end-users.

---

Examples

You can see a few examples of Custom JS and Custom CSS in the Examples & Playground.