Sending an HTML email without previewing it first is a risk no one should take. Showing varies dramatically across Gmail, Outlook, Apple Mail, and Yahoo — a layout that looks perfect in your browser can collapse in Outlook or display the wrong colors in dark mode. The fastest way topreview an HTML email onlineisEmail Viewer — paste your HTML, pick a client profile, and see how it shows before a single message is sent.
Why preview HTML email before sending?
HTML email is fundamentally different from web HTML. Email clients apply their own rules — stripping CSS properties, overriding colors in dark mode, ignoring JavaScript entirely, and showing table layouts differently from browser to browser. What your email tool's built-in preview shows you is often just a browser show, which is the most lenient showing environment of all.
A real preview shows you what Gmail actually does to your CSS, how Outlook handles your table layout, and whether Apple Mail's dark mode inverts your brand colors. Catching those issues before sending saves you from re-sending to your entire list.
How to preview HTML email without sending
- OpenEmail Viewer on ToolsViewer.
- Paste your email HTML directly into the editor, import a
.htmlor.htmfile, or choose afree email template from the gallery to start from a tested, responsive design. - Select a client profile from the toolbar — Gmail, Outlook, Apple Mail, Yahoo, or Standard. The preview updates to simulate how that client handles your markup.
- Optionally clickAdd deviceto open a second preview window andcompare desktop and mobile previews side by side.
- When you are satisfied with the result, clickExportorCopyto get the HTML for your email platform or codebase.
What "preview" means — client-style simulations
Email Viewer appliesclient-style simulations— not just a browser show. Each client profile applies the CSS handling rules and overrides that the real email client uses. Gmail strips styles it does not support. Outlook uses a Word-based showing engine with specific table behavior. Apple Mail applies dark mode overrides automatically.
This is fundamentally different from opening your HTML file in a browser, which applies browser CSS defaults and supports far more CSS than any email client does. For a full explanation of the gap, seeHTML email vs browser HTML.
Checking mobile showing
More than half of emails are opened on mobile. A layout that works on desktop may break on a small screen — fixed widths that force horizontal scroll, text too small to read, and images that overflow their containers are the most common problems.
Use theAdd device feature to open a mobile preview alongside the desktop view. Select a mobile client profile (Apple Mail — iOS Mobile, Gmail Mobile) and compare both side by side.
Using templates to preview a tested design
If you are starting from scratch, theemail template gallery includes professionally designed, responsive HTML email templates built with table-based layouts and inline CSS that show reliably across clients. Open any template in Email Viewer with one click, preview it across client profiles, then customize it for your campaign.
Starting from a tested template is significantly faster than debugging a custom layout from scratch — the showing compatibility work is already done.
What to check before you send
A preview across client profiles should be part of a broader pre-send checklist:
- Inline your CSS.Many clients strip
<style>blocks. Inlining ensures your styles survive even when the head is stripped. - Test dark mode.Toggle dark mode in the preview to see how Gmail's auto-invert and Apple Mail's color overrides affect your design.
- Run the QA checklist.Check for Gmail clipping risk, missing alt text, empty links, external stylesheets, and screen area tag presence.
- Check mobile layout.Compare desktop and mobile profiles before finalizing.