inline-and-test

Compile, Preview, and Test Emails

Framework-agnostic guidance for going from source template → tested, ready-to-send HTML.

1. Compile

Framework	Dev command	Production command	Output
Foundation	npm start	npm run build	dist/*.html
Maizzle	npm run dev	npm run build	build_production/*.html
MJML	mjml src.mjml -o out.html	mjml src.mjml -o out.html --config.minify=true	out.html

Always ship the production compile — dev builds skip inlining and minification.

2. Browser preview (fast, low fidelity)

All three frameworks serve a BrowserSync-style preview in dev mode. Useful for:

• Layout review
• Copy review
• Spot-checking responsive breakpoints

Not useful for: actual email client rendering. A browser is nothing like Outlook.

3. Send a test to yourself (essential)

Via Resend (if available)

If the user has the Resend MCP connected:

Use the send-email tool with the compiled HTML as the body, sending from a verified Resend domain to a test address.

Via Gmail compose

Quickest sanity check:

1. Open build/final.html in browser.
2. Select all, copy (rendered, not source).
3. Paste into a new Gmail compose.
4. Send to yourself.

Catches 80% of obvious issues.

Via SMTP / ESP API

For repeated testing, script it:

curl -X POST 'https://api.resend.com/emails' \
  -H 'Authorization: Bearer <RESEND_KEY>' \
  -H 'Content-Type: application/json' \
  -d "{
    \"from\": \"[email protected]\",
    \"to\": \"[email protected]\",
    \"subject\": \"Template test\",
    \"html\": $(jq -Rs . < build/final.html)
  }"

4. Cross-client testing

For any email going to more than a handful of recipients:

• Litmus (litmus.com) — renders in 100+ clients, paid.
• Email on Acid (emailonacid.com) — similar, paid.
• Mailtrap (mailtrap.io) — free tier, inbox + spam scoring.
• Manual multi-account: send to Gmail, Outlook.com, iCloud, Yahoo, a real Outlook desktop install if you have one.

Priority targets (in order of how much they break things):

1. Outlook desktop (Word-rendered) — most fragile
2. Gmail mobile app — strips some CSS
3. iOS Mail dark mode — auto-inversion surprises
4. Gmail web with images off — alt-text layout test

5. Spam and deliverability

Before sending at volume:

• mail-tester.com: forward a test email to the address they provide, get a 10-point score. Aim for 9+. Common losses: missing SPF/DKIM/DMARC, too many links, "spammy" words in subject.
• Check sender domain DNS:

  dig TXT yourdomain.com | grep -i 'v=spf1\|v=DMARC1'
  dig TXT default._domainkey.yourdomain.com     # DKIM selector varies by ESP
  

• Plain-text alternative: most ESPs auto-generate from the HTML. Review it — auto versions are often garbled. Override if needed.
• Size: keep compiled HTML under 100KB to avoid Gmail's "[Message clipped]".
• Image-to-text ratio: avoid image-only emails (look spammy). Aim for >40% real text.
• Unsubscribe: required for marketing mail (CAN-SPAM, GDPR). Most ESPs inject automatically; verify it appears.

6. Preview tools

• MJML online editor (mjml.io/try-it-live): live preview for MJML.
• Parcel / Sauce (inboxpreview.com, similar): drop in HTML, see rendered previews across clients without a full Litmus subscription.
• hey-email / htmlemail.io: quick test-send services.

Pre-ship checklist

• Compiled with production command (inlined, minified)
• Preheader renders correctly in inbox preview
• All images load (and alt-text layout works with images off)
• All links absolute, work, correct destination
• Tested in Gmail web + Outlook + iOS Mail minimum
• Dark mode behavior acceptable (Apple Mail)
• Under 100KB
• Unsubscribe link present (if marketing)
• Plain-text alternative reviewed
• Sender domain SPF/DKIM/DMARC verified
• mail-tester score ≥ 9
• Sent a final test through the actual ESP/send path (tracking rewrites can break things)

Shipping to an ESP

Most ESPs accept pasted HTML:

1. Open production-compiled HTML in a text editor.
2. Copy all.
3. Paste into the ESP's "code your own" / "import HTML" flow.
4. Send a final test through the ESP — link tracking rewrites can change layout.
5. Schedule / send.