Why this matters
ReachOut templates are React Email source. Engineers and designers who already use React Email — the standard for code-first email development — drop their TSX files in and ship. Components diff cleanly in pull requests, render in CI snapshots, and produce identical output across the Studio preview, transactional API, and broadcast campaigns.
What you get
- Native React Email support — no proprietary template language.
- Preview parity: what the Studio preview shows is what the inbox renders.
- CI-friendly: render snapshots in your test suite to catch breakages.
- Liquid + React tokens: data-driven personalization without templating-language switching.
- Reuse the same components across transactional and broadcast.
Setup in 4 steps
- Author your template in TSX. Use any React Email components (`@react-email/components`). Token usage is identical to standard React Email — `{{ firstName }}` style tokens are evaluated at send time.
- Push to ReachOut. Studio → Templates → New → Paste TSX, or POST to /api/templates with the source. The Studio preview renders immediately.
- Bind to a campaign. Studio → Campaigns → New. Pick the template, choose the segment, set the trigger or schedule.
- Or send transactionally. POST /api/transactional with { template: "welcome", to: "...", data: { ... } }. Same template, different invocation.
Example
import { Html, Head, Body, Container, Heading, Text, Button } from '@react-email/components';
export default function Welcome({ firstName, plan }: { firstName: string; plan: string }) {
return (
<Html>
<Head />
<Body style={{ fontFamily: 'system-ui' }}>
<Container>
<Heading>Welcome, {firstName}.</Heading>
<Text>You're on the {plan} plan. Here's what to do next.</Text>
<Button href="https://usereachout.com/studio">Open Studio</Button>
</Container>
</Body>
</Html>
);
}