Skip to main content
The Topol Email editor is a visual drag-and-drop editor for building responsive HTML email templates. It uses a structured layout system where templates are assembled from layout sections and reusable content elements, with styling and behavior controlled through configuration panels. The editor produces cross-client-compatible HTML without requiring manual code. This article covers the editor’s architecture, its layout model, available content block types, configuration surfaces, and integration with the Lettr platform. It is a technical reference for understanding how the editor works and what it can do.
For practical workflow guidance, tips on common pitfalls, and troubleshooting, see Email Editor Best Practices.

​
Template layout model

Templates are built from a hierarchy of three elements: structures, columns, and content blocks.

​
Structures

A structure is the top-level layout element. It represents a horizontal section of the email, analogous to a row in a table-based layout. Structures are stacked vertically to form the full template. Each structure contains one or more columns and provides section-level configuration:
  • Column count — 1 to 8 columns per structure
  • Background — solid color or background image
  • Width — narrow (centered) or full-width (stretched) layout
  • Borders — style, color, and thickness
  • Spacing — top and bottom margins, internal padding
  • Mobile stacking — whether columns stack vertically on small screens (enabled by default)
Structures can be moved, duplicated, deleted, or saved as reusable Saved Blocks.

​
Columns

Columns subdivide a structure horizontally. Each column acts as an independent container for content blocks and has its own configurable properties:
  • Background color
  • Border — style, color, thickness
  • Padding and margins — independent per column
  • Width distribution — columns within a structure share the available width
On mobile devices, columns stack vertically by default to maintain readability. This behavior can be disabled per structure when side-by-side rendering is required at all viewport sizes.

​
Content blocks

Content blocks are the smallest unit in the template hierarchy. They are placed inside columns and represent the actual email content. Each block type has a dedicated configuration panel with type-specific settings. The editor supports 10 content block types, described in the section below.

​
Content block types

Each block type is designed for a specific kind of content. All blocks share common actions (move, duplicate, save, delete) and support per-block padding and margin configuration.

​
Text

Inline text editing with a formatting toolbar. Supports font family, size, weight, color, alignment, lists, links, and line height. Text blocks inherit global typography defaults from the Settings panel and can override them individually. Text blocks also support merge tag insertion through a toolbar dropdown. Merge tags are inserted at the cursor position and inherit the surrounding formatting. For merge tag syntax and data binding, see Template Language.

​
Image

Displays a single image sourced from the File Manager or an external URL. Configuration includes alignment, width, margins, alt text, and an optional click-through link. Images are uploaded through the integrated File Manager, which provides folder organization, search, and access to the Pexels stock image library. Uploaded images are stored in your team’s Storage Domain and are available across all templates. The editor includes a built-in image editor for cropping, resizing, masking, and adjusting images without leaving the editor.

​
GIF

Displays an animated GIF from an external URL. Configuration is similar to the Image block (alignment, width, margins, alt text, link) but sources the image from an external URL rather than the File Manager. The editor provides built-in Giphy search for finding GIFs.

​
Button

A styled call-to-action element combining a text label with a click-through URL. Configuration includes label text, URL, background color, text color, font, corner rounding, padding, alignment, and width (auto or full-width). Button styling defaults can be set globally in the Settings panel. Individual buttons can override these defaults.

​
Spacer

Adds configurable vertical space between other elements. Height is adjustable by dragging directly on the canvas or through the configuration panel.

​
Divider

A horizontal line for visual separation. Configuration includes line style (solid, dashed, dotted), color, thickness, width percentage, and vertical margins.

​
Social

A row of social media icons, each linking to a profile URL. Supports standard networks (Facebook, Instagram, X/Twitter, LinkedIn, YouTube, Pinterest, and others) and custom URLs. Configuration includes icon style, size, spacing, alignment, and ordering.

​
Video

Displays a clickable thumbnail that links to an externally hosted video. The editor auto-generates a preview image from YouTube and Vimeo URLs. Since most email clients do not support inline video playback, this block renders as a linked image.

​
HTML

An inline code editor for inserting raw HTML. Includes syntax validation to help produce valid markup.
Custom HTML bypasses the editor’s cross-client rendering guarantees. JavaScript, CSS animations, and interactive elements are unsupported in most email clients. HTML blocks should be tested across target email clients before use in production.

​
Product

A composite block designed for e-commerce emails. Connects to a Product Feed (XML) and automatically populates product image, name, description, price, and a call-to-action button from the feed data. Product blocks render as a single unit. Internal elements can be reordered or hidden but cannot be mixed with other content block types.

​
Selection-based editing

The editor’s configuration panel is context-sensitive. It changes based on what is currently selected on the canvas:
SelectionPanel shows
Nothing selectedSettings tab (global defaults)
Structure selectedStructure-level layout controls (columns, background, borders, spacing, mobile stacking)
Content block selectedBlock-specific controls (varies by block type)
Column selectedColumn-level properties (background, border, padding, margins)
This model means there is no single “properties” panel—the available options depend entirely on the current selection. Selecting a structure provides access to layout controls; selecting a content block provides access to content and styling controls.

​
Global template settings

The Settings panel configures template-wide defaults that apply automatically as new content is added. These values establish the baseline design for the template. Available settings include:
SettingDescription
Template widthMaximum width of the email on desktop (typically 600px)
Background colorColor behind the entire template
Content area colorBackground color of the content area within the template
Font defaultsFamily, size, color, and line height for heading and body text
Link colorDefault color for hyperlinks
Button defaultsBackground color, text color, font, corner rounding, and padding
Preview textPreheader text shown in inbox previews alongside the subject line
Per-block and per-structure overrides take precedence over global defaults. This allows exceptions without changing the template-wide baseline.

​
Responsive behavior

Templates are responsive by default. The editor uses a mobile-first approach where the generated HTML adapts to the recipient’s viewport.

​
Column stacking

Multi-column structures stack their columns vertically on mobile viewports. This is the default behavior and ensures content remains readable on narrow screens. Stacking can be disabled per structure for cases where side-by-side rendering is required at all sizes.

​
Viewport-conditional visibility

Individual structures and content blocks can be configured to appear only on specific viewport sizes using “Hide on desktop” and “Hide on mobile” toggles. This enables different content presentations for desktop and mobile without maintaining separate templates. Hidden content is rendered in the HTML output and hidden via CSS. It contributes to the total email size even when not visible.

​
Desktop and mobile preview

The editor provides desktop and mobile preview modes for checking layout behavior during editing. These previews approximate how the template will render on each device class but are not a substitute for testing in actual email clients.

​
Editor toolbar

The top toolbar provides access to editing controls and workflow tools:
ToolFunction
Undo / RedoStep backward or forward through changes within the current session. History is cleared when the editor is closed.
MultilingualSwitch between language versions of the template. All versions share the same structure; text content is independent per language. See Multilingual Templates.
Desktop / MobileToggle between desktop and mobile preview modes
Show hiddenReveal content hidden on the current viewport (desktop or mobile) for editing
Autosave historyView and restore automatically saved versions. See Autosave with version history.
SavePersist the current template state. Also provides “Save and Close” via the dropdown menu.
FullscreenExpand the editor to fill the browser window

​
Multilingual templates

The multilingual system allows a single template to contain multiple language versions. All versions share the same structural layout (structures, columns, block positions) while maintaining independent text content per language. Structural changes (adding, removing, or rearranging structures) made in any language version are applied to all versions. Only text content within blocks is language-specific.

​
Autosave and version history

The editor automatically saves your template at regular intervals while you work. Each autosave creates a timestamped snapshot of the template state that you can browse and restore. How autosaves work:
  • Autosaves happen automatically during your editing session — no action required
  • Each autosave records the full template definition, a timestamp, and which team member made the change
  • Autosaves are stored separately from your manual saves
Browsing autosave history: Click the Autosave history button in the editor toolbar to see a list of all autosaves for the current template. Each entry shows:
  • When the autosave was created
  • Which team member was editing at the time
Restoring an autosave: Select any autosave from the history list to preview it. If you want to revert to that version, confirm the restore. This replaces the current editor state with the autosaved version.
Autosaves are your safety net if the browser crashes, you close the editor accidentally, or you want to undo changes that went too far. They’re independent of the manual Save action, so you can always recover recent work even if you didn’t save manually.
Autosaves vs. manual saves:
AutosavesManual Saves
TriggerAutomatic (periodic)Click Save button
PurposeCrash recovery, undoCreate canonical version for sending
Used when sendingNoYes — the active version from manual save is what gets sent
Visible toEditor users onlyAnyone referencing the template

​
File Manager

The File Manager is the central image asset library for the editor. It provides:
  • Upload — drag-and-drop or file browser upload
  • Organization — folder structure with create, rename, move, and delete operations
  • Search — find images by filename
  • Stock images — built-in Pexels library search
  • Team-wide access — uploaded images are available to all team members across all templates
Images are hosted on your team’s configured Storage Domain and served from your custom domain.

​
Reusable components

​
Saved Blocks

Structures and their content can be saved as reusable components and inserted into other templates. Saved Blocks support two modes:
  • Saved Sections — create independent copies when inserted (changes do not propagate)
  • Synced Sections — maintain a live link to the source (changes propagate to all instances)
For details on creating and managing Saved Blocks, see Saved Blocks.

​
Loop Blocks

Loop Blocks render a section repeatedly for each item in a data array. They are configured visually in the editor and connected to array data provided at send time. This is useful for product listings, order summaries, team directories, and similar repeating content. For details, see Loop Blocks.

​
Personalization with merge tags

Templates support merge tags—placeholder expressions that are replaced with values at send time. Merge tags use double curly brace syntax and can be inserted in text blocks, link URLs, image alt text, and button labels. 
Hello {{first_name}}, welcome to {{company}}!
Merge tag values are provided via substitution_data in the send API request: 
await lettr.emails.send({
  from: 'you@example.com',
  to: ['recipient@example.com'],
  subject: 'Welcome!',
  template_slug: 'welcome-email',
  substitution_data: {
    first_name: 'Jane',
    company: 'Acme Inc'
  }
});
The merge tag system supports conditionals, loops, default values, and nested data paths. For the complete syntax reference, see Template Language.

​
Converting between visual and custom HTML

Templates can be converted between the visual editor format and custom HTML mode. This is useful when you want to start with a visual design and then fine-tune the HTML directly, or when you have existing HTML that you want to bring into the visual editor.

​
Convert to custom HTML

To convert a visual editor template to custom HTML:
  1. Open the template
  2. Click the More menu (three dots)
  3. Select Convert to Custom HTML
This exports the visual editor’s generated HTML into a custom HTML template that you can edit directly. The original visual editor structure is no longer maintained — you’ll work with the raw HTML going forward.

​
Convert to visual editor

To convert a custom HTML template to the visual editor format:
  1. Open the template
  2. Click the More menu (three dots)
  3. Select Convert to Visual Editor
The editor will attempt to parse your HTML into its structure/column/block model. Simple, well-structured HTML converts cleanly. Complex or non-standard HTML may not convert perfectly and might require manual adjustment after conversion.
Converting between formats is a one-way operation on the current version. The conversion creates a new active version, so you can always roll back to a previous version if needed.

Email Editor Best Practices

Practical guidance, workflow tips, and troubleshooting

Saved Blocks

Create reusable sections and synced content

Template Versions

Manage versions and track changes

Projects & Folders

Organize templates in projects

Loop Blocks

Repeating content for product lists and dynamic data

Template Language

Merge tags, conditionals, and loops