HTML email, MJML, and React Email

Priya NatarajanJun 8, 202624 min

Build email HTML with a compiler (MJML, React Email, or a battle-tested framework), not hand-rolled nested tables every time. Keep CSS limited, test major clients, and store templates as versioned artifacts.

Lesson objectives

Choose a template toolchain for your stack
Produce a responsive two-column layout that degrades cleanly
Store brand tokens once and reuse them across templates

Why compilers win

Email HTML is a compatibility problem. Compilers encode years of client quirks so your team does not rediscover them. React Email pairs naturally with Resend. MJML remains a strong language-agnostic choice. AI-native ESPs generate finished designs you can still edit.

tsx

import { Html, Button, Text } from "@react-email/components";

export function Welcome({ name }: { name: string }) {
  return (
    <Html>
      <Text>Hi {name}, your workspace is ready.</Text>
      <Button href="https://app.example.com">Open app</Button>
    </Html>
  );
}

Brand tokens before clever layouts

Centralize colors, type, logo variants, and button radius. On-brand AI generation only works if the platform extracted or received those tokens. That is a core idea behind AI-native ESPs such as Brew: brand memory first, campaign generation second.

Worked exercise: Compile and screenshot one template

Author a simple welcome email in MJML or React Email.
Compile to HTML and send to Gmail, Apple Mail, and Outlook.
Note the first visual bug and fix the source template, not only the compiled HTML.

End-of-lesson checklist

Alt text on meaningful images
Preheader text set intentionally
Dark-mode checked in at least one client
Template version pinned in the send payload

Frequently asked questions

Should marketers edit raw HTML?

Ideally no. Give them structured fields or an AI-assisted editor that still emits versioned HTML. Platforms like Brew and Beehiiv optimize for that workflow in different ways.