Email Editor

The Email Editor provides an intuitive drag-and-drop workspace tailored specifically for designing email templates. While it shares a familiar layout and workflow with the Document Editor, the Email Editor is built on top of MJML (Mailjet Markup Language) to guarantee bulletproof, responsive rendering across all major email clients (Outlook, Gmail, Apple Mail, and mobile devices).

---

Core Differences from the Document Editor

While the interface will feel immediate to anyone familiar with our Document Builder, the Email Editor incorporates specific architectural differences tailored for email standards:

• No Sections Panel: Unlike print and PDF documents that require physical page breaks and per-page settings, emails flow continuously as a single responsive HTML layout.
• Classes (Coming Soon): Custom CSS class assignment is currently disabled to prevent email client styling conflicts. All styling is applied as inline email-safe attributes.
• Themes Manager (Coming Soon): Global color palettes and baseline font themes will be available in an upcoming release.

---

Topbar Navigation & Viewport Modes

The topbar provides core controls for editing, previewing, and releasing your email templates:

• Viewport Switcher (Desktop Dropdown): Switch between Desktop and Mobile preview modes to test responsive layouts and stacked column behavior in real time.
• Draft vs. Published:
  • Draft: Preview and test emails with draft tags. Editing and test sends in draft mode do not consume account quotas.
  • Published: Makes the email template available for live transactional or marketing API sends.
• Undo / Redo / Preview: Revert changes, toggle UI outlines, or launch full interactive previews with dynamic payload data.

---

MJML Component Library

The Build panel contains components specifically optimized for HTML email standard compliance:

1. Logic Blocks

Inject dynamic content rules into your emails:

• Variable ({}): Output subscriber payload values (e.g., {{first_name}}, {{order_id}}).
• Condition: Conditionally display or hide email content blocks based on recipient attributes.
• Collection: Loop over product arrays, receipts, or news items to generate dynamic repeating blocks.

2. Email Content Blocks

Native email blocks engineered to bypass restrictive email client CSS bugs:

• Text: Paragraph containers supporting rich text and inline variable merge tags.
• Button: Bulletproof CTA buttons designed to render consistently across all inbox providers.
• Image: High-density images supporting alt text, custom links (href), and dynamic image sources (src).
• Divider: Horizontal line separators for dividing email content sections.
• Social Group & Social: Social icon groups and individual social platform links with pre-styled brand icons.
• Spacer: Fixed vertical spacing blocks that preserve vertical whitespace in Outlook and mobile clients.
• Navbar & Nav Link: Responsive header navigation bars and link items for e-commerce or newsletter headers.
• Hero: Full-width promotional banners combining background images, titles, and call-to-action buttons.

3. Layout Containers

Responsive column grids using MJML layout semantics:

• Wrapper: Outer section wrapper that acts as the primary layout row.
• 1 Column / 2 Columns / 3 Columns: Flexbox-style column layouts that display side-by-side on desktop views and automatically stack vertically on mobile screens.