React Email Templates: Build Beautiful Transactional Emails
Transactional emails have a 45% open rate -- nearly 5x the average marketing email -- yet most companies send poorly formatted HTML emails that damage brand perception. React Email brings the component-based development model to email design, letting developers build beautiful, responsive templates with familiar React patterns.
Key Takeaways
- React Email components compile to cross-client compatible HTML -- Gmail, Outlook, Apple Mail
- Component-based architecture enables reusable headers, footers, and layout patterns
- Local preview server with hot reload accelerates template development
- Export render functions (not raw components) for seamless NestJS integration
Why React Email
Email HTML is notoriously difficult. Different clients render HTML differently -- Outlook uses Word as its rendering engine, Gmail strips style tags, and mobile clients vary in viewport handling.
React Email abstracts this with pre-built components: Container (responsive width), Section (table-based blocks), Row/Column (grid system), Text, Heading, Button (works in Outlook), Image, Link, Hr, and Preview (hidden inbox text).
Project Setup
Install @react-email/components and react-email. Organize templates in a packages/email-templates directory with templates/, components/, and a render.ts file that exports render functions.
Building Templates
Shared Layout Components
Create reusable EmailHeader and EmailFooter components with your branding. These ensure consistency across all transactional emails.
Template Structure
Each email template is a React component receiving typed props:
import {
Html, Head, Body, Container, Section,
Text, Button, Hr,
} from "@react-email/components";
interface WelcomeEmailProps {
userName: string;
loginUrl: string;
}
export function WelcomeEmail({ userName, loginUrl }: WelcomeEmailProps) {
return (
<Html>
<Head />
<Body style={{ fontFamily: "Arial, sans-serif" }}>
<Container style={{ maxWidth: "600px", margin: "0 auto" }}>
<Text>Hi {userName},</Text>
<Text>Your account is ready.</Text>
<Button
href={loginUrl}
style={{ background: "#001834", color: "#fff", padding: "12px 24px" }}
>
Sign In
</Button>
</Container>
</Body>
</Html>
);
}
Rendering for NestJS Integration
The critical pattern: export render functions, not raw components. NestJS runs without JSX compilation, so importing React components directly causes errors.
Create a render.ts file that imports templates and exports async functions:
import { render } from "@react-email/render";
import { WelcomeEmail } from "./templates/welcome";
export async function renderWelcomeEmail(props: {
userName: string;
loginUrl: string;
}) {
return render(WelcomeEmail(props));
}
In NestJS, call the render function to get HTML, then send via your email transporter.
Development Workflow
Local Preview
Run npx react-email dev for a browser-based preview with hot reload. Changes appear instantly, making iteration fast.
Cross-Client Testing
Test across clients using Litmus or Email on Acid. At minimum test: Gmail (Chrome), Outlook (Windows), Apple Mail, Gmail (iOS), Apple Mail (iOS), Yahoo Mail, and Outlook.com.
Styling Best Practices
- Inline styles only: React Email inlines styles automatically for client compatibility
- System fonts: Use Arial, Georgia, Verdana. Custom fonts have limited support.
- 600px max width: Standard email width for desktop and mobile
- Table-based layout: React Email components render as tables for Outlook compatibility
- Dark mode: Include meta tags for Apple Mail and Outlook dark mode support
Common Email Templates
Order Confirmation
Include order number, item list with prices, shipping address, estimated delivery, and tracking link when available. Use a table layout for the item list.
Password Reset
Keep it minimal: brief explanation, prominent reset button with time-limited link, security notice about not sharing the link, and support contact.
Invoice Email
Attach the PDF invoice and include a summary in the email body: invoice number, date, due date, total amount, and a button to view/pay online.
Shipping Notification
Include order number, carrier name, tracking number with clickable link, estimated delivery date, and items being shipped.
Frequently Asked Questions
Q: Why not use a drag-and-drop email builder?
Drag-and-drop builders work for marketing emails but lack dynamic content capabilities for transactional emails. Order confirmations and invoices require data-driven templates that code handles better.
Q: Does React Email work with any sending service?
Yes. It outputs standard HTML strings compatible with Nodemailer, SendGrid, Postmark, AWS SES, Resend, or any SMTP server.
Q: How do we handle email localization?
Pass locale and translated strings as template props. The render function receives all text as parameters, so translations are handled by your i18n system before rendering.
Q: Can we include dynamic images or charts?
Use server-side generated images hosted at URLs. Libraries like QuickChart render charts as images. Avoid embedded images -- use hosted URLs for compatibility.
What Is Next
React Email transforms transactional email development from frustrating table-layout exercises into modern component-based workflows.
Contact ECOSIRE for email template development, or explore our Odoo implementation services for integrated email workflows.
Published by ECOSIRE -- helping businesses scale with enterprise software solutions.
Written by
ECOSIRE Research and Development Team
Building enterprise-grade digital products at ECOSIRE. Sharing insights on Odoo integrations, e-commerce automation, and AI-powered business solutions.
Related Articles
Building APIs with Drizzle ORM and NestJS: Complete Guide
Build type-safe APIs with Drizzle ORM and NestJS. Learn schema definition, migrations, query building, relations, transactions, and testing patterns for production applications.
Next.js Internationalization: Complete i18n Guide with next-intl
Implement internationalization in Next.js with next-intl. Complete guide covering routing, translations, server/client components, RTL support, SEO, and deployment.