Developer Tools New Tool

Free Online HTML Email Builder with Live Preview

Add blocks, reorder them and set your brand colour, then take away HTML written the way email actually needs it: tables for layout, inline styles on every element, a 600px content width and the VML fallback that makes a button work in Outlook on Windows.

Free Forever Nothing Uploaded Email safe HTML Runs in your browser

Free Online HTML Email Builder with Live Preview

Advertisement Slot (Top Banner) Google AdSense Unit • Responsive Banner

HTML Email Builder Everything happens in this tab. Nothing you paste is sent anywhere.

Preview

Desktop, 640px Phone, 375px

Both frames are sandboxed, so nothing in the email runs or loads. This is a browser rendering the HTML, not an email client.

HTML

Brand Brand colour Link colour Page background Content background

Type and width Font stack Content width px Corner radius px

Blocks

0 blocks 0 KB of HTML 0 links

Buy Us A Coffee

Enjoying WizTools123? Help keep our server infrastructure 100% free and open for everyone.

Buy Us A Coffee

Sponsored Content (Below Tool) Google AdSense Placement

Why Email HTML Looks Like 1999

It is not nostalgia. It is one rendering engine in particular.

Outlook 2007 replaced Internet Explorer with Microsoft Word as the engine that renders email, and Outlook on Windows still uses it. Word does not do float reliably, ignores max-width on a div, does not support flexbox or grid at all, drops background-image in most places, and does not round corners. It also adds its own line height and its own padding in tables unless you tell it not to.

That is why email layout is still nested tables with explicit widths, why every rule is written inline on the element it applies to, and why a button is a table cell with a link in it rather than a styled anchor. It is also why conditional comments survive in this one corner of the web: <!--[if mso]> lets you hand Outlook a Vector Markup Language shape, so the button has a real filled rectangle with real corners there and an ordinary link everywhere else.

The other half of the problem is the inbox, not the client. Gmail clips a message at roughly 102KB and shows a "view entire message" link, which cuts off your tracking pixel and your unsubscribe link along with the content. Several clients strip <style> blocks entirely, which is the real reason styles go inline rather than in the head. The size of the HTML is counted on this page for exactly that reason.

How to Build an HTML Email

A few steps, and nothing is uploaded.

Add your blocks Pick a block type and press Add. Preheader, header bar, heading, paragraph, button, image, divider, a two column row and a footer with an unsubscribe line.

Fill them in and reorder Each block has its own fields. The arrows move a block up or down, and the bin removes it. The preview follows every keystroke.

Set the brand Brand colour, link colour, page and content background, font stack, content width and corner radius. 600px is the width that is safe everywhere.

Take the HTML Copy it or download it, then paste it into your sending platform as a custom HTML template and send yourself a test.

What to Know About HTML Email

Including the several things this page cannot do for you.

This does not send email and it does not test in real clients. It writes HTML. It cannot tell you how Gmail on Android, Outlook 2016 or Apple Mail in dark mode will actually render your message, because the only way to know that is to send the message to those clients and look. Send yourself a test through whatever platform you use before you send anything to a list, and if the email matters, use a rendering service that shows you real screenshots.

Outlook on Windows uses the Word rendering engine, so anything clever breaks there. No flexbox, no grid, unreliable float, no max-width on a div, no rounded corners and no reliable background images. That is why the HTML here is nested tables with fixed widths and inline styles on every element, and why the button is written twice: a VML rectangle inside a conditional comment for Outlook, and an ordinary link for everything else.

The preheader is what the inbox shows next to your subject line, and leaving it empty is a wasted line. Gmail, Apple Mail and Outlook all show a preview snippet after the subject, and if there is no preheader they take the first words of your HTML instead, which is usually "view this email in your browser" or an image alt text. The preheader block here is hidden in the message body and read by the inbox, and a row of non-breaking spaces after it stops the client pulling in the next sentence.

Dark mode is not controlled from here, and neither is image blocking. Apple Mail and Outlook invert colours by their own rules, so a white content panel may come back dark grey with your black text still on it. Most clients also block images until the reader allows them, which is why the image block writes real alt text and a background colour rather than relying on the picture. Neither behaviour can be turned off by the sender, whatever a blog post claims.

Key Features & Capabilities

What this tool does, and what it deliberately does not.

Blocks you control Nine block types, added, reordered and removed, each with its own fields.

Tables and inline styles Layout tables with role="presentation" and a style on every element.

The Outlook button The VML conditional comment, so the button is a real rectangle in Outlook.

Two widths at once Desktop and phone previews side by side, in sandboxed frames.

Size watched A KB count and a warning near the 102KB point where Gmail clips.

Nothing uploaded No template is saved, nothing is sent, and no remote image is loaded.

About the HTML Email Builder

Writing an HTML email by hand means writing HTML the way it was written twenty five years ago, and knowing which of the old rules still matter. Tables for layout, because Outlook on Windows renders with Word. Inline styles on every element, because several clients strip the style block out of the head. Fixed widths, because max-width on a div is ignored where it matters most. None of this is a preference; it is the shape of the only markup that arrives looking the way you left it.

So this page builds that markup from blocks. You add a heading, a paragraph, a button, a two column row and a footer, fill them in, drag the order about with the arrows, and set the brand colour and the font stack. What comes out is nested tables with role="presentation" so screen readers do not announce your layout as a data table, an inline style on everything, a 600px content column, and a button written twice so that Outlook gets a VML rectangle and everyone else gets a link.

The preview is two sandboxed iframes, one at desktop width and one at phone width, side by side, because most of the layout mistakes in an email are visible the moment you see it narrow. That preview is a browser, though, not an email client, and the page says so rather than implying otherwise. The size of the generated HTML is counted next to the block count, because Gmail clips a message around 102KB and a clipped message loses its unsubscribe link.

Frequently Asked Questions

Outlook, the preheader, dark mode and testing.

No. This page generates HTML and nothing else: there is no sending, no account, no list and no tracking. Paste the HTML into your own platform, whether that is Mailchimp, Brevo, Postmark, SendGrid or your own code, as a custom HTML template. Sending also needs authentication records on your domain, which is a separate job from the markup.

Because Outlook on Windows cannot style an anchor into a button. The first version is a VML roundrect inside an <!--[if mso]> conditional comment, which only Outlook reads and which gives it a real filled rectangle with the right size and corners. The second is an ordinary styled link wrapped in a comment that hides it from Outlook. Every client sees exactly one of them.

One short sentence that continues the subject line rather than repeating it, around 40 to 90 characters. It appears in the inbox list after the subject in Gmail, Apple Mail and Outlook. If you leave it empty the client takes the first text it finds in your HTML, which is why so many emails preview as "view this email in your browser". The block writes it hidden in the body, followed by spacing characters so the client does not pull in your first paragraph too.

Because that is the width the Outlook reading pane and most desktop clients show without shrinking or introducing horizontal scroll, and it scales down cleanly on a phone. You can change it here up to 700, which is generally safe on modern clients, but 600 is the number that has never caused trouble. The outer table is full width so the background colour reaches the edges.

Close, but this preview is a browser, and a browser is the most capable renderer your email will ever meet. Outlook on Windows will be worse, some clients strip the style block, dark mode may invert your colours, and images are often blocked until the reader allows them. Treat the preview as a check on your content and layout, then send a real test to the clients your readers actually use.