React Email vs Resend vs Loops for SaaS Email 2026

SaaS Email Is Two Different Problems

SaaS email splits into two categories with different requirements:

Transactional email — triggered by user actions: welcome emails, password resets, receipts, notifications. These must be reliable, fast, and correctly delivered.
Marketing email — sequences, drip campaigns, newsletters: onboarding flows, feature announcements, re-engagement. These need segmentation, scheduling, and analytics.

Most SaaS boilerplates handle transactional email. Marketing sequences are usually added later.

TL;DR

React Email: The template layer. Write email templates with React and TypeScript. Works with any sending provider.
Resend: The sending provider for transactional email. Best DX, developer-focused, generous free tier. Works with React Email.
Loops: Marketing email automation for SaaS. Replaces Mailchimp for developer-built product sequences.

These are not competitors — they work together: React Email templates + Resend for transactional, Loops for marketing.

Key Takeaways

React Email has 18K+ GitHub stars — the standard for email templates in Next.js apps
Resend free tier: 3,000 emails/month, 100/day — sufficient for early-stage SaaS
Loops targets SaaS products specifically — onboarding sequences tied to user events
Most boilerplates use Resend as the default sending provider (ShipFast, OpenSaaS, Makerkit)
Nodemailer (SMTP) is still viable for self-hosted setups but Resend is better DX
SendGrid and Postmark are established alternatives with more deliverability controls

React Email: Beautiful Templates with React

React Email provides React components for building HTML email templates:

npm install react-email @react-email/components

Creating Email Templates

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

interface WelcomeEmailProps {
  userName: string;
  dashboardUrl: string;
}

export function WelcomeEmail({ userName, dashboardUrl }: WelcomeEmailProps) {
  return (
    <Html>
      <Head />
      <Preview>Welcome to MySaaS, {userName}!</Preview>
      <Body style={{ backgroundColor: '#f6f9fc', fontFamily: 'Arial, sans-serif' }}>
        <Container style={{ maxWidth: '600px', margin: '0 auto', padding: '40px 20px' }}>
          <Heading style={{ color: '#1a1a1a', fontSize: '28px' }}>
            Welcome to MySaaS!
          </Heading>
          <Text style={{ color: '#444', fontSize: '16px', lineHeight: '24px' }}>
            Hi {userName},
          </Text>
          <Text style={{ color: '#444', fontSize: '16px', lineHeight: '24px' }}>
            Your account is ready. Start building with MySaaS today.
          </Text>
          <Button
            href={dashboardUrl}
            style={{
              backgroundColor: '#3b82f6',
              color: '#fff',
              padding: '12px 24px',
              borderRadius: '6px',
              textDecoration: 'none',
              display: 'inline-block',
            }}
          >
            Go to Dashboard
          </Button>
          <Hr style={{ borderColor: '#e1e1e1', margin: '32px 0' }} />
          <Text style={{ color: '#888', fontSize: '14px' }}>
            You received this email because you signed up for MySaaS.
          </Text>
        </Container>
      </Body>
    </Html>
  );
}

# Preview emails in browser during development:
npx react-email dev
# Opens localhost:3000 showing all emails in /emails folder

Resend: Transactional Email API

Resend is the sending provider built for developers, built by the React Email team:

npm install resend

// lib/email.ts
import { Resend } from 'resend';
import { render } from '@react-email/render';

const resend = new Resend(process.env.RESEND_API_KEY!);

export async function sendWelcomeEmail(to: string, userName: string) {
  const html = await render(
    <WelcomeEmail
      userName={userName}
      dashboardUrl={`${process.env.NEXT_PUBLIC_URL}/dashboard`}
    />
  );

  await resend.emails.send({
    from: 'MySaaS <noreply@mysaas.com>',  // Requires domain verification
    to,
    subject: `Welcome to MySaaS, ${userName}!`,
    html,
  });
}

export async function sendPasswordReset(to: string, resetUrl: string) {
  const html = await render(
    <PasswordResetEmail userName={to} resetUrl={resetUrl} />
  );

  await resend.emails.send({
    from: 'MySaaS <noreply@mysaas.com>',
    to,
    subject: 'Reset your password',
    html,
  });
}

// Batch sending (for notifications):
export async function sendBulkNotifications(
  recipients: Array<{ email: string; data: object }>
) {
  await resend.batch.send(
    recipients.map(({ email, data }) => ({
      from: 'MySaaS <noreply@mysaas.com>',
      to: email,
      subject: 'New activity',
      html: render(<NotificationEmail {...data} />),
    }))
  );
}

Domain Setup (Required for Production)

# In Resend dashboard: Add your domain
# Add DNS records:
# SPF:    v=spf1 include:amazonses.com ~all
# DKIM:   (provided by Resend)
# DMARC:  v=DMARC1; p=none; rua=mailto:dmarc@yourdomain.com

Resend pricing: free up to 3,000 emails/month (100/day); $20/mo for 50,000/month.

Loops: Marketing Email for SaaS

Loops is purpose-built for SaaS onboarding sequences and triggered marketing emails:

npm install loops

// lib/loops.ts
import LoopsClient from 'loops';

const loops = new LoopsClient(process.env.LOOPS_API_KEY!);

// Create a contact when user signs up:
export async function createLoopsContact(user: {
  id: string;
  email: string;
  name: string;
  plan: string;
}) {
  await loops.createContact(user.email, {
    userId: user.id,
    firstName: user.name.split(' ')[0],
    plan: user.plan,
    createdAt: new Date().toISOString(),
  });
}

// Trigger an event (starts automations):
export async function trackLoopsEvent(
  email: string,
  eventName: string,
  properties?: Record<string, string>
) {
  await loops.sendEvent(email, eventName, undefined, properties);
}

// In auth callback, after user signs up:
await createLoopsContact({ id, email, name, plan: 'free' });
await trackLoopsEvent(email, 'signup');
// This triggers your "Onboarding Day 1" automation in Loops

// When user upgrades:
await loops.updateContact(email, { plan: 'pro' });
await trackLoopsEvent(email, 'upgraded', { plan: 'pro' });
// Triggers "Upgrade Success" sequence

Loops Sequences

In the Loops dashboard, you create visual sequences:

Day 0: Welcome email (immediate)
Day 1: "Getting started" tips
Day 3: Feature spotlight
Day 7: Case study / social proof
Day 14: Check-in (if they haven't activated)
Day 30: Review request (if they are active)

Loops pricing: free up to 2,500 contacts; $49/mo for 10,000.

Full Email Stack for SaaS

// The recommended full stack:
// 1. Transactional: React Email + Resend
// 2. Marketing: Loops

// lib/email/index.ts
export {
  sendWelcomeEmail,
  sendPasswordReset,
  sendInvoiceEmail,
  sendNotification,
} from './transactional';  // Uses Resend

export {
  trackSignup,
  trackUpgrade,
  trackFeatureUsed,
  updateContact,
} from './marketing';  // Uses Loops

// After user signs up (in auth callback):
await sendWelcomeEmail(user.email, user.name);      // Resend: immediate welcome
await trackSignup(user.email, { plan: user.plan });  // Loops: start sequence

Alternative Sending Providers

Provider	Free Tier	Best For
Resend	3K/mo	Developer-focused, React Email native
Postmark	100/mo	Deliverability-critical transactional
SendGrid	100/day	Volume, legacy apps
Mailgun	5K/mo (trial)	High volume, EU region
AWS SES	62K/mo (from EC2)	Maximum scale, AWS apps
Nodemailer	N/A	Self-hosted SMTP relay

Which Boilerplates Use What?

Boilerplate	Email Provider
ShipFast	Resend or Mailgun
OpenSaaS	Resend
Makerkit	Resend
SaaSBold	Resend or Nodemailer
T3 Stack	None (add manually)

React Email templates are used across most modern boilerplates.

Methodology

Based on publicly available documentation from React Email, Resend, and Loops, pricing pages, and boilerplate analysis as of March 2026.

Production Considerations for SaaS Email

Transactional email in production has failure modes that don't appear in development. Understanding them before your first production deployment prevents lost emails and angry users.

The most critical production issue: email delivery failures are invisible unless you configure webhooks. Resend, Postmark, and SendGrid all support webhooks that fire when an email bounces, is marked as spam, or fails to deliver. Without these webhooks, you have no visibility into whether critical emails (password resets, billing alerts) actually reached users. Configure email event webhooks from day one and log failures to your monitoring system.

Domain authentication is required for inbox placement and can take 24-48 hours to propagate. SPF, DKIM, and DMARC records need to be correct before you send a single email from your domain. Most email providers give you specific DNS records to add — do this before you deploy, not after you notice emails going to spam. A common mistake: testing with the email provider's shared domain during development and then discovering your own domain has poor sender reputation when you switch to production.

Bounce handling protects your sender reputation. When an email bounces (invalid address, full mailbox), continuing to send to that address damages your domain's reputation with ISPs. Implement bounce webhook handling that marks email addresses as invalid in your database and stops future sends. Resend's webhook payload includes the bounce type and email address; hook this into a simple flag on your user record.

Unsubscribe compliance is legally required in most jurisdictions. CAN-SPAM (US) and GDPR (EU) both require one-click unsubscribe for marketing emails. Transactional emails (password resets, billing) are exempt, but any email that could be construed as marketing — product updates, feature announcements, digest emails — needs an unsubscribe mechanism. The simplest implementation: a database field marketingEmailsEnabled and a signed unsubscribe URL that sets it to false.

Choosing the Right Provider as You Scale

The email provider that's right at launch may not be right at 50,000 monthly active users. The scaling considerations for each provider are different.

Resend's free tier at 3,000 emails per month sounds generous but fills quickly once you have onboarding sequences, weekly digests, and transactional emails running. At 1,000 monthly active users with five emails per user per month, you're at 5,000 emails — past the free tier. The paid tier at $20/month for 50,000 emails is excellent value. Resend's analytics are basic (open rates require tracking pixels, which many email clients block), so if advanced deliverability analytics matter, consider Postmark or SendGrid at scale.

Postmark's higher price is justified specifically for password reset and billing emails where delivery is non-negotiable. Postmark's dedicated IP reputation and bounce handling are genuinely superior. For B2B SaaS where a failed password reset email loses a deal, Postmark's deliverability track record justifies the premium.

Loops deserves serious consideration beyond its transactional role. As your SaaS grows, the onboarding sequence — the emails that guide new users from signup to activation — becomes a critical growth lever. Loops's event-triggered sequence model, where you fire events from your app and Loops handles the sequence logic, is more maintainable than building email logic into your application code. The separation means marketers can update the onboarding sequence without engineer involvement.

Building a Complete Email System Architecture

Most SaaS products have email needs that grow organically and end up with an inconsistent architecture — some emails use React Email templates, some use plain HTML strings, some are triggered from API routes, some from background jobs. Building a deliberate email system architecture from the start avoids this fragmentation.

The recommended architecture has three components. The template layer (React Email) contains all email visual templates as typed React components in an emails/ directory. The sending layer (Resend or Postmark) is abstracted behind a single emailService.send() function that accepts a template component and recipient. The trigger layer connects application events (user signed up, payment failed, trial expiring) to email sends — either via direct calls in Server Actions and API routes, or via Loops for lifecycle sequences.

The critical architectural principle: email sends should be fire-and-forget operations that never block the critical path. A user signing up should not experience a slow response because the welcome email server is having issues. Wrap every email send in a try-catch that logs the failure and continues — email delivery failures should be observable (via webhooks and monitoring) but should never break the user-facing flow.

For teams that eventually need a multi-tenant email setup (each organization sends emails from their own domain), the architecture needs an early foundation: a senderDomain field on the organization record and dynamic From header construction. Resend supports custom domains per-organization; Postmark requires separate server configurations per domain. If multi-tenant email is on your product roadmap, factor this into your provider choice and data model design before you have fifty organizations using your system.

Key Takeaways

React Email is a templating layer, not an email sending service — it pairs with Resend, Postmark, or any SMTP provider; the two are complementary, not competing
Resend is the default choice for 2026 SaaS boilerplates: React Email integration, excellent developer experience, generous free tier (3,000 emails/month), and $20/month for 50k
Loops solves a different problem than Resend — it's designed for product onboarding sequences and lifecycle marketing, not one-off transactional emails; the two can coexist in the same codebase
Configure email delivery webhooks from day one: bounces and spam reports need to flow back to your database to protect sender reputation
Domain authentication (SPF, DKIM, DMARC) takes 24-48 hours to propagate — set it up before your first production deploy, not after
Postmark's deliverability edge matters most for password reset and billing emails in B2B contexts where a missed email costs a customer

Evaluating a Boilerplate's Email Integration

Most boilerplates claim email support, but the quality of implementation varies. Before buying or forking a boilerplate based on its email feature list, check for these specifics.

React Email template coverage. A good boilerplate has React Email templates for every email the application sends: welcome email, password reset, email verification, subscription confirmation, payment failure notification, and trial expiry warning. Starters that template only the welcome email leave you writing the others from scratch. Check the emails/ directory in the repository — the number of .tsx template files there is a reliable proxy for how complete the email implementation is.

Environment variable setup. A properly configured Resend integration requires at minimum RESEND_API_KEY and a sender domain in the code. Look at the boilerplate's .env.example file and count the email-related variables. If you only see RESEND_API_KEY and no mention of FROM_EMAIL or domain configuration, the boilerplate may be sending from Resend's shared test domain — which works in development but fails in production without additional setup.

Error handling around sends. In production-grade boilerplates, every resend.emails.send() call should be wrapped in a try-catch that logs the failure but does not throw — email delivery failure should never break the user-facing action that triggered it. Boilerplates that let email failures propagate to the user (showing a 500 error because the welcome email failed) are using email incorrectly. Look for either try-catch wrapping or a fire-and-forget queue pattern.

Loops or marketing email hooks. Very few boilerplates include Loops integration out of the box — OpenSaaS is an exception. If the boilerplate you're evaluating doesn't include marketing email hooks, plan to add them yourself at the auth callback points (signup, upgrade, trial start). The integration is 10-15 lines of code, but placing those hooks correctly in the auth flow is easier to do before you have users than after.

Self-Hosting Email with Resend Alternatives

For teams that need to control their sending infrastructure — whether for data residency, compliance, or cost reasons at scale — the React Email template layer works identically with any SMTP sender. The templates are just HTML generation; the provider is swappable.

The most common self-hosted alternative in 2026 is Postal (open-source email server) or migrating to AWS SES at high volume. AWS SES costs $0.10 per 1,000 emails when sent from an EC2 instance — at 500,000 emails per month, SES ($50) is significantly cheaper than Resend's paid tier. The tradeoff is operational overhead: deliverability configuration, bounce handling, and monitoring become your responsibility rather than the provider's.

For most SaaS products in their first two years, Resend's managed infrastructure is the right choice. The cost advantage of self-hosting doesn't materialize until email volume is genuinely high, and the deliverability expertise required to maintain a good sender reputation is non-trivial. Plan to evaluate the self-hosting question when monthly email costs exceed $200 — below that threshold, Resend's time savings are worth the premium.

For boilerplate selection that includes properly configured email infrastructure, best SaaS boilerplates 2026 is the starting point. The best free open-source SaaS boilerplates 2026 guide specifically highlights which open-source starters have complete React Email + Resend implementations rather than placeholder email code. And if you're evaluating the full SaaS stack beyond email, why SaaS boilerplates choose Next.js 2026 covers how the email layer fits into the broader architectural decisions most boilerplate authors make.

Setting up email for your SaaS? StarterPick helps you find boilerplates pre-configured with Resend, React Email, and transactional email infrastructure.

See email provider options in the full SaaS stack: Ideal tech stack for SaaS in 2026.

Find boilerplates with email infrastructure built in: Best SaaS boilerplates 2026.

Compare production-ready tools that cost nothing until you scale: Production SaaS with free tools 2026.

The SaaS Boilerplate Matrix (Free PDF)