S

Email Templates

Responsive email templates for transactional and marketing communications.

Types

  • • Magic link authentication
  • • Welcome emails
  • • Subscription confirmations
  • • Payment receipts

Features

  • • Responsive design
  • • Dark mode support
  • • Cross-client compatibility
  • • Brand consistency

Base Template

src/lib/emailTemplates.ts
 1export function generateEmailTemplate({
 2  title,
 3  preheader,
 4  children,
 5  actionUrl,
 6  actionText,
 7}) {
 8  return `
 9    <!DOCTYPE html>
10    <html>
11    <head>
12      <meta charset="UTF-8">
13      <meta name="viewport" content="width=device-width">
14      <title>${title}</title>
15    </head>
16    <body style="margin: 0; padding: 0; background: #f5f5f5; font-family: system-ui;">
17      ${preheader ? `<div style="display: none;">${preheader}</div>` : ''}
18      
19      <table width="100%" style="background: #f5f5f5; padding: 40px 20px;">
20        <tr>
21          <td align="center">
22            <table width="600" style="background: #fff; border-radius: 8px;">
23              <tr>
24                <td style="padding: 40px; text-align: center;">
25                  <h1>${title}</h1>
26                  ${children}
27                  ${actionUrl ? `
28                    <a href="${actionUrl}" style="display: inline-block; padding: 12px 24px; 
29                       background: #007bff; color: #fff; text-decoration: none; border-radius: 6px;">
30                      ${actionText}
31                    </a>
32                  ` : ''}
33                </td>
34              </tr>
35            </table>
36          </td>
37        </tr>
38      </table>
39    </body>
40    </html>
41  `;
42}

Magic Link

 1export function generateMagicLinkEmail(url: string) {
 2  return generateEmailTemplate({
 3    title: "Sign in to your account",
 4    preheader: "Click to securely access your account",
 5    children: `
 6      <p>Click below to sign in. Link expires in 24 hours.</p>
 7      <p style="font-size: 12px; color: #666;">
 8        Or copy: <code>${url}</code>
 9      </p>
10    `,
11    actionUrl: url,
12    actionText: "Sign In Securely",
13  });
14}

Payment Receipt

 1export function generatePaymentReceiptEmail({
 2  amount,
 3  planName,
 4  invoiceId,
 5  nextBillingDate,
 6}) {
 7  return generateEmailTemplate({
 8    title: "Payment Confirmation",
 9    preheader: `Payment of ${amount} received`,
10    children: `
11      <p>Thank you! Your payment has been processed.</p>
12      <table style="background: #f8f9fa; padding: 16px; border-radius: 6px;">
13        <tr><td>
14          <strong>Plan:</strong> ${planName}<br>
15          <strong>Amount:</strong> ${amount}<br>
16          <strong>Invoice:</strong> ${invoiceId}<br>
17          <strong>Next billing:</strong> ${nextBillingDate}
18        </td></tr>
19      </table>
20    `,
21    actionUrl: "/account",
22    actionText: "View Account",
23  });
24}

Testing

 1export async function sendTestEmail(templateName: string, email: string) {
 2  let html: string;
 3  
 4  switch (templateName) {
 5    case 'magic-link':
 6      html = generateMagicLinkEmail("https://example.com/test");
 7      break;
 8    case 'payment-receipt':
 9      html = generatePaymentReceiptEmail({
10        amount: "$29.00",
11        planName: "Pro",
12        invoiceId: "inv_123",
13        nextBillingDate: "April 15, 2024"
14      });
15      break;
16    default:
17      throw new Error("Unknown template");
18  }
19  
20  await resend.emails.send({
21    from: process.env.FROM_EMAIL,
22    to: [email],
23    subject: `[TEST] ${templateName}`,
24    html,
25  });
26}

Test in Gmail, Outlook, and Apple Mail for consistent rendering.

Best Practices

Design

  • • Use web-safe fonts
  • • Include alt text for images
  • • Ensure good contrast
  • • Test with images disabled

Deliverability

  • • Short subject lines
  • • Include preheader text
  • • Avoid spam triggers
  • • Add unsubscribe links

Next: Waitlist Signup

Conversion-optimized signup forms

Continue →