Sending with Nodemailer

Relevant source files

The following files were used as context for generating this wiki page:

• skills/react-email/references/SENDING.md
• skills/react-email/SKILL.md
• README.md
• skills/react-email/TESTS.md
• skills/react-email/references/STYLING.md

Nodemailer serves as a flexible transport mechanism for delivering emails authored with React Email. While React Email provides the component-based authoring environment and rendering engine, Nodemailer handles the actual delivery via SMTP or other supported transport protocols.

This integration allows developers to use modern React components and TypeScript for email design while maintaining control over the delivery infrastructure. The process involves rendering React components into static HTML strings, which Nodemailer then accepts as the body content for outgoing messages.

Sources: README.md:92, skills/react-email/references/SENDING.md:1-5

Delivery Architecture and Data Flow

The architecture follows a linear pipeline where a React component is transformed into a standardized email format before delivery.

The diagram shows the transformation of a React-based template into email-ready formats (HTML and Plain Text) before being processed by the Nodemailer transport layer.

Sources: skills/react-email/references/SENDING.md:58-75, skills/react-email/SKILL.md:188-200

The Rendering Process

To send an email, you must first convert the React component into a string. The render function from the react-email package performs this conversion.

1. HTML Rendering: The engine processes the JSX, applies Tailwind styles as inline CSS (if the Tailwind component is used), and generates a standard HTML document.
2. Plain Text Rendering: Passing { plainText: true } to the render function generates a text-only version, which is critical for accessibility and reducing spam scores.

Sources: skills/react-email/SKILL.md:188-200, skills/react-email/references/SENDING.md:14-15

Implementation Components

Sending via Nodemailer requires two primary configuration steps: setting up the transport and executing the send command with the rendered content.

Transporter Configuration

You create a transporter object using nodemailer.createTransport. This object defines the connection settings for your email service provider.

Parameter	Description	Requirement
host	The SMTP server address (e.g., smtp.example.com)	Required
port	The connection port (e.g., 587 or 465)	Required
auth	Object containing user and pass credentials	Required

Sources: skills/react-email/references/SENDING.md:61-65

Sending Logic

Once the transporter is ready and the HTML is rendered, the sendMail method dispatches the message.

This sequence diagram illustrates the synchronous rendering of the template followed by the asynchronous delivery call via Nodemailer.

Sources: skills/react-email/references/SENDING.md:68-75

Core Features Summary

Feature	Implementation Detail
HTML Support	Transmits the rendered React component as the html property in the mail object.
Plain Text	Recommended for accessibility; rendered using the plainText: true option.
Custom Transports	Supports SMTP, SES, and other Nodemailer-compatible plugins.
Styling	React Email pre-inlines Tailwind CSS and resolves pixelBasedPreset before Nodemailer receives the string.

Sources: skills/react-email/references/SENDING.md:67-75, skills/react-email/SKILL.md:235-240, skills/react-email/references/STYLING.md:10-15

Code Implementation Example

The following snippet demonstrates the standard integration pattern using a React Email template with Nodemailer.

import { render } from 'react-email';
import nodemailer from 'nodemailer';
import { WelcomeEmail } from './emails/welcome';

// 1. Setup the Nodemailer transporter
const transporter = nodemailer.createTransport({
  host: 'smtp.example.com',
  port: 587,
  auth: { user: process.env.SMTP_USER, pass: process.env.SMTP_PASS }
});

// 2. Render the React Email component to HTML
const html = await render(<WelcomeEmail name="John" />);

// 3. Send the email
await transporter.sendMail({
  from: 'noreply@example.com',
  to: 'user@example.com',
  subject: 'Welcome',
  html
});

Sources: skills/react-email/references/SENDING.md:58-75

Best Practices for Nodemailer Integration

• Verified Domains: Always use a verified domain in the from address to ensure delivery and prevent spoofing flags.
• Plain Text Versions: Always provide a plain-text alternative. While some SDKs (like Resend) handle this automatically, Nodemailer requires an explicit text field in the sendMail parameters.
• Styling Constraints: Ensure that the Tailwind component uses the pixelBasedPreset. Email clients do not support rem units, and Nodemailer will deliver the string exactly as rendered.
• Accessibility: React Email components like <Markdown> and <Section> automatically add role="presentation" to layout tables, which Nodemailer preserves in the final delivery.

Sources: skills/react-email/references/SENDING.md:3-5, skills/react-email/SKILL.md:120-125, skills/react-email/TESTS.md:140-150, skills/react-email/references/STYLING.md:18-20

Summary

Sending with Nodemailer provides a robust, self-hosted alternative to managed email services while leveraging the developer experience of React Email. By rendering templates to strings and utilizing standard SMTP transports, you maintain full control over the message lifecycle from design to delivery.