DEV Community

Alex Spinov
Alex Spinov

Posted on

Resend Has a Free API — Send Transactional Emails With React Components (No SMTP, No Templates)

#email #api #react #webdev

Most email APIs feel like they were designed in 2010. You write HTML strings, fight with SMTP configs, and debug rendering issues across 50 email clients.

Resend gives you a modern email API where you write emails as React components. Free tier: 3,000 emails/month, 100 emails/day. No credit card required.

Why Resend Is Different

Traditional email workflow:

Write HTML string → Test in 50 clients → Debug rendering → Fight SMTP → Pray it doesn't land in spam
Enter fullscreen mode Exit fullscreen mode

Resend workflow:

Write React component → Send via API → Done
Enter fullscreen mode Exit fullscreen mode

That's it. They handle deliverability, rendering, and infrastructure.

Quick Start (3 Minutes)

1. Get Your API Key

Sign up at resend.com. Free tier includes:

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

2. Send Your First Email (curl) 

curl -X POST https://api.resend.com/emails \
  -H "Authorization: Bearer re_YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "from": "you@yourdomain.com",
    "to": "user@example.com",
    "subject": "Welcome!",
    "html": "<h1>Hello World</h1><p>Your account is ready.</p>"
  }'
Enter fullscreen mode Exit fullscreen mode

Response:

{
  "id": "49a3999c-0ce1-4ea6-ab68-afcd6dc2e794"
}
Enter fullscreen mode Exit fullscreen mode

One API call. No SMTP. No connection pooling. No timeout handling.

3. Send Emails as React Components

This is where Resend shines. Install the SDK:

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

Create an email template:

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

export default function WelcomeEmail({ name }: { name: string }) {
  return (
    <Html>
      <Head />
      <Body style={{ fontFamily: 'sans-serif', background: '#f4f4f5' }}>
        <Container style={{ maxWidth: 600, margin: '0 auto', padding: 20 }}>
          <Text style={{ fontSize: 24, fontWeight: 'bold' }}>
            Welcome, {name}!
          </Text>
          <Text>Your account is ready. Here's what to do next:</Text>
          <Button
            href="https://app.example.com/dashboard"
            style={{ background: '#000', color: '#fff', padding: '12px 24px', borderRadius: 6 }}
          >
            Go to Dashboard
          </Button>
        </Container>
      </Body>
    </Html>
  );
}
Enter fullscreen mode Exit fullscreen mode

Send it:

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

const resend = new Resend('re_YOUR_API_KEY');

await resend.emails.send({
  from: 'you@yourdomain.com',
  to: 'user@example.com',
  subject: 'Welcome!',
  react: WelcomeEmail({ name: 'Alex' }),
});
Enter fullscreen mode Exit fullscreen mode

React components for emails. Type-safe. Hot reloadable. Version controlled.

Resend vs The Alternatives

Feature Resend SendGrid Mailgun SES
Free tier 3K/mo 100/day 5K/mo (trial) 62K/mo (from EC2)
React emails Native No No No
Setup time 2 min 15 min 10 min 30 min
SMTP config Not needed Required option Required option Required
Webhooks Yes Yes Yes Via SNS
API simplicity 1 endpoint Complex Complex Complex

4 Things You Can Build

1. Welcome Email Sequence

Trigger a series of onboarding emails when users sign up. React components make each email maintainable.

2. Invoice and Receipt System

Generate beautiful invoice emails with dynamic data — line items, totals, payment links.

3. Notification Service

Build a centralized notification service that sends formatted emails for any event in your app.

4. Newsletter Platform

Combine Resend with a simple database to build your own newsletter tool — no Mailchimp needed.

Python SDK Too 

import resend

resend.api_key = "re_YOUR_API_KEY"

params = {
    "from": "you@yourdomain.com",
    "to": ["user@example.com"],
    "subject": "Hello from Python",
    "html": "<p>This email was sent with Resend + Python</p>"
}

email = resend.Emails.send(params)
print(email)
Enter fullscreen mode Exit fullscreen mode

The Bottom Line

Email infrastructure should be invisible. Resend makes it invisible — and lets you write emails the same way you write your frontend.

3,000 free emails/month. React components. One API call. No SMTP.

If you're still configuring Nodemailer with Gmail SMTP credentials, there's a better way.

Need custom email automation, notification pipelines, or API integrations? I build tools that save dev teams hours. Email spinov001@gmail.com — or explore my developer resources.

More from me: Replicate Free API | Supabase Free Tier | awesome-web-scraping
Also: Neon Free Postgres | Vercel Free API | Hetzner 4x More Server
NEW: I Ran an AI Agent for 16 Days — What Works

Top comments (0)