@hbertoson/astro-resend NPM

Astro Resend

This is an Astro integration that allows you to easily send email notifications for form submissions using Resend in an Astro project. The integration captures form data, generates an HTML email, and sends it to a specified recipient using Resend's API.

Features

Capture form submissions and send email notifications.
Generate unique identifiers for each form submission.
Supports custom headers such as X-Entity-Ref-ID and List-Unsubscribe.
Customizable email template with all submitted form fields.
Compatible with Astro's server-side routing and form handling.

Prerequisites

Before you can use this integration, you need to have a Resend account. You can sign up for a free account here.

Installation

Install the integration automatically using the Astro CLI:

pnpm astro add @hbertoson/astro-resend

npx astro add @hbertoson/astro-resend

yarn astro add @hbertoson/astro-resend

Or install it manually:

Install the required dependencies

pnpm add @hbertoson/astro-resend

npm install @hbertoson/astro-resend

yarn add @hbertoson/astro-resend

Add the integration to your astro config

+import resend from '@hbertoson/astro-resend'

export default defineConfig({
  integrations: [
+    resend({
        fromEmail: 'youremail@email.com',
        toEmail: 'youremail@email.com',
    }),
  ],
});

Configuration

`.env` File

You will need to add your API Key your .env file:

RESEND_API_KEY (required): Your Resend API key - this should be kept secret

Astro Config Options

verbose

Type: boolean
Default: false

Enable verbose logging.

fromEmail

Type: string
Default: onboarding@resend.dev

The email you want to use to send emails.

toEmail

Type: string
Default: onboarding@resend.dev

The email you want to receive emails at

preventThreading

Type: boolean
Default: false

Unique string to Prevent Threading on Gmail

unsubscribeUrl

Type: string

Link to unsubscribe

Usage/Examples

<body>
    <h1>Astro</h1>
    <form>
        <label for="name">Name</label>
        <input type="text" name="name" />
        <button type="submit">Submit</button>
    </form>
    <script>
        const form = document.querySelector('form');
        if (form) {
            form.addEventListener('submit', async (event) => {
                event.preventDefault();
                const formData = new FormData(form);
                const response = await fetch('/api', {
                    method: 'POST',
                    body: formData,
                });
                const data = await response.json();
                if (response.status === 200) {
                    alert('Form Submitted!');
                    form.reset();
                } else {
                    alert(data.error);
                }
            });
        }
    </script>
</body>

Roadmap

Support Multiple Recipients
Allow configuration for sending emails to multiple recipients.
- Enable dynamic recipient selection based on form input (e.g., department-specific notifications).
Enhance Documentation
- Add more examples for common use cases such as contact forms and feedback forms.
- Provide templates for common email formats.