Skip to main content
Unlayer Docs
Version: Latest

Tools

Tools are the core building blocks within the drag-and-drop builder that allow users to create and customize content. Each tool represents an individual design element, such as text, buttons, images, or headings, that can be easily added to an email, page, or popup. Tools provide essential functionality and design capabilities, enabling users to visually construct their content without writing code.

These tools are pre-configured with default settings but offer a range of customization options. Users can modify their appearance, behavior, and interactions to suit specific design requirements and business needs. Additionally, developers can extend these tools by creating custom tools, giving even more flexibility to tailor the design experience.

The builder tools panel — content tool cards (Columns, Button, Divider, Heading, …) alongside the tab railThe builder tools panel — content tool cards (Columns, Button, Divider, Heading, …) alongside the tab rail

Enable / Disable Tools​

You can choose which tools to enable or disable for the Unlayer editor instance.

Here's some examples...

Disable Image Tool​

unlayer.init({
  tools: {
    image: {
      enabled: false,
    },
  },
});

Reposition Tools​

You can reposition tools to appear before or after other tools.

unlayer.init({
  tools: {
    image: {
      position: 1,
    },
  },
});

Usage Limit​

You can specify a limit to how many times a tool can be used in a single design. For example, if you want the form to be used only once in a design, you can do this:

unlayer.init({
  tools: {
    form: {
      usageLimit: 1,
    },
  },
});

Change Icon​

You can change the icon of any tool. For example, if you want to change the icon of image tool, you can do this:

unlayer.init({
  tools: {
    image: {
      icon: '[IMAGE URL HERE]',
    },
  },
});

icon accepts an image URL, inline SVG markup, or a Font Awesome icon name:

unlayer.init({
  tools: {
    image: {
      icon: 'fa-camera',
    },
  },
});

For built-in tools, the icon you set applies to every theme, classic themes included.

Different Icons Per Theme​

Classic themes ship their own set of default tool icons, kept from before the modern themes were introduced. If you want a different icon in classic themes specifically, set classicIcon alongside icon:

unlayer.init({
  appearance: {
    theme: 'classic_light',
  },
  tools: {
    image: {
      icon: 'fa-camera',
      classicIcon: 'fa-image',
    },
  },
});

classicIcon is optional and takes the same values as icon. It is only used by classic themes — classic_light, classic_dark, and any custom theme that extends one of them. Modern themes always use icon.

classicIcon also works on custom tools, where you set it in the unlayer.registerTool({ … }) call. Note that a classicIcon you register this way is yours, so it keeps applying in classic themes even if you later override only icon through unlayer.init. To change a custom tool's classic icon, override classicIcon too.

Built-In Tools​

Our platform provides a variety of pre-configured, easy-to-use tools that empower your users to design and customize their content seamlessly. These built-in tools offer essential elements for creating emails, pages, and popups without the need for coding. Each tool is highly customizable, allowing you to adapt them to match your application’s design and user preferences. Learn More

Custom Tools​

A custom tool can help you add more content elements to the editor. Learn more on how to build a custom tool.

Custom Tools Interface