Add a New Email Template

Add a transactional email. Templates are React components in packages/backend/convex/email/templates/, rendered with @react-email/render. The full pattern (styles, branding, previewing) is in Customizing Email Templates; this is the short path.

1. Create the template

Add email/templates/myNewEmail.tsx exporting the component plus an HTML and a plain-text render function:

export function MyNewEmail({ name, actionUrl }: MyNewEmailOptions) { /* ... */ }
export function renderMyNewEmail(args: MyNewEmailOptions) {
  return render(<MyNewEmail {...args} />);
}
export function renderMyNewEmailText({ name, actionUrl }: MyNewEmailOptions) {
  return `Hello ${name}!\n\n${actionUrl}`;
}

Use inline styles (email clients ignore CSS files) and parameterize the product name from the APP_NAME env var rather than hard-coding branding.

2. Send it through the facade

import { sendEmail } from "../email";
import { renderMyNewEmail, renderMyNewEmailText } from "../email/templates/myNewEmail";

await sendEmail(ctx, {
  to: user.email,
  subject: "Subject line",
  html: await renderMyNewEmail({ name, actionUrl }),
  text: renderMyNewEmailText({ name, actionUrl }),
});

Always provide text as a fallback. The facade is a no-op-safe boundary — see Resend for delivery configuration.

3. Preview while iterating

bun --cwd packages/email dev

Add a wrapper in packages/email/emails/ that imports your new backend template and passes sample props, so it renders in the browser. See React Email.