[ [0x40] Tutorials ] Email Templates

Email Templates

> Create and send beautiful transactional emails with Resend and lightweight HTML templates.

Overview

[ [0x40] STATUS ]

Resend API integration for reliable email delivery, lightweight HTML templates for maximum performance, direct sending for immediate emails (auth), queue system for background sending (notifications), and pre-built templates (welcome, verification, reset).

Features

[ [0x01] RESEND_API ]

STATUS: READY

DESC: Reliable email delivery with tracking.

[ [0x02] DIRECT_SEND ]

STATUS: READY

DESC: Immediate sending for auth emails.

[ [0x03] QUEUE_SYSTEM ]

STATUS: READY

DESC: Background sending with retries.

[ [0x04] ORG_INVITES ]

STATUS: READY

DESC: Beautiful organization invitations.

Setup

[ [0x01] CONFIGURE RESEND ]

DESC: Sign up at resend.com and obtain your API credentials

1$# .env.local
2
3$RESEND_API_KEY="re_xxxxxxxxxxxx"
4$EMAIL_FROM="noreply@yourdomain.com"

Usage

[ [0xFD] SENDING EMAILS ]

Use the email service functions from src/lib/email.ts

1import {
2  sendEmail,
3  sendWelcomeEmail,
4  sendVerificationEmail,
5  sendResetEmail
6} from "@/lib/email";
7
8// Generic email
9await sendEmail(
10  "user@example.com",
11  "Your Subject",
12  "<h1>HTML Content</h1>"
13);
14
15// Welcome email (after purchase)
16await sendWelcomeEmail(
17  "user@example.com",
18  "John Doe",
19  "LICENSE-KEY-123"  // optional
20);
21
22// Email verification
23await sendVerificationEmail(
24  "user@example.com",
25  "verification-token-abc"
26);
27
28// Password reset
29await sendResetEmail(
30  "user@example.com",
31  "reset-token-xyz"
32);

[ [0x62] EMAIL QUEUE SYSTEM ]

Queue emails for background sending with automatic retries

1import {
2  queueEmail,
3  queueWelcomeEmail,
4  queueVerificationEmail
5} from "@/lib/email";
6
7// Queue a custom email
8await queueEmail({
9  type: "NOTIFICATION",
10  to: "user@example.com",
11  subject: "New Feature Available",
12  html: "<p>Check out our new feature!</p>",
13  userId: "user_123",  // optional tracking
14  maxAttempts: 3       // retry count
15});
16
17// Queue welcome email with GitHub access
18await queueWelcomeEmail({
19  to: "user@example.com",
20  name: "John Doe",
21  licenseKey: "LICENSE-123-ABC",
22  githubRepoUrl: "https://github.com/org/repo",
23  githubUsername: "johndoe",
24  purchaseId: "purchase_456"
25});

[ [0xB1] CREATING CUSTOM TEMPLATES ]

Create HTML template functions in src/emails/

1// src/emails/invoice-html.ts
2
3interface InvoiceEmailProps {
4  customerName: string;
5  amount: number;
6  invoiceUrl: string;
7}
8
9export function generateInvoiceEmailHTML({
10  customerName,
11  amount,
12  invoiceUrl,
13}: InvoiceEmailProps): string {
14  return `
15<!DOCTYPE html>
16<html>
17<head>
18  <style>
19    body { font-family: system-ui, sans-serif; line-height: 1.5; }
20    .container { max-width: 600px; margin: 0 auto; padding: 20px; }
21    .button {
22      display: inline-block;
23      padding: 12px 24px;
24      background-color: #6366f1;
25      color: white;
26      text-decoration: none;
27      border-radius: 6px;
28    }
29  </style>
30</head>
31<body>
32  <div class="container">
33    <h1>Invoice Paid</h1>
34    <p>Hi ${customerName},</p>
35    <p>Your payment of $${amount.toFixed(2)} was successful.</p>
36
37    <div style="margin: 24px 0;">
38      <a href="${invoiceUrl}" class="button">View Invoice</a>
39    </div>
40
41    <hr style="border: none; border-top: 1px solid #e5e7eb; margin: 24px 0;" />
42
43    <p style="color: #6b7280; font-size: 14px;">
44      Thanks for your business!
45    </p>
46  </div>
47</body>
48</html>
49  `.trim();
50}

[ [0x83] ORGANIZATION INVITES ]

Send beautiful organization invitation emails

1import { sendOrganizationInvite } from "@/lib/email";
2
3await sendOrganizationInvite("newmember@example.com", {
4  organizationName: "Acme Corp",
5  inviterName: "John Doe",
6  role: "MEMBER",  // OWNER, ADMIN, MEMBER, GUEST
7  token: "invite-token-abc",
8  expiresAt: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
9});

Email Types

[ [0x4B] EMAIL TYPES ]

The queue system supports these email types for categorization:

├─ WELCOME - Post-purchase welcome emails

├─ VERIFICATION - Email verification

├─ RESET - Password reset

├─ INVOICE - Payment receipts

└─ NOTIFICATION - General notifications

Best Practices

[ [0xC4] BEST PRACTICES ]

├─ Use direct sending for time-sensitive emails (auth, password reset)

├─ Use queuing for bulk emails, notifications, and post-purchase emails

├─ Track user/purchase IDs for email analytics and debugging

├─ Set appropriate maxAttempts - 3 for important emails, 1 for notifications

├─ Test templates locally - without RESEND_API_KEY, emails log to console

└─ Verify domain in Resend dashboard for better deliverability

Troubleshooting

[ [0xC0] COMMON ERRORS ]

[ERROR]: RESEND_API_KEY invalid

Solution: Verify API key from Resend dashboard

# Get new API key from: https://resend.com/api-keys
# Add to .env.local
RESEND_API_KEY="re_xxxxxxxxxxxx"

# Make sure it starts with "re_"

[ERROR]: Email not sending (403 Forbidden)

Solution: Verify your domain in Resend dashboard

# Steps:
1. Go to https://resend.com/domains
2. Click "Add Domain"
3. Add your domain (e.g., yourdomain.com)
4. Add the DNS records shown
5. Wait for verification (usually < 5 minutes)

# Development: Use onboarding@resend.dev (no verification needed)

[ERROR]: Template not rendering (blank email)

Solution: Check React Email component syntax

// Ensure function returns string
export function generateEmailHTML(): string {
  return `<!DOCTYPE html>...`;
}

// Not a React component - plain HTML template function

[ERROR]: Emails queued but not sending

Solution: Check email queue table and processing

# View queued emails
npm run db:studio
# Check EmailQueue table

# Manually process queue (if cron not set up)
# Create /api/process-email-queue endpoint and call it

Next Steps

[ [0x00] AUTHENTICATION ]

DESC: Set up email verification and password reset

[ [0x00] STRIPE PAYMENTS ]

DESC: Send purchase confirmation emails

Features

[ [0x01] RESEND_API ]

STATUS: READY

DESC: Reliable email delivery with tracking.

[ [0x02] DIRECT_SEND ]

STATUS: READY

DESC: Immediate sending for auth emails.

[ [0x03] QUEUE_SYSTEM ]

STATUS: READY

DESC: Background sending with retries.

[ [0x04] ORG_INVITES ]

STATUS: READY

DESC: Beautiful organization invitations.

Usage

[ [0xFD] SENDING EMAILS ]

Use the email service functions from src/lib/email.ts

1import {
2  sendEmail,
3  sendWelcomeEmail,
4  sendVerificationEmail,
5  sendResetEmail
6} from "@/lib/email";
7
8// Generic email
9await sendEmail(
10  "user@example.com",
11  "Your Subject",
12  "<h1>HTML Content</h1>"
13);
14
15// Welcome email (after purchase)
16await sendWelcomeEmail(
17  "user@example.com",
18  "John Doe",
19  "LICENSE-KEY-123"  // optional
20);
21
22// Email verification
23await sendVerificationEmail(
24  "user@example.com",
25  "verification-token-abc"
26);
27
28// Password reset
29await sendResetEmail(
30  "user@example.com",
31  "reset-token-xyz"
32);

[ [0x62] EMAIL QUEUE SYSTEM ]

Queue emails for background sending with automatic retries

1import {
2  queueEmail,
3  queueWelcomeEmail,
4  queueVerificationEmail
5} from "@/lib/email";
6
7// Queue a custom email
8await queueEmail({
9  type: "NOTIFICATION",
10  to: "user@example.com",
11  subject: "New Feature Available",
12  html: "<p>Check out our new feature!</p>",
13  userId: "user_123",  // optional tracking
14  maxAttempts: 3       // retry count
15});
16
17// Queue welcome email with GitHub access
18await queueWelcomeEmail({
19  to: "user@example.com",
20  name: "John Doe",
21  licenseKey: "LICENSE-123-ABC",
22  githubRepoUrl: "https://github.com/org/repo",
23  githubUsername: "johndoe",
24  purchaseId: "purchase_456"
25});

[ [0xB1] CREATING CUSTOM TEMPLATES ]

Create HTML template functions in src/emails/

1// src/emails/invoice-html.ts
2
3interface InvoiceEmailProps {
4  customerName: string;
5  amount: number;
6  invoiceUrl: string;
7}
8
9export function generateInvoiceEmailHTML({
10  customerName,
11  amount,
12  invoiceUrl,
13}: InvoiceEmailProps): string {
14  return `
15<!DOCTYPE html>
16<html>
17<head>
18  <style>
19    body { font-family: system-ui, sans-serif; line-height: 1.5; }
20    .container { max-width: 600px; margin: 0 auto; padding: 20px; }
21    .button {
22      display: inline-block;
23      padding: 12px 24px;
24      background-color: #6366f1;
25      color: white;
26      text-decoration: none;
27      border-radius: 6px;
28    }
29  </style>
30</head>
31<body>
32  <div class="container">
33    <h1>Invoice Paid</h1>
34    <p>Hi ${customerName},</p>
35    <p>Your payment of $${amount.toFixed(2)} was successful.</p>
36
37    <div style="margin: 24px 0;">
38      <a href="${invoiceUrl}" class="button">View Invoice</a>
39    </div>
40
41    <hr style="border: none; border-top: 1px solid #e5e7eb; margin: 24px 0;" />
42
43    <p style="color: #6b7280; font-size: 14px;">
44      Thanks for your business!
45    </p>
46  </div>
47</body>
48</html>
49  `.trim();
50}

[ [0x83] ORGANIZATION INVITES ]

Send beautiful organization invitation emails

1import { sendOrganizationInvite } from "@/lib/email";
2
3await sendOrganizationInvite("newmember@example.com", {
4  organizationName: "Acme Corp",
5  inviterName: "John Doe",
6  role: "MEMBER",  // OWNER, ADMIN, MEMBER, GUEST
7  token: "invite-token-abc",
8  expiresAt: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
9});

Best Practices

[ [0xC4] BEST PRACTICES ]

├─ Use direct sending for time-sensitive emails (auth, password reset)

├─ Use queuing for bulk emails, notifications, and post-purchase emails

├─ Track user/purchase IDs for email analytics and debugging

├─ Set appropriate maxAttempts - 3 for important emails, 1 for notifications

├─ Test templates locally - without RESEND_API_KEY, emails log to console

└─ Verify domain in Resend dashboard for better deliverability

Troubleshooting

[ [0xC0] COMMON ERRORS ]

[ERROR]: RESEND_API_KEY invalid

Solution: Verify API key from Resend dashboard

# Get new API key from: https://resend.com/api-keys
# Add to .env.local
RESEND_API_KEY="re_xxxxxxxxxxxx"

# Make sure it starts with "re_"

[ERROR]: Email not sending (403 Forbidden)

Solution: Verify your domain in Resend dashboard

# Steps:
1. Go to https://resend.com/domains
2. Click "Add Domain"
3. Add your domain (e.g., yourdomain.com)
4. Add the DNS records shown
5. Wait for verification (usually < 5 minutes)

# Development: Use onboarding@resend.dev (no verification needed)

[ERROR]: Template not rendering (blank email)

Solution: Check React Email component syntax

// Ensure function returns string
export function generateEmailHTML(): string {
  return `<!DOCTYPE html>...`;
}

// Not a React component - plain HTML template function

[ERROR]: Emails queued but not sending

Solution: Check email queue table and processing

# View queued emails
npm run db:studio
# Check EmailQueue table

# Manually process queue (if cron not set up)
# Create /api/process-email-queue endpoint and call it