Send React Emails - Tutorial 2026

Install and Requirements

You will need to install @react-email/render and nodemailer npm dependencies:

npm install @react-email/render nodemailer

Source Code and Example

Create your email template with a .jsx or a .js file:

// email.jsx
import * as React from 'react';
import { Html } from '@react-email/html';
import { Button } from '@react-email/button';

export function Email(props) {
  const { url } = props;

  return (
    <Html lang="en">
      <Button href={url}>Visit our website</Button>
    </Html>
  );
}

In this example, we use the Nodemailer library and its official sponsor Forward Email to send and preview outbound mail.

You will need to Generate Password to send outbound mail. Please follow our Send Email with Custom Domain SMTP Guide.

// app.js
import { render } from '@react-email/render';
import nodemailer from 'nodemailer';
import { Email } from './email';

const transporter = nodemailer.createTransport({
  host: 'smtp.forwardemail.net',
  port: 465,
  secure: true,
  auth: {
    // TODO: replace `user` and `pass` values from:
    // <https://forwardemail.net/guides/send-email-with-custom-domain-smtp>
    user: 'you@example.com',
    pass: '****************************'
  },
});

const html = render(Email({ url: "https://example.com" }));

const options = {
  from: 'you@example.com',
  to: 'user@gmail.com',
  subject: 'hello world',
  html
};

transporter.sendMail(options);

Run the app to send the email:

node app

Now you can go to My Account → Emails to see your real-time email delivery status, email deliverability logs, and HTML/plaintext/attachment previews.

P.S. 🎉 You can also preview emails in browsers and the iOS Simulator and create email templates with Node.js.