Resend — Modern Email API for Developers
You are an expert in Resend, the developer-first email API. You help developers send transactional and marketing emails using React Email templates, TypeScript SDK, webhooks for delivery tracking, batch sending, and audience management — replacing legacy email services (SendGrid, Mailgun) with a modern, type-safe developer experience.
Core Capabilities
Sending Emails
import { Resend } from "resend";
import { WelcomeEmail } from "@/emails/welcome";
const resend = new Resend(process.env.RESEND_API_KEY);
// Send with React Email template
const { data, error } = await resend.emails.send({
from: "Acme <noreply@acme.com>",
to: "user@example.com",
subject: "Welcome to Acme",
react: WelcomeEmail({ name: "Alice", loginUrl: "https://app.acme.com" }),
});
// Send with HTML
await resend.emails.send({
from: "Acme <noreply@acme.com>",
to: ["user1@example.com", "user2@example.com"],
cc: "admin@acme.com",
bcc: "archive@acme.com",
subject: "Your invoice",
html: "<h1>Invoice #123</h1><p>Amount: $99.99</p>",
attachments: [{
filename: "invoice.pdf",
content: pdfBuffer,
}],
tags: [
{ name: "category", value: "billing" },
{ name: "user_id", value: "usr-42" },
],
});
// Batch send
const { data } = await resend.batch.send([
{ from: "noreply@acme.com", to: "user1@example.com", subject: "Digest", react: DigestEmail({ items: user1Items }) },
{ from: "noreply@acme.com", to: "user2@example.com", subject: "Digest", react: DigestEmail({ items: user2Items }) },
]);
// Schedule
await resend.emails.send({
from: "noreply@acme.com",
to: "user@example.com",
subject: "Reminder",
react: ReminderEmail({}),
scheduledAt: "2026-03-15T09:00:00Z", // Send at specific time
});
React Email Templates
// emails/welcome.tsx — Type-safe email templates
import { Html, Head, Body, Container, Heading, Text, Button, Hr, Img } from "@react-email/components";
interface WelcomeEmailProps {
name: string;
loginUrl: string;
}
export function WelcomeEmail({ name, loginUrl }: WelcomeEmailProps) {
return (
<Html>
<Head />
<Body style={{ fontFamily: "Arial, sans-serif", backgroundColor: "#f4f4f5" }}>
<Container style={{ maxWidth: 600, margin: "0 auto", padding: 20, backgroundColor: "#fff" }}>
<Img src="https://acme.com/logo.png" width={120} height={40} alt="Acme" />
<Heading as="h1">Welcome, {name}!</Heading>
<Text>Thanks for signing up. Get started by logging in:</Text>
<Button
href={loginUrl}
style={{ backgroundColor: "#000", color: "#fff", padding: "12px 24px", borderRadius: 6 }}>
Get Started
</Button>
<Hr />
<Text style={{ fontSize: 12, color: "#666" }}>
If you didn't create this account, ignore this email.
</Text>
</Container>
</Body>
</Html>
);
}
// Preview: npx email dev (opens browser preview at localhost:3000)
Installation
npm install resend
npm install @react-email/components react-email # For templates
npx email dev # Preview templates
Best Practices
- React Email templates — Build emails with React components; type-safe, previewable, reusable
- Tags for analytics — Add tags to every email; track delivery rates by category, campaign, user segment
- Webhooks for tracking — Set up webhooks for delivered/bounced/complained events; update user records
- Batch for volume — Use
batch.send for newsletters/digests; up to 100 emails per batch call
- Domain verification — Verify your sending domain with DNS records (SPF, DKIM, DMARC); improves deliverability
- Preview before send — Use
npx email dev to preview templates in the browser; iterate fast
- Scheduled sends — Use
scheduledAt for time-zone-aware delivery; better open rates
- Error handling — Check
error in response; handle bounces gracefully, update user preferences
1---2name: resend3description: You are an expert in Resend, the developer-first email API. You help developers send transactional and marketing emails using React Email templates, TypeScript SDK, webhooks for delivery tracking, batch sending, and audience management — replacing legacy email services (SendGrid, Mailgun) with a modern, type-safe developer experience.4license: Apache-2.05---67# Resend — Modern Email API for Developers89You are an expert in Resend, the developer-first email API. You help developers send transactional and marketing emails using React Email templates, TypeScript SDK, webhooks for delivery tracking, batch sending, and audience management — replacing legacy email services (SendGrid, Mailgun) with a modern, type-safe developer experience.1011## Core Capabilities1213### Sending Emails1415```typescript16import { Resend } from "resend";17import { WelcomeEmail } from "@/emails/welcome";1819const resend = new Resend(process.env.RESEND_API_KEY);2021// Send with React Email template22const { data, error } = await resend.emails.send({23 from: "Acme <noreply@acme.com>",24 to: "user@example.com",25 subject: "Welcome to Acme",26 react: WelcomeEmail({ name: "Alice", loginUrl: "https://app.acme.com" }),27});2829// Send with HTML30await resend.emails.send({31 from: "Acme <noreply@acme.com>",32 to: ["user1@example.com", "user2@example.com"],33 cc: "admin@acme.com",34 bcc: "archive@acme.com",35 subject: "Your invoice",36 html: "<h1>Invoice #123</h1><p>Amount: $99.99</p>",37 attachments: [{38 filename: "invoice.pdf",39 content: pdfBuffer,40 }],41 tags: [42 { name: "category", value: "billing" },43 { name: "user_id", value: "usr-42" },44 ],45});4647// Batch send48const { data } = await resend.batch.send([49 { from: "noreply@acme.com", to: "user1@example.com", subject: "Digest", react: DigestEmail({ items: user1Items }) },50 { from: "noreply@acme.com", to: "user2@example.com", subject: "Digest", react: DigestEmail({ items: user2Items }) },51]);5253// Schedule54await resend.emails.send({55 from: "noreply@acme.com",56 to: "user@example.com",57 subject: "Reminder",58 react: ReminderEmail({}),59 scheduledAt: "2026-03-15T09:00:00Z", // Send at specific time60});61```6263### React Email Templates6465```tsx66// emails/welcome.tsx — Type-safe email templates67import { Html, Head, Body, Container, Heading, Text, Button, Hr, Img } from "@react-email/components";6869interface WelcomeEmailProps {70 name: string;71 loginUrl: string;72}7374export function WelcomeEmail({ name, loginUrl }: WelcomeEmailProps) {75 return (76 <Html>77 <Head />78 <Body style={{ fontFamily: "Arial, sans-serif", backgroundColor: "#f4f4f5" }}>79 <Container style={{ maxWidth: 600, margin: "0 auto", padding: 20, backgroundColor: "#fff" }}>80 <Img src="https://acme.com/logo.png" width={120} height={40} alt="Acme" />81 <Heading as="h1">Welcome, {name}!</Heading>82 <Text>Thanks for signing up. Get started by logging in:</Text>83 <Button84 href={loginUrl}85 style={{ backgroundColor: "#000", color: "#fff", padding: "12px 24px", borderRadius: 6 }}>86 Get Started87 </Button>88 <Hr />89 <Text style={{ fontSize: 12, color: "#666" }}>90 If you didn't create this account, ignore this email.91 </Text>92 </Container>93 </Body>94 </Html>95 );96}9798// Preview: npx email dev (opens browser preview at localhost:3000)99```100101## Installation102103```bash104npm install resend105npm install @react-email/components react-email # For templates106npx email dev # Preview templates107```108109## Best Practices1101111. **React Email templates** — Build emails with React components; type-safe, previewable, reusable1122. **Tags for analytics** — Add tags to every email; track delivery rates by category, campaign, user segment1133. **Webhooks for tracking** — Set up webhooks for delivered/bounced/complained events; update user records1144. **Batch for volume** — Use `batch.send` for newsletters/digests; up to 100 emails per batch call1155. **Domain verification** — Verify your sending domain with DNS records (SPF, DKIM, DMARC); improves deliverability1166. **Preview before send** — Use `npx email dev` to preview templates in the browser; iterate fast1177. **Scheduled sends** — Use `scheduledAt` for time-zone-aware delivery; better open rates1188. **Error handling** — Check `error` in response; handle bounces gracefully, update user preferences
eliferjunior