Email Designer

The Email Designer is a drag-and-drop visual editor for creating professional email templates without coding.

Overview

Build responsive email templates using 19 pre-built components. Drag components onto the canvas, customize properties, and preview across devices.

Getting Started

Navigate to Templates → Create Template
Select Email Template
The designer opens with a blank canvas

Component Library

Text & Content

Text: Paragraphs and headings
Rich Text: Formatted text with bold, italic, links
Heading: H1-H6 headings
Divider: Horizontal lines

Interactive

Button: Call-to-action buttons
Link: Hyperlinks

Media

Image: Pictures and logos (select from Asset Gallery)
HTML Fragment: Custom HTML code

Layout

Container: Group components
Columns: Multi-column layouts (2-4 columns)
Spacer: Add vertical spacing

Data

Table: Data tables with rows/columns
List: Bulleted or numbered lists

Dynamic

Variable: Insert dynamic data {{variableName}}
Conditional: Show/hide content based on conditions
Loop: Repeat content for arrays

Using the Designer

Designer Interface

The designer has three main panels:

Left Panel: Component Library - Drag components from here
Center Panel: Canvas - Design your email template
Right Panel: Three tabs for editing
- Properties Tab: Edit selected component settings
- Layers Tab: View and manage component hierarchy
- Variables Tab: See all variables used in the template

Drag and Drop

Select component from library (left panel)
Drag onto canvas
Drop in desired position

Edit Component

Click component on canvas
Properties panel appears (right side)
Edit settings (text, color, size, etc.)

Adding Images

Drag Image component onto canvas
Click the image component
In properties panel, click Select from Gallery
Browse your Asset Gallery
Select an image asset
Click Select to insert

Alternatively, enter an image URL directly in the properties panel.

Preview

Desktop: Full-width preview
Mobile: Mobile-sized preview
Code: View HTML source

Layers Tab (Component Tree)

The Layers tab shows a hierarchical tree view of all components in your template, making it easy to manage complex layouts.

Features

Hierarchical View

See all components organized in a tree structure
Nested components are indented to show parent-child relationships
Special handling for layout components:
- Columns: Shows “Column 1”, “Column 2”, etc. with components inside each
- Table Layout: Shows “Row X, Col Y” structure
- Containers: Shows nested children

Selection Sync

Click a component in the tree → highlights it on the canvas
Click a component on the canvas → highlights it in the tree
Selected components are automatically visible (parent nodes expand)
Tree auto-scrolls to show the selected component

Drag & Drop in Tree

You can drag components in the tree to reorganize your template:

Reorder: Drag a component up or down within its parent
Move to container: Drag a component into a different container
From library: Drag components from the library directly into the tree

Visual “DROP HERE” indicators show where the component will be placed.

Right-click any component in the tree for quick actions:

Duplicate (Ctrl+D) - Create a copy of the component
Delete (Del) - Remove the component
Cut (Ctrl+X) - Cut to clipboard
Copy (Ctrl+C) - Copy to clipboard
Paste (Ctrl+V) - Paste from clipboard
Move Up (Ctrl+Shift+↑) - Move component up in sibling list
Move Down (Ctrl+Shift+↓) - Move component down in sibling list
Wrap in Container (Ctrl+G) - Wrap component in a container
Unwrap (Ctrl+Shift+G) - Remove parent container

Expand/Collapse

Arrow icon: Click to expand/collapse individual components
Expand All button: Expand all components at once
Collapse All button: Collapse all components for a clean view
Keyboard shortcuts:
- Ctrl+] - Expand all nodes
- Ctrl+[ - Collapse all nodes

Arrow Up/Down: Navigate between nodes
Arrow Left: Collapse node or go to parent
Arrow Right: Expand node
Enter/Space: Toggle node expansion
Home: Jump to first node
End: Jump to last node

Use Cases

Complex Layouts: Easily navigate templates with many nested components

Reordering: Quickly move components without drag-drop on canvas

Bulk Operations: Select and manage multiple components at once

Finding Components: Locate specific components in large templates

Variables Tab

The Variables tab automatically tracks all variables used in your template, providing a centralized view of your dynamic content.

Automatic Detection

Variables are automatically extracted from:

Component content: Hello {{name}}
Component props: {text: "Click {{action}}"}
Conditional logic: condition="{{isActive}}"
Loop data: items="{{products}}"
Nested object properties: {{user.email}}

No manual definition needed - just use {{variableName}} syntax and it appears in the Variables tab.

Variable Information

Each variable shows:

Name: The variable identifier (e.g., firstName)
Type: Automatically detected type (String, Number, Boolean, Date, Array, Object)
Usage Count: How many times the variable is used
Usage Locations: Where the variable is used
- Click any location to navigate to that component
- Shows component type and preview of content

Type Detection

Variables are smartly typed based on naming patterns:

String: Default type for most variables
Number: Variables with “count”, “total”, “amount”, “price”
Boolean: Variables with “is”, “has”, “enabled”, “active”
Date: Variables with “date”, “time”, “timestamp”
Array: Variables with “items”, “list”, “array”, “products”
Object: Variables with “user”, “customer”, “address”, “profile”

Array and Object Variables

For complex variables, the tab shows their structure:

Array Variables:

Shows item type (e.g., “Array of objects”)
Displays item schema with property names and types
Example: products array showing name, price, quantity properties

Object Variables:

Shows all properties with their types
Nested structure display
Example: user object showing email, firstName, lastName

Grouping and Filtering

Variables are organized by type:

Each type has a collapsible group
Badge shows count of variables in each group
Filter dropdown to show only specific types
Empty state when no variables are used

Click the location icon next to any usage to:

Switch to the Properties or Layers tab
Highlight the component using that variable
Scroll to make it visible

This makes it easy to find and update where variables are used.

Sample Values

When testing, you can provide sample values:

Click Variable Manager in the toolbar
Set sample values for each variable
Preview shows these sample values rendered

Variables

Add dynamic content that changes per email:

Hello {{firstName}},

Your order #{{order.id}} is confirmed.
Total: {{order.total}}

Variables use double curly braces {{variableName}} syntax. They automatically appear in the Variables tab where you can:

See where they’re used
View their detected type
Navigate to components using them

Pro tip: Use the Variables tab to review all dynamic content in your template before sending.

Best Practices

Mobile-first: Design for mobile, then desktop
Test across clients: Preview in Gmail, Outlook, Apple Mail
Keep it simple: Avoid complex layouts
Use variables: Make templates reusable
Optimize images: Compress for faster loading
Use Asset Gallery: Store images centrally for reuse across templates

Keyboard Shortcuts

The designer includes 17+ keyboard shortcuts for faster workflow. Press Shift + ? to view all shortcuts.

Editing

Ctrl/Cmd + C - Copy selected component(s)
Ctrl/Cmd + X - Cut selected component(s)
Ctrl/Cmd + V - Paste component(s)
Ctrl/Cmd + D - Duplicate selected component
Delete or Backspace - Delete selected component(s)
Ctrl/Cmd + Z - Undo last action
Ctrl/Cmd + Shift + Z or Ctrl/Cmd + Y - Redo action

Movement

Ctrl/Cmd + Shift + ↑ - Move component up in sibling list
Ctrl/Cmd + Shift + ↓ - Move component down in sibling list

Selection

Esc - Clear selection
Click - Select component
Ctrl/Cmd + Click - Multi-select components (planned)

Grouping

Ctrl/Cmd + G - Wrap selected component(s) in container
Ctrl/Cmd + Shift + G - Unwrap from parent container

View

Ctrl/Cmd + [ - Collapse all tree nodes in Layers tab
Ctrl/Cmd + ] - Expand all tree nodes in Layers tab

General

Ctrl/Cmd + S - Save template
Shift + ? - Show keyboard shortcuts help dialog

Tip: Keyboard shortcuts work when the canvas or tree has focus, but are disabled when typing in input fields.

Asset Gallery - Upload and manage images
Templates Guide - Template management
Variables Guide - Dynamic content

Templates Attachment Designer