Resend Has a Free Email API That Makes SendGrid Feel Like Legacy Software

#resend #email #react #api

SendGrid has 47 API parameters for sending one email. Resend has one clean endpoint with React components for email templates.

The Simplest Email API

import { Resend } from "resend";

const resend = new Resend("re_123456789");

await resend.emails.send({
  from: "hello@yourdomain.com",
  to: "user@example.com",
  subject: "Welcome!",
  html: "<h1>Hello World</h1>",
});

That is the entire API. One function. Done.

React Email (Templates as Components)

npm install @react-email/components

import { Html, Head, Body, Container, Heading, Text, Button, Img } from "@react-email/components";

export function WelcomeEmail({ name, actionUrl }: { name: string; actionUrl: string }) {
  return (
    <Html>
      <Head />
      <Body style={{ fontFamily: "sans-serif", backgroundColor: "#f6f9fc" }}>
        <Container style={{ maxWidth: 600, margin: "0 auto", padding: 20 }}>
          <Img src="https://yourapp.com/logo.png" width={120} height={40} alt="Logo" />
          <Heading>Welcome, {name}!</Heading>
          <Text>Thanks for signing up. Click below to get started:</Text>
          <Button
            href={actionUrl}
            style={{ backgroundColor: "#3498db", color: "white", padding: "12px 24px", borderRadius: 6 }}
          >
            Get Started
          </Button>
        </Container>
      </Body>
    </Html>
  );
}

import { render } from "@react-email/render";
import { WelcomeEmail } from "./emails/welcome";

await resend.emails.send({
  from: "hello@yourdomain.com",
  to: "user@example.com",
  subject: "Welcome!",
  react: WelcomeEmail({ name: "Alice", actionUrl: "https://app.com/start" }),
});

Free Tier

3,000 emails/month
100 emails/day
1 custom domain
Email + webhook support

Webhooks

// Track delivery, opens, clicks, bounces
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 removeFromMailingList(event.data.to);
      break;
  }
  res.status(200).end();
});

Batch Sending

await resend.batch.send([
  { from: "hello@app.com", to: "user1@test.com", subject: "Hi", html: "<p>Hello 1</p>" },
  { from: "hello@app.com", to: "user2@test.com", subject: "Hi", html: "<p>Hello 2</p>" },
  { from: "hello@app.com", to: "user3@test.com", subject: "Hi", html: "<p>Hello 3</p>" },
]);

Resend vs SendGrid vs Postmark

	SendGrid	Postmark	Resend
API simplicity	Complex	Simple	Simplest
React templates	No	No	Yes
Free tier	100/day	100/month	3,000/month
Deliverability	Good	Excellent	Excellent
DX (developer experience)	Dated	Good	Best
Pricing	$15/50K	$15/10K	$20/50K