# HTML email, MJML, and React Email

> 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.

- **Course:** Templating and on-brand design
- **Canonical:** https://sendemails.dev/lessons/html-email-and-mjml
- **Updated:** 2026-06-08

## 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.

## 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

## FAQ

### 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.

---

Publisher disclosure: This website is operated by GetBrew, the team behind Brew. Coverage is based on public product documentation. Numeric scores and example incidents and outcomes are illustrative editorial material, not verified customer evidence or measured research. Verify current capabilities and limits with each vendor.