choose-framework

Choose an HTML Email Framework

There is no single best framework — the right choice depends on the user's existing stack, modernity preferences, and how much email-client abstraction they want.

Decision guide

Ask the user these questions (skip any they've already answered):

1. Existing stack? Tailwind-centric → Maizzle. Sass/Gulp → Foundation. No preference → MJML (lowest friction).
2. How often will they edit templates? One-off → MJML. Ongoing design system → Foundation or Maizzle.
3. Modern Node tooling matter? Yes → Maizzle or MJML. Willing to tolerate legacy → Foundation.
4. Who edits the templates? Developers only → any. Designers/marketers too → MJML (simplest syntax).

Framework comparison

Foundation for Emails (ZURB)

• Syntax: Inky (<container>, <row>, <columns>, <button>, <callout>)
• Styling: Sass (_settings.scss for theming)
• Build: Gulp, Panini (Handlebars), Juice for inlining
• Pros: Mature, great defaults, strong button/callout components, good docs
• Cons: Legacy Node tooling (node-sass headaches on Node 18+), slower builds, ZURB is no longer actively maintaining it
• Best for: Teams already on Sass/Gulp, Foundation-for-Sites users, design-system-heavy work
• Repo: https://github.com/foundation/foundation-emails

Maizzle

• Syntax: Plain HTML + Tailwind utility classes
• Styling: Tailwind CSS (full config), PostCSS
• Build: Modern Node, fast, config-driven
• Pros: Actively maintained, Tailwind DX, excellent inlining + minification, environment-based configs (dev/prod), works great with components (Nunjucks/Liquid/Handlebars)
• Cons: Requires Tailwind familiarity, no semantic layout helpers (you write <table> yourself when needed)
• Best for: Modern stacks, Tailwind users, teams who want control + speed
• Repo: https://github.com/maizzle/maizzle

MJML (Mailjet)

• Syntax: XML-like semantic tags (<mj-section>, <mj-column>, <mj-button>, <mj-image>)
• Styling: Attribute-based + <mj-style> blocks
• Build: mjml CLI or Node API, very fast
• Pros: Dead simple syntax, excellent client compatibility, huge component library, actively maintained, online try-it editor, great for non-developers
• Cons: Less flexible than raw HTML for custom layouts, attribute-heavy styling can feel verbose
• Best for: Fast template creation, transactional emails, teams with mixed technical skill
• Repo: https://github.com/mjmlio/mjml

Hand-rolled tables

• When: The user already has a working template they just need to edit, or needs something so specific a framework gets in the way.
• Always combine with the email-client-gotchas skill — don't invent workarounds from scratch.

Quick recommendation matrix

Situation	Recommendation
"I just need a transactional email sent via Resend/SendGrid"	MJML
"We use Tailwind everywhere"	Maizzle
"I want a marketing newsletter design system"	Foundation or Maizzle
"I'm not a developer"	MJML
"Modern Node, fast builds, version controlled"	Maizzle
"Quick one-off, paste into Gmail"	MJML → copy compiled HTML

After the user picks

Hand off to the matching skill:

• Foundation → foundation-emails
• Maizzle → maizzle
• MJML → mjml

Then point them at email-client-gotchas (always relevant) and inline-and-test (for preview/send).