Prerequisites
To get the most out of this guide, you’ll need to:
1. Install
Get the Resend Node.js SDK.
2. Create an email template
Start by creating your email template on emails/email-template.tsx.
emails/email-template.tsx
import * as React from 'react';
interface EmailTemplateProps {
firstName: string;
}
export const EmailTemplate: React.FC<Readonly<EmailTemplateProps>> = ({
firstName,
}) => (
<div>
<h1>Welcome, {firstName}!</h1>
</div>
);
To use JSX/TSX with Hono, we need to modify the tsconfig.json.
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "react"
}
}
3. Send email using React
Create a new file index.tsx and send your first email.
import { Hono } from 'hono';
import { Resend } from 'resend';
import { EmailTemplate } from './emails/email-template';
const app = new Hono();
const resend = new Resend('re_123456789');
app.get('/', async (c) => {
const { data, error } = await resend.emails.send({
from: 'Acme <onboarding@resend.dev>',
to: ['delivered@resend.dev'],
subject: 'hello world',
react: <EmailTemplate firstName="John" />,
});
if (error) {
return c.json(error, 400);
}
return c.json(data);
});
export default app;
4. Try it yourself
Hono Example
See the full source code.
