PPangea

React Email

React Email is an open-source React component library for building cross-client HTML email templates using TypeScript, with a live preview server, built-in spam scoring, and provider-agnostic HTML rendering.

What is React Email?

React Email is an open-source framework that lets engineers build HTML email templates as React components, then render them to cross-client-compatible HTML for sending through any provider. Created by Zeno Rocha and maintained by Resend, it brings TypeScript, composable primitives, and hot-reload previews to a domain historically plagued by brittle table-based markup. All components are pre-tested against major email clients — Gmail, Outlook, Apple Mail, Yahoo Mail — eliminating hours of per-client QA. As of early 2026, React Email exceeds 920,000 weekly npm downloads and 17,000 GitHub stars, making it the fastest-growing email framework in the JavaScript ecosystem. Version 5.0 added dark mode preview support and real-time collaborative editing via Resend's visual editor.

Key Takeaways

  • Fully open-source and MIT licensed — no subscription required to use any of its core features.
  • Renders provider-agnostic HTML that works with Sendgrid, Postmark, AWS SES, and Nodemailer, not just Resend.
  • Built-in SpamAssassin scoring and a link linter catch deliverability issues before templates hit production.
  • Tailwind v4 support converts utility classes to inline styles automatically — but upgrading Tailwind and React Email out of sync breaks compatibility.
  • React Email expertise almost always appears bundled with Resend or transactional email integration, not as a standalone job requirement.

What Makes React Email Stand Out

React Email's core strength is collapsing the gap between how engineers build web UIs and how they build emails. The pattern mirrors what Tailwind did for CSS: instead of a separate skill set with arcane syntax, you use the tools you already know. The component library ships primitives like `Button`, `Section`, `Column`, `Text`, and `Hr` — all pre-wired for cross-client compatibility. The live preview server (`npx react-email dev`) renders templates in real time across a matrix of email clients, replacing manual round-trips to Litmus or Email on Acid. SpamAssassin-powered scoring and a link linter surface deliverability risks before send. Tailwind v4 integration automatically converts utility classes to inline styles, keeping design systems consistent from web to email. And with version 5.0, templates can be pushed to Resend's visual editor for non-developer teammates to edit collaboratively in real time.

React Email vs MJML vs Maizzle

MJML is the safe, proven default — 701,000 weekly downloads, a custom markup language that compiles to rock-solid responsive HTML, and nine years of cross-client battle testing. Pick MJML when output predictability matters more than developer experience, or when your team doesn't already live in React. Maizzle is the Tailwind-first option, using standard HTML and utility classes with no custom tags, giving maximum markup control for complex designs. Pick Maizzle when designers want Tailwind flexibility without JavaScript component abstractions. React Email wins on developer experience when your stack is already React and TypeScript — engineers are productive within hours rather than days. The honest tradeoff: MJML and Maizzle have more predictable output for intricate layouts; React Email is faster to ship and easier to maintain in a React codebase.

Email Client Gotchas That No Framework Fully Solves

React Email dramatically reduces cross-client pain, but email clients are still a hostile rendering environment that no framework fully abstracts away. Gmail rejects SVG images outright. Desktop Outlook — still used heavily in enterprise — renders HTML through the Word engine and ignores `display: flex`, CSS Grid, and most modern layout primitives. Gmail enforces a `` tag byte limit that forces all CSS into inline attributes, which React Email handles automatically but developers need to understand to debug correctly. The local preview server can create a false sense of security: real-world testing with Litmus or Email on Acid before a production launch is still necessary. Dynamic content (personalization tokens like a user's first name) can't be changed interactively in the preview, requiring code changes or a custom preview harness to test properly.

Pricing and the Resend Relationship

React Email itself is entirely free — MIT licensed, no tiers, no account required. The `@react-email/render` package, preview server, spam scorer, and all component primitives are open-source and work with any sending infrastructure. The wrinkle is the Resend integration: the collaborative visual editor and cloud template hosting introduced in version 5.0 are features of Resend's platform, which starts free at 3,000 emails per month and 100 per day, then scales to paid plans for higher volume. React Email is genuinely provider-agnostic, but Resend's visual collaboration tooling creates real switching costs once teams adopt it. Teams using React Email with Sendgrid or Postmark pay nothing for the framework itself — just their existing sending costs.

React Email in the Fractional Talent Context

React Email crossed 920,000 weekly downloads in late 2025 — a 56% jump in five months — partly because Resend bundles it in its own developer onboarding, expanding its distribution far beyond direct framework adoption. Companies increasingly list "React Email" by name in freelance contracts rather than just "email templates," signaling it has reached brand recognition that clients request specifically. The skill almost always surfaces as one deliverable in a broader contract: a full-stack or backend engineer hired to build onboarding flows, set up transactional infrastructure, or migrate from a legacy templating system. Standalone React Email projects are short (one to three weeks), making them well-suited for fractional or project-based engagements. Engineers who pair React Email with Resend or Sendgrid integration, Next.js, and TypeScript experience command stronger rates than those offering the framework skill alone.

The Bottom Line

React Email has become the default email templating choice for modern JavaScript teams — not because it eliminates email client pain entirely, but because it makes email development feel like the rest of the codebase. Its open-source core, TypeScript support, and provider-agnostic rendering make it accessible without vendor lock-in. For companies hiring through Pangea, React Email expertise signals an engineer who can own transactional email end-to-end: templates, personalization, deliverability, and integration with existing sending infrastructure.

React Email — Frequently Asked Questions

Does React Email work with Sendgrid, Postmark, or AWS SES?
Yes. The `@react-email/render` utility outputs plain HTML that works with any email sending provider. The Resend integration is optional — it adds collaborative editing features, but is not required to use React Email.
Is React Email free to use?
Entirely. React Email is MIT licensed and has no paid tiers. All components, the preview server, spam scoring, and the rendering library are open-source with no account or subscription required. Resend's cloud editor — a separate product — has a free tier but is distinct from the React Email framework.
How long does it take a React developer to be productive with React Email?
A developer already comfortable with React and TypeScript can write a functional template within a few hours. Reaching production confidence — cross-client compatibility, spam scoring, dynamic data injection, CI integration — typically takes one to three days. There are no certifications; the official docs are clear but sparse on edge cases.
How does React Email handle Outlook compatibility?
React Email's components are tested against Outlook, but Desktop Outlook's Word-based rendering engine is a fundamental limitation no framework fully solves. Properties like `display: flex` and CSS Grid don't render in Outlook. React Email mitigates many issues through pre-built components, but complex layouts targeting Outlook still require manual fallback testing.
Is React Email a good skill for freelancers to develop?
Yes, with context. React Email rarely appears as a standalone requirement — it surfaces in broader contracts covering transactional email infrastructure, SaaS onboarding flows, or email system migrations. Engineers who combine React Email with Resend or Sendgrid integration, Next.js, and TypeScript are well-positioned for fractional roles at growth-stage SaaS companies.