Email Playground: preview and check HTML email
Paste an HTML email, fill its variables from JSON, and see it as Gmail, Outlook and dark mode would, with what breaks where. Nothing is uploaded.
Email details
Shown above the email. Use variables from the same JSON as the body, e.g. ${event.title}Template
Data (JSON)
An array gives one email per item.What will break where
Support data: Can I email (MIT licence), . Client views are approximations: they show what each client leaves out, not a screenshot from it.
The email, the data and the preview stay in your browser: nothing is uploaded. Images in the email load from wherever their addresses point, as they would in an inbox.
About the Email Playground
HTML email is written for dozens of email clients that each support a different, older slice of HTML and CSS. Outlook for Windows still draws email with Microsoft Word; Gmail removes some CSS; phones invert colours in dark mode. This playground shows you, while you type, what your email looks like and which lines will not survive where.
What it does
| Feature | What it does |
|---|---|
| Live preview | The email as you type, at desktop or phone width, in light mode or two kinds of dark mode. |
| Show as Gmail, Outlook… (approximate) | An approximation, not a screenshot from the client: it removes the CSS and HTML each client does not support, according to Can I email, but does not reproduce each client's fonts, spacing or own changes. Outlook for Windows also shows what is inside <!--[if mso]> and draws VML buttons roughly as Outlook would. |
| What will break where | Every unsupported feature with the clients it fails in, the lines it is on and the notes from Can I email, plus common mistakes: unquoted links, images without width or alt text, fonts without fallbacks, buttons without a VML version. |
| Variables from JSON | {{name}} (with {{#if}}, {{#each}} and {{name || "fallback"}}), ${name}, *|NAME|* or %name%, filled from JSON. Missing, empty and unused values are listed. |
| Many recipients | A JSON array gives one email per item; step through them, or download them all as a ZIP. Make test recipients with the Test Data Generator. |
| Print or save as PDF | PDF Generator → opens the same template and data in the PDF Generator, on A4 pages with a white background, ready to print or save as a PDF. |
| Email header | Fill in Subject, From, To and Date to see them above the email, the way a mail client shows them. Variables work in these fields too. An empty subject, a long subject and a sender without a name are pointed out. |
| Gmail clipping | Gmail cuts emails larger than 102 KB and shows “View entire message”. A warning appears above the preview when the filled-in email is over that size. |
Questions
How do I test how my HTML email looks in Outlook?
Paste the email and choose Outlook Windows above the preview. Outlook for Windows draws email with Microsoft Word, so the preview leaves out the CSS it ignores (rounded corners, max-width, flexbox, position, background images and more), shows what is inside <!--[if mso]> comments, hides what is inside <!--[if !mso]>, and draws VML buttons as plain boxes. It is an approximation: for pixel-exact results send a test to a real Outlook.
Why does my button look different in Outlook or Gmail?
Common causes: border-radius and padding on links are ignored by Outlook for Windows (use a VML button inside <!--[if mso]>, from Insert → Button for every client), a web font with no fallback is replaced by a wider default font so the text wraps, and an unquoted href breaks when the address contains & or a space. The checker flags each of these with its line.
How do the variables work?
Choose how placeholders are written: {{name}} as in Handlebars, Mustache, SendGrid and Postmark; ${name}; *|NAME|* as in Mailchimp; or %name%. Values come from the JSON panel, including nested values (customer.first_name) and list items (items[0].price). With {{ }} you can also use {{#if}}, {{#unless}}, {{#each}}, {{else}}, {{../name}}, {{@index}}, {{{raw}}} and {{name || "fallback"}}.
Can I preview the email for several recipients?
Yes. Put an array of objects in the JSON panel: each item is one recipient. Step through them above the preview, or download all of them as a ZIP with one HTML file each. The Test Data Generator can make such a list, including awkward values like very long names, emoji or empty fields.
What does “What will break where” check?
Every HTML element, attribute and CSS property, value, unit, selector and at-rule in the template that Can I email lists as unsupported or partly supported in Gmail, Outlook, Apple Mail, Yahoo, Samsung Email or Thunderbird, with the notes from the tests. It also checks for common mistakes: unquoted links, images without width or alt text, fonts without fallbacks, buttons and background images without a VML version for Outlook, missing viewport or color-scheme meta tags, scripts and empty links.
What is Gmail clipping?
Gmail cuts emails larger than 102 KB and shows a “View entire message” link, which can hide the end of the email, including tracking pixels and unsubscribe links. A red warning appears above the preview when the filled-in email is over 102 KB.
How do I check dark mode?
Dark: your CSS switches on your @media (prefers-color-scheme: dark) rules and [data-ogsc] / [data-ogsb] rules, as Apple Mail and Outlook.com use them. Dark: inverted turns the colours around, roughly as the Gmail app on iPhone and Outlook apps do, which shows logos and text that disappear on dark backgrounds.
Can I save the email as a PDF?
Yes. PDF Generator → opens the same template and data in the PDF Generator, on A4 pages with a white background, where ⇩ PDF saves it as a PDF or prints it.
Is my email uploaded?
No. The template, the data and the preview stay in your browser; the checking runs in a small WebAssembly engine on your device. Images in the email load from wherever their addresses point, as they would in an inbox.