​
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.

tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react"
  }
}

​
3. Send email using React

Create a new file index.tsx and send your first email.

index.tsx
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.

Was this page helpful?

RedwoodJSBun