LogoMkSaaS Docs

Email

Learn how to set up and use email functionality with Resend and React Email templates

MkSaaS uses Resend for email delivery and React Email for creating beautiful email templates. This combination provides a modern, developer-friendly way to handle email communications in your application.

Setup

  1. Create a Resend account at resend.com
  2. Click API Keys > Create API Key in the dashboard, set the permissions to Send emails or Full access
  3. Get the API key, and add it to .env file:
.env
RESEND_API_KEY=re_...
  1. Update the website.tsx file to use Resend as the email provider, and set the default sender email address:

Please note that fromEmail is the default sender email address, and the email address suffix is your email domain.

src/config/website.tsx
export const websiteConfig = {
  // ...other config
  mail: {
    provider: 'resend', // Email provider to use
    fromEmail: 'contact@example.com', // Default sender email address
  },
  // ...other config
}

If you are setting up the environment, now you can go back to the Environment Setup guide and continue. The rest of this guide can be read later.

Environment Setup

Set up environment variables

Email System Structure

The email system in MkSaaS is designed with the following components:

resend.ts
index.ts
types.ts
README.md

This modular structure makes it easy to extend the email system with new providers, templates, and components.

Core Features

  • Transactional email sending with Resend integration
  • Beautiful email templates built with React Email
  • Pre-built templates for verification, password reset, and contact forms
  • Internationalization support with multi-language email templates
  • Reusable email components (layout, buttons, etc.)
  • Modular architecture for easy provider switching
  • Developer tools for email preview and testing, support local preview and test

Usage

MkSaaS provides a simple email sending interface that supports both template-based emails and raw content:

import { sendEmail } from '@/mail';

// Send email using a template
await sendEmail({
  to: 'user@example.com',
  template: 'verifyEmail',
  context: {
    name: 'John Doe',
    url: 'https://example.com/verify?token=abc123',
  },
  locale: 'en', // Optional, defaults to config default locale
});

// Send raw email
await sendEmail({
  to: 'user@example.com',
  subject: 'Welcome to our platform',
  html: '<h1>Hello!</h1><p>Welcome to our platform.</p>',
  text: 'Hello! Welcome to our platform.', // Optional
});

Email Templates

MkSaaS includes several pre-built email templates for different use cases:

Email Components

MkSaaS includes reusable email components in the src/mail/components directory to help build consistent email templates:

Preview Emails

MkSaaS provides a preview email feature that allows you to preview emails before sending them:

pnpm run email

This will start a local server that will allow you to preview the emails in your browser.

preview email

Customization

Creating Custom Templates

  1. Create a React component as a email template in the src/mail/templates directory:
src/mail/templates/my-custom-email.tsx
import { BaseEmailProps } from '@/mail/types';
import { EmailLayout } from '../components/email-layout';
import { EmailButton } from '../components/email-button';

interface MyCustomEmailProps extends BaseEmailProps {
  username: string;
  actionUrl: string;
}

export function MyCustomEmail({
  username,
  actionUrl,
  messages,
  locale
}: MyCustomEmailProps) {
  return (
    <EmailLayout>
      <p>Hello {username}!</p>
      <p>Thanks for joining our platform. Click the button below to get started.</p>
      <EmailButton href={actionUrl}>Get Started</EmailButton>
    </EmailLayout>
  );
}
  1. Update the EmailTemplates interface in types.ts to include your new email template:
src/mail/types.ts
export interface EmailTemplates {
  // ... existing templates
  myCustomEmail: MyCustomEmail;
}

  1. Add corresponding subject translations in your i18n messages if needed.

  2. Preview your template locally:

pnpm run email
npm run email
yarn email
bun run email
  1. Use the template in your code:
await sendEmail({
  to: 'user@example.com',
  template: 'myCustomEmail',
  context: {
    username: 'John',
    actionUrl: 'https://example.com/start',
  },
});

Creating a New Email Provider

MkSaaS makes it easy to extend the email system with new providers:

  1. Create a new file in the src/mail/provider directory
  2. Implement the MailProvider interface from types.ts
  3. Update the provider selection logic in index.ts

Example implementation for a new provider:

src/mail/provider/my-provider.ts
import { MailProvider, SendEmailResult, SendRawEmailParams, SendTemplateParams } from '@/mail/types';

export class MyProvider implements MailProvider {
  constructor() {
    // Initialize your provider
  }

  public async sendTemplate(params: SendTemplateParams): Promise<SendEmailResult> {
    // Implementation for sending template emails
  }

  public async sendRawEmail(params: SendRawEmailParams): Promise<SendEmailResult> {
    // Implementation for sending raw emails
  }

  public getProviderName(): string {
    return 'my-provider';
  }
}

Then update the provider selection in index.ts:

src/mail/index.ts
import { MyProvider } from './provider/my-provider';

export const initializeMailProvider = (): MailProvider => {
  if (!mailProvider) {
    if (websiteConfig.mail.provider === 'resend') {
      mailProvider = new ResendProvider();
    } else if (websiteConfig.mail.provider === 'custom') {
      mailProvider = new CustomMailProvider();
    } else {
      throw new Error(
        `Unsupported mail provider: ${websiteConfig.mail.provider}`
      );
    }
  }

  return mailProvider;
};

Video Tutorial

Next Steps

Now that you understand how to work with emails in MkSaaS, you might want to explore these related features:

Database

Configure database

Authentication

Configure user authentication

Newsletter

Configure newsletter

Environment Setup

Configure environment variables

Authentication

Learn how to set up and use authentication with Better Auth in MkSaaS

Newsletter

Learn how to set up and use Resend for newsletter management