Skip to main content
Version: 1.248.0

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.

Tools Overview Interface

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

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