DEV Community

Alex Spinov
Alex Spinov

Posted on

Resend Has a Free API You're Not Using

#email #resend #react #webdev

Resend is the email API built for developers. It's what SendGrid should have been — simple API, React email templates, and reliable delivery.

The Free APIs You're Missing

1. React Email — Components for Emails 

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

export function WelcomeEmail({ name, dashboardUrl }: { name: string; dashboardUrl: string }) {
  return (
    <Html>
      <Head />
      <Body style={{ fontFamily: "sans-serif", background: "#f4f4f5" }}>
        <Container style={{ maxWidth: 600, margin: "0 auto", padding: 20 }}>
          <Img src="https://example.com/logo.png" width={120} />
          <Text style={{ fontSize: 24 }}>Welcome, {name}!</Text>
          <Text>Your account is ready. Click below to get started.</Text>
          <Button href={dashboardUrl} style={{ background: "#3b82f6", color: "white", padding: "12px 24px", borderRadius: 6 }}>
            Open Dashboard
          </Button>
        </Container>
      </Body>
    </Html>
  );
}
Enter fullscreen mode Exit fullscreen mode

2. Send API — One Function Call 

import { Resend } from "resend";
import { WelcomeEmail } from "./emails/welcome";

const resend = new Resend(process.env.RESEND_API_KEY);

await resend.emails.send({
  from: "team@yourdomain.com",
  to: "user@example.com",
  subject: "Welcome aboard!",
  react: WelcomeEmail({ name: "Alice", dashboardUrl: "https://app.example.com" }),
});
Enter fullscreen mode Exit fullscreen mode

3. Batch Send — Multiple Emails at Once 

await resend.batch.send([
  { from: "team@example.com", to: "alice@test.com", subject: "Hi Alice", html: "<p>Hello</p>" },
  { from: "team@example.com", to: "bob@test.com", subject: "Hi Bob", html: "<p>Hello</p>" },
]);
Enter fullscreen mode Exit fullscreen mode

4. Audiences — Contact Management 

const audience = await resend.audiences.create({ name: "Newsletter" });

await resend.contacts.create({
  audienceId: audience.id,
  email: "user@example.com",
  firstName: "Alice",
  unsubscribed: false,
});

await resend.emails.send({
  from: "news@example.com",
  to: audience.id,
  subject: "Weekly Update",
  react: NewsletterEmail({ content }),
});
Enter fullscreen mode Exit fullscreen mode

5. Webhooks — Delivery Tracking 

// Track opens, clicks, bounces
app.post("/webhooks/resend", (req, res) => {
  const event = req.body;
  switch (event.type) {
    case "email.delivered": console.log("Delivered to", event.data.to); break;
    case "email.opened": console.log("Opened by", event.data.to); break;
    case "email.bounced": await removeEmail(event.data.to); break;
  }
  res.sendStatus(200);
});
Enter fullscreen mode Exit fullscreen mode

Getting Started 

npm install resend @react-email/components
Enter fullscreen mode Exit fullscreen mode

Free tier: 100 emails/day, 3,000/month.

Need data from any website delivered as clean JSON? I build production web scrapers that handle anti-bot, proxies, and rate limits. 77 scrapers running in production. Email me: Spinov001@gmail.com

Check out my awesome-web-scraping list for the best scraping tools and resources.

Top comments (0)