Developing and Building Transactional Email Templates (React Email)
React Email — a library from the Resend team that lets you create email templates directly in JSX with TypeScript, with full control through components. No manual HTML tables — components like <Section>, <Row>, <Column> generate compatible HTML for you.
Installation and Basic Structure
npm install @react-email/components react react-dom
npm install -D @react-email/render
A template is a regular React component that exports JSX:
import {
Body, Button, Column, Container, Head, Heading,
Hr, Html, Img, Link, Preview, Row, Section, Text
} from '@react-email/components';
interface OrderConfirmationProps {
orderId: string;
customerName: string;
items: { name: string; qty: number; price: string }[];
total: string;
orderUrl: string;
}
export default function OrderConfirmation({
orderId,
customerName,
items,
total,
orderUrl,
}: OrderConfirmationProps) {
return (
<Html lang="en">
<Head />
<Preview>Order #{orderId} Confirmed — Thank you for your purchase</Preview>
<Body style={{ backgroundColor: '#f9fafb', fontFamily: 'Inter, Arial, sans-serif' }}>
<Container style={{ maxWidth: 600, margin: '0 auto', backgroundColor: '#fff', borderRadius: 12 }}>
{/* Header */}
<Section style={{ padding: '24px 32px 0' }}>
<Img src="https://example.com/logo.png" width={120} alt="Logo" />
</Section>
{/* Content */}
<Section style={{ padding: '24px 32px' }}>
<Heading style={{ fontSize: 24, color: '#111827', marginTop: 0 }}>
Order #{orderId} Confirmed ✓
</Heading>
<Text style={{ color: '#374151' }}>
Hi, {customerName}! Your order has been received and sent for processing.
</Text>
{/* Order Items */}
{items.map((item, i) => (
<Row key={i} style={{ borderBottom: '1px solid #e5e7eb', padding: '8px 0' }}>
<Column style={{ color: '#111827' }}>{item.name}</Column>
<Column style={{ textAlign: 'right', color: '#6b7280' }}>
{item.qty} × {item.price}
</Column>
</Row>
))}
<Row style={{ paddingTop: 12 }}>
<Column style={{ fontWeight: 700 }}>Total</Column>
<Column style={{ textAlign: 'right', fontWeight: 700 }}>{total}</Column>
</Row>
</Section>
{/* CTA */}
<Section style={{ padding: '0 32px 32px', textAlign: 'center' }}>
<Button
href={orderUrl}
style={{
backgroundColor: '#3b82f6',
color: '#fff',
padding: '12px 24px',
borderRadius: 8,
fontWeight: 600,
fontSize: 16,
}}
>
Track Order
</Button>
</Section>
{/* Footer */}
<Section style={{ padding: '16px 32px', textAlign: 'center' }}>
<Text style={{ fontSize: 13, color: '#9ca3af' }}>
© 2026 Example Inc. ·{' '}
<Link href="{{unsubscribeUrl}}" style={{ color: '#9ca3af' }}>
Unsubscribe
</Link>
</Text>
</Section>
</Container>
</Body>
</Html>
);
}
Rendering to HTML for Sending
import { render } from '@react-email/render';
import OrderConfirmation from './emails/OrderConfirmation';
const html = render(
<OrderConfirmation
orderId="12345"
customerName="John"
items={order.items}
total="$100.00"
orderUrl="https://example.com/orders/12345"
/>
);
Advantages over MJML
- Full TypeScript support — type-safe props for templates
- Component reuse — build a library of email components
- Easy testing — Jest, Vitest can test components
- No build step — unlike MJML, React Email uses standard tooling
Timeline
Creating a set of transactional templates with React Email — 4–6 days.