Topol Email Editor

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.

When you edit a marketing template, or open the editor from the campaign builder, the merge tag dropdown adds two groups:

Audience — Email ({{email}}) and every contact property your team has defined, with its type and fallback value.
Campaign — Unsubscribe Link ({{unsubscribe_link}}, mandatory, with an automatic fallback footer) and View in Browser ({{webversion_link}}, an optional in-browser version).

See Content & Design for the full behavior.

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.

Don’t use a merge tag as the button’s entire URL (for example {{LOBBY_URL}}). The value is URL-encoded at send time, so a full address arrives as https%3A%2F%2F…, email clients drop the link, and the button collapses into a thin bar with unclickable text — even though it looks fine in the editor. Keep the fixed part of the address in the URL field and use a merge tag only for the variable part: https://app.example.com/lobby/{{LOBBY_ID}}. See Links and URLs.

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. 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:

Selection	Panel shows
Nothing selected	Settings tab (global defaults)
Structure selected	Structure-level layout controls (columns, background, borders, spacing, mobile stacking)
Content block selected	Block-specific controls (varies by block type)
Column selected	Column-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:

Setting	Description
Template width	Maximum width of the email on desktop (typically 600px)
Background color	Color behind the entire template
Content area color	Background color of the content area within the template
Font defaults	Family, size, color, and line height for heading and body text
Link color	Default color for hyperlinks
Button defaults	Background color, text color, font, corner rounding, and padding
Preview text	Preheader 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.

The top toolbar provides access to editing controls and workflow tools:

Tool	Function
Undo / Redo	Step backward or forward through changes within the current session. History is cleared when the editor is closed.
Create mutation (language dropdown)	Add, switch between, and delete language versions of the template, and set the primary language. Shows the current language’s name once a language exists. See Multilingual Templates.
Desktop / Mobile	Toggle between desktop and mobile preview modes
Merge tags - Preview	Open a side panel where you enter sample values and preview the template with its merge tags replaced. Available in preview mode. See Previewing merge tags.
Show hidden	Reveal content hidden on the current viewport (desktop or mobile) for editing
Autosave history	View and restore automatically saved versions. See Autosave with version history.
Save	Persist the current template state. Also provides “Save and Close” via the dropdown menu.
Fullscreen	Expand 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 layout and styling, while text, button labels and links, images, HTML blocks and the preheader can differ per language. The first language you add is the primary; the others start empty and show its content in every block you have not translated. See How template languages work. Structural changes (adding, removing, or rearranging blocks and structures) and style changes made in any language version are applied to all versions. For the full walkthrough, see Multilingual Templates. Campaigns use these versions automatically. Link a template with more than one language to a campaign and each recipient receives the version that matches their contact’s language property, with a translated subject and sender if you set them. See Multilingual Campaigns.

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:

	Autosaves	Manual Saves
Trigger	Automatic (periodic)	Click Save button
Purpose	Crash recovery, undo	Create a new template version
Used when sending	No	Only after you publish it — a save creates a draft version
Visible to	Editor users only	Anyone referencing the template

Saving does not publish. Every manual save creates a new, inactive template version. Emails sent through the API by template slug keep using the currently active version until you publish the new one: open the template, click See versions, open the menu on the version you just saved, and choose Publish. If a change you can see in the editor is missing from the emails your application sends, this is almost always the reason. See Template Versions.

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. Merge tag names are case-sensitive: {{LOBBY_URL}} is only filled by a LOBBY_URL key. A tag with no matching value renders as empty text.

Previewing merge tags

The Merge tags - Preview panel lets you type sample values and see the template with its merge tags replaced, before you send anything. The panel lists only merge tags that are registered for your team under Emails → Editor Settings → Merge Tags and used in the current template. Tags you typed directly into the content, such as {{TOURNAMENT_NAME}}, are valid and work when sending, but the panel doesn’t detect them — if none of the template’s tags are registered, the panel is empty and there is nowhere to enter values. To preview with your own tags:

Go to Emails → Editor Settings → Merge Tags
Add each tag used in the template (for example USERNAME, TOURNAMENT_NAME, LOBBY_ID) to a group and save
Reopen the template, open Merge tags - Preview, fill in the values, and click Preview with Merge tags

Registering a tag also adds it to the merge tag dropdown in the text toolbar, so you can insert it without typing. See Editor Settings.

The preview is rendered by the editor, not by the sending pipeline, so it is not a guarantee of what arrives in the inbox. In particular, a button whose whole URL is a merge tag can look correct here and still break in the sent email. See Links and URLs.

Test emails from the editor

Send test email sends the template exactly as it currently looks in the editor, including unsaved changes. It is sent without substitution_data, so merge tags arrive empty. To test with real values — and to test the version your application will actually receive — send through the API with a sandbox API key. Keep in mind that API sends use the published version, not your latest save.

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:

Open the template
Click the More menu (three dots)
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:

Open the template
Click the More menu (three dots)
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

​Template layout model

​Structures

​Columns

​Content blocks

​Content block types

​Text

​Image

​GIF

​Button

​Spacer

​Divider

​Social

​Video

​HTML

​Product

​Selection-based editing

​Global template settings

​Responsive behavior

​Column stacking

​Viewport-conditional visibility

​Desktop and mobile preview

​Editor toolbar

​Multilingual templates

​Autosave and version history

​File Manager

​Reusable components

​Saved Blocks

​Loop Blocks

​Personalization with merge tags

​Previewing merge tags

​Test emails from the editor

​Converting between visual and custom HTML

​Convert to custom HTML

​Convert to visual editor

​Related Topics

Email Editor Best Practices

Saved Blocks

Template Versions

Projects & Folders

Loop Blocks

Template Language

Template layout model

Structures

Columns

Content blocks

Content block types

Text

Image

GIF

Button

Spacer

Divider

Social

Video

HTML

Product

Selection-based editing

Global template settings

Responsive behavior

Column stacking

Viewport-conditional visibility

Desktop and mobile preview

Editor toolbar

Multilingual templates

Autosave and version history

File Manager

Reusable components

Saved Blocks

Loop Blocks

Personalization with merge tags

Previewing merge tags

Test emails from the editor

Converting between visual and custom HTML

Convert to custom HTML

Convert to visual editor

Related Topics