DEV Community

Alex Spinov
Alex Spinov

Posted on

Resend Has a Free Email API That Makes SendGrid Feel Ancient

#resend #email #api #typescript

SendGrid's API is from 2012. Mailgun's docs are confusing. Postmark is expensive. Resend is a modern email API built for developers — clean SDK, React Email templates, and 3,000 free emails per month.

What Resend Gives You for Free

  • 3,000 emails/month on free tier
  • Modern SDK — TypeScript-first, clean API
  • React Email — build emails with React components
  • Webhooks — delivery, open, click, bounce events
  • Domain verification — custom from addresses
  • Analytics — open rates, click rates, delivery stats
  • API keys — fine-grained permissions

Quick Start 

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

const resend = new Resend('re_123456789');

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

React Email (Build Emails With Components) 

// emails/welcome.tsx
import { Html, Head, Body, Container, Text, Button, Img } from '@react-email/components';

export function WelcomeEmail({ name, loginUrl }: { name: string; loginUrl: string }) {
  return (
    <Html>
      <Head />
      <Body style={{ fontFamily: 'sans-serif', padding: '20px' }}>
        <Container>
          <Img src="https://yourapp.com/logo.png" width={120} />
          <Text style={{ fontSize: '24px', fontWeight: 'bold' }}>
            Welcome, {name}!
          </Text>
          <Text>Thanks for joining. Click below to get started:</Text>
          <Button
            href={loginUrl}
            style={{
              background: '#000',
              color: '#fff',
              padding: '12px 24px',
              borderRadius: '6px',
            }}
          >
            Go to Dashboard
          </Button>
        </Container>
      </Body>
    </Html>
  );
}
Enter fullscreen mode Exit fullscreen mode 
// Send with React component
import { WelcomeEmail } from './emails/welcome';

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

Webhooks (Track Everything) 

// Next.js API route for webhooks
export async function POST(req: Request) {
  const event = await req.json();

  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.bounced':
      await markEmailInvalid(event.data.to);
      break;
  }

  return new Response('OK');
}
Enter fullscreen mode Exit fullscreen mode

Batch Sending 

await resend.batch.send([
  {
    from: 'hello@yourapp.com',
    to: 'user1@example.com',
    subject: 'Weekly digest',
    html: digestHtml
  },
  {
    from: 'hello@yourapp.com',
    to: 'user2@example.com',
    subject: 'Weekly digest',
    html: digestHtml
  }
]);
Enter fullscreen mode Exit fullscreen mode

Resend vs SendGrid vs Mailgun vs Postmark

Feature Resend SendGrid Mailgun Postmark
Free emails/mo 3,000 100/day 1,000 100
React templates Built-in No No No
TypeScript SDK First-class Community Basic Basic
DX quality Excellent Dated Average Good
Webhooks Modern Legacy format Modern Good
Pricing (10K/mo) $20 $20 $15 $15

The Verdict

Resend is email infrastructure built for modern developers. Clean API, React Email templates, generous free tier, and a developer experience that makes email actually pleasant to work with.

Need help building production web scrapers or data pipelines? I build custom solutions. Reach out: spinov001@gmail.com

Check out my awesome-web-scraping collection — 400+ tools for extracting web data.

Top comments (0)