Reusable Email Templates
Create reusable email templates using MailMessage factory functions
Last updated:
Reusable Email Templates
You can create reusable email templates using factory functions that return configured MailMessage instances. This provides a clean way to organize and reuse email logic.
Basic Template Function
import { MailMessage } from "@visulima/email";
const createWelcomeEmail = (user: { name: string; email: string }) => {
return new MailMessage()
.to({ email: user.email, name: user.name })
.from({ email: "noreply@example.com" })
.subject(`Welcome, ${user.name}!`)
.html(`<h1>Welcome ${user.name}!</h1><p>Thanks for joining us.</p>`)
.text(`Welcome ${user.name}! Thanks for joining us.`);
};Using Template Functions
import { createMail, MailMessage } from "@visulima/email";
import { resendProvider } from "@visulima/email/providers/resend";
const mail = createMail(resendProvider({ apiKey: "re_xxx" }));
const message = createWelcomeEmail({ name: "John", email: "john@example.com" });
const result = await mail.send(message);Using Templates in Factory Functions
import { MailMessage } from "@visulima/email";
import { renderHandlebars } from "@visulima/email/template/handlebars";
const createWelcomeEmail = async (user: { name: string; email: string }) => {
const html = await renderHandlebars(
`
<h1>Welcome {{name}}!</h1>
<p>Thanks for joining us on {{date}}.</p>
`,
{
name: user.name,
date: new Date().toLocaleDateString(),
},
);
return new MailMessage().to({ email: user.email, name: user.name }).from({ email: "noreply@example.com" }).subject(`Welcome, ${user.name}!`).html(html);
};Complex Template Example
import { MailMessage } from "@visulima/email";
import { renderHandlebars } from "@visulima/email/template/handlebars";
import { readFile } from "node:fs/promises";
const createOrderConfirmationEmail = async (order: {
id: string;
customer: { name: string; email: string };
items: Array<{ name: string; price: number }>;
total: number;
}) => {
const html = await renderHandlebars(await readFile("./templates/order-confirmation.hbs", "utf-8"), { order });
const message = new MailMessage()
.to({ email: order.customer.email, name: order.customer.name })
.from({ email: "orders@example.com", name: "Order Confirmation" })
.subject(`Order Confirmation #${order.id}`)
.html(html);
await message.attachFromPath(`./invoices/${order.id}.pdf`, {
filename: `invoice-${order.id}.pdf`,
});
return message;
};Using Classes (Optional)
If you prefer a class-based approach, you can extend MailMessage:
import { MailMessage } from "@visulima/email";
class WelcomeEmail extends MailMessage {
constructor(user: { name: string; email: string }) {
super();
this.to({ email: user.email, name: user.name })
.from({ email: "noreply@example.com" })
.subject(`Welcome, ${user.name}!`)
.html(`<h1>Welcome ${user.name}!</h1><p>Thanks for joining us.</p>`)
.text(`Welcome ${user.name}! Thanks for joining us.`);
}
}
// Usage
const mail = createMail(resendProvider({ apiKey: "re_xxx" }));
const message = new WelcomeEmail({ name: "John", email: "john@example.com" });
await mail.send(message);Next Steps
- Building Messages - Learn the message builder API
- Attachments - Add attachments to your emails