HTML Email Builder
Builds an email from blocks as table-based, inline-styled HTML with a VML-backed button, and writes the plain-text alternative from the same blocks.
A block editor that can only produce the layout mail clients agree on: nested tables, inline styles, and a button drawn twice so Outlook’s Word engine gets a real shape rather than a text link with a useless background. It exports the HTML and the plain-text alternative together, and the text is written from the blocks rather than by stripping tags.
Message
Blocks
- Heading
- Paragraph
- Button
- Divider
- Two columns
- Footer
Preview
This is not a screenshot of the client. It is your HTML with that client’s documented stripping rules applied, rendered here by this browser.
- Outlook for Windows renders through Microsoft Word. This pane is a browser: it can show you what Word would still have after the stripping, and it cannot show you how Word would lay that out. Line breaks, spacing and image scaling (Word uses 96 dpi assumptions against a 120 dpi screen) will differ.
Removed for this client · 2
Declarations: border-radius: 6px · border-radius: 8px
The button is drawn twice: a VML shape for Outlook’s Word engine and an anchor for everything else. Only one of them is ever visible.
What the checker says about this output
Nothing that breaks or degrades. That is the point of building it this way.
4.93 kB · 5% of Gmail’s 102 KB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>This week at Example</title>
<!--[if mso]>
<xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml>
<![endif]-->
</head>
<body style="margin:0;padding:0;background:#f2f4f7;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%">
<div style="display:none;max-height:0;overflow:hidden;mso-hide:all;font-size:1px;line-height:1px;color:#f2f4f7">What changed this week, and where to read the rest‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ </div>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#f2f4f7" style="background:#f2f4f7">
<tr>
<td align="center" style="padding:24px 12px">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" bgcolor="#ffffff" style="width:100%;max-width:600px;background:#ffffff;border-radius:8px">
<tr><td align="left" style="padding:24px 24px 8px;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:26px;line-height:1.35;font-weight:700;color:#1f2328">This week’s update</td></tr>
<tr><td align="left" style="padding:8px 24px 16px;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:15px;line-height:1.75;color:#1f2328">Hello.<br>Here is what changed this week. The layout is built from tables, so it survives Outlook intact.</td></tr>
<tr><td align="center" style="padding:16px 24px"><!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com/news" style="height:46px;v-text-anchor:middle;width:240px;" arcsize="13%" stroke="f" fillcolor="#1a56db"><w:anchorlock/><center style="color:#ffffff;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:16px;font-weight:700;">Read the full story</center></v:roundrect><![endif]--><!--[if !mso]><!-- --><a href="https://example.com/news" target="_blank" style="display:inline-block;min-width:192px;background:#1a56db;color:#ffffff;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:16px;font-weight:700;line-height:46px;text-align:center;text-decoration:none;border-radius:6px;padding:0 24px;mso-hide:all">Read the full story</a><!--<![endif]--></td></tr>
<tr><td style="padding:8px 24px"><table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td height="1" style="height:1px;line-height:1px;font-size:0;background:#e3e6ea"> </td></tr></table></td></tr>
<tr><td style="padding:8px 24px"><table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td width="276" valign="top" style="font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:15px;line-height:1.7;color:#1f2328;padding-right:12px">This is the left column. The two of them are one row of a table.</td><td width="276" valign="top" style="font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:15px;line-height:1.7;color:#1f2328;padding-left:12px">And this is the right one. No flexbox is involved, so the Word engine keeps them side by side.</td></tr></table></td></tr>
<tr><td align="left" style="padding:16px 24px 28px;font-family:-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'Segoe UI', Roboto, sans-serif;font-size:15px;line-height:1.7;color:#1f2328;font-size:12px;line-height:1.7;color:#6b7280;">Sender address · Seoul<br><a href="https://example.com/unsubscribe" target="_blank" style="color:#6b7280;text-decoration:underline">Unsubscribe</a></td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>Plain text
What changed this week, and where to read the rest This week’s update ================== Hello. Here is what changed this week. The layout is built from tables, so it survives Outlook intact. Read the full story: https://example.com/news —————————————————————————————— This is the left column. The two of them are one row of a table. And this is the right one. No flexbox is involved, so the Word engine keeps them side by side. —————————————————————————————— Sender address · Seoul Unsubscribe: https://example.com/unsubscribe
Generated from the blocks, not by stripping tags — which is why the links read as sentences rather than as a wall of URLs.
How to use it
Set the message up
Subject, preheader, width and colours. The preheader is the grey line the inbox list shows after the subject — leave it empty and the client takes whatever text comes first, which is usually "View in browser".
Stack the blocks
Heading, paragraph, image, button, two columns, divider, spacer, footer. The two-column block is a table row, not a media query, so it stays two columns in the clients that ignore media queries.
Watch the preview and the verdict
The same per-client panes as the checker, and below them the checker’s own reading of this output. It should stay empty — that is the point of building it this way.
Export both parts
Send them as multipart/alternative. An HTML-only message scores worse with every spam filter and is unreadable to anything that reads mail aloud.
Common questions
Why does the button appear twice in the HTML?
One copy is a VML shape inside an <!--[if mso]--> comment, which only Outlook’s Word engine reads; the other is an ordinary anchor inside a comment Word ignores. Exactly one of them is ever visible. Without the VML half, padding is dropped in Outlook and only the text itself is clickable.
Will Korean render correctly on Windows?
The stack puts Apple SD Gothic Neo, Malgun Gothic and Noto Sans KR before any Latin face, because Outlook falls back to Times New Roman rather than to the next font when a web font fails — a Latin-first stack is how Hangul ends up as boxes.
Can I paste my own HTML in here?
No — this page only builds. Existing HTML goes to the compatibility checker, which will tell you what to change and generate the replacement markup for the elements that need it.
Feed it from
HTML Email Compatibility Check
Checks an email’s HTML against what each mail client actually supports, points at the element that breaks, and shows what survives Gmail, Outlook and the rest side by side.
Email Client Support Table
What Gmail, Outlook, Apple Mail, Yahoo, Samsung Mail and Thunderbird support in HTML email, from caniemail’s device tests, with the date each was last tested.
Next
These accept what this tool produces, so the result can go straight in.
Email Client Support Table
What Gmail, Outlook, Apple Mail, Yahoo, Samsung Mail and Thunderbird support in HTML email, from caniemail’s device tests, with the date each was last tested.
Sent vs Delivered Comparison
Send a draft to a disposable address from your own account and see what the sending path rewrote — links wrapped in redirects, dropped style blocks, added beacons, the encoding used.
HTML Email Compatibility Check
Checks an email’s HTML against what each mail client actually supports, points at the element that breaks, and shows what survives Gmail, Outlook and the rest side by side.
Suspicious URL Check
Inspects a link’s shape before you open it — lookalike characters, IP-literal hosts, @ tricks, deep subdomains, odd ports, shorteners — and on request traces its redirects and looks up the domain’s registration date. No reputation database.
Archive Inspector
Opens a zip without extracting it and flags path traversal entries, executables, macros and zip bombs.
Audio Converter
Converts between MP3, WAV, FLAC, AAC, OGG and Opus with bitrate and sample-rate settings.