HTML Email Preview

Use this HTML email preview to render pasted email code at 320, 600 or 800 px in a sandboxed frame, with a dark mode approximation and remote images off by default. It also lints the code for features Gmail, Outlook and other clients drop, and lists each issue with its severity and affected clients.

How to Use the HTML Email Preview

Paste the email's HTML, pick a width and color mode, and read the rendered preview next to the lint table.

Paste the complete HTML source of your email, or upload an .html file.
Choose a preview width, light or dark mode, and whether to load remote images.
Select Preview email to render the message and run the lint.
Fix the errors and warnings listed in the table, or export them as a CSV file.

What the HTML Email Tester Checks

The HTML email tester reads the code without sending it and reports features that common clients remove, ignore or clip.

Gmail HTML Email Preview

Gmail clips any message whose HTML is larger than about 102 KB, so the tool measures the size and flags it as an error above that limit. It also warns about <style> blocks, because Gmail discards a whole block when one rule is rejected and some Gmail apps ignore head styles.

HTML Email Preview in Outlook

Outlook for Windows renders email with a word-processor engine that ignores max-width, float, flexbox, grid and CSS background images. The lint flags each of these and checks whether an <!--[if mso]> fallback table is present for fixed widths.

HTML Email Preview Text

The preview text, or preheader, is the hidden line that inboxes show next to the subject. The tool looks for an element marked as a preheader or hidden with display:none and adds a note when none exists.

Frequently Asked Questions

How Do I Preview an HTML Email in Outlook?

Send a test message to an Outlook mailbox and open it in Outlook for Windows, which uses a different rendering engine than Outlook on the web or Mac. This tool cannot reproduce that engine, but its lint lists the CSS that Outlook for Windows ignores before you send the test.

How Do You Test HTML Email Code?

Start with a static check like this one to catch scripts, relative links, missing alt text and unsupported CSS. Then send test messages to the real clients your readers use, because each client applies its own rules.

What Is Email Preview?

An email preview shows how a message will look before it is sent. Here the HTML is rendered in a sandboxed frame at a chosen width, with scripts, forms and, by default, remote images removed.

How Many Characters Should Email Preview Text Be?

Inboxes show roughly 40 to 100 characters of preview text depending on the client and screen width. Put the key message in the first 40 characters and keep the whole preheader under about 100.

Related Email Tools

Email Spam Checker Score email content against transparent local rules and see which wording deserves review. Plain Text to HTML Converter Convert a plain-text email to table-safe HTML with inline styles, or turn email HTML back into wrapped plain text. EML Viewer Open an .eml file in your browser to read its headers, plain-text and HTML body, and download its attachments. Subject Line Tester Score an email subject line for length, spam wording, emoji and punctuation, with mobile and desktop previews. Email Signature Generator Create a table-based HTML signature with your details, brand colors and optional social links.

Continue with the guide Why Are My Emails Going to Spam?. Investigate configuration, content and reputation.