React Email

React Email is a collection of high-quality, unstyled React components for building responsive HTML emails with TypeScript. It abstracts away the notoriously fragmented email-client rendering landscape, normalizing table-based layouts, inline styles, and Outlook-specific quirks behind a familiar component API like Button, Section, and Html.

The package bundles a renderer that serializes JSX into email-safe HTML and plain text, plus a companion CLI for live-previewing and exporting templates locally, so teams can author, preview, and ship transactional and marketing emails without leaving their React/TypeScript workflow.

What You Get

• A full set of email-safe React components (Button, Html, Head, Body, Container, Section, Row, Column, Heading, Text, Link, Img, Hr, CodeBlock, CodeInline, Markdown, Preview, Font, Tailwind) that render to table-based, inline-styled HTML
• A built-in renderer (@react-email/render) that converts your JSX tree into cross-client-safe HTML and a plain-text fallback
• A CLI (email dev, email build, email export) for live-previewing templates in the browser and exporting static HTML for deployment
• A Tailwind wrapper component that converts utility-class styling into the inline styles email clients require
• Ready-made integration examples for ten major email service providers, including Resend, SendGrid, Postmark, AWS SES, Mailgun, and Nodemailer

Common Use Cases

• Building transactional emails (password resets, receipts, welcome emails) as React components inside an existing app codebase
• Authoring marketing/newsletter templates with a live browser preview via the CLI before exporting static HTML
• Generating cross-client-safe HTML output to hand off to any ESP/SMTP provider, decoupled from the sending mechanism itself

Under The Hood

Architecture The package is a workspace member (packages/react-email) inside a Turborepo/pnpm monorepo, exporting both a component library (src/components/*) and a CLI (src/cli/*). src/index.ts re-exports @react-email/render (a sibling package that serializes React trees into HTML and plain text via html5parser, entities, and html-to-text) alongside the component set from src/components/index.ts. Each component lives in its own directory (e.g. button/button.tsx) with co-located utilities (utils/parse-padding.ts, utils/px-to-pt.ts) and a .spec.tsx test, and is registered via a shared element-marker.ts helper so the renderer can identify email-safe elements during serialization. The CLI (src/cli/commands: build.ts, dev.ts, export.ts, start.ts) is layered on top of the same package for local preview and static export.

Tech Stack TypeScript makes up roughly 93% of the codebase, with React 18/19 (including RC channels) as a peer dependency. The package is built with tsdown/esbuild into dual ESM (.mjs) and CJS (.cjs) outputs with generated .d.mts/.d.cts declarations. The monorepo is orchestrated with Turborepo and pnpm workspaces (using catalog: dependency pinning), linted and formatted with Biome, versioned via Changesets, and tested with Vitest — including a dedicated e2e Vitest config plus Playwright for browser-level checks.

Code Quality Tests are co-located per component (e.g. button/button.spec.tsx, button/utils/utils.spec.ts) rather than centralized, keeping coverage close to implementation, and run monorepo-wide via turbo run test. Low-level cross-client hacks — such as the Button component’s MSO/Outlook padding workaround using conditional comments and dangerouslySetInnerHTML — are documented inline with comments linking back to the originating GitHub issue. TypeScript prop types (e.g. ButtonProps built on React.ComponentPropsWithoutRef<'a'>) give full native attribute pass-through and forwardRef support without hand-maintained prop lists.

API Design The public API favors minimal abstraction and HTML-familiar naming — <Button href=... style=...>, <Section>, <Html> — with native attributes passed straight through via forwardRef, so existing React and CSS knowledge transfers directly. Styling is inline rather than className-based, sidestepping the single biggest email-rendering pitfall, while the Tailwind wrapper lets teams keep utility-class authoring and have it converted automatically. Getting started requires only npm i react-email and one import; the bundled CLI adds live preview and static export with no extra setup, and the repo documents integration examples for ten major ESPs.