Email Overview

Leave Localhost includes a complete transactional email system built on Resend and React Email. Templates live in one place in the backend; the preview workspace renders those same templates in the browser.

Leave Localhost includes a complete transactional email system built on Resend and React Email. There is a single source for templates — the backend — and a preview workspace that renders those same templates in the browser so you can design them with live reload.

Architecture

┌─────────────────────────────────────────────────┐
│  packages/backend/convex/email/   ← SINGLE SOURCE│
│  ├── index.ts          # sendEmail() facade     │
│  └── templates/        # React Email templates  │
│      ├── emailVerificationEmail.tsx              │
│      ├── magicLinkEmail.tsx                      │
│      ├── organizationInvitationEmail.tsx          │
│      ├── passwordResetEmail.tsx                  │
│      ├── sensitiveActionVerificationEmail.tsx     │
│      └── subscriptionEmail.tsx                   │
└───────┬─────────────────────────────┬───────────┘
        │ @convex-dev/resend          │ imported by
        ▼                             ▼
┌──────────────────┐   ┌──────────────────────────────┐
│  Resend API      │   │  packages/email/ (preview)   │
│  (production)    │   │  emails/*.tsx render the     │
└──────────────────┘   │  backend templates at :3003  │
                       └──────────────────────────────┘

One Source, Two Uses

Backend Templates (`packages/backend/convex/email/templates/`)

These are the email templates — the only copy. Each file is a presentational JSX component plus render* helpers that produce HTML and plain text. They are rendered server-side in Convex functions using @react-email/render and sent via the Resend component.

Preview Workspace (`packages/email/`)

A design-time harness, not a second set of templates. Each file under packages/email/emails/ is a thin wrapper that imports the real backend component and supplies sample props, so react-email's dev server can render it in the browser. Edit the template in the backend; edit only the sample data in the wrapper. Nothing here ships to production.

Included Emails

Template	Trigger	Location
Email verification	Password signup or unverified sign-in	`emailVerificationEmail.tsx`
Magic link sign-in	User signs in with magic link	`magicLinkEmail.tsx`
Organization invitation	Admin invites a member	`organizationInvitationEmail.tsx`
Password reset	User requests a password reset	`passwordResetEmail.tsx`
Sensitive action verification	Step-up verification code	`sensitiveActionVerificationEmail.tsx`
Subscription success	Payment succeeds	`subscriptionEmail.tsx`
Subscription error	Payment fails	`subscriptionEmail.tsx`

Environment Variables

Variable	Required	Description
`RESEND_API_KEY`	Yes	Resend API key for auth and transactional email
`RESEND_FROM_EMAIL`	No	Default sender address
`RESEND_AUTH_FROM_EMAIL`	Yes	Sender for auth emails (verification, password reset, magic link, invitation)
`RESEND_WEBHOOK_SECRET`	No	Resend delivery tracking webhook secret

Next Reads

Resend — Resend integration details.
React Email — the preview workspace.
Magic Link Emails — magic link template.
Invitation Emails — invitation template.
Notification Emails — subscription and verification emails.
Customizing Email Templates — how to modify templates.