React Email

The packages/email workspace provides a React Email preview environment for the backend's email templates. It does not hold its own copy of the templates — each file under emails/ imports the real backend component and supplies sample props.

Running the Preview Server

bun --cwd packages/email dev

This starts the React Email preview server at http://localhost:3003. You can view and interact with every email in the browser, with live reload as you edit the backend templates.

Directory Structure

packages/email/
├── emails/                       # One preview wrapper per backend template
│   ├── magic-link.tsx            # imports backend MagicLinkEmail + sample props
│   ├── email-verification.tsx
│   ├── password-reset.tsx
│   ├── organization-invitation.tsx
│   ├── sensitive-action-verification.tsx
│   ├── subscription-success.tsx
│   └── subscription-error.tsx
├── package.json
└── tsconfig.json

Single Source of Templates

There is one copy of each template, in the backend. The preview wrappers import those components, so what you see at :3003 is exactly what ships. To change an email's markup, edit the backend template; to change the preview's sample data, edit the wrapper.

Dependencies

The preview workspace uses:

• @react-email/components — email-safe HTML components (Button, Container, Text, etc.)
• @react-email/tailwind — Tailwind CSS support within emails
• react-email — the dev server and CLI

Available Components

React Email provides email-safe versions of common elements:

Building

bun --cwd packages/email build

Builds the email templates for production. This is mainly useful for CI validation.

Next Reads

• Customizing Email Templates — how to create and modify templates.
• Resend — the email delivery service.