Send email from SvelteKit with a form action or an endpoint.

1. Create one server-side client.

   Read the key from $env/static/private in a module under src/lib/server. SvelteKit refuses to import either into client code, and a missing variable fails the build instead of failing at the first send.

   .env

   # .env (never committed). No PUBLIC_ prefix: private stays on the server.
   NOTIX_API_KEY=nx_live_...
   NOTIX_WEBHOOK_SECRET=whsec_...
   

   src/lib/server/notix.ts

   // src/lib/server/notix.ts
   import { NOTIX_API_KEY } from "$env/static/private";
   import { Notix } from "notix-js";
   
   // Anything under src/lib/server can only be imported by server code;
   // SvelteKit refuses the import from a component at build time.
   export const notix = new Notix(NOTIX_API_KEY);
   

2. Add a form action for your own forms.

   The action receives the FormData, validates, sends and returns plain data the page renders. fail carries a status and the error back to the form without a redirect, and the form works before JavaScript loads.

   src/routes/contact/+page.server.ts

   // src/routes/contact/+page.server.ts
   import { fail } from "@sveltejs/kit";
   import { notix } from "$lib/server/notix";
   import type { Actions } from "./$types";
   
   export const actions: Actions = {
     default: async ({ request }) => {
       const form = await request.formData();
       const email = String(form.get("email") ?? "");
       const message = String(form.get("message") ?? "");
   
       if (!email.includes("@") || message.length < 10) {
         return fail(400, { error: "Add a valid email and a message." });
       }
   
       const { error } = await notix.emails.send({
         from: "contact@acme.com",
         to: "hello@acme.com",
         replyTo: email,
         subject: `New message from ${email}`,
         text: message,
       });
   
       if (error) {
         return fail(502, { error: error.message });
       }
       return { ok: true };
     },
   };
   

   src/routes/contact/+page.svelte

   <!-- src/routes/contact/+page.svelte -->
   <script lang="ts">
     import { enhance } from "$app/forms";
     let { form } = $props();
     let pending = $state(false);
   </script>
   
   <form method="POST" use:enhance={() => { pending = true; return async ({ update }) => { await update(); pending = false; }; }}>
     <input name="email" type="email" required placeholder="you@example.com" />
     <textarea name="message" required minlength="10"></textarea>
     <button type="submit" disabled={pending}>{pending ? "Sending…" : "Send"}</button>
     {#if form?.ok}<p>Thanks, we got it.</p>{/if}
     {#if form?.error}<p role="alert">{form.error}</p>{/if}
   </form>
   

3. Add an endpoint for everything else.

   A +server.ts file exports a handler per method. The SDK answers { data, error }, so a failed send is a value you check; the fetch tab is the same call without the dependency.

   +server.ts (SDK)+server.ts (fetch)

   src/routes/api/send/+server.ts

   // src/routes/api/send/+server.ts
   import { json } from "@sveltejs/kit";
   import { notix } from "$lib/server/notix";
   import type { RequestHandler } from "./$types";
   
   export const POST: RequestHandler = async ({ request }) => {
     const { to, subject, html, orderId } = await request.json();
   
     const { data, error } = await notix.emails.send(
       { from: "receipts@acme.com", to, subject, html },
       // A retried request with the same key returns the first message.
       { idempotencyKey: `order-${orderId}-receipt` },
     );
   
     if (error) {
       return json({ error }, { status: 502 });
     }
     return json({ id: data?.emailId });
   };
   

4. Receive delivery events.

   Add an endpoint for email.delivered, email.bounced and email.complained. Read the body as text, verify with constructEvent, and store the outcome against your own record.

   src/routes/api/webhooks/notix/+server.ts

   // src/routes/api/webhooks/notix/+server.ts
   import { NOTIX_WEBHOOK_SECRET } from "$env/static/private";
   import { notix } from "$lib/server/notix";
   import type { RequestHandler } from "./$types";
   
   const webhooks = notix.webhooks(NOTIX_WEBHOOK_SECRET);
   
   export const POST: RequestHandler = async ({ request }) => {
     // The signature covers the exact bytes: read text, not json.
     const rawBody = await request.text();
   
     let event;
     try {
       event = webhooks.constructEvent(rawBody, { headers: request.headers });
     } catch (error) {
       return new Response((error as Error).message, { status: 400 });
     }
   
     switch (event.type) {
       case "email.delivered":
       case "email.bounced":
       case "email.complained":
         // Record the outcome against your own order or user id here.
         break;
     }
     return new Response("ok");
   };
   

5. Send one and read it back.

   Submit the form, then open the message in the dashboard: the log shows its status and every event as delivery progresses.

The Next.js guide is the same flow with server actions, and the magic link use case is the natural next step for a SvelteKit sign-in. The free plan does not ask for a card.