Is there any way to store html template for emails with like {{username}} and etc, and I can call that for resend or something like that?
#is there any way for html templates for emails?
wary cipher
sour sableBOT
Hi @wary cipher. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Yes, you can use HTML templates for emails in Convex, especially when using the Resend component. There are two main approaches supported:
1. Using React Email for HTML Templates
Convex supports generating HTML email templates using React Email. You can create your email templates as React components (e.g., with placeholders like {{username}} replaced by props), render them to HTML, and send them via Resend. Here’s a simplified example:
// convex/emails.tsx
"use node";
import { action } from "./_generated/server";
import { render, pretty } from "@react-email/render";
import { Html } from "@react-email/components";
import { components } from "./_generated/api";
import { Resend } from "@convex-dev/resend";
export const resend: Resend = new Resend(components.resend, { testMode: false });
export const sendEmail = action({
args: { username: v.string(), to: v.string() },
handler: async (ctx, { username, to }) => {
const html = await pretty(
await render(
<Html>
<p>Hello {username}, welcome to our app!</p>
</Html>
)
);
await resend.sendEmail(ctx, {
from: "Me <[email protected]>",
to,
subject: "Welcome!",
html,
});
},
});
This approach allows you to use dynamic values (like username) in your templates by passing them as props to your React components. Note: This must run in a Convex Node Action ("use node";) due to React Email’s requirements Using React Email.
2. Manual HTML Templates with String Interpolation
Alternatively, you can manually store HTML templates as strings (in code or in your database) and use string interpolation to replace placeholders like {{username}} before sending. However, the knowledge sources do not provide a built-in Convex API for managing or storing templates with handlebars-style placeholders ({{username}}). You would need to implement the interpolation logic yourself before passing the final HTML to Resend.
Summary
- React Email is the recommended way for dynamic, maintainable HTML templates in Convex.
- You can pass variables (like
username) as props to your React components. - There is no built-in Convex API for storing and managing templates with
{{username}}-style placeholders, but you can implement this pattern yourself if needed.