superdoc · MeritonPylla · Jul 30, 2026
diff --git a/.github/workflows/ci-examples.yml b/.github/workflows/ci-examples.yml
@@ -94,7 +94,7 @@ jobs:
     strategy:
       fail-fast: true
       matrix:
-        example: [react, vue, vanilla, cdn, angular, nuxt, laravel, solid]
+        example: [react, vue, vanilla, cdn, angular, nuxt, laravel, solid, sveltekit]
     steps:
       - uses: actions/checkout@v6
 

diff --git a/examples/README.md b/examples/README.md
@@ -38,6 +38,7 @@ Framework starters. Pick one, run `pnpm install && pnpm dev`.
 | [angular](./getting-started/angular) | Angular setup |
 | [nextjs](./getting-started/nextjs) | Next.js (SSR-safe) |
 | [nuxt](./getting-started/nuxt) | Nuxt setup |
+| [sveltekit](./getting-started/sveltekit) | SvelteKit (SSR-safe) |
 | [laravel](./getting-started/laravel) | Laravel + Inertia |
 
 ## Editor

diff --git a/examples/getting-started/README.md b/examples/getting-started/README.md
@@ -8,6 +8,7 @@ Minimal examples for integrating SuperDoc into your project. Each example loads
 | [vue](./vue) | Vue 3 + TypeScript with Vite | [Guide](https://docs.superdoc.dev/getting-started/frameworks/vue) |
 | [nuxt](./nuxt) | Nuxt 4 + TypeScript with Vite | [Guide](https://docs.superdoc.dev/getting-started/frameworks/nuxt) |
 | [solid](./solid) | SolidJS + TypeScript with Vite | [Guide](https://docs.superdoc.dev/getting-started/frameworks/solid) |
+| [sveltekit](./sveltekit) | SvelteKit + TypeScript with Vite | [Guide](https://docs.superdoc.dev/getting-started/frameworks/sveltekit) |
 | [vanilla](./vanilla) | Plain JavaScript with Vite | [Guide](https://docs.superdoc.dev/getting-started/quickstart) |
 | [cdn](./cdn) | Zero build tools — just an HTML file | [Guide](https://docs.superdoc.dev/getting-started/quickstart) |
 

diff --git a/examples/getting-started/sveltekit/.gitignore b/examples/getting-started/sveltekit/.gitignore
@@ -0,0 +1,17 @@
+node_modules
+
+# SvelteKit
+/.svelte-kit
+/build
+/dist
+
+# Logs
+*.log
+
+# Env
+.env
+.env.*
+!.env.example
+
+# Misc
+.DS_Store
diff --git a/examples/getting-started/sveltekit/README.md b/examples/getting-started/sveltekit/README.md
@@ -0,0 +1,32 @@
+# SuperDoc — SvelteKit
+
+Minimal SvelteKit + TypeScript example.
+
+## Run
+
+```bash
+npm install
+npm run dev
+```
+
+Then open the dev server URL and pick a `.docx` file.
+
+## SSR
+
+SuperDoc is browser-only: instantiating it during SSR throws
+`ReferenceError: document is not defined`. Rather than turn SSR off for the
+whole app, this example scopes it to the one route that mounts the editor:
+
+```ts
+// src/routes/+page.ts
+export const ssr = false;
+```
+
+The rest of a real SvelteKit app keeps server-side rendering. The editor is
+created inside a `$effect` (client-only) once a file is chosen, and destroyed
+in the effect's cleanup.
+
+## Learn more
+
+- [SvelteKit page options](https://svelte.dev/docs/kit/page-options#ssr)
+- [Configuration Reference](https://docs.superdoc.dev/editor/superdoc/configuration)
diff --git a/examples/getting-started/sveltekit/package.json b/examples/getting-started/sveltekit/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "superdoc-sveltekit-example",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "prepare": "svelte-kit sync || echo ''"
+  },
+  "dependencies": {
+    "@superdoc-dev/fonts": "workspace:*",
+    "superdoc": "latest"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^3.3.1",
+    "@sveltejs/kit": "^2.22.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "svelte": "^5.25.0",
+    "svelte-check": "^4.1.0",
+    "typescript": "^5.7.0",
+    "vite": "^6.3.0"
+  }
+}
diff --git a/examples/getting-started/sveltekit/src/app.d.ts b/examples/getting-started/sveltekit/src/app.d.ts
@@ -0,0 +1,5 @@
+declare global {
+  namespace App {}
+}
+
+export {};
diff --git a/examples/getting-started/sveltekit/src/app.html b/examples/getting-started/sveltekit/src/app.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>
diff --git a/examples/getting-started/sveltekit/src/routes/+page.svelte b/examples/getting-started/sveltekit/src/routes/+page.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { SuperDoc } from 'superdoc';
+  import { superdocFonts } from '@superdoc-dev/fonts';
+  import 'superdoc/style.css';
+
+  let editor = $state<HTMLDivElement | null>(null);
+  let file = $state<File | null>(null);
+  let superdoc: SuperDoc | null = null;
+
+  function handleFile(event: Event) {
+    const input = event.target as HTMLInputElement;
+    file = input.files?.[0] ?? null;
+  }
+
+  $effect(() => {
+    if (!editor || !file) return;
+    superdoc = new SuperDoc({
+      selector: editor,
+      document: file,
+      fonts: superdocFonts,
+    });
+    return () => superdoc?.destroy();
+  });
+</script>
+
+<div class="toolbar">
+  <input type="file" accept=".docx" onchange={handleFile} />
+</div>
+<div class="editor" bind:this={editor}></div>
+
+<style>
+  .toolbar {
+    padding: 1rem;
+    background: #f5f5f5;
+  }
+
+  .editor {
+    height: calc(100vh - 60px);
+  }
+</style>
diff --git a/examples/getting-started/sveltekit/src/routes/+page.ts b/examples/getting-started/sveltekit/src/routes/+page.ts
@@ -0,0 +1,3 @@
+// SuperDoc renders in the browser only. Scope SSR off to THIS route so the
+// rest of a SvelteKit app keeps server-side rendering.
+export const ssr = false;
diff --git a/examples/getting-started/sveltekit/svelte.config.js b/examples/getting-started/sveltekit/svelte.config.js
@@ -0,0 +1,12 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  preprocess: vitePreprocess(),
+  kit: {
+    adapter: adapter(),
+  },
+};
+
+export default config;
diff --git a/examples/getting-started/sveltekit/tsconfig.json b/examples/getting-started/sveltekit/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "moduleResolution": "bundler"
+  }
+}
diff --git a/examples/getting-started/sveltekit/vite.config.ts b/examples/getting-started/sveltekit/vite.config.ts
@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [sveltekit()],
+});
diff --git a/examples/manifest.json b/examples/manifest.json
@@ -143,6 +143,22 @@
     "ci": true,
     "slug": "solid"
   },
+  {
+    "id": "getting-started-sveltekit",
+    "section": "getting-started",
+    "subsection": "frameworks",
+    "kind": "integration-example",
+    "status": "active",
+    "sourceKind": "local",
+    "title": "SvelteKit starter",
+    "category": "Getting Started",
+    "surface": "Frameworks",
+    "sourceRepo": "superdoc/docx-editor",
+    "sourcePath": "examples/getting-started/sveltekit",
+    "docs": "https://docs.superdoc.dev/getting-started/frameworks/sveltekit",
+    "ci": true,
+    "slug": "sveltekit"
+  },
   {
     "id": "editor-built-in-comments",
     "section": "editor",

diff --git a/go-links/published-slugs.json b/go-links/published-slugs.json
@@ -18,6 +18,7 @@
   "nuxt",
   "react",
   "solid",
+  "sveltekit",
   "template-builder",
   "theming",
   "toolbar",