Last updated: 2026-03-25•6 min read

Using React Email with Truncus

Design beautiful email templates with React components. Send them via Truncus with EU data residency and deliverability monitoring.

React Email is the open-source standard for building email templates with React components instead of HTML tables. Truncus handles the delivery infrastructure — authentication, bounce suppression, tracking, and compliance. Together: design in React, send via Truncus.

Install React Email

npm install react-email @react-email/components

This gives you a set of email-safe React components (Html, Head, Body, Container, Section, Text, Button, Hr, Img, Preview, and more) that render to cross-client HTML.

Create a template

Create an emails/ directory in your project. Each file exports a React component that represents one email template.

// emails/welcome.tsx
import {
  Html, Head, Body, Container, Section,
  Text, Button, Hr, Img, Preview
} from '@react-email/components';

interface WelcomeEmailProps {
  name: string;
  loginUrl: string;
}

export default function WelcomeEmail({ name, loginUrl }: WelcomeEmailProps) {
  return (
    <Html>
      <Head />
      <Preview>Welcome to our platform, {name}!</Preview>
      <Body style={{ fontFamily: '-apple-system, sans-serif', background: '#f4f4f5', padding: '40px 0' }}>
        <Container style={{ background: '#ffffff', padding: '40px', borderRadius: '8px', maxWidth: '560px' }}>
          <Text style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '16px' }}>
            Welcome, {name}!
          </Text>
          <Text style={{ color: '#52525b', lineHeight: '1.6' }}>
            Thanks for signing up. Your account is ready.
          </Text>
          <Hr style={{ margin: '24px 0' }} />
          <Button
            href={loginUrl}
            style={{
              background: '#18181b',
              color: '#ffffff',
              padding: '12px 24px',
              borderRadius: '6px',
              fontWeight: '500',
              textDecoration: 'none',
            }}
          >
            Go to Dashboard
          </Button>
        </Container>
      </Body>
    </Html>
  );
}

The component is typed with WelcomeEmailProps. When you render it, you pass the props and get a complete HTML email.

Preview locally

npx react-email dev

This opens localhost:3000 with a live preview of all templates in your emails/ directory. You can switch between desktop and mobile views, toggle between HTML and plain text, and see changes instantly as you edit.

Render and send via Truncus

Once your template looks right, you need to render it to HTML and pass it to the Truncus API. There are three ways to do this.

Method A: Node.js with fetch

import { render } from '@react-email/render';
import WelcomeEmail from './emails/welcome';

// Render the React component to HTML
const html = await render(WelcomeEmail({
  name: 'Jasper',
  loginUrl: 'https://your-app.com/dashboard',
}));

// Send via Truncus
const response = await fetch('https://truncus.co/api/v1/emails/send', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${process.env.TRUNCUS_API_KEY}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    from: 'hello@yourdomain.com',
    to: 'user@example.com',
    subject: 'Welcome!',
    html: html,
  }),
});

const { messageId } = await response.json();
console.log('Sent:', messageId);

The render() function from @react-email/render converts your React component into a complete HTML string with inlined styles and email-safe markup.

Method B: Truncus CLI

# Export the template to an HTML file
npx react-email export emails/welcome.tsx --out ./out

# Send via the Truncus CLI
truncus send \
  --to user@example.com \
  --from hello@yourdomain.com \
  --subject "Welcome!" \
  --html-file ./out/welcome.html

This approach is useful for testing templates against real inboxes or scripting sends from CI pipelines.

Method C: Next.js API route

// app/api/send-welcome/route.ts
import { render } from '@react-email/render';
import WelcomeEmail from '@/emails/welcome';

export async function POST(request: Request) {
  const { name, email } = await request.json();

  const html = await render(WelcomeEmail({
    name,
    loginUrl: 'https://your-app.com/dashboard',
  }));

  const response = await fetch('https://truncus.co/api/v1/emails/send', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.TRUNCUS_API_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      from: 'hello@yourdomain.com',
      to: email,
      subject: 'Welcome!',
      html,
    }),
  });

  return Response.json(await response.json());
}

This pattern works well for event-driven sends — a user signs up, your API route renders the template with their data and sends it through Truncus.

Common templates

Most applications need the same core set of transactional emails. React Email provides a template gallery with production-ready starting points for:

  • Welcome / onboarding — first impression after signup
  • Password reset — secure, single-use link with expiry notice
  • Invoice / receipt — line items, totals, payment confirmation
  • Notification / alert — status changes, threshold warnings
  • Weekly digest — usage summary, activity recap

Each template is a React component. Copy it into your emails/ directory, adjust the props, and send via Truncus.

Why Truncus + React Email

  • Design in React, not HTML tables. React Email components handle cross-client rendering. You write JSX.
  • Preview and iterate locally. npx react-email dev gives you hot-reloading previews before anything touches a real inbox.
  • Truncus handles the hard parts. Deliverability monitoring, bounce suppression, webhook events, and automatic retry — all on the infrastructure side.
  • EU data residency by default. All email data processed and stored in eu-west-1. No data transfers outside the EU.
  • Works with every integration. Send from the Node.js SDK, fetch API, CLI, Python SDK, or MCP server.

Next steps

Using React Email with Truncus — Email Template Guide | Truncus Manual