Astro Mailer is an Astro integration that enables you to send email notifications via any SMTP service using Nodemailer. This is perfect for handling form submissions, alerts, or transactional messages in your Astro project.
- Send email notifications from your Astro site using SMTP.
- Capture form data and pass it into customizable email templates.
- Supports custom headers such as
X-Entity-Ref-IDandList-Unsubscribe. - Compatible with Astro’s server-side routing and form handling.
- Flexible SMTP configuration for any provider (e.g., Gmail, SendGrid, Mailgun, etc).
You’ll need access to any SMTP server. For example:
- Gmail
- SendGrid
- Amazon SES
- Mailgun
- SMTP2GO
- Postmark
- Mailjet
- Zoho Mail
- Office 365
- Any other SMTP service
Install via the Astro CLI:
pnpm astro add @hbertoson/astro-mailernpm astro add @hbertoson/astro-maileryarn astro add @hbertoson/astro-mailerOr manually:
- Install dependencies:
pnpm add @hbertoson/astro-mailer- Add it to your Astro config:
import mailer from '@hbertoson/astro-mailer';
export default defineConfig({
integrations: [
mailer({
smtp: {
host: 'smtp.example.com',
},
templates: {
welcome: './src/components/emails/WelcomeEmail.astro',
},
}),
],
});SMTP_USER=your@email.com
SMTP_PASS=yourpassword
FROM_EMAIL=no-reply@yourdomain.com| Option | Type | Required | Description |
|---|---|---|---|
fromEmail |
string |
✅ | Sender email address |
smtp |
object |
✅ | SMTP configuration for Nodemailer |
templates |
object |
✅ | Named Astro components for emails |
preventThreading |
boolean |
❌ | Prevent Gmail threading |
unsubscribeUrl |
string |
❌ | Add List-Unsubscribe header |
verbose |
boolean |
❌ | Enable debug logging |
<body>
<h1>Astro Mailer</h1>
<button>Send Email</button>
<script>
const button = document.querySelector('button') as HTMLButtonElement;
button.addEventListener('click', async () => {
const emailData: BaseEmailRequest = {
to: 'dev@hunterbertoson.tech',
subject: 'Test Email',
templateName: 'email',
props: {
name: 'Hunter',
content: 'This is a test email. From my Astro Mailer Integration',
},
};
const res = await fetch('api/email', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(emailData),
});
if (res.ok) {
const data = await res.json();
console.log('Email sent successfully:', data);
} else {
console.error('Error sending email:', res.statusText);
}
});
</script>
</body>- [ ] Add CC and BCC support
- [ ] Async form binding example
- [ ] File attachments
- [ ] Email queues with retry
- [ ] SMTP transport pool option
This repo is structured as a monorepo:
-
playground: example Astro project to test the integration -
package: source code of the integration
Start developing:
pnpm i --frozen-lockfile
pnpm dev