Skip to main content

React Email

TST, Hongkong


npx create-next-app react-mail
cd react-mail
mkdir emails
npm install react-email @react-email/components @react-email/tailwind-E

Writing an React Email Template


import React from 'react'
import { Body, Button, CodeBlock, Container, dracula, Head, Heading, Hr, Html, Preview, Tailwind, Text } from '@react-email/components'

export default function TestEmail() {
const code = `export default async (req, res) => {
try {
const html = await renderAsync(
EmailTemplate({ firstName: 'John' })
return NextResponse.json({ html });
} catch (error) {
return NextResponse.json({ error });
return (
<Head />
<Preview>Test Email</Preview>
<Body className="bg-white text-black font-sans">
<Container className="mt-8 p-10 mx-auto">
<Heading as="h2">Lorem ipsum</Heading>
<Text>This is a Test Email</Text>
lineNumbers // add this so that there are line numbers beside each code line
className="bg-green-700 text-white px-4 py-2 mb-4"
Go Somewhere
<Hr className="my-4"/>
<Text className='text-gray-400'>Footer text...</Text>

Dev Preview

Add the following script to the package.json file:

"email": "email dev"

And start the dev server with npm run email:

npm run email

react-email@0.1.0 email
email dev

React Email 2.1.1
Running preview at: http://localhost:3000

React Email

Note: The <Heading /> component is currently not shown - apparently this is already fixed in the latest canary release!

The mail can be send using Resend by clicking on the Send button. It can also be copy&pasted from the HTML preview into e.g. GMAIL:

React Email