# Mount SuperDoc in SvelteKit

> Open, edit, and export a DOCX from a SvelteKit route with SuperDoc v2.




Mount SuperDoc after the SvelteKit route reaches the browser, then destroy the instance when the route unmounts.

## 1. Install SuperDoc [#1-install-superdoc]

From an existing SvelteKit application:

```bash
pnpm add superdoc
```

Download the sample DOCX and save it as `static/sample.docx`:

[Download the sample document](/fixtures/sample-nda.docx): Synthetic agreement with headings, paragraphs, and a list · DOCX


SvelteKit serves files in `static` from the root of the application, so SuperDoc can load it from `/sample.docx`.

## 2. Create the route [#2-create-the-route]

Replace `src/routes/+page.svelte` with the tested route from the SuperDoc example:

```svelte
<script lang="ts">
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

  let mount = $state<HTMLDivElement | null>(null);
  let ready = $state(false);
  let exporting = $state(false);

  let superdoc: SuperDoc | null = null;
  let exportingLock = false;

  $effect(() => {
    if (!mount) return;

    let active = true;
    let opened = false;
    let loadFailed = false;
    ready = false;

    const instance = new SuperDoc({
      selector: mount,
      document: '/sample.docx',
      onReady: () => {
        if (!active || loadFailed) return;
        opened = true;
        ready = true;
      },
      onException: ({ error }) => {
        if (!opened) {
          loadFailed = true;
          if (active) ready = false;
        }
        console.error('SuperDoc could not open the document.', error);
      },
    });
    superdoc = instance;

    return () => {
      active = false;
      if (superdoc === instance) superdoc = null;
      instance.destroy();
    };
  });

  async function exportDocument() {
    if (exportingLock) return;
    exportingLock = true;
    exporting = true;
    try {
      await superdoc?.export({ exportType: ['docx'], exportedName: 'sample-edited' });
    } catch (error) {
      console.error('SuperDoc could not export the document.', error);
    } finally {
      exportingLock = false;
      if (superdoc) exporting = false;
    }
  }
</script>

<svelte:head>
  <title>SuperDoc SvelteKit quickstart</title>
</svelte:head>

<main>
  <button disabled={!ready || exporting} onclick={() => void exportDocument()} type="button">
    Export DOCX
  </button>
  <div class="editor" bind:this={mount}></div>
</main>

<style>
  :global(html),
  :global(body) {
    min-height: 100%;
    margin: 0;
  }

  main {
    min-height: 100vh;
  }

  button {
    margin: 1rem;
  }

  .editor {
    height: calc(100vh - 4rem);
  }
</style>

```

The `$effect` waits until the mount element exists in the browser. `onReady` enables export after the DOCX opens, and the effect cleanup calls `destroy()` when SvelteKit removes the route.

The complete project is available at [go.superdoc.dev/examples/sveltekit](https://go.superdoc.dev/examples/sveltekit).

## 3. Edit and export [#3-edit-and-export]

Run `pnpm dev` and open the printed URL. Edit the document, then select **Export DOCX**.

> **Verification target (success)**
>
> Reopen `sample-edited.docx` in Word or SuperDoc. Your edit should be present, and the surrounding formatting should be
> unchanged.


Continue with [Load and save documents](/editor/load-and-save-documents), or decide [who renders the Editor UI](/editor/who-renders-the-ui).