Overview

For mails supastarter uses Maizzle, a framework for building HTML emails with Tailwind CSS.

Providers

In the packages/mail/provider folder you can find the available mail providers.

There are multiple providers available:

To select a provider, update the export in packages/mail/provider/index.ts:

export * from "./resend";
// or export * from './plunk';
// or export * from './postmark';
// or export * from './mailgun';
// or export * from './nodemailer';
// or export * from './console'; // for debugging

For debugging purposes you can set the mail provider to console. This will log the mail output only on the console and not send any mails.

Set from mail address

Next up, set the from mail address via the MAIL_FROM environment variable in your .env.local file. This is the mail address that will be used as the sender of all mails. Please make sure that the mail address and domain are verified in your mail provider.

MAIL_FROM="example@example.com"

Mail templates

All your mail templates are located in the packages/mail/emails folder. The templates use HTML with Tailwind CSS classes and a component-based layout system.

You can preview your email templates during development using the mail preview app at http://localhost:3005.

Create a mail template

To create a new mail template, create a new .html file in the packages/mail/emails directory:

---
bodyClass: bg-[#fafafe]
preheader: Your preheader text here
---

<component src="layouts/base.html">
  <p class="m-0 mb-4 text-base/6 text-slate-600">
    Hello {{ name }},
  </p>

  <p class="m-0 mb-4 text-base/6 text-slate-600">
    Your email content here.
  </p>
</component>

Templates use Maizzle's component system with a shared base layout in packages/mail/emails/layouts/base.html.

Register the mail template

Before you can use your new mail template, you have to register it in the packages/mail/util/templates.ts file, where you can also define the subject:

export const mailTemplates = {
  //...
  newMail: {
    file: "emails/NewMail.html",
    subject: "New Mail",
  },
};

Use the mail template

Now you can send a mail with your template using the sendEmail() method from the @repo/mail package (server-side only):

import { sendEmail } from "@repo/mail";

await sendEmail({
  to: "tim@apple.com",
  templateId: "newMail",
  context: {
    name: "Tim",
  },
});