Emails with Resend
Modern email API for transactional emails with React templates
Resend is a modern email API for sending transactional emails (e.g., order confirmations, password resets) with a simple, developer-friendly interface. It integrates easily with Hono.js for server-side email triggers and supports React for email template rendering.
Chosen for its reliability and alignment with modern JavaScript stacks, replacing complex SMTP setups. Perfect for sending order confirmations, welcome emails, and notifications in your e-commerce and social media applications.
- Simple API
Clean, intuitive API design
- React Templates
Build emails with React components
- TypeScript Support
Full type safety for email operations
- No SMTP Setup
Skip complex email server configuration
- High Deliverability
Optimized for inbox delivery
- Analytics
Track opens, clicks, and bounces
- Domain Authentication
SPF, DKIM, and DMARC support
- Webhooks
Real-time email event notifications
- • Order confirmations
- • Shipping notifications
- • Payment receipts
- • Abandoned cart reminders
- • Product recommendations
- • Return/refund confirmations
- • Welcome emails
- • Password reset links
- • Email verification
- • Account notifications
- • Security alerts
- • Newsletter subscriptions
Installation
npm install resendBasic Email Sending
import { Resend } from 'resend'
const resend = new Resend(process.env.RESEND_API_KEY)
// Send order confirmation
app.post('/api/orders/:id/confirm', async (c) => {
const orderId = c.req.param('id')
const order = await getOrder(orderId)
await resend.emails.send({
from: 'orders@yourstore.com',
to: order.user.email,
subject: `Order Confirmation #${order.id}`,
html: `
<h1>Thank you for your order!</h1>
<p>Order #${order.id} has been confirmed.</p>
<p>Total: $${order.total}</p>
`
})
return c.json({ success: true })
})React Email Template
// email-templates/OrderConfirmation.tsx
import { Html, Head, Body, Container, Text } from '@react-email/components'
interface OrderConfirmationProps {
orderId: string
customerName: string
total: number
items: Array<{ name: string; price: number; quantity: number }>
}
export default function OrderConfirmation({
orderId,
customerName,
total,
items
}: OrderConfirmationProps) {
return (
<Html>
<Head />
<Body style={{ fontFamily: 'Arial, sans-serif' }}>
<Container>
<Text style={{ fontSize: '24px', fontWeight: 'bold' }}>
Thank you for your order, {customerName}!
</Text>
<Text>Order #{orderId} has been confirmed.</Text>
{items.map((item, index) => (
<div key={index}>
<Text>{item.name} x {item.quantity} - 50</Text>
</div>
))}
<Text style={{ fontSize: '18px', fontWeight: 'bold' }}>
Total: 100
</Text>
</Container>
</Body>
</Html>
)
}
// Usage in API
const emailHtml = render(OrderConfirmation({
orderId: '123',
customerName: 'John Doe',
total: 100,
items: [
{ name: 'Product A', price: 50, quantity: 1 },
{ name: 'Product B', price: 50, quantity: 1 }
]
}))
console.log(emailHtml)