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...
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
| Command | What it creates |
|---|---|
/text | A paragraph of body text |
/h1, /h2, /h3 | Headings at three sizes |
/image | An image block with alt text and optional link (supports Media Library picker) |
/button | A call-to-action button |
/video | A video thumbnail with play button overlay |
/social | Social media icon links (17 platforms including Twitter/X, Facebook, Instagram, LinkedIn, YouTube, TikTok, GitHub, WhatsApp, Telegram, Threads, Pinterest, Discord, Mastodon, Bluesky, Vimeo, Medium, Snapchat) |
/table | A data table with rows and columns (supports stack, scroll, and hide-columns responsive modes on mobile) |
Layout blocks
| Command | What it creates |
|---|---|
/columns | A multi-column layout (2, 3, or 4 columns) |
/container | A wrapper that groups blocks with shared background and padding |
/hero | A full-width hero section with background image support |
/divider | A horizontal line separator |
/spacer | Vertical spacing between blocks |
Advanced blocks
| Command | What it creates |
|---|---|
/accordion | Expandable content sections |
/menu | A horizontal navigation menu |
/list | A styled list with custom markers |
/carousel | A scrollable image carousel |
/countdown | A countdown timer to a target date |
/progressBar | A visual progress indicator |
/rawHtml | Raw HTML injection for custom code (advanced) |
Special commands
| Command | What it does |
|---|---|
/var | Insert a personalization variable |
/block | Insert a Saved Block |
Text formatting
Within text blocks, select text to reveal the formatting toolbar:
- Bold and Italic for emphasis
- Links — select text and add a URL
- Alignment — left, center, or right
- Text color — change the color of selected text
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.
- Type
/columnsto insert a column layout. - Choose the number of columns (2, 3, or 4).
- Drop content blocks into each column.
- Adjust per-column settings like background, padding, and vertical alignment.
On mobile devices, columns automatically stack vertically so your content stays readable. You can also set columns to reverse their order on mobile or disable stacking entirely for columns that should stay side-by-side.
Personalization with variables
Use the /var command to 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.
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.
Auto-save
Your work is automatically saved every 30 seconds. The save indicator in the toolbar shows the current status, so you never have to worry about losing changes.
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.
Preview often as you build — especially after adding columns or conditional content. Catching layout issues early saves time.
CSS animations
Blocks can use built-in CSS animations for progressive enhancement. Apply fadeIn or slideUp via a block's CSS class field. 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. Configure this in the render options — 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