Building Transactional Emails with React Email
A practical guide to building production transactional email templates with React Email — component structure, dynamic data, multipart rendering, and integration with Sendbound's API.
Transactional email templates have historically been written in raw HTML — tables inside tables, inline styles everywhere, Gmail quirks papered over with hacks. React Email changed this. It lets you write email templates using React components with a CSS-in-JS system that automatically generates email-safe inline styles. The output is the same ugly HTML the email clients expect, but you don't have to write or maintain it.
This guide walks through building a production-grade transactional email system: component architecture, dynamic data with TypeScript, multipart text generation, and sending via the Sendbound API.
Project setup
Install react-email and the component library: npm install @react-email/components react-email. Then install the Sendbound SDK: npm install @sendbound/sdk. Create an emails/ directory at the root of your project — that's where your template components will live.
Your first template
A React Email template is a standard React component that exports a default function. The root element should be the Email component, with Html, Head, Body, and Container components inside. Use the Text, Button, Img, and Link components from @react-email/components rather than raw HTML elements — they handle cross-client compatibility for you.
The most important pattern to get right: all props that drive dynamic content should be typed with TypeScript interfaces. This gives you type safety when you call the template from your API routes and lets your editor catch errors before they reach production.
Multipart email (HTML + plain text)
Every transactional email should include both an HTML part and a plain-text part. The plain-text version is displayed by email clients that don't render HTML (some corporate clients, accessibility tools, and email security gateways). More importantly, emails without a plain-text part are treated as more suspicious by spam filters.
React Email's render() function accepts a React element and returns the HTML string. For the plain text, you can write a separate function that extracts the text content from your template props, or use react-email's experimental text renderer.
"We reduced our support tickets about "broken email display" to zero by switching to React Email. The cross-client preview tool alone saved us hours every sprint."
Sending via Sendbound
Sendbound accepts both pre-rendered HTML and React components directly. If you pass a React element to the html field of the Sendbound client, it renders it server-side before sending. This means you can skip the manual render() call and pass your component tree directly: await sendbound.emails.send({ to, from, subject, html: <WelcomeEmail name={user.name} />, text: plainText }).
Testing your templates
React Email ships with a local preview server that hot-reloads as you edit. Run npx react-email dev and visit localhost:3000 — you'll see all your templates rendered in a browser preview with a sidebar for switching between them. Use Sendbound's test mode to send real emails to your own address without affecting your sender reputation or using production email quota.