This content originally appeared on DEV Community and was authored by Brent Arcane
I recently saw the Convex CEO, with all his free time, create a really nice Resend component for Convex. It handles things like batching, queuing, idempotency, rate limiting, etc. I wanted to try it out myself and immediately reached for React Email, which is what I use to create beautiful email templates.
I discovered that the Resend Convex component accepts either a string or HTML (as a string) for the email body. In order to render the React Email template as HTML, we can use the render function from React Email. The problem with this is that importing these React Email templates and helper functions requires the Node.js runtime. We can use the Node.js runtime in Convex by simply using the 'use node' directive. And since we're using the node runtime, we'll have to use an internalAction instead of an internalMutation.
Here's a fully functioning implementation of React Email using the official Convex Resend component:
'use node';
import { Resend } from '@convex-dev/resend';
import { render } from '@react-email/render';
import { v } from 'convex/values';
import { TestEmail } from '../../components/emails/test';
import { components } from '../_generated/api';
import { internalAction } from '../_generated/server';
export const resend: Resend = new Resend(components.resend, {
testMode: false,
});
export const sendTestEmail = internalAction({
args: {
to: v.string(),
name: v.optional(v.string())
},
handler: async (ctx, args) => {
// Render the template as a HTML string
const emailHtml = await render(
TestEmail({
name: args.name
})
);
// Send the email!
await resend.sendEmail(
ctx,
'Example <no-reply@example.com>',
`Your Recipient <${args.to}>`,
`Your email subject`,
emailHtml
);
},
});
This content originally appeared on DEV Community and was authored by Brent Arcane
Brent Arcane | Sciencx (2025-06-27T00:09:32+00:00) Using React Email with the Convex Resend component. Retrieved from https://www.scien.cx/2025/06/27/using-react-email-with-the-convex-resend-component/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.