Here are the emails almost every app ends up sending. Each example uses the same resend client you set up in Resend Basics.
Welcome Emails
When someone signs up, send them a friendly welcome. First impressions matter!
Example
await resend.emails.send({
from: 'hello@yourapp.com',
to: newUser.email,
subject: 'Welcome to YourApp!',
html: `
<h1>Welcome, ${newUser.name}!</h1>
<p>We're excited to have you. Here's how to get started...</p>
`
})
Password Reset Emails
For when people forget their password (which is all of us, constantly).
Example
await resend.emails.send({
from: 'security@yourapp.com',
to: user.email,
subject: 'Reset Your Password',
html: `
<p>Click the link below to reset your password:</p>
<a href="${resetLink}">Reset Password</a>
<p>This link expires in 1 hour.</p>
`
})
Order Confirmations
For online stores.
Example
await resend.emails.send({
from: 'orders@yourshop.com',
to: customer.email,
subject: `Order Confirmation #${order.id}`,
html: `
<h1>Thanks for your order!</h1>
<p>Order total: $${order.total}</p>
<p>We'll email you when it ships.</p>
`
})
Notifications
Keep people in the loop on what's happening.
Example
const escapeHtml = (value) => String(value).replace(/[&<>"']/g, char => ({
'&': '&', '<': '<', '>': '>', '"': '"', "'": '''
})[char])
await resend.emails.send({
from: 'notifications@yourapp.com',
to: user.email,
subject: 'Someone commented on your post',
html: `
<p>${escapeHtml(commenter.name)} commented on your post:</p>
<blockquote>${escapeHtml(comment.text)}</blockquote>
`
})
Escape any user-written text before placing it in HTML. Otherwise a comment can become markup in the email.
Side note. Every one of these needs an email address, and that list is worth more than people think. Build one. Email still works.
Making Emails Look Good
Plain HTML emails can look pretty bare. Resend works with React Email, a tool for building good-looking emails out of React components. Install it with npm install react-email (older tutorials import from @react-email/components, which is deprecated now).
Example
// emails/welcome.jsx
import { Html, Button, Text } from 'react-email'
export function WelcomeEmail({ name }) {
return (
<Html>
<Text>Welcome, {name}!</Text>
<Button href="https://yourapp.com/get-started">
Get Started
</Button>
</Html>
)
}
Then hand it to Resend with react instead of html. Call it like a function, not as a JSX tag, the way the Resend docs show.
Example
import { WelcomeEmail } from './emails/welcome'
await resend.emails.send({
from: 'hello@yourapp.com',
to: newUser.email,
subject: 'Welcome to YourApp!',
react: WelcomeEmail({ name: newUser.name })
})
You build email templates the same way you build web pages, so your emails come out looking professional and consistent.
