Visual Email Editor

The visual editor is a drag-and-drop email builder that lets you design responsive emails without writing code. You compose emails by arranging blocks on a canvas, styling them with a properties panel, and previewing the result in real time.

The editor uses an AST-first architecture: your email is stored as a structured document (AST) that is the single source of truth. The editor renders this AST into responsive HTML for email delivery, and also provides a synchronized HTML code view for advanced editing.

---

How It Works

The editor has three main areas:

1. Block palette (left) -- lists all 20 available block types and your saved modules, organized by category
2. Canvas (center) -- the email you are building, rendered as a live preview
3. Properties panel (right) -- shows settings for the currently selected block (colors, spacing, alignment, fonts)

You build emails by dragging blocks from the palette onto the canvas, then selecting each block to adjust its properties. The editor compiles your blocks into MJML (an email markup language) and then into responsive HTML that renders correctly across email clients.

Block Canvas and HTML Code View

The editor offers two synchronized editing modes:

• Block canvas (default) -- drag-and-drop visual editing
• HTML code view -- edit the compiled HTML directly in a Monaco editor

Changes in one view are reflected in the other. If you edit the HTML directly, the editor re-imports it into the block model so you can continue editing visually. This bidirectional sync means you are never locked into one editing mode.

---

Key Features

Drag-and-Drop Reordering

Drag any block on the canvas to move it to a new position. A blue indicator line shows where the block will be placed when you release it.

Rich Text Editing

Text blocks (paragraph, title, list, blockquote) use a rich text editor powered by TipTap. You can apply bold, italic, underline, links, and alignment directly within the block -- no need to open a separate settings panel.

Responsive Preview

Click the Preview button in the toolbar to see how your email looks on desktop and mobile. The preview uses the same MJML compilation as the final email, so what you see is what your recipients get.

NLT Variable Insertion

You can insert NLT (Natural Language Template) variables directly into any text block. Type { to trigger the variable picker, which shows contact fields, event attributes, and other dynamic values. Variables are highlighted in the editor so you can spot them at a glance.

Placeholders you still need to fill in

Some suggestions insert a placeholder you finish filling in — shown as a distinct amber "fill me" pill like «first_name» in the editor. If you close the picker before choosing a value (by pressing Escape, clicking away, or pressing Tab), the placeholder stays in place rather than disappearing — so you never silently lose it.

• To fill a placeholder, click the pill. The picker re-opens on that placeholder so you can pick its value. Clicking a placeholder always fills it — it never deletes it.
• While any «…» remains, the validation panel shows a blocking error ("Unresolved placeholder…"). You can still save the template as a draft, but you can't send it until every placeholder is filled.

HTML Import

You can import existing HTML emails into the editor. The importer analyzes the HTML structure and converts it into editable blocks where possible. Content that the importer does not fully recognize is preserved as raw HTML blocks -- your original HTML is never lost or modified during import.

Preflight Checks

Before sending, run a preflight check to catch common issues:

• Content checks -- empty subject line, missing preheader, empty body
• Link validation -- broken URLs, HTTP links that should be HTTPS
• Image checks -- missing alt text, externally hosted images
• Domain verification -- sender domain not verified
• NLT validation -- template expression syntax errors

Preflight runs automatically in the editor (inline checks) and can also be triggered server-side via the API (POST /v1/templates/{slug}/preflight).

Version History

Every time you save a template, a version snapshot is created automatically. You can open the version history panel to browse previous versions, compare changes, and restore any past version. Restoring a version creates a new snapshot of the current state first, so you never lose work.

Keyboard Shortcuts

AI Assistance

The editor integrates with the built-in AI chat. Two options are available from the toolbar:

• Review with AI -- sends a summary of your current blocks to the AI for feedback on structure, copy, and best practices
• Generate with AI -- asks the AI to generate a complete email template (available when the canvas is empty)

---

Email Settings

Click the canvas background (outside any block) to access global email settings in the properties panel:

---

Saving and Publishing

When you click Save, the editor:

1. Compiles all blocks into the AST document (the source of truth)
2. Renders the AST to MJML, then to responsive HTML
3. Generates a plain-text version for email clients that don't render HTML
4. Saves the AST document, compiled HTML, and plain text
5. Creates a version snapshot for history

The compiled HTML is what gets sent to recipients. The AST document is stored so you can re-open and edit the email later.

---

Next Steps

• Block Types -- learn about each block type and its properties
• Saved Modules -- reuse common sections across templates
• Variables -- insert dynamic content with NLT syntax