HTML Email Builder
Templates, CSS inlining, previews and checks for HTML email. Code only, never sent.
Try before you buy.
- Free preview: every preview of your email under a MySmartCoPilot mark, all the checks, and the first lines of the inlined HTML and the plain-text version (up to 20).
- Locked until you unlock it: download and copy.
- Unlock: Premium pass, ₹799 for 30 days, a one-time payment that never renews.
Ways to unlock shows how to get the full result.
Printing this result is locked in the free preview.
The CSS is inlined as you type. Nothing is sent: this page only writes code.
Preview
Light: the email in light mode, whatever your own device uses.
Images blocked: pictures from other addresses are not loaded, as in email clients that wait for the reader to allow them. Their alt text shows instead, and no tracking pixel is requested.
Pick a template or paste an email to see it here.
Checks
No problems found.
For the text part of the message: links follow their text in brackets, hidden text (the preheader) is left out.
Locked in the free preview. Opens the ways to unlock this result.
Locked in the free preview. Batch runs unlock with a pass.
Locked in the free preview. Query results unlock with a pass.
About the HTML Email Builder
Write or paste an HTML email — or start from one of the templates — and the builder moves the CSS of its <style> blocks into style="" attributes, the way a CSS inliner such as juice or Premailer does. Inline styles are the safest choice because some email clients drop or limit <style>; the media queries for phones, the dark-mode styles and :hover stay in <style> for the clients that support them. The inliner follows the CSS cascade (specificity, order, !important, styles already in the markup), leaves Outlook’s conditional comments alone and can add the width, bgcolor and align attributes Outlook for Windows still relies on.
The preview shows the email at desktop and phone widths, light or dark (with your prefers-color-scheme styles, or with colours inverted the way some apps recolour emails), and with images blocked, as many clients show it until the reader allows images. The checks report what email clients do not support — scripts, forms, SVG, relative image addresses, missing alt text — and the size against the 102 KB at which Gmail clips a message. A plain-text version is written for the text part of the message. Everything happens in your browser; nothing is sent.
Without a pass the result is a free preview: every preview of your email under a MySmartCoPilot mark, all the checks, and the first lines of the inlined HTML and of the plain-text version. Copying and downloading them unlock with a Premium pass.
How to use it
- Pick a template, paste your HTML or open a file. Insert ready-made pieces — a button, an image, two columns, a spacer, a preheader — at the cursor.
- The CSS is inlined as you type. Choose whether inlined rules leave the
<style>block, whether Outlook attributes are added and whether comments are removed. - Look at the preview: Desktop or Phone, Light, Dark (your dark-mode styles) or Inverted (an approximation of apps that recolour emails), and No images to see the alt text and the layout without pictures.
- Read the checks and the size: Show selects the place in the inlined HTML.
- With a Premium pass, copy or download the inlined HTML and the plain-text version and paste them into your email service; the free preview shows their first lines.
Examples
<style>
.note { padding: 12px; background-color: #fef3c7; }
.note a { color: #92400e; }
a:hover { text-decoration: none; }
</style>
<table><tr><td class="note">Your trial ends soon. <a href="https://example.com/plans">See plans</a></td></tr></table><style>
a:hover { text-decoration: none; }
</style>
<table><tr><td class="note" style="padding: 12px; background-color: #fef3c7;" bgcolor="#fef3c7">Your trial ends soon. <a href="https://example.com/plans" style="color: #92400e;">See plans</a></td></tr></table><h1>Welcome</h1> <p>Thanks for joining. <a href="https://example.com/start">Get started</a></p>
Welcome Thanks for joining. Get started (https://example.com/start)
Limitations
- External style sheets (
<link rel="stylesheet">) are not fetched or inlined: paste their CSS into a<style>block. - The preview is your browser’s rendering, not a test in Outlook, Gmail or other email clients.
- Selectors that depend on the reader (
:hover,:focus) or style part of an element (::before) stay in<style>, as does:nth-child(… of …). - HTML up to 2 million characters.
Privacy
Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot. The preview runs in an isolated frame loaded from a separate MySmartCoPilot address; your HTML is handed to it inside your browser and never uploaded. Images your email links to are loaded from their own addresses.
Frequently asked questions
What do I get without a pass?
Without a pass, HTML Email Builder shows every preview of your email under a MySmartCoPilot mark, all the checks, and the first lines of the inlined HTML and the plain-text version (up to 20). Until you unlock it, the result can’t be downloaded or copied. A Premium or Ultimate pass, a one-time payment that never renews, unlocks the full result. The pricing page lists the passes and their prices.
Why inline the CSS?
Most email clients now read a <style> block, but not all of them, and not in every situation — the Gmail apps, for example, ignore it when they show mail from a non-Gmail account. Styles in style="" attributes are applied everywhere. Media queries, dark-mode styles and :hover cannot be inlined, so they stay in <style> for the clients that understand them.
What exactly does the inliner change?
Only style attributes (and, if you ask, width, height, bgcolor, align and valign attributes) and the <style> blocks; everything else stays exactly as written. For each element it applies the CSS cascade: more specific selectors win, then later rules, !important beats normal declarations, and a style already in the markup beats the style sheet unless the sheet says !important. Selectors are matched against the page as a browser builds it — with the <tbody> browsers add to every table and the <body> around a snippet — so the inlined email looks as the original did; a rule for an element that is not written in the markup (such as the body of a snippet) stays in <style>. Markup inside Outlook conditional comments (<!--[if mso]>) is left alone, and a <style data-embed> block is kept as written, as juice does.
How close is the preview to real email clients?
It is your browser’s rendering of the email in a 700-pixel reading pane (scaled down to fit when your screen is narrower) and at 375 pixels, the width of many phones. Email clients differ: Outlook for Windows uses Word’s layout engine and ignores much modern CSS, and webmail clients rewrite parts of the HTML. Dark applies your @media (prefers-color-scheme: dark) styles, as clients such as Apple Mail do; Inverted roughly imitates apps that recolour emails themselves. Test important campaigns in the real clients too.
What is Gmail clipping?
Gmail shows only the beginning of a message whose HTML is larger than about 102 KB, with a “[Message clipped] View entire message” link — and whatever is cut, such as an unsubscribe link or a tracking pixel, is hidden. The size here counts the inlined HTML in UTF-8 bytes; your email service usually adds tracking links when sending, which makes the message larger.
Does it send emails or upload my HTML?
No. It only writes code: inlining, checks and the plain-text version run in your browser, and the preview runs in an isolated frame inside your browser. With a Premium pass, copy the result into your email service to send it.
Can I use MJML or a template language?
MJML is not compiled here: build it to HTML with MJML’s own tools first, then paste the HTML to inline, preview and check it. Merge tags such as {{first_name}} or *|UNSUB|* are left as written, and links that use them are not reported as broken.