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.
Create a Resend account at resend.com
Click API Keys > Create API Key in the dashboard, set the permissions to Send emails or Full access
Get the API key, and add it to .env file:
RESEND_API_KEY = YOUR-RESEND-API-KEY
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 sending email address, supportEmail is the support email address, and the email address suffix is your email domain.
The email system in MkSaaS is designed with the following components:
This modular structure makes it easy to extend the email system with new providers, templates, and components.
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
MkSaaS provides a simple email sending interface that supports both template-based emails and raw content:
MkSaaS includes several pre-built email templates for different use cases:
MkSaaS includes reusable email components in the src/mail/components directory to help build consistent email templates:
MkSaaS provides a preview email feature that allows you to preview emails before sending them:
This will start a local server that will allow you to preview the emails in your browser.
Create a React component as a email template in the src/mail/templates directory:
src/mail/templates/my-custom-email.tsx
Update the EmailTemplates interface in types.ts to include your new email template:
Add corresponding subject translations in your i18n messages if needed.
Preview your template locally:
Use the template in your code:
MkSaaS makes it easy to extend the email system with new providers:
Create a new file in the src/mail/provider directory
Implement the MailProvider interface from types.ts
Update the provider selection logic in index.ts
Example implementation for a new provider:
src/mail/provider/my-provider.ts Then update the provider selection in index.ts:
Now that you understand how to work with emails in MkSaaS, you might want to explore these related features:
websiteConfig
=
{
// ...other config
mail: {
provider: 'resend' , // Email provider to use
fromEmail: 'support@example.com' , // Sending email address
supportEmail: 'support@example.com' , // Support email address
},
// ...other config
}
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
});
{ 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 >
);
}
EmailTemplates
{
// ... existing templates
myCustomEmail : MyCustomEmail ;
}
({
to: 'user@example.com' ,
template: 'myCustomEmail' ,
context: {
username: 'John' ,
actionUrl: 'https://example.com/start' ,
},
});
{ 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' ;
}
}
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;
};
Configure environment variables
Email | MkSaaS - Make Your AI SaaS Product in a Weekend
MkSaaS Docs