Newsletter HTML Builder

About this tool

Email clients are not browsers. Gmail strips <style> blocks in forwarded messages, Outlook renders with Word's layout engine, and flexbox or grid simply do not exist in most inboxes. This builder takes a plain list of sections and returns the markup those clients actually understand: nested role="presentation" tables, every declaration inlined on the element it styles, an Outlook ghost-table wrapper in a conditional comment, mso-table-lspace resets, and a single mobile media query that drops the fixed-width card to 100%.

You write content, not markup:

heading | What shipped in March
text | Hi {{first_name}}, three things went live this month.
columns | **Faster exports** — 4x quicker. | **New API keys** — scoped and revocable.
button | Read the release notes | https://example.com/changelog
divider
footer | [Unsubscribe]({{unsubscribe_url}})

Worked example

Input — one section, defaults everywhere else:

button | Read more | https://example.com

Output (the button row inside the generated document):

<tr>
  <td align="center" style="padding:24px 32px;">
    <table role="presentation" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td align="center" bgcolor="#2563eb" style="border-radius:6px;background-color:#2563eb;">
          <a href="https://example.com" style="display:inline-block;padding:14px 28px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:16px;line-height:20px;color:#ffffff; font-weight:600;color:#ffffff;text-decoration:none;border-radius:6px;">Read more</a>
        </td>
      </tr>
    </table>
  </td>
</tr>

That is the "bulletproof button" pattern — a background-coloured table cell with a padded display:inline-block link inside it, so the whole rectangle stays clickable in clients that ignore padding on anchors, and it degrades to a plain coloured cell where border-radius is unsupported.

Section types

Inside any text you can use **bold**, *italic*, [label](https://example.com) and \n for a line break. Merge tags such as {{first_name}}, {{unsubscribe_url}} or *|FNAME|* pass through untouched, so the output can be pasted straight into Mailchimp, Klaviyo, Brevo, Postmark or your own sending code. Lines beginning with # are comments.

Limits and edge cases

• Max 200 sections per newsletter; the 201st is an error rather than a truncated document.
• Content width 320–900px, default 600 — the width every desktop client renders without a horizontal scrollbar. Below that width the card goes fluid.
• Spacer height is capped at 200px.
• Only https://, http://, mailto:, tel:, #anchor and merge-tag URLs are accepted. A javascript: URL is rejected, not silently escaped.
• Colours must be hex (#f4f4f5, 3/4/6/8 digits) or a plain CSS colour name — anything else is rejected so a broken value can't leak into an inline style attribute.
• Text is HTML-escaped; the html section type is the deliberate escape hatch and is not sanitised — only put markup you trust there.
• No web fonts, no background images, no <script>: all three are ignored or blocked by major clients, so the builder does not emit them.

FAQ