How to Send Emails in Remix (2026 Guide)

Most Remix email tutorials show a contact form and stop. That ignores everything you actually need: password resets, payment receipts, Stripe webhooks, HTML templates, error handling, and subscriber management.

Remix gives you a great foundation for email. Server code runs in action and loader functions. API keys never touch the browser. The .server.ts suffix tree-shakes entire modules from the client bundle. Progressive enhancement means forms work even before JavaScript loads.

This guide covers the full picture with working TypeScript examples. For other React-based frameworks, see our Next.js guide. For non-React options, check out SvelteKit or Nuxt.

Pick a Provider

Every code example below lets you switch between three providers.

Sequenzy is built for SaaS. Transactional emails, marketing campaigns, automated sequences, subscriber management, all from one SDK. Native Stripe integration and built-in retries.
Resend is developer-friendly. Clean API, solid deliverability. They have one-off broadcast campaigns but no automations or sequences.
SendGrid is the enterprise option. Feature-rich, high volume. Bigger API surface.

Install

Add your API key to .env:

Initialize the Client

Create a shared client in a .server.ts file. The .server.ts suffix is a Remix convention that guarantees the module is excluded from the browser bundle entirely, not just the exports, the whole file and its dependencies.

Without the .server.ts suffix, Remix would try to bundle your email SDK and API key into the client JavaScript. The suffix prevents that completely.

Send Your First Email

A contact form that sends email from an action function. Remix Form gives you progressive enhancement: the form works without JavaScript, and when JS loads, it submits without a full page reload.

Key Remix patterns here:

action runs on the server for POST requests. Your API key never reaches the browser.
useNavigation tracks form state. navigation.state === "submitting" lets you show loading indicators.
useActionData reads the return value from action for displaying success/error messages.
Form with method="post" works without JavaScript (progressive enhancement). When JS loads, it submits via fetch instead of a full page reload.

React Email Templates

Inline HTML strings get messy fast. React Email lets you build email templates as React components that compile to email-safe HTML with inline styles.

npm install @react-email/components react-email

Create a reusable layout and your first template:

// app/emails/components/layout.tsx
import {
  Html,
  Head,
  Body,
  Container,
  Text,
  Link,
  Hr,
} from "@react-email/components";
 
interface EmailLayoutProps {
  children: React.ReactNode;
  preview?: string;
}
 
export function EmailLayout({ children, preview }: EmailLayoutProps) {
  return (
    <Html>
      <Head />
      <Body style={{ backgroundColor: "#f6f9fc", fontFamily: "sans-serif" }}>
        <Container
          style={{
            backgroundColor: "#ffffff",
            padding: "40px",
            borderRadius: "8px",
            margin: "40px auto",
            maxWidth: "560px",
          }}
        >
          {children}
          <Hr style={{ borderColor: "#e6ebf1", margin: "32px 0" }} />
          <Text style={{ color: "#8898aa", fontSize: "12px" }}>
            YourApp Inc. · 123 Main St · San Francisco, CA
          </Text>
        </Container>
      </Body>
    </Html>
  );
}

// app/emails/welcome.tsx
import { Text, Button, Heading } from "@react-email/components";
import { EmailLayout } from "./components/layout";
 
interface WelcomeEmailProps {
  name: string;
  loginUrl: string;
}
 
export function WelcomeEmail({ name, loginUrl }: WelcomeEmailProps) {
  return (
    <EmailLayout preview={`Welcome to YourApp, ${name}`}>
      <Heading as="h1" style={{ fontSize: "24px", color: "#1a1a1a" }}>
        Welcome aboard, {name}!
      </Heading>
      <Text style={{ fontSize: "16px", color: "#4a4a4a", lineHeight: "26px" }}>
        Your account is ready. Here's what you can do next:
      </Text>
      <Text style={{ fontSize: "16px", color: "#4a4a4a", lineHeight: "26px" }}>
        1. Set up your first project{"\n"}
        2. Invite your team{"\n"}
        3. Connect your integrations
      </Text>
      <Button
        href={loginUrl}
        style={{
          backgroundColor: "#5046e5",
          color: "#ffffff",
          padding: "12px 24px",
          borderRadius: "6px",
          textDecoration: "none",
          display: "inline-block",
          marginTop: "16px",
        }}
      >
        Go to Dashboard
      </Button>
    </EmailLayout>
  );
}

Render the template to HTML and send it:

The .server.ts suffix on these files keeps the email rendering code and SDK out of the client bundle.

Resource Routes

Resource routes are Remix files that export a loader or action but no default component. They act as pure API endpoints, useful for webhooks, programmatic email sending, or anything that doesn't need a UI.

Remix flat routing maps app/routes/api.send-email.ts to /api/send-email. Call it from other services or internal tooling:

curl -X POST http://localhost:3000/api/send-email \
  -H "Authorization: Bearer your-internal-key" \
  -H "Content-Type: application/json" \
  -d '{"to": "user@example.com", "subject": "Hello", "body": "<p>Test</p>"}'

Common SaaS Patterns

Password Reset

Users submit a form to request a password reset. The action generates a token, saves it to the database, and sends the email. The form works with or without JavaScript.

The action always returns { success: true } whether or not the user exists. This prevents attackers from discovering which emails are registered.

Payment Receipt

Send a receipt after a successful purchase. This typically runs in a Stripe webhook handler, but here's the email template and send function:

Stripe Webhook

Stripe sends webhooks as POST requests with a signature. In Remix, you handle this with a resource route. The key detail: you need the raw request body for signature verification, which request.text() gives you.

The critical part is request.text() instead of request.json(). Stripe needs the raw request body exactly as it arrived to verify the signature. If you parse it as JSON first, verification fails.

Set the webhook URL in Stripe Dashboard to https://yourdomain.com/api/stripe-webhook.

Error Handling

Each provider has different error types. Handle them properly in your actions:

Use the safe wrapper in your actions:

// app/routes/invite.tsx
import { sendEmailSafe } from "~/lib/send-email-safe.server";
 
export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  const email = formData.get("email") as string;
 
  const result = await sendEmailSafe(
    email,
    "You've been invited!",
    "<p>Click here to join the team.</p>",
  );
 
  if (!result.success) {
    return json({ error: result.error }, { status: 500 });
  }
 
  return json({ success: true });
}

Retry with Backoff

For critical emails (receipts, password resets), add retry logic:

// app/lib/retry.server.ts
export async function withRetry<T>(
  fn: () => Promise<T>,
  maxAttempts = 3,
): Promise<T> {
  for (let attempt = 1; attempt <= maxAttempts; attempt++) {
    try {
      return await fn();
    } catch (error) {
      if (attempt === maxAttempts) throw error;
 
      const delay = Math.min(1000 * 2 ** (attempt - 1), 10000);
      await new Promise((resolve) => setTimeout(resolve, delay));
    }
  }
 
  throw new Error("Unreachable");
}
 
// Usage:
// await withRetry(() => sequenzy.transactional.send({ to, subject, body }));

Session Flash Messages

Remix sessions let you set flash messages that display once and disappear. This is a cleaner pattern for showing success/error states after email actions, especially when you redirect after submission:

// app/lib/session.server.ts
import { createCookieSessionStorage, redirect } from "@remix-run/node";
 
export const sessionStorage = createCookieSessionStorage({
  cookie: {
    name: "__session",
    httpOnly: true,
    path: "/",
    sameSite: "lax",
    secure: process.env.NODE_ENV === "production",
    secrets: [process.env.SESSION_SECRET!],
  },
});
 
export async function setFlashMessage(request: Request, message: string, type: "success" | "error") {
  const session = await sessionStorage.getSession(request.headers.get("Cookie"));
  session.flash("message", { text: message, type });
  return redirect(request.url, {
    headers: { "Set-Cookie": await sessionStorage.commitSession(session) },
  });
}

// app/routes/contact.tsx
import { sessionStorage, setFlashMessage } from "~/lib/session.server";
 
export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  // ... validate and send email ...
 
  // Redirect with flash message instead of returning JSON
  return setFlashMessage(request, "Message sent!", "success");
}
 
export async function loader({ request }: LoaderFunctionArgs) {
  const session = await sessionStorage.getSession(request.headers.get("Cookie"));
  const message = session.get("message") as { text: string; type: string } | undefined;
 
  return json(
    { message },
    { headers: { "Set-Cookie": await sessionStorage.commitSession(session) } },
  );
}

Production Checklist

1. Verify Your Sending Domain

Add DNS records so emails don't land in spam:

Record	Type	Purpose
SPF	TXT	Authorizes servers to send
DKIM	TXT	Cryptographic signature
DMARC	TXT	Policy for failed checks

Your provider's dashboard walks you through this. Do it before sending to real users. Our email authentication guide has step-by-step instructions.

2. Use `.server.ts` Everywhere

Any file that imports your email SDK should use the .server.ts suffix. This isn't just a convention, it's a security boundary:

app/
  lib/
    email.server.ts          # SDK client
    send-receipt.server.ts   # Receipt sender
    send-email-safe.server.ts # Error wrapper
    retry.server.ts          # Retry logic
    session.server.ts        # Flash messages
  emails/
    welcome.tsx              # React Email templates (safe, no secrets)
    receipt.tsx

Templates in app/emails/ don't need .server.ts since they're just React components with no secrets.

3. Environment Variables

Remix loads .env automatically in development. In production, set variables through your hosting provider.

# .env
SEQUENZY_API_KEY=sq_live_...
STRIPE_SECRET_KEY=sk_live_...
STRIPE_WEBHOOK_SECRET=whsec_...
SESSION_SECRET=a-random-string
APP_URL=https://yourapp.com

Never commit .env to git. Add it to .gitignore.

4. Validate Inputs in Actions

Always validate form data before sending emails:

import { z } from "zod";
 
const contactSchema = z.object({
  email: z.string().email("Invalid email address"),
  name: z.string().min(1, "Name is required").max(100),
  message: z.string().min(10, "Message must be at least 10 characters").max(5000),
});
 
export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  const parsed = contactSchema.safeParse({
    email: formData.get("email"),
    name: formData.get("name"),
    message: formData.get("message"),
  });
 
  if (!parsed.success) {
    return json(
      { errors: parsed.error.flatten().fieldErrors },
      { status: 400 },
    );
  }
 
  // Safe to use parsed.data
  const { email, name, message } = parsed.data;
  // ... send email
}

5. Rate Limiting

Protect your email actions from abuse. Remix doesn't have built-in rate limiting, but you can use a middleware approach with express or apply it at the action level:

// app/lib/rate-limit.server.ts
const rateLimitMap = new Map<string, { count: number; resetAt: number }>();
 
export function checkRateLimit(
  key: string,
  maxRequests = 5,
  windowMs = 60_000,
): boolean {
  const now = Date.now();
  const entry = rateLimitMap.get(key);
 
  if (!entry || now > entry.resetAt) {
    rateLimitMap.set(key, { count: 1, resetAt: now + windowMs });
    return true;
  }
 
  if (entry.count >= maxRequests) {
    return false;
  }
 
  entry.count++;
  return true;
}

// In your action:
export async function action({ request }: ActionFunctionArgs) {
  const ip = request.headers.get("x-forwarded-for") || "unknown";
 
  if (!checkRateLimit(ip)) {
    return json({ error: "Too many requests. Try again later." }, { status: 429 });
  }
 
  // ... send email
}

For production, use Redis or a distributed rate limiter instead of the in-memory map.

6. Progressive Enhancement

Remix forms work without JavaScript by default. This means:

Your contact form works even if the JS bundle fails to load
Search engine bots can submit forms
Users on slow connections get a working experience immediately

Test with JavaScript disabled to make sure your email features still work.

Beyond Transactional

A contact form is step one. Production apps need welcome sequences, onboarding emails, marketing campaigns, and subscriber management. Understanding the difference between transactional and marketing email helps you pick the right architecture. You can either build this yourself (separate tools for each) or use a platform that handles it all.

Sequenzy handles transactional sends, marketing campaigns, automated sequences, and subscriber management from one SDK. Native Stripe integration tags subscribers automatically when they purchase, cancel, or churn, so you can trigger the right emails without writing webhook handlers.

FAQ

Can I use Nodemailer with Remix?

Yes, but it's not recommended for production. Nodemailer connects directly to SMTP servers, which means you lose delivery analytics, bounce handling, reputation management, and the ability to scale without managing SMTP infrastructure. API-based providers handle all of that. Nodemailer is fine for development or internal tools where deliverability doesn't matter.

What's the difference between `.server.ts` and regular `.ts` files?

A .server.ts file (or .server/ directory) is completely excluded from the browser bundle by the Remix compiler. Not just unused exports are tree-shaken; the entire file and all its imports are removed. Use this for anything with secrets (API keys, database clients). Regular .ts files may end up in the client bundle if imported by a route component.

Should I send emails in loaders or actions?

Actions. Loaders run on GET requests, which means every page visit would trigger an email send. Actions run on POST/PUT/DELETE, so emails only send when the user explicitly submits something. The one exception: if you need to send an email based on visiting a URL (like an email verification link), use a loader but with a one-time-use token to prevent repeat sends.

How do I handle Stripe webhooks? Do I need express.raw()?

No. Remix gives you the raw request body via request.text(). Unlike Express (which parses the body before you see it), Remix's web-standard Request object lets you read the body in any format. Call request.text() to get the raw string, then pass it to stripe.webhooks.constructEvent().

Can I send emails from a Remix loader?

Technically yes, but be careful. Loaders run on every navigation to a route. If you send email in a loader, you need to guard it with a one-time token or database check. For example, an email verification link might use a loader:

export async function loader({ request }: LoaderFunctionArgs) {
  const url = new URL(request.url);
  const token = url.searchParams.get("token");
  const record = await db.verificationToken.findUnique({ where: { token } });
 
  if (!record || record.used) {
    return json({ error: "Invalid or expired link" }, { status: 400 });
  }
 
  await db.verificationToken.update({ where: { token }, data: { used: true } });
  await db.user.update({ where: { id: record.userId }, data: { verified: true } });
 
  // Now safe to send a confirmation email (only runs once)
  await sendEmailSafe(record.email, "Email verified", "<p>Your email is verified!</p>");
 
  return redirect("/dashboard?verified=true");
}

How do I test emails during development?

Three options:

Provider test mode: Sequenzy, Resend, and SendGrid all have test/sandbox API keys that don't actually deliver emails.
Email preview: Use react-email dev to preview your React Email templates locally at localhost:3000.
Catch-all inbox: Use a service like Mailpit or Mailtrap to capture all outgoing emails in development.

Does progressive enhancement work with email forms?

Yes. Remix's <Form> component works without JavaScript as a regular HTML form submission. When JavaScript loads, it enhances to use fetch. Your email-sending action runs the same code either way because it's always server-side. The only difference is UX: without JS, you get a full page reload; with JS, you get the useNavigation pending state and useActionData response without leaving the page.

How do I send emails in the background without blocking the action?

Remix actions are request-response. If an email takes too long, it blocks the user's response. Options:

Fire and forget: Don't await the email send. The email sends in the background, but you lose error handling. Use void sendEmail() syntax.
Queue: Use a job queue (BullMQ, Inngest, or similar) to enqueue email sends and process them asynchronously. This is the production answer for high-volume sending.
Defer: Remix's defer streams responses. You can start the email send and stream the result, though this is complex for simple cases.

// Fire and forget (simplest)
export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  // ... validate
 
  // Don't await - email sends in background
  void sendWelcomeEmail(email, name);
 
  return json({ success: true });
}

Wrapping Up

.server.ts keeps API keys and email SDKs out of the browser bundle
Action functions handle form-based email sending with progressive enhancement
Resource routes create API endpoints for webhooks and programmatic emails
React Email builds maintainable templates as React components
request.text() gives you the raw body for Stripe webhook signature verification
Session flash messages provide clean success/error states after redirects
Zod validation catches bad input before it hits your email provider

Pick your provider, copy the patterns, and ship.

Frequently Asked Questions

Should I send emails from Remix actions or loaders?

Actions, always. Loaders run on GET requests and should be side-effect-free (data fetching only). Actions handle POST/PUT/DELETE requests and are the right place for mutations like sending emails. This follows Remix's progressive enhancement model.

How do I handle form submissions that trigger emails in Remix?

Use Remix's <Form> component and an action function. The form submits to the action, which validates input, sends the email, and returns a response. Use useActionData() to display success or error messages. Forms work without JavaScript enabled.

Can I use React Email templates in Remix?

Yes. Install React Email packages, create template components, and render them in your action with render(). Remix runs actions server-side, so React Email rendering works the same as in any Node.js environment.

How do I show loading states during email sends in Remix?

Use useNavigation() to check if an action is in progress: navigation.state === 'submitting'. Show a spinner or "Sending..." text while the action runs. Remix handles this without any manual state management.

How do I validate email form data in Remix?

Use Zod to define a schema and validate formData in your action. Return validation errors that your component displays with useActionData(). This gives you server-side validation that works with and without JavaScript.

How do I send emails in the background in Remix?

Remix actions are synchronous request handlers, so you can't easily run background jobs within Remix itself. Use a job queue service (Inngest, Trigger.dev) or push to a message queue (SQS, Redis) and process emails in a separate worker.

How do I handle email webhook callbacks in Remix?

Create a resource route (a route without a component) that exports only an action. Parse the webhook payload, verify the signature, and process the event. Return a json() response with appropriate status codes.

Does Remix's nested routing affect email-sending patterns?

Not directly. Email sends happen in actions regardless of routing depth. However, nested routes let you colocate email-triggering actions with the UI components that display them, keeping related logic together.

How do I test Remix email actions?

Create a test that calls your action function directly with a mocked request and formData. Mock the email SDK and assert it was called correctly. Use createRemixStub for integration tests that render the full route with form submission.

How do I handle rate limiting for email endpoints in Remix?

Remix doesn't have built-in rate limiting. Use Upstash Rate Limit or a similar library in your action to check limits before sending. For Cloudflare deployments, use Workers rate limiting. Track limits by IP or authenticated user.

This guide covers the full picture with working TypeScript examples. For other React-based frameworks, see our Next.js guide. For non-React options, check out SvelteKit or Nuxt.

Pick a Provider

Every code example below lets you switch between three providers.

Sequenzy is built for SaaS. Transactional emails, marketing campaigns, automated sequences, subscriber management, all from one SDK. Native Stripe integration and built-in retries.
Resend is developer-friendly. Clean API, solid deliverability. They have one-off broadcast campaigns but no automations or sequences.
SendGrid is the enterprise option. Feature-rich, high volume. Bigger API surface.

Install

Add your API key to .env:

Initialize the Client

Without the .server.ts suffix, Remix would try to bundle your email SDK and API key into the client JavaScript. The suffix prevents that completely.

Send Your First Email

A contact form that sends email from an action function. Remix Form gives you progressive enhancement: the form works without JavaScript, and when JS loads, it submits without a full page reload.

Key Remix patterns here:

action runs on the server for POST requests. Your API key never reaches the browser.
useNavigation tracks form state. navigation.state === "submitting" lets you show loading indicators.
useActionData reads the return value from action for displaying success/error messages.
Form with method="post" works without JavaScript (progressive enhancement). When JS loads, it submits via fetch instead of a full page reload.

React Email Templates

Inline HTML strings get messy fast. React Email lets you build email templates as React components that compile to email-safe HTML with inline styles.

npm install @react-email/components react-email

Create a reusable layout and your first template:

// app/emails/components/layout.tsx
import {
  Html,
  Head,
  Body,
  Container,
  Text,
  Link,
  Hr,
} from "@react-email/components";
 
interface EmailLayoutProps {
  children: React.ReactNode;
  preview?: string;
}
 
export function EmailLayout({ children, preview }: EmailLayoutProps) {
  return (
    <Html>
      <Head />
      <Body style={{ backgroundColor: "#f6f9fc", fontFamily: "sans-serif" }}>
        <Container
          style={{
            backgroundColor: "#ffffff",
            padding: "40px",
            borderRadius: "8px",
            margin: "40px auto",
            maxWidth: "560px",
          }}
        >
          {children}
          <Hr style={{ borderColor: "#e6ebf1", margin: "32px 0" }} />
          <Text style={{ color: "#8898aa", fontSize: "12px" }}>
            YourApp Inc. · 123 Main St · San Francisco, CA
          </Text>
        </Container>
      </Body>
    </Html>
  );
}

// app/emails/welcome.tsx
import { Text, Button, Heading } from "@react-email/components";
import { EmailLayout } from "./components/layout";
 
interface WelcomeEmailProps {
  name: string;
  loginUrl: string;
}
 
export function WelcomeEmail({ name, loginUrl }: WelcomeEmailProps) {
  return (
    <EmailLayout preview={`Welcome to YourApp, ${name}`}>
      <Heading as="h1" style={{ fontSize: "24px", color: "#1a1a1a" }}>
        Welcome aboard, {name}!
      </Heading>
      <Text style={{ fontSize: "16px", color: "#4a4a4a", lineHeight: "26px" }}>
        Your account is ready. Here's what you can do next:
      </Text>
      <Text style={{ fontSize: "16px", color: "#4a4a4a", lineHeight: "26px" }}>
        1. Set up your first project{"\n"}
        2. Invite your team{"\n"}
        3. Connect your integrations
      </Text>
      <Button
        href={loginUrl}
        style={{
          backgroundColor: "#5046e5",
          color: "#ffffff",
          padding: "12px 24px",
          borderRadius: "6px",
          textDecoration: "none",
          display: "inline-block",
          marginTop: "16px",
        }}
      >
        Go to Dashboard
      </Button>
    </EmailLayout>
  );
}

Render the template to HTML and send it:

The .server.ts suffix on these files keeps the email rendering code and SDK out of the client bundle.

Resource Routes

Remix flat routing maps app/routes/api.send-email.ts to /api/send-email. Call it from other services or internal tooling:

curl -X POST http://localhost:3000/api/send-email \
  -H "Authorization: Bearer your-internal-key" \
  -H "Content-Type: application/json" \
  -d '{"to": "user@example.com", "subject": "Hello", "body": "<p>Test</p>"}'

Common SaaS Patterns

Password Reset

Users submit a form to request a password reset. The action generates a token, saves it to the database, and sends the email. The form works with or without JavaScript.

The action always returns { success: true } whether or not the user exists. This prevents attackers from discovering which emails are registered.

Payment Receipt

Send a receipt after a successful purchase. This typically runs in a Stripe webhook handler, but here's the email template and send function:

Stripe Webhook

The critical part is request.text() instead of request.json(). Stripe needs the raw request body exactly as it arrived to verify the signature. If you parse it as JSON first, verification fails.

Set the webhook URL in Stripe Dashboard to https://yourdomain.com/api/stripe-webhook.

Error Handling

Each provider has different error types. Handle them properly in your actions:

Use the safe wrapper in your actions:

// app/routes/invite.tsx
import { sendEmailSafe } from "~/lib/send-email-safe.server";
 
export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  const email = formData.get("email") as string;
 
  const result = await sendEmailSafe(
    email,
    "You've been invited!",
    "<p>Click here to join the team.</p>",
  );
 
  if (!result.success) {
    return json({ error: result.error }, { status: 500 });
  }
 
  return json({ success: true });
}

Retry with Backoff

For critical emails (receipts, password resets), add retry logic:

// app/lib/retry.server.ts
export async function withRetry<T>(
  fn: () => Promise<T>,
  maxAttempts = 3,
): Promise<T> {
  for (let attempt = 1; attempt <= maxAttempts; attempt++) {
    try {
      return await fn();
    } catch (error) {
      if (attempt === maxAttempts) throw error;
 
      const delay = Math.min(1000 * 2 ** (attempt - 1), 10000);
      await new Promise((resolve) => setTimeout(resolve, delay));
    }
  }
 
  throw new Error("Unreachable");
}
 
// Usage:
// await withRetry(() => sequenzy.transactional.send({ to, subject, body }));

Session Flash Messages

// app/lib/session.server.ts
import { createCookieSessionStorage, redirect } from "@remix-run/node";
 
export const sessionStorage = createCookieSessionStorage({
  cookie: {
    name: "__session",
    httpOnly: true,
    path: "/",
    sameSite: "lax",
    secure: process.env.NODE_ENV === "production",
    secrets: [process.env.SESSION_SECRET!],
  },
});
 
export async function setFlashMessage(request: Request, message: string, type: "success" | "error") {
  const session = await sessionStorage.getSession(request.headers.get("Cookie"));
  session.flash("message", { text: message, type });
  return redirect(request.url, {
    headers: { "Set-Cookie": await sessionStorage.commitSession(session) },
  });
}

// app/routes/contact.tsx
import { sessionStorage, setFlashMessage } from "~/lib/session.server";
 
export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  // ... validate and send email ...
 
  // Redirect with flash message instead of returning JSON
  return setFlashMessage(request, "Message sent!", "success");
}
 
export async function loader({ request }: LoaderFunctionArgs) {
  const session = await sessionStorage.getSession(request.headers.get("Cookie"));
  const message = session.get("message") as { text: string; type: string } | undefined;
 
  return json(
    { message },
    { headers: { "Set-Cookie": await sessionStorage.commitSession(session) } },
  );
}

Production Checklist

1. Verify Your Sending Domain

Add DNS records so emails don't land in spam:

Record	Type	Purpose
SPF	TXT	Authorizes servers to send
DKIM	TXT	Cryptographic signature
DMARC	TXT	Policy for failed checks

Your provider's dashboard walks you through this. Do it before sending to real users. Our email authentication guide has step-by-step instructions.

2. Use `.server.ts` Everywhere

Any file that imports your email SDK should use the .server.ts suffix. This isn't just a convention, it's a security boundary:

app/
  lib/
    email.server.ts          # SDK client
    send-receipt.server.ts   # Receipt sender
    send-email-safe.server.ts # Error wrapper
    retry.server.ts          # Retry logic
    session.server.ts        # Flash messages
  emails/
    welcome.tsx              # React Email templates (safe, no secrets)
    receipt.tsx

Templates in app/emails/ don't need .server.ts since they're just React components with no secrets.

3. Environment Variables

Remix loads .env automatically in development. In production, set variables through your hosting provider.

# .env
SEQUENZY_API_KEY=sq_live_...
STRIPE_SECRET_KEY=sk_live_...
STRIPE_WEBHOOK_SECRET=whsec_...
SESSION_SECRET=a-random-string
APP_URL=https://yourapp.com

Never commit .env to git. Add it to .gitignore.

4. Validate Inputs in Actions

Always validate form data before sending emails:

import { z } from "zod";
 
const contactSchema = z.object({
  email: z.string().email("Invalid email address"),
  name: z.string().min(1, "Name is required").max(100),
  message: z.string().min(10, "Message must be at least 10 characters").max(5000),
});
 
export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  const parsed = contactSchema.safeParse({
    email: formData.get("email"),
    name: formData.get("name"),
    message: formData.get("message"),
  });
 
  if (!parsed.success) {
    return json(
      { errors: parsed.error.flatten().fieldErrors },
      { status: 400 },
    );
  }
 
  // Safe to use parsed.data
  const { email, name, message } = parsed.data;
  // ... send email
}

5. Rate Limiting

Protect your email actions from abuse. Remix doesn't have built-in rate limiting, but you can use a middleware approach with express or apply it at the action level:

// app/lib/rate-limit.server.ts
const rateLimitMap = new Map<string, { count: number; resetAt: number }>();
 
export function checkRateLimit(
  key: string,
  maxRequests = 5,
  windowMs = 60_000,
): boolean {
  const now = Date.now();
  const entry = rateLimitMap.get(key);
 
  if (!entry || now > entry.resetAt) {
    rateLimitMap.set(key, { count: 1, resetAt: now + windowMs });
    return true;
  }
 
  if (entry.count >= maxRequests) {
    return false;
  }
 
  entry.count++;
  return true;
}

// In your action:
export async function action({ request }: ActionFunctionArgs) {
  const ip = request.headers.get("x-forwarded-for") || "unknown";
 
  if (!checkRateLimit(ip)) {
    return json({ error: "Too many requests. Try again later." }, { status: 429 });
  }
 
  // ... send email
}

For production, use Redis or a distributed rate limiter instead of the in-memory map.

6. Progressive Enhancement

Remix forms work without JavaScript by default. This means:

Your contact form works even if the JS bundle fails to load
Search engine bots can submit forms
Users on slow connections get a working experience immediately

Test with JavaScript disabled to make sure your email features still work.

Beyond Transactional

FAQ

Can I use Nodemailer with Remix?

What's the difference between `.server.ts` and regular `.ts` files?

Should I send emails in loaders or actions?

How do I handle Stripe webhooks? Do I need express.raw()?

Can I send emails from a Remix loader?

export async function loader({ request }: LoaderFunctionArgs) {
  const url = new URL(request.url);
  const token = url.searchParams.get("token");
  const record = await db.verificationToken.findUnique({ where: { token } });
 
  if (!record || record.used) {
    return json({ error: "Invalid or expired link" }, { status: 400 });
  }
 
  await db.verificationToken.update({ where: { token }, data: { used: true } });
  await db.user.update({ where: { id: record.userId }, data: { verified: true } });
 
  // Now safe to send a confirmation email (only runs once)
  await sendEmailSafe(record.email, "Email verified", "<p>Your email is verified!</p>");
 
  return redirect("/dashboard?verified=true");
}

How do I test emails during development?

Three options:

Provider test mode: Sequenzy, Resend, and SendGrid all have test/sandbox API keys that don't actually deliver emails.
Email preview: Use react-email dev to preview your React Email templates locally at localhost:3000.
Catch-all inbox: Use a service like Mailpit or Mailtrap to capture all outgoing emails in development.

Does progressive enhancement work with email forms?

How do I send emails in the background without blocking the action?

Remix actions are request-response. If an email takes too long, it blocks the user's response. Options:

Fire and forget: Don't await the email send. The email sends in the background, but you lose error handling. Use void sendEmail() syntax.
Queue: Use a job queue (BullMQ, Inngest, or similar) to enqueue email sends and process them asynchronously. This is the production answer for high-volume sending.
Defer: Remix's defer streams responses. You can start the email send and stream the result, though this is complex for simple cases.

// Fire and forget (simplest)
export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  // ... validate
 
  // Don't await - email sends in background
  void sendWelcomeEmail(email, name);
 
  return json({ success: true });
}

Wrapping Up

.server.ts keeps API keys and email SDKs out of the browser bundle
Action functions handle form-based email sending with progressive enhancement
Resource routes create API endpoints for webhooks and programmatic emails
React Email builds maintainable templates as React components
request.text() gives you the raw body for Stripe webhook signature verification
Session flash messages provide clean success/error states after redirects
Zod validation catches bad input before it hits your email provider

Pick a Provider

Install

Initialize the Client

Send Your First Email

React Email Templates

Resource Routes

Common SaaS Patterns

Password Reset

Payment Receipt

Stripe Webhook

Error Handling

Retry with Backoff

Session Flash Messages

Production Checklist

1. Verify Your Sending Domain

2. Use .server.ts Everywhere

3. Environment Variables

4. Validate Inputs in Actions

5. Rate Limiting

6. Progressive Enhancement

Beyond Transactional

FAQ

Can I use Nodemailer with Remix?

What's the difference between .server.ts and regular .ts files?

Should I send emails in loaders or actions?

How do I handle Stripe webhooks? Do I need express.raw()?

Can I send emails from a Remix loader?

How do I test emails during development?

Does progressive enhancement work with email forms?

How do I send emails in the background without blocking the action?

Wrapping Up

Frequently Asked Questions

Should I send emails from Remix actions or loaders?

How do I handle form submissions that trigger emails in Remix?

Can I use React Email templates in Remix?

How do I show loading states during email sends in Remix?

How do I validate email form data in Remix?

How do I send emails in the background in Remix?

How do I handle email webhook callbacks in Remix?

Does Remix's nested routing affect email-sending patterns?

How do I test Remix email actions?

How do I handle rate limiting for email endpoints in Remix?

Pick a Provider

Install

Initialize the Client

Send Your First Email

React Email Templates

Resource Routes

Common SaaS Patterns

Password Reset

Payment Receipt

Stripe Webhook

Error Handling

Retry with Backoff

Session Flash Messages

Production Checklist

1. Verify Your Sending Domain

2. Use .server.ts Everywhere

3. Environment Variables

4. Validate Inputs in Actions

5. Rate Limiting

6. Progressive Enhancement

Beyond Transactional

FAQ

Can I use Nodemailer with Remix?

What's the difference between .server.ts and regular .ts files?

Should I send emails in loaders or actions?

How do I handle Stripe webhooks? Do I need express.raw()?

Can I send emails from a Remix loader?

How do I test emails during development?

Does progressive enhancement work with email forms?

How do I send emails in the background without blocking the action?

Wrapping Up

Frequently Asked Questions

Should I send emails from Remix actions or loaders?

How do I handle form submissions that trigger emails in Remix?

Can I use React Email templates in Remix?

How do I show loading states during email sends in Remix?

How do I validate email form data in Remix?

How do I send emails in the background in Remix?

2. Use `.server.ts` Everywhere

What's the difference between `.server.ts` and regular `.ts` files?

2. Use `.server.ts` Everywhere

What's the difference between `.server.ts` and regular `.ts` files?