Email Newsletter Composer

The rendering engine problem nobody warns you about

Modern web developers take CSS for granted — until their beautiful newsletter arrives in Outlook looking like a ransom note. The reason: email clients don't share a rendering engine. Apple Mail uses WebKit and handles modern CSS gracefully; Gmail strips <style> blocks and ignores most positioning; and desktop Outlook — still used by a huge share of business inboxes — renders HTML with Microsoft Word's engine, which means no flexbox, no grid, no background images on divs, and only a subset of CSS. The only code that survives all three is the oldest code on the web: nested tables for layout, with every style written inline on the element it affects. This composer generates exactly that — boring, battle-tested, 1999-style HTML — because boring is what renders identically everywhere.

Markdown in, bulletproof HTML out

Writing table-based email HTML by hand is miserable: a simple two-paragraph email balloons into hundreds of lines of nested tables and repeated inline styles. Markdown solves the authoring side — headings, emphasis, lists, links and images in plain text anyone can learn in ten minutes — while the composer handles the translation. Its built-in parser converts your Markdown into semantic elements, then the template engine wraps everything in email-safe tables with inline styles: 16px Arial body text with comfortable line height, properly sized headings, blockquotes with accent borders, and images constrained to the content width. Three templates cover the common cases: Minimal for personal letters, Bold header for brand announcements, and Newsletter with a masthead and date line for recurring issues.

The details that decide the inbox

Rendering is only half the battle — the other half is getting opened. The preheader field controls the gray preview text shown next to your subject line in the inbox; leaving it empty wastes the most valuable teaser space you have, and most senders let the first line of the email leak in instead. Keep it under about 100 characters and make it extend the subject line rather than repeat it. Images need absolute https:// URLs — email clients can't access your hard drive — plus descriptive alt text, because a large share of readers have images disabled by default and will otherwise see blank boxes. And keep the total email under roughly 102KB of HTML: Gmail clips messages larger than that with a "[Message clipped]" link that kills your footer and unsubscribe link.

Testing before you hit send

Even bulletproof code deserves a test send. Every major email platform offers a test-send feature — use it, and check the result in at least Outlook (desktop or web), Gmail (web and mobile app) and Apple Mail, which together cover the vast majority of inboxes. Look for the classic failure modes: images wider than the content column on mobile, links that inherited unexpected colors, and footers pushed below Gmail's clipping threshold. Send the test to yourself first, click every link, and view it with images both enabled and disabled. One more deliverability note: this tool generates the HTML, but your sender reputation — authentication (SPF, DKIM, DMARC), list hygiene, engagement — is what decides spam-folder placement. Good code gets you rendered; good practices get you seen.