Unlayer Documentation

Unlayer Documentation

Welcome to Unlayer Documentation. It takes less than 5 minutes to get our editor up and running on your project.

These guides will take you through the process and get you up and running.

Get Started    

Overview

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.

AttributeDescription
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)
RendererRenderer contains the content that the tool will create and export
PropertiesA set of variables that your tool will need to create content

Renderer

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

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

Exporters

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

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


Properties

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.

Updated 3 months ago



Overview


Introduction to Custom Tools

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.