DEV Community

Alex Spinov
Alex Spinov

Posted on

Resend Has a Free API — Send Beautiful Emails with React Components

#resend #email #react #api

TL;DR

Resend is an email API built for developers. Write emails using React components, send them via a simple API, and track delivery — all with a generous free tier of 3,000 emails/month.

What Is Resend?

Resend reimagines email for developers:

  • React Email — write emails as React components
  • Simple API — one API call to send
  • Delivery tracking — opens, clicks, bounces, complaints
  • Multiple domains — manage sender domains easily
  • Webhooks — get notified on email events
  • Free tier — 3,000 emails/month, 1 domain

Quick Start 

npm install resend
Enter fullscreen mode Exit fullscreen mode 
import { Resend } from "resend";

const resend = new Resend("re_YOUR_API_KEY");

await resend.emails.send({
  from: "hello@yourdomain.com",
  to: "user@example.com",
  subject: "Welcome to MyApp!",
  html: "<h1>Welcome!</h1><p>Thanks for signing up.</p>",
});
Enter fullscreen mode Exit fullscreen mode

React Email Templates 

npm install @react-email/components
Enter fullscreen mode Exit fullscreen mode 
// emails/welcome.tsx
import {
  Html, Head, Body, Container, Section,
  Text, Button, Heading, Hr, Img,
} from "@react-email/components";

interface WelcomeEmailProps {
  name: string;
  loginUrl: string;
}

export default function WelcomeEmail({ name, loginUrl }: WelcomeEmailProps) {
  return (
    <Html>
      <Head />
      <Body style={{ backgroundColor: "#f6f9fc", fontFamily: "sans-serif" }}>
        <Container style={{ maxWidth: 600, margin: "0 auto", padding: 20 }}>
          <Img src="https://myapp.com/logo.png" width={120} alt="MyApp" />
          <Heading>Welcome, {name}!</Heading>
          <Text>We are excited to have you on board.</Text>
          <Section style={{ textAlign: "center", marginTop: 32 }}>
            <Button
              href={loginUrl}
              style={{
                backgroundColor: "#5046e5",
                color: "#fff",
                padding: "12px 24px",
                borderRadius: 6,
                textDecoration: "none",
              }}
            >
              Get Started
            </Button>
          </Section>
          <Hr />
          <Text style={{ color: "#666", fontSize: 12 }}>
            If you did not create an account, please ignore this email.
          </Text>
        </Container>
      </Body>
    </Html>
  );
}
Enter fullscreen mode Exit fullscreen mode 
// Send with React component
import WelcomeEmail from "./emails/welcome";

await resend.emails.send({
  from: "MyApp <hello@myapp.com>",
  to: "user@example.com",
  subject: "Welcome to MyApp!",
  react: WelcomeEmail({ name: "Alice", loginUrl: "https://myapp.com/login" }),
});
Enter fullscreen mode Exit fullscreen mode

Batch Sending 

await resend.batch.send([
  {
    from: "hello@myapp.com",
    to: "user1@example.com",
    subject: "Your weekly report",
    react: WeeklyReport({ userId: "1" }),
  },
  {
    from: "hello@myapp.com",
    to: "user2@example.com",
    subject: "Your weekly report",
    react: WeeklyReport({ userId: "2" }),
  },
]);
Enter fullscreen mode Exit fullscreen mode

Webhooks 

// Track email events
app.post("/webhooks/resend", async (req, res) => {
  const event = req.body;

  switch (event.type) {
    case "email.delivered":
      console.log(`Email delivered to ${event.data.to}`);
      break;
    case "email.opened":
      console.log(`Email opened by ${event.data.to}`);
      break;
    case "email.clicked":
      console.log(`Link clicked: ${event.data.click.link}`);
      break;
    case "email.bounced":
      await removeEmail(event.data.to);
      break;
  }

  res.sendStatus(200);
});
Enter fullscreen mode Exit fullscreen mode

Resend vs Alternatives

Feature Resend SendGrid Postmark AWS SES
Free tier 3K/mo 100/day 100/mo 62K/mo (EC2)
React Email Yes No No No
API simplicity Excellent Complex Good Complex
Delivery speed Fast Variable Fast Fast
Dashboard Modern Dated Clean Basic
Webhooks Yes Yes Yes SNS

Resources

Need to email scraped data reports? My Apify tools extract web data and Resend delivers beautiful email reports. Questions? Email spinov001@gmail.com

Top comments (0)