Email Templates with React Email
Responsive templates, components, preview server, and testing
What You’ll Build
After following this guide, you will have a working implementation of email templates with react email in your project. Build responsive email templates using React components instead of fighting with HTML tables. React Email provides pre-built components (Button, Image, Section, Column) that render to email-compatible HTML. Includes a local preview server for development.
Use Cases & Problems Solved
- Send transactional emails reliably without landing in spam folders
- Set up notification systems that scale with your user base
- Avoid building email delivery infrastructure from scratch
Prerequisites
- React knowledge
- Node.js 18+
Step-by-Step Implementation
Setup React Email
The following snippet shows how to setup react email. Copy this into your project and adjust the values for your environment.
npx create-email@latest
npm install @react-email/componentsBuild a responsive email template
The following snippet shows how to build a responsive email template. Copy this into your project and adjust the values for your environment.
import { Html, Head, Preview, Body, Container, Section, Row, Column,
Heading, Text, Img, Button, Hr } from '@react-email/components';
export function OrderConfirmation({ orderNumber, items, total }) {
return (
<Html>
<Head />
<Preview>Order #{orderNumber} confirmed!</Preview>
<Body style={{ backgroundColor: '#f6f9fc', fontFamily: 'sans-serif' }}>
<Container style={{ maxWidth: '600px', margin: '0 auto', background: '#fff', padding: '40px' }}>
<Heading style={{ fontSize: '24px' }}>Order Confirmed ✓</Heading>
<Text>Your order #{orderNumber} has been placed successfully.</Text>
<Hr />
{items.map(item => (
<Row key={item.id}>
<Column><Text>{item.name} × {item.qty}</Text></Column>
<Column align="right"><Text>${item.price}</Text></Column>
</Row>
))}
<Hr />
<Text style={{ fontSize: '20px', fontWeight: 'bold' }}>Total: ${total}</Text>
<Button href="https://app.com/orders" style={{ background: '#000', color: '#fff', padding: '12px 24px' }}>
View Order
</Button>
</Container>
</Body>
</Html>
);
}⚠️ Don’t Do This
❌ Using modern CSS in emails (flexbox, grid, CSS variables)
<!-- Most email clients DON'T support flexbox/grid/CSS variables! -->
<div style="display: flex; gap: 16px;">Broken in Outlook!</div>
<div style="display: grid;">Broken in Gmail!</div>✅ Use React Email components — they render to email-safe HTML
// React Email handles all email client quirks internally
<Row><Column>Works in Outlook!</Column></Row>
// Renders to: <table><tr><td>Works in Outlook!</td></tr></table>Testing
Verify your implementation with these tests:
// __tests__/email-templates-with-react-email.test.ts
import { describe, it, expect } from 'vitest';
describe('Email Templates with React Email', () => {
it('should initialize without errors', () => {
// Test that the setup completes successfully
expect(() => setup()).not.toThrow();
});
it('should handle the primary use case', async () => {
const result = await execute();
expect(result).toBeDefined();
expect(result.success).toBe(true);
});
it('should handle edge cases', async () => {
// Test with empty/null input
const result = await execute(null);
expect(result.error).toBeDefined();
});
});Verification
npx email dev
# Opens http://localhost:3000 with live preview
# Edit template — preview updates in real-time
# Test in different email clients with Litmus or Email on AcidRelated Specs
Send Emails with Resend
React Email templates, attachments, batch sending, and delivery tracking
Email Queue Processing
BullMQ queue for emails, templates, retry logic, and bounce handling