Resend Has a Free API That Makes Sending Emails From Code Actually Pleasant

#email #javascript #react #api

Resend is the email API built for developers. No SMTP configuration, no complex templates — just a clean REST API and React Email components.

Send an Email: One API Call

import { Resend } from "resend";

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

const { data, error } = await resend.emails.send({
  from: "hello@yourdomain.com",
  to: "user@example.com",
  subject: "Your scraping report is ready",
  html: "<h1>Report Complete</h1><p>1,234 records extracted.</p>",
});

console.log(data.id); // Email ID for tracking

React Email: JSX Templates

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

export function ScrapingReport({ data }) {
  return (
    <Html>
      <Head />
      <Body style={{ fontFamily: "sans-serif", background: "#f4f4f5" }}>
        <Container style={{ background: "white", padding: "24px", borderRadius: "8px" }}>
          <Img src="https://yourlogo.com/logo.png" width={120} />
          <Text style={{ fontSize: "24px", fontWeight: "bold" }}>Your Scraping Report</Text>
          <Hr />
          <Section>
            <Text>Total records: {data.total}</Text>
            <Text>New items: {data.newItems}</Text>
            <Text>Price changes: {data.priceChanges}</Text>
          </Section>
          <Button href={data.downloadUrl} style={{ background: "#3b82f6", color: "white", padding: "12px 24px", borderRadius: "6px" }}>
            Download CSV
          </Button>
        </Container>
      </Body>
    </Html>
  );
}

// Send with React component
await resend.emails.send({
  from: "reports@yourdomain.com",
  to: "client@example.com",
  subject: "Your Weekly Report",
  react: <ScrapingReport data={reportData} />,
});

Batch Sending

const { data } = await resend.batch.send([
  { from: "team@co.com", to: "user1@ex.com", subject: "Report 1", html: "..." },
  { from: "team@co.com", to: "user2@ex.com", subject: "Report 2", html: "..." },
  { from: "team@co.com", to: "user3@ex.com", subject: "Report 3", html: "..." },
]);

Webhooks: Track Delivery

// Listen for email events
app.post("/webhook/resend", async (req) => {
  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.clicked": console.log("Link clicked:", event.data.click.link); break;
    case "email.bounced": console.log("Bounced:", event.data.to); break;
  }
});

Domains API

// Add a domain
const domain = await resend.domains.create({ name: "yourdomain.com" });

// Verify domain
const verified = await resend.domains.verify(domain.id);

// List domains
const { data } = await resend.domains.list();