# SvelteKit & Astro Email Integration: Modern Zero-Bloat Sending

_By Tayyab Mughal, Founder & AI Chief · 3 August 2026 · 2 min read_

> How to integrate transactional email into SvelteKit form actions and Astro server endpoints with zero JavaScript bundle overhead on the client.

Build ultra-lightweight contact forms and transactional email notifications in SvelteKit and Astro using server actions and edge endpoints.

## Zero-JS Client Footprint in Astro & SvelteKit

Both Astro and SvelteKit prioritize zero-JS architectures by default. Form submissions can be processed entirely on the server using SvelteKit Form Actions (+page.server.ts) or Astro API endpoints (pages/api/send.ts).

## SvelteKit Form Action Implementation (+page.server.ts)

Here is the complete SvelteKit server action handling form validation and email dispatch.

```typescript
import { fail } from '@sveltejs/kit';
import type { Actions } from './$types';
import { SADASEND_API_KEY } from '$env/static/private';

export const actions: Actions = {
  default: async ({ request }) => {
    const data = await request.formData();
    const email = data.get('email')?.toString();
    const message = data.get('message')?.toString();

    if (!email || !message) {
      return fail(400, { missing: true });
    }

    const res = await fetch('https://api.sadasend.com/v1/emails', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${SADASEND_API_KEY}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        to: email,
        subject: 'Thank you for reaching out',
        text: `We received your note: "${message}". Our team will reply shortly.`,
      }),
    });

    if (!res.ok) return fail(500, { failed: true });
    return { success: true };
  },
};
```

## Security note: Always use private environment variables

In SvelteKit, importing from $env/static/private guarantees the API key cannot be imported or leaked into client-side bundles.

---

_Tags: SvelteKit, Astro, TypeScript, WebDev_