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.
Early Access
Building AI agents that send email?
Join the SadaSend early access waitlist to get scoped API keys, recipient allowlists, and Model Context Protocol (MCP) servers upon launch.