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

# resend# email# react# api
Resend Has a Free Email API That Makes SendGrid Feel Like Legacy SoftwareAlex Spinov

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

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>",
});
Enter fullscreen mode Exit fullscreen mode

That is the entire API. One function. Done.

React Email (Templates as Components) 

npm install @react-email/components
Enter fullscreen mode Exit fullscreen mode 
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>
  );
}
Enter fullscreen mode Exit fullscreen mode 
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" }),
});
Enter fullscreen mode Exit fullscreen mode

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();
});
Enter fullscreen mode Exit fullscreen mode

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>" },
]);
Enter fullscreen mode Exit fullscreen mode

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

Need email integration or developer tools? I build web solutions and data pipelines. Email spinov001@gmail.com or check my Apify tools.