DEV Community

Alex Spinov
Alex Spinov

Posted on

Resend Has a Free Email API That Replaces SendGrid — React Components for Email Templates

#email #api #react #webdev

The Email Problem

SendGrid's API is from 2012. Mailchimp's transactional email (Mandrill) requires a separate account. And email templates? You're writing HTML tables like it's 1999.

Resend gives you a modern email API. Plus React Email — build templates with JSX components.

What Resend Gives You

Simple API 

import { Resend } from 'resend';

const resend = new Resend('re_123456789');

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

React Email Templates 

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

export function WelcomeEmail({ name, loginUrl }: Props) {
  return (
    <Html>
      <Head />
      <Body style={{ fontFamily: 'sans-serif' }}>
        <Container>
          <Text>Hi {name},</Text>
          <Text>Welcome to our platform!</Text>
          <Button href={loginUrl} style={{
            background: '#000',
            color: '#fff',
            padding: '12px 20px',
            borderRadius: '5px',
          }}>
            Get Started
          </Button>
        </Container>
      </Body>
    </Html>
  );
}
Enter fullscreen mode Exit fullscreen mode

Preview in browser. Version control your templates. Use props for dynamic data.

Send React Templates 

import { WelcomeEmail } from './emails/welcome';

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

Batch Sending 

await resend.batch.send([
  { from: 'no-reply@app.com', to: 'user1@example.com', subject: 'Update', html: '...' },
  { from: 'no-reply@app.com', to: 'user2@example.com', subject: 'Update', html: '...' },
]);
Enter fullscreen mode Exit fullscreen mode

Webhooks 

app.post('/webhooks/resend', (req, res) => {
  const { type, data } = req.body;
  // type: 'email.delivered', 'email.opened', 'email.bounced', etc.
  console.log(`Email ${data.email_id}: ${type}`);
});
Enter fullscreen mode Exit fullscreen mode

Free Tier

  • 3,000 emails/month
  • 100 emails/day
  • 1 custom domain

Why This Matters

Email is the most important notification channel, yet the DX has been stuck in 2012. Resend brings email tooling to 2025 — React components, modern API, and webhooks that actually work.

Need to email data reports? Check out my web scraping actors on Apify Store — structured data for automated emails. For custom solutions, email spinov001@gmail.com.

Top comments (0)