Using React Email with the Convex Resend component

Brent Arcane — Fri, 27 Jun 2025 00:09:32 +0000

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
    );
  },
});

DEV Community: Brent Arcane

Using React Email with the Convex Resend component