Custom JS / CSS

🚧

Premium Feature

This feature is only available in premium plans. You must pass the projectId with a paid plan to enable this feature.

You can customize the editor by adding Custom JavaScript and Custom CSS.

Custom CSS

You can load Custom CSS inside the editor by either providing a URL to the CSS file, or directly adding the CSS source.

👍

String or Array

customCSS accepts a string or an array of strings

You can pass URL to a CSS file like this:

unlayer.init({
  customCSS: '//cdn.muicss.com/mui-0.9.28/css/mui.min.css'
});

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

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

Custom JavaScript

Similar to Custom CSS, you can also pass Custom JavaScript to the editor. This is particularly helpful when creating a Custom Tool with our JavaScript API.

👍

String or Array

customJS accepts a string or an array of strings

You can pass URL to a JS file like this:

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!');
    "
  ]
});

Examples

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