# SvelteKit

MuxForms on SvelteKit loads embed.js in src/app.html or +layout.svelte, uses onMount in +page.svelte to call MuxForms.mount, and allowlists your deployed origin (Vercel, Netlify, or Cloudflare).

## SvelteKit

| File | Role |
| --- | --- |
| app.html | Global script tag |
| routes/contact/+page.svelte | Mount target |
| +page.server.ts | Optional server POST |
| adapter | Public URL → allowlist |

## src/routes/contact/+page.svelte

```
<script lang="ts">
  import { onMount } from "svelte";
  let root: HTMLDivElement;

  onMount(() => {
    if (root) window.MuxForms?.mount(root);
  });
</script>

<h1>Contact</h1>
<div bind:this={root} data-form-id="FORM_UUID"></div>
```

## src/app.html

```
%sveltekit.body%
<script src="https://www.muxforms.com/embed.js" defer></script>
```

## FAQ

### After client-side goto?

onMount runs per navigation to /contact—sufficient for default embed observer too.

### Form actions?

Use +page.server.ts actions to POST with ingest secret instead of embed.

### Prerender?

Prerendered HTML still runs embed in browser; allowlist production URL.

### TypeScript window.MuxForms?

Optional global interface; mount is guarded with optional chaining.

---

HTML version: https://www.muxforms.com/docs/sveltekit
Source: MuxForms (https://www.muxforms.com)