Introduction to Custom Tools

What is a Custom Tool?

Tools are basic content elements that are used to create a design. Text, image, and button are some examples of our built-in tools. A custom tool can help you add more of these content elements to the editor. We know that every application is different and needs different tools to reach its full potential.


Every custom tool needs to have the following attributes to get running.

NameA unique identifier string for your tool
LabelA display label for your tool that the users will see
IconAn icon for your tool from a choice of 700+ icons or a custom image
Supported Display ModesDisplay mode this tool will work in (email, web or both)
Usage LimitNumber of times a tool can be used in a single design
RendererRenderer contains the content that the tool will create and export
PropertiesA set of variables that your tool will need to create content


Renderer is where you define the content that your tool will create. This is done using a HTML template. Each renderer consists of a Viewer, Exporters and Head. In most cases, Viewer and Exporters contain the same HTML template but there are cases when these could be different.


Viewer is the tool's template which will be visible to the user when they use your tool within the Unlayer editor.


Exporters define the tool's HTML template which will be passed to your application when you call exportHtml. Depending on your supported display modes, each tool can have these 2 exporters:

  • Email
  • Web

This reflects what the output should be for each of the 2 display modes. HTML markup for email can be very different from a web page so this is where you can have the same tool working nicely for both display modes.


Head is where you define any CSS or JavaScript that the tool will need to function. As the name says, these assets will be added to the <head></head> part of HTML. Learn more


Every tool needs certain properties to create content. Properties are variables that the user can modify, such as colors, font sizes, text alignment, images, and more.

Property Group

Property group is a collapsable panel that is used to organize properties into a group. This makes the experience of editing a template simpler and easier.


Property Editor

Each property is assigned a property editor which is a UI control widget used by the user to modify the property value. For example: color picker, slider, toggle, etc. We have many built-in property editors available, and you can also create a custom property editor.