Overview

Introduction to 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.

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.


What’s Next

You can also create your own custom tools.