Native Sending with Resend
Relevant source files
The following files were used as context for generating this wiki page:
Native sending with Resend refers to the first-class integration between React Email templates and the Resend email platform. This system allows you to send React components directly as email bodies without manually managing HTML conversion or plain-text alternatives in your application code. Resend is the recommended provider for the React Email ecosystem, offering optimized support for transactional and marketing emails.
Sources: README.md:104, skills/react-email/references/SENDING.md:7
Integration Methods
React Email supports three primary ways to send emails natively through Resend: using the Node.js SDK, utilizing Model Context Protocol (MCP) tools for AI agents, or managing templates via the CLI.
Resend Node.js SDK
The Node.js SDK simplifies the sending process by accepting a React component directly in the react property of the send method. The SDK automatically performs HTML rendering and generates a plain-text version for accessibility and spam filter compliance.
The diagram shows how the Resend Node SDK abstracts the rendering steps from the developer.
Sources: skills/react-email/references/SENDING.md:20-35, skills/react-email/SKILL.md:242-261
MCP Tooling for AI Agents
When using AI coding agents (such as Claude Code or GitHub Copilot), the React Email skill provides a dedicated MCP tool. This tool requires manual rendering of both HTML and plain-text versions using the render utility before calling the tool.
Sources: skills/react-email/references/SENDING.md:9-20
Template Management and Sending
You can upload templates to the Resend dashboard to separate email design from application logic. This is managed through the CLI and specific API calls.
- CLI Setup: You must run
npx react-email@latest resend setupto connect your local environment to your Resend account. - Template Upload: The UI allows for individual or bulk uploads. When re-uploading, the system matches templates by name to update them in place rather than creating duplicates.
- Sending by ID: Once uploaded, emails can be sent by referencing a unique
templateId.
Sources: skills/react-email/references/SENDING.md:41-65, packages/ui/CHANGELOG.md:54-58
Core Configuration and Requirements
Successful delivery requires specific configuration settings and environmental prerequisites.
Authentication and Domains
To send emails, you must provide a valid Resend API key, typically stored in the RESEND_API_KEY environment variable. Furthermore, you MUST use a verified domain in the from address. Using unverified domains or generic addresses without proper DNS configuration will result in delivery failure.
Sources: skills/react-email/references/SENDING.md:3-6, skills/react-email/references/SENDING.md:23
Dependency Management
Native sending requires the resend package in your project dependencies.
| Dependency | Purpose | Source |
|---|---|---|
resend | Core SDK for interacting with the Resend API | examples/resend/package.json:16 |
react-email | Provides the render utility for manual conversions | examples/resend/package.json:13 |
The send API Structure
The following parameters are required or optional when calling resend.emails.send():
| Parameter | Type | Description |
|---|---|---|
from | string | The sender's email address (Must be a verified domain) |
to | string[] | Array of recipient email addresses |
subject | string | The subject line of the email |
react | ReactElement | The React component to be sent (SDK only) |
template | object | Contains the id of a pre-uploaded template |
html | string | Raw HTML string (Used with MCP tools or raw API) |
text | string | Plain text alternative (Used with MCP tools or raw API) |
Sources: skills/react-email/references/SENDING.md:24-28, skills/react-email/references/SENDING.md:60-63, skills/react-email/SKILL.md:251-256
Rendering Logic
When not using the SDK's automatic react prop, you must use the render function from the react-email package.
- HTML Rendering: Use
await render(<Component />)to generate the standard email HTML. - Plain Text Rendering: Use
await render(<Component />, { plainText: true })to generate the text-only version. Plain text versions are critical for accessibility and ensuring the email is not flagged as spam.
The sequence shows the manual rendering flow required when not utilizing the react shorthand.
Sources: skills/react-email/references/SENDING.md:9-16, skills/react-email/SKILL.md:225-235, packages/render/CHANGELOG.md:129-140
Conclusion
Native sending with Resend provides the most streamlined developer experience for the React Email library by abstracting the complexities of email client compatibility and rendering. By leveraging the Resend SDK, developers can treat emails as standard React components while ensuring high deliverability through automatic plain-text generation and verified domain enforcement.
Sources: skills/react-email/SKILL.md:240-261, skills/react-email/references/SENDING.md:7-35