Email Editor

The Owlat email editor is a block-based visual editor for building responsive, professional emails. Every block you add renders consistently across email clients — desktop, mobile, Outlook, Gmail, and Apple Mail.

Adding blocks

The primary way to add content is through slash commands. Click into the editor canvas and type / followed by the block type to insert it.

Content blocks

Layout blocks

Advanced blocks

Saved blocks

Your Saved Blocks appear in the slash menu under a Saved group, each listed by its own name. Start typing a saved block's name after / to filter to it and insert it.

Text formatting

Within text blocks, select text to reveal the formatting toolbar:

• Bold, Italic, and Underline for emphasis
• Links — select text and add a URL
• Alignment — left, center, or right

To change text color, set the block's color in its settings popover — color is a block-level property, not an inline selection format.

Block properties

Click any block to open its settings popover. Common settings include:

• Padding — inner spacing around the block's content
• Background Color — the block's background
• Border Radius — rounded corners
• Full Width — stretch the block's background to the full viewport width

Different block types have additional specific settings. For example, image blocks have alt text and link URL fields, while button blocks have button text, URL, and style controls.

Layout with columns

Columns are the foundation of complex email layouts. Create side-by-side sections for things like image-plus-text, feature grids, or multi-product showcases.

1. Type /columns to insert a column layout.
2. Choose the number of columns (1 to 4).
3. Drop content blocks into each column.
4. Adjust per-column settings like background, padding, and vertical alignment.

Personalization with variables

Type {{ or @ inside a text block to open the variable picker and insert dynamic content that's replaced with contact-specific data at send time:

• Contact fields like first name, last name, and email
• Custom Contact Properties you've defined
• System variables like unsubscribe links

Variables make your emails feel personal without creating separate versions for each recipient.

Conditional content

Show or hide sections of your email based on a contact's data. For example, display a premium CTA only for contacts on a paid plan, or show different content based on a contact's language or location.

Conditional blocks evaluate a contact's property values at send time and include or exclude content accordingly.

Repeat blocks

A block can be repeated once for each item in an array variable — useful for order line items, product lists, or recommendations. In the block's settings panel, set the array variable to iterate over, an item alias to reference each entry ({{item.key}}), and an optional maximum number of items. The renderer expands the block for every array element at send time.

Responsive design

Your emails are automatically responsive:

• Columns stack on small screens
• Images resize to fit the viewport
• Font sizes can be adjusted for mobile readability
• Individual blocks can be set to hide on mobile or hide on desktop for tailored experiences

Dark mode

Emails include automatic dark mode support. When a recipient's email client is set to dark mode, your email adapts. You can also configure per-block dark mode overrides and provide alternative images that look better on dark backgrounds.

Focus mode

Press Cmd+Shift+F (Mac) or Ctrl+Shift+F (Windows) to enter focus mode for distraction-free editing. The sidebar panels hide and the editor canvas expands to fill your screen.

Undo & redo

Every edit is tracked in a history stack. Use the Undo and Redo buttons in the toolbar, or press Cmd+Z / Ctrl+Z to undo and Cmd+Shift+Z / Ctrl+Shift+Z to redo. The buttons disable themselves when there's nothing left to undo or redo.

Saving your work

Saving is manual. Use the Save button in the toolbar to persist your changes; while it's writing, the button shows a spinner and reads Saving.... If you try to leave the editor with unsaved edits, Owlat prompts you to save or discard them first, so you don't lose work by navigating away.

Preview

Use the preview panel to see how your email will look before sending. The preview uses the same rendering engine as your sent emails, so what you see is what your recipients will receive. The panel includes:

• A device switcher — preview at desktop, tablet, or mobile widths
• A dark-mode toggle to check how the email adapts in dark clients
• A code view to inspect the generated HTML source
• An email health score that surfaces rendering and deliverability warnings as you build

CSS animations

Blocks can use built-in CSS animations for progressive enhancement. Add the owlat-animate-fade-in or owlat-animate-slide-up class to a block's CSS class field (the field is a raw passthrough, so use the exact class name). Animations respect prefers-reduced-motion and only play when the user allows motion. They work in Apple Mail and iOS Mail; other clients silently ignore them.

Gmail Promotions annotations

If you send to Gmail users, you can add Promotions tab annotations to display rich cards (logo, deal badge, promo code, expiration date) directly in the inbox. These are not set from the visual editor — they're a developer feature configured through the renderer's render options, so they can't be added from the dashboard. See the Email Renderer docs for details.

Next steps

• Email Templates — manage your template library
• Saved Blocks — save and reuse content sections
• Email Theme — set default styling for your emails
• Media Library — manage and reuse images across emails
• Campaigns & Reporting — send your finished emails