Mount SuperDoc in SvelteKit

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

1. Install SuperDoc

From an existing SvelteKit application:

pnpm add superdoc

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

Download the sample documentSynthetic agreement with headings, paragraphs, and a listDOCX

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

2. Create the route

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

<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.

3. Edit and export

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

Continue with Load and save documents, or decide who renders the Editor UI.

1. Install SuperDoc

2. Create the route

3. Edit and export

On this page