General DocsEditor Use GuideEditor Setup Guide (v1.0.15)API Reference

MailUI Editor Basic Use Guide

Welcome to MailUI Editor! This guide walks you through the essentials of building and customizing email templates, using the core tools in the editor.

Editor Interface Overview #

When you open the MailUI Editor, you’ll see three main sections:
  1. Left Sticky Sidebar: All your tools, elements, layouts, photos, and styles.
  2. Left Sidebar Body: All sticky sidebar expendable contents and customizable elements.
  3. Bottom Toolbar: Actions like layers, preview, undo/redo, and device views.
  4. Email Interface (middle): The live workspace where you drag, drop, and edit.

1, 2: Left Sidebar Tools #

The Left Sidebar is where you’ll find all the tools you need to build your email. From here, you can drag and drop elements, insert ready-made layouts, manage saved blocks, and access global settings. Each section of the sidebar is designed to give you quick access to building blocks and customization options without leaving the editor.

Elements #

Drag and drop essential building blocks into your email. Elements include:

  • Row, Column: Structure your layout with flexible grids.
  • Heading, Text, Button: Add titles, paragraphs, and call-to-action buttons.
  • Image, Video, Social Icon: Insert visuals and social links.
  • Divider, Spacer, Icons: Create separation and balance.
  • Menu, Card, Carousel: Add navigation and interactive blocks.

Layouts #

Insert pre-designed section layouts to save time. Layouts give you ready-to-use structures for common patterns like hero sections, feature blocks, or footers.

Blocks #

Blocks are reusable sections you can insert into your email design. They help you build faster while keeping consistency across templates. There are two types of blocks:
  • Default Blocks: Pre-made sections included with the editor. These cover common layouts like hero sections, feature highlights, and footers.
  • Saved Blocks: Your own reusable sections. You can create these by saving any section from the editor. When you hover over a section, a Save button appears in the top-right corner. Saved blocks are stored in your personal library for future use.

Photos #

The Photos panel lets you manage and insert images into your design. You can choose from three sources:
  • Gallery: A collection of default images provided by the editor. This may include images from APIs or stock providers such as Unsplash.
  • Uploaded: Your personal library of images you’ve uploaded previously. These remain available for reuse across templates.
  • Uploader: Add new images directly from your device. Once uploaded, they’ll also appear under Uploaded for future use.

Global Style #

The Global Style panel helps you control the overall look and feel of your template. Changes here apply across the entire design for consistency.

  • Styles: Predefined style sets that act as the default foundation for your template’s design.
  • Colors: Manage color palettes. Each palette includes a name and a set of colors. You can also create new palettes to match your brand.
  • Fonts: Select from Google Fonts or add multiple custom fonts. For each font, you can choose specific weights (e.g., regular, bold) to use across headings, body text, and other elements.

AI Config #

The AI Config panel provides AI-powered tools to speed up your workflow and improve your design suggestions.

  • Regenerate Template: Instantly rebuild the current template structure with fresh AI suggestions.
  • AI Colors: Generate smart color palette suggestions to match your brand or design goals.
  • AI Typography: Get recommended font pairings and text styles powered by AI for better readability and visual appeal.

3: Bottom Toolbar #

The Bottom Toolbar provides quick access to essential controls for managing and previewing your design. It is divided into two main sections:

  • Bottom Left:
    • Tree View: Open a hierarchical view of all sections, rows, and elements in your template.
    • Preview: Toggle to see how your email looks without editor guides.
    • Undo / Redo: Step backward or forward through your recent changes.
  • Bottom Center:
    • Device Controls: Switch between desktop, tablet, and mobile views to ensure responsive design.

4: Email Interface (Middle) #

The Email Interface is the main workspace where you design the content of your email. It is structured into a hierarchy of SECTION → ROW → COLUMN → ELEMENT. Each part of the template can be customized directly from here.

When you hover over a SECTION, ROW, COLUMN, or ELEMENT, a contextual toolbar appears at the top of the item with the following options:

  • Element Name (Top Left): Displays the current element’s type (e.g.,SECTION, ROW, COLUMN, Heading, Image, etc.). On hover, a tree dropdown appears showing the parent hierarchy. For example, if you hover over a Column, you’ll see its parent Rowand SECTION. This makes it easy to navigate and select parent containers without leaving the current element.
  • Layout Controls (Center, For SECTION Only): Insert new layouts with rows on top and bottom of the selected section.
  • Action Buttons (Top Right):
    • AI: Generate new content with options forRegenerate Content or Regenerate Section.
    • Edit: Open the settings panel. Depending on configuration, this can appear in the left sidebar or as a floating panel.
    • Save Block: Save the current section or element as a reusable block.
    • Duplicate: Create a copy of the selected item.
    • Delete: Remove the selected item from the template.
    • Drag: Reorder sections, rows, or elements by dragging.

Explore Our Email Builder

Try Email Builder