Testing4 min read•Audience: All, Designers, Marketers
In-Editor Preview & Simulation
Test your templates using real-time desktop and mobile simulations, dark mode toggles, and dynamic data interpolation.
Key Takeaways
- Switch between Desktop (600px) and Mobile (375px) viewports with one click in the top toolbar.
- Open the full-screen Preview Modal to inspect inbox metadata (From, Subject, Preheader).
- Toggle Dark Mode simulation to spot legibility and contrast issues before sending.
- Interpolate live sample data to verify variable tags, conditions, and repeating loops.
The Full-Screen Preview Suite#
Click the Preview button in the top navigation bar to launch the modal:
- Device Toggles: Inspect how columns collapse from multi-column grid to vertical stack on standard phone viewports (375px).
- Subject & Preheader Bar: Visualizes how your subject line and snippet appear in a real Gmail or Apple Mail inbox.
- Dark Background Simulation: Inverts the canvas to preview your colors against dark theme surfaces.
Inspecting Inbox Header Metadata#
The top bar of the preview suite displays how recipients experience your email before opening:
- Sender Name: Confirms your verified sender identity (e.g.
Acme Team <news@acme.com>). - Subject Line: Evaluates character length and truncation points across desktop vs mobile inbox widths.
- Preheader Snippet: Verifies that your preheader text fills the preview gap rather than pulling unwanted header links or image alt text into the snippet.
Switching Between Syntax and Data Modes#
Toggle between:
- Raw Syntax View: Verifies variable placements (e.g.
{{firstName}}) directly in copy. - Hydrated Data View: Evaluates your active Sample Data JSON, unrolling
{{#each}}loops and resolving{{fallback}}helpers.
Frequently Asked Questions
Does the in-editor preview simulate real email client rendering engines?
The in-editor preview renders using your modern web browser engine (WebKit or Blink) with simulated viewport widths and dark mode overrides. For native Microsoft Word engine testing (Outlook desktop), send a live test email.
Can I resize the preview iframe to custom screen dimensions?
Yes. Use the responsive drag handle at the right edge of the preview window to test intermediate widths (e.g., 480px tablet viewports).