Free Email Preview Tool
Paste your HTML email and instantly preview how it renders on desktop, mobile, and in dark mode. Catch layout issues before you send to your list.
How to Use This Tool
Paste your HTML
Copy the full HTML source of your email — including the full <html> structure if you have it — and paste it into the input field.
Switch preview modes
Toggle between desktop (600px), mobile (375px), and dark mode views. The preview renders your HTML in an iframe exactly as an email client would.
Fix layout issues
Update your HTML based on what you see, re-paste, and re-preview until the layout looks correct on all three views before sending.
Why Email Rendering Varies Across Clients and Devices
Email HTML is not rendered by web browsers — it is rendered by email clients, each of which implements its own HTML and CSS parser with its own set of supported and unsupported features. Gmail strips `<style>` block CSS and requires inline styles. Outlook on Windows uses Microsoft Word's rendering engine, which has notoriously limited CSS support. Apple Mail is the most permissive, supporting modern CSS layout. Yahoo Mail falls between Gmail and Apple Mail in capability.
The result is that an HTML email that looks perfect when opened in a browser will often look broken in at least one major email client. CSS properties like `flex`, `grid`, and `calc()` that are standard on the web are not reliably supported in email. Media queries for responsive design work in many clients but not Outlook on Windows. Background images work in most clients but are stripped or blocked in others.
Previewing on multiple screen sizes catches a separate class of issues. A layout that looks correct on a 1440px desktop monitor may have elements overlapping or text overflowing on a 375px iPhone screen. Since over 60 percent of email opens happen on mobile devices, a layout that only works on desktop is functionally broken for most of your audience.
Understanding Email Client Market Share and Testing Priority
Testing priority should reflect client market share. Apple Mail on iPhone is consistently the most-used email client globally, accounting for roughly 35–40 percent of all email opens. Gmail (web + mobile) is the second largest. Outlook (all versions) follows, with the Windows desktop client particularly relevant for B2B audiences. Apple Mail on Mac, Samsung Mail, and Yahoo round out the top tier.
For cold outreach and B2B email, Outlook on Windows receives disproportionate weight because your recipients are more likely to be in corporate environments where Outlook is the standard client. Outlook's rendering quirks — particularly its limited CSS support and notorious handling of margins, padding, and certain image behaviours — make it the client most likely to break layouts designed without email-specific constraints in mind.
For newsletter and B2C email, mobile rendering is the primary concern. A majority of your opens will happen on iOS or Android email clients. Testing at 375px width (iPhone viewport) should be the baseline, with 414px and 390px also common. If the email layout requires scrolling horizontally or has text that falls off-screen at mobile widths, a significant fraction of your audience is getting a broken experience.
Dark Mode Email Rendering
Dark mode support in email clients is a relatively recent development that has introduced new rendering challenges. When a user has dark mode enabled in their operating system or email client, some clients automatically invert or adjust colours in HTML emails to match the dark theme. Apple Mail performs aggressive colour inversion. Outlook applies dark mode transformations selectively. Gmail applies a modified dark mode that attempts to preserve brand colours while darkening backgrounds.
The practical consequence is that an email designed with a white background and dark text may render with a dark background and light text in dark mode — which can make logos with transparent backgrounds look wrong, cause white text to disappear against a white background (before the client darkens it), or produce unexpected colour combinations in branded elements.
Defending against dark mode issues requires testing in a dark mode preview, then adding targeted CSS for clients that support it. The `@media (prefers-color-scheme: dark)` query works in Apple Mail and some other clients. Providing explicit light and dark versions of key colour values allows you to control the dark mode appearance rather than leaving it to the client's automatic transformation. At minimum, avoid assuming that your background colours will remain unchanged in dark mode.
A Pre-Send Email QA Checklist
Previewing the HTML is the visual check in a broader pre-send quality assurance workflow. A complete pre-send checklist covers: subject line tested for length and spam signals; preview text set and meaningful (not defaulting to "View this email in your browser"); all personalisation tokens verified to have fallback values; links tested and pointing to the correct URLs; unsubscribe link present and functional; SPF, DKIM, and DMARC authentication verified; sending domain and IP not blacklisted; list segmentation confirmed for the right audience.
For HTML specifically: images have descriptive alt text for clients with images disabled; the email renders correctly without images at all; text is readable at both 600px desktop and 375px mobile; table structure does not break on narrow viewports; font sizes are at least 14px for body text and 18px for headings on mobile; link tap targets are large enough for touchscreen use (at least 44x44px).
The visual preview catches issues that are impossible to find by reading HTML source code. A collapsed layout, invisible text, or broken image placeholder is only visible when the HTML is actually rendered. Running the preview step on every email before sending — even emails you have sent before — protects against small template edits that introduced unexpected rendering problems.
Key Features
Desktop Preview (600px)
Renders your HTML at the standard 600px email width used by most desktop email clients and web interfaces.
Mobile Preview (375px)
Simulates the viewport width of an iPhone SE / 13 mini to catch mobile layout issues before sending.
Dark Mode Simulation
Applies a CSS dark mode filter to approximate how your email looks in clients with dark mode enabled.
Safe Iframe Rendering
Renders your HTML in a sandboxed iframe so scripts do not execute and external resources load predictably.
No Data Stored
Your HTML is rendered entirely in your browser. Nothing is sent to any server or stored anywhere.
Instant Re-Preview
Re-paste updated HTML and switch views instantly — no page reload needed between iterations.
Frequently Asked Questions
Related Tools
Continue your email deliverability setup with these free tools.
Tools Are Just the Start
Once your domain is set up, mailtani handles sending, warmup, sequences, and rotation.
See How mailtani Compares
Send Emails That Look Right Every Time
mailtani gives you full control over your sending domain and email content — so what you preview is what your recipients see.
- Send from your own domain
- Built-in deliverability tools
- Email warmup included
- One-time price
14-day free trial · €89 lifetime access after