From 02a7a36cd3200639b2f167b3b95a5892803c5d1f Mon Sep 17 00:00:00 2001
From: dangreen <danon0404@gmail.com>
Date: Sat, 9 May 2026 15:15:18 +0400
Subject: [PATCH] docs: svelte adapters

---
 README.md                                     |  18 +
 .../src/content/docs/examples/event-board.mdx |  12 +
 .../content/docs/examples/rick-and-morty.mdx  |  12 +
 website/src/content/docs/examples/session.mdx |   4 +
 .../content/docs/getting-started/index.mdx    |   5 +-
 .../src/content/docs/integrations/index.mdx   |   3 +
 .../content/docs/integrations/next-router.mdx |   2 +-
 .../src/content/docs/integrations/next.mdx    |   2 +-
 .../docs/integrations/svelte-router.mdx       | 407 ++++++++++++++++++
 .../content/docs/integrations/svelte-ssr.mdx  | 184 ++++++++
 .../src/content/docs/integrations/svelte.mdx  |  98 +++++
 11 files changed, 743 insertions(+), 4 deletions(-)
 create mode 100644 website/src/content/docs/integrations/svelte-router.mdx
 create mode 100644 website/src/content/docs/integrations/svelte-ssr.mdx
 create mode 100644 website/src/content/docs/integrations/svelte.mdx

diff --git a/README.md b/README.md
index 6f5f81e8..a318d3de 100644
--- a/README.md
+++ b/README.md
@@ -21,6 +21,9 @@ A lightweight, modular, and performant state management ecosystem for building m
 | [`@nano_kit/preact`](packages/preact#readme) | Preact integration for @nano_kit/store. | [![NPM version][preact-npm]][preact-npm-url] |
 | [`@nano_kit/preact-router`](packages/preact-router#readme) | Preact integration for @nano_kit/router. | [![NPM version][preact-router-npm]][preact-router-npm-url] |
 | [`@nano_kit/preact-ssr`](packages/preact-ssr#readme) | Preact adapter for server-side rendering capabilities. | [![NPM version][preact-ssr-npm]][preact-ssr-npm-url] |
+| [`@nano_kit/svelte`](packages/svelte#readme) | Svelte integration for @nano_kit/store. | [![NPM version][svelte-npm]][svelte-npm-url] |
+| [`@nano_kit/svelte-router`](packages/svelte-router#readme) | Svelte integration for @nano_kit/router. | [![NPM version][svelte-router-npm]][svelte-router-npm-url] |
+| [`@nano_kit/svelte-ssr`](packages/svelte-ssr#readme) | Svelte adapter for server-side rendering capabilities. | [![NPM version][svelte-ssr-npm]][svelte-ssr-npm-url] |
 | [`@nano_kit/next-router`](packages/next-router#readme) | Next.js integration for @nano_kit/router. | [![NPM version][next-router-npm]][next-router-npm-url] |
 
 <!-- nanoviews -->
@@ -98,6 +101,21 @@ A lightweight, modular, and performant state management ecosystem for building m
 [preact-ssr-npm]: https://img.shields.io/npm/v/%40nano_kit%2Fpreact-ssr.svg
 [preact-ssr-npm-url]: https://npmjs.com/package/@nano_kit/preact-ssr
 
+<!-- svelte -->
+
+[svelte-npm]: https://img.shields.io/npm/v/%40nano_kit%2Fsvelte.svg
+[svelte-npm-url]: https://npmjs.com/package/@nano_kit/svelte
+
+<!-- svelte-router -->
+
+[svelte-router-npm]: https://img.shields.io/npm/v/%40nano_kit%2Fsvelte-router.svg
+[svelte-router-npm-url]: https://npmjs.com/package/@nano_kit/svelte-router
+
+<!-- svelte-ssr -->
+
+[svelte-ssr-npm]: https://img.shields.io/npm/v/%40nano_kit%2Fsvelte-ssr.svg
+[svelte-ssr-npm-url]: https://npmjs.com/package/@nano_kit/svelte-ssr
+
 <!-- next-router -->
 
 [next-router-npm]: https://img.shields.io/npm/v/%40nano_kit%2Fnext-router.svg
diff --git a/website/src/content/docs/examples/event-board.mdx b/website/src/content/docs/examples/event-board.mdx
index a583dcc1..aace9c42 100644
--- a/website/src/content/docs/examples/event-board.mdx
+++ b/website/src/content/docs/examples/event-board.mdx
@@ -38,4 +38,16 @@ The Nano Kit tutorial uses this app as its running project.
 
     [View source on GitHub](https://github.com/TrigenSoftware/nano_kit/tree/main/examples/event-board/preact-nano_kit-ssr)
   </TabItem>
+  <TabItem label='Svelte SSR' icon='seti:svelte'>
+    <iframe
+      src='https://stackblitz.com/github/TrigenSoftware/nano_kit/tree/main/examples/event-board/svelte-nano_kit-ssr?embed=1&file=src%2Findex.ts&view=both'
+      loading='lazy'
+      style='width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;'
+      title='Event Board built with Svelte SSR and Nano Kit'
+      allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'
+      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'
+    />
+
+    [View source on GitHub](https://github.com/TrigenSoftware/nano_kit/tree/main/examples/event-board/svelte-nano_kit-ssr)
+  </TabItem>
 </Tabs>
diff --git a/website/src/content/docs/examples/rick-and-morty.mdx b/website/src/content/docs/examples/rick-and-morty.mdx
index fa999896..35a5c7cd 100644
--- a/website/src/content/docs/examples/rick-and-morty.mdx
+++ b/website/src/content/docs/examples/rick-and-morty.mdx
@@ -24,6 +24,18 @@ Compare the tabs to see the same application model running with React SSR, Next.
 
     [View source on GitHub](https://github.com/TrigenSoftware/nano_kit/tree/main/examples/rick-and-morty/react-nano_kit-ssr)
   </TabItem>
+  <TabItem label='Svelte SSR' icon='seti:svelte'>
+    <iframe
+      src='https://stackblitz.com/github/TrigenSoftware/nano_kit/tree/main/examples/rick-and-morty/svelte-nano_kit-ssr?embed=1&file=src/index.ts&view=both'
+      loading='lazy'
+      style='width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;'
+      title='Rick and Morty Encyclopedia built with Svelte SSR and Nano Kit'
+      allow='accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking'
+      sandbox='allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts'
+    />
+
+    [View source on GitHub](https://github.com/TrigenSoftware/nano_kit/tree/main/examples/rick-and-morty/svelte-nano_kit-ssr)
+  </TabItem>
   <TabItem label='Next.js App Router' icon='vercel'>
     <iframe
       src='https://codesandbox.io/p/sandbox/github/TrigenSoftware/nano_kit/tree/main/examples/rick-and-morty/next-app-nano_kit-ssr?embed=1&file=%2Fsrc%2Fapp%2Flayout.tsx'
diff --git a/website/src/content/docs/examples/session.mdx b/website/src/content/docs/examples/session.mdx
index 19774c1f..b1e16186 100644
--- a/website/src/content/docs/examples/session.mdx
+++ b/website/src/content/docs/examples/session.mdx
@@ -5,10 +5,14 @@ sidebar:
   order: 6
 ---
 
+import { Aside } from '@astrojs/starlight/components'
+
 This example shows a small React SSR app that keeps a username in a `session` cookie.
 
 It demonstrates request-bound cookie state, `cookieStored`, SSR rendering from incoming cookies, server-side cookie deletion on `/logout`, redirect handling, and hydration without mismatches.
 
+<Aside>StackBlitz runs this example in a sandbox with a fake cookie implementation, so session behavior can be slightly inaccurate there.</Aside>
+
 <iframe
   src='https://stackblitz.com/github/TrigenSoftware/nano_kit/tree/main/examples/session/react-nano_kit-ssr?embed=1&file=src%2Findex.tsx&view=both'
   loading='lazy'
diff --git a/website/src/content/docs/getting-started/index.mdx b/website/src/content/docs/getting-started/index.mdx
index d40a1e84..07752e24 100644
--- a/website/src/content/docs/getting-started/index.mdx
+++ b/website/src/content/docs/getting-started/index.mdx
@@ -62,10 +62,11 @@ unsub()
 | [@nano_kit/preact](/integrations/preact) | Preact integration for @nano_kit/store. |
 | [@nano_kit/preact-router](/integrations/preact-router) | Preact integration for @nano_kit/router. |
 | [@nano_kit/preact-ssr](/integrations/preact-ssr) | Preact SSR adapter for @nano_kit/ssr. |
+| [@nano_kit/svelte](/integrations/svelte) | Svelte integration for @nano_kit/store. |
+| [@nano_kit/svelte-router](/integrations/svelte-router) | Svelte integration for @nano_kit/router. |
+| [@nano_kit/svelte-ssr](/integrations/svelte-ssr) | Svelte SSR adapter for @nano_kit/ssr. |
 | [@nano_kit/next-router](/integrations/next-router) | Next.js integration for @nano_kit/router. |
 
-<Aside>Nano Kit is currently in **beta**. More adapters are coming later.</Aside>
-
 ## Motivation
 
 Nano Kit is built on the philosophy of [Nano Stores](https://github.com/nanostores/nanostores) and extends its core ideas:
diff --git a/website/src/content/docs/integrations/index.mdx b/website/src/content/docs/integrations/index.mdx
index 8c964863..eb3d24e2 100644
--- a/website/src/content/docs/integrations/index.mdx
+++ b/website/src/content/docs/integrations/index.mdx
@@ -15,4 +15,7 @@ Nano Kit keeps its core framework-agnostic, then adds thin adapters for renderin
 | [@nano_kit/preact](/integrations/preact) | Preact integration for @nano_kit/store. |
 | [@nano_kit/preact-router](/integrations/preact-router) | Preact integration for @nano_kit/router. |
 | [@nano_kit/preact-ssr](/integrations/preact-ssr) | Preact SSR adapter for @nano_kit/ssr. |
+| [@nano_kit/svelte](/integrations/svelte) | Svelte integration for @nano_kit/store. |
+| [@nano_kit/svelte-router](/integrations/svelte-router) | Svelte integration for @nano_kit/router. |
+| [@nano_kit/svelte-ssr](/integrations/svelte-ssr) | Svelte SSR adapter for @nano_kit/ssr. |
 | [@nano_kit/next-router](/integrations/next-router) | Next.js integration for @nano_kit/router. |
diff --git a/website/src/content/docs/integrations/next-router.mdx b/website/src/content/docs/integrations/next-router.mdx
index 562bc016..6942c014 100644
--- a/website/src/content/docs/integrations/next-router.mdx
+++ b/website/src/content/docs/integrations/next-router.mdx
@@ -2,7 +2,7 @@
 title: Next.js Router
 description: "Integrate @nano_kit/router with Next.js using @nano_kit/next-router."
 sidebar:
-  order: 9
+  order: 12
 ---
 
 import { Tabs, TabItem, Code } from '@astrojs/starlight/components'
diff --git a/website/src/content/docs/integrations/next.mdx b/website/src/content/docs/integrations/next.mdx
index 67ca1d2c..1b4935a3 100644
--- a/website/src/content/docs/integrations/next.mdx
+++ b/website/src/content/docs/integrations/next.mdx
@@ -2,7 +2,7 @@
 title: Next.js
 description: "Use Nano Kit with Next.js via @nano_kit/react and @nano_kit/next-router."
 sidebar:
-  order: 8
+  order: 11
 ---
 
 import { Tabs, TabItem, Code } from '@astrojs/starlight/components'
diff --git a/website/src/content/docs/integrations/svelte-router.mdx b/website/src/content/docs/integrations/svelte-router.mdx
new file mode 100644
index 00000000..55ea87ce
--- /dev/null
+++ b/website/src/content/docs/integrations/svelte-router.mdx
@@ -0,0 +1,407 @@
+---
+title: Svelte Router
+description: "Integrate @nano_kit/router with Svelte using @nano_kit/svelte-router."
+sidebar:
+  order: 9
+---
+
+import { Tabs, TabItem, Code } from '@astrojs/starlight/components'
+
+The `@nano_kit/svelte-router` package provides Svelte integration for `@nano_kit/router`. It allows you to use the router's powerful features like code splitting, Dependency Injection, and state management directly within your Svelte application.
+
+## Installation
+
+Install the package using your favorite package manager:
+
+<Tabs syncKey='pkg'>
+  <TabItem label='pnpm' icon='pnpm'>
+    <Code frame='none' lang='bash' code='pnpm add @nano_kit/store @nano_kit/router @nano_kit/svelte @nano_kit/svelte-router' />
+  </TabItem>
+  <TabItem label='Yarn' icon='seti:yarn'>
+    <Code frame='none' lang='bash' code='yarn add @nano_kit/store @nano_kit/router @nano_kit/svelte @nano_kit/svelte-router' />
+  </TabItem>
+  <TabItem label='npm' icon='seti:npm'>
+    <Code frame='none' lang='bash' code='npm install @nano_kit/store @nano_kit/router @nano_kit/svelte @nano_kit/svelte-router' />
+  </TabItem>
+</Tabs>
+
+## Setup
+
+Basically, `@nano_kit/svelte-router` re-exports everything from `@nano_kit/router`, so you can use all base router functions. However, it enhances some of them and provides new utilities specifically for Svelte.
+
+A typical setup looks like this:
+
+```svelte
+<script module lang="ts">
+  import '@nano_kit/svelte'
+  import { browserNavigation, getPageSignal, layout, loadable, page, router } from '@nano_kit/svelte-router'
+  import MainLayout from './MainLayout.svelte'
+  import Loader from './Loader.svelte'
+
+  /* Define routes config */
+  const routes = {
+    home: '/',
+    user: '/users/:id'
+  } as const
+
+  /* Create navigation */
+  const [location, navigation] = browserNavigation(routes)
+
+  /* Create page signal */
+  const page = router(location, [
+    layout(MainLayout, [
+      page('home', loadable(() => import('./pages/Home.svelte'), Loader)),
+      page('user', loadable(() => import('./pages/User.svelte'), Loader))
+    ])
+  ])
+
+  const pageComponent = getPageSignal(page)
+</script>
+
+<script lang="ts">
+  const Page = $derived($pageComponent)
+</script>
+
+{#if Page}
+  <Page />
+{/if}
+```
+
+If you want to use DI-based setup, pass the router tokens through `setInjectionContext`:
+
+```svelte
+<script module lang="ts">
+  import '@nano_kit/svelte'
+  import { App, browserNavigation, router, Location$, Navigation$, Page$, Pages$ } from '@nano_kit/svelte-router'
+  import { pages } from './pages'
+  import { routes } from './routes'
+
+  /* Define global routes types for DI */
+  declare module '@nano_kit/router' {
+    interface AppContext {
+      routes: typeof routes
+    }
+  }
+
+  /* Create navigation and page accessor */
+  const [location, navigation] = browserNavigation(routes)
+  const page = router(location, pages)
+</script>
+
+<script lang="ts">
+  import { provide } from '@nano_kit/store'
+  import { setInjectionContext } from '@nano_kit/svelte'
+
+  setInjectionContext([
+    provide(Location$, location),
+    provide(Navigation$, navigation),
+    provide(Page$, page) // required for App component
+  ])
+</script>
+
+<App />
+```
+
+## Svelte Specifics
+
+### `router`
+
+The `router` function in this package is an enhanced version of the core router. It supports Svelte components as views and correctly handles nested layouts using the `Outlet` component.
+
+```ts
+import { router, page } from '@nano_kit/svelte-router'
+
+const page = router(location, [
+  page('home', HomePage),
+  page('user', UserPage)
+])
+```
+
+### `getPageSignal` & `getPage`
+
+These helpers return the currently matched page component.
+
+Without DI, use `getPageSignal` with the page accessor returned by `router()`:
+
+```svelte
+<script lang="ts">
+  import { getPageSignal } from '@nano_kit/svelte-router'
+
+  const pageComponent = getPageSignal(page)
+  const Page = $derived($pageComponent)
+</script>
+
+{#if Page}
+  <Page />
+{/if}
+```
+
+With DI, use `getPage` and let it read `Page$` from the current injection context:
+
+```svelte
+<script lang="ts">
+  import { getPage } from '@nano_kit/svelte-router'
+
+  const pageComponent = getPage()
+  const Page = $derived($pageComponent)
+</script>
+
+{#if Page}
+  <Page />
+{/if}
+```
+
+### `App`
+
+`App` is a ready-made Svelte component that reads `Page$` from the current injection context and renders the matched page.
+
+```svelte
+<script module lang="ts">
+  import { page, router, Page$ } from '@nano_kit/svelte-router'
+
+  const page = router(location, [
+    page('home', HomePage),
+    page('user', UserPage)
+  ])
+</script>
+
+<script lang="ts">
+  import { provide } from '@nano_kit/store'
+  import { setInjectionContext } from '@nano_kit/svelte'
+  import { App } from '@nano_kit/svelte-router'
+
+  setInjectionContext([
+    provide(Page$, page)
+  ])
+</script>
+
+<App />
+```
+
+### `Outlet`
+
+Used within Layout components to define where the nested child route should be rendered.
+
+```svelte
+<script lang="ts">
+  import { Outlet } from '@nano_kit/svelte-router'
+</script>
+
+<div class="layout">
+  <Sidebar />
+  <main>
+    <!-- Nested page will be rendered here -->
+    <Outlet />
+  </main>
+</div>
+```
+
+### `listenNavigationLinks` & `listenLinks`
+
+These functions intercept clicks on native `<a>` elements and route them through the router navigation layer. Use them when you want to use the router without a custom link component.
+
+Without DI, pass the navigation instance explicitly:
+
+```svelte
+<script lang="ts">
+  import { listenNavigationLinks } from '@nano_kit/svelte-router'
+  import { navigation } from './router'
+
+  listenNavigationLinks(navigation)
+</script>
+```
+
+With DI, use `listenLinks` and let it read `Navigation$` from the current injection context:
+
+```svelte
+<script lang="ts">
+  import { listenLinks } from '@nano_kit/svelte-router'
+
+  listenLinks()
+</script>
+```
+
+### `linkComponent` & `Link`
+
+`linkComponent` creates a type-safe `Link` component bound to a specific navigation instance and paths object. `Link` is the DI-based variant that reads router dependencies from the current injection context.
+
+```ts
+import { buildPaths, linkComponent, preloadable } from '@nano_kit/svelte-router'
+
+/* Create Link component */
+export const Link = linkComponent(
+  navigation,
+  buildPaths(routes),
+  /* Optional: enable preloading on interaction */
+  [preloadable(pages)]
+)
+```
+
+```svelte
+<script lang="ts">
+  import { Link } from './link'
+</script>
+
+<Link to="user" params={{ id: '123' }} preload>
+  View User
+</Link>
+```
+
+For DI usage, use the built-in `Link` component inside `setInjectionContext`:
+
+```svelte
+<script lang="ts">
+  import { Link } from '@nano_kit/svelte-router'
+</script>
+
+<Link to="user" params={{ id: '123' }}>
+  View User
+</Link>
+```
+
+The DI variant uses the provided `Navigation$` and `Paths$` tokens under the hood.
+
+### `preloadable` & `enableLinkComponentPreload`
+
+These link extensions enable page preloading on hover and focus.
+
+Without DI, use `preloadable` when creating your custom `Link` component. It accepts either the pages array or a function returning it:
+
+```ts
+import { buildPaths, linkComponent, preloadable } from '@nano_kit/svelte-router'
+import { pages } from './pages'
+
+export const Link = linkComponent(
+  navigation,
+  buildPaths(routes),
+  [
+    /* true = default value of Link's preload prop */
+    preloadable(() => pages, true)
+  ]
+)
+```
+
+With DI, use `enableLinkComponentPreload` to enable the same behavior for the built-in `Link` component:
+
+```svelte
+<script lang="ts">
+  import { enableLinkComponentPreload } from '@nano_kit/svelte-router'
+
+  /* true = default value of built-in Link's preload prop */
+  enableLinkComponentPreload(true)
+</script>
+```
+
+### `ariaCurrent` & `enableLinkComponentAriaCurrent`
+
+These link extensions enable automatic `aria-current` handling for active links.
+
+Without DI, use `ariaCurrent` when creating your custom `Link` component:
+
+The optional second argument is a predicate that receives the link URL and current location and decides whether the link should be treated as current. By default, it checks `url.pathname === location.pathname`.
+
+```ts
+import { ariaCurrent, buildPaths, linkComponent } from '@nano_kit/svelte-router'
+
+export const Link = linkComponent(
+  navigation,
+  buildPaths(routes),
+  [ariaCurrent(location)]
+)
+```
+
+With DI, use `enableLinkComponentAriaCurrent` to enable the same behavior for the built-in `Link` component:
+
+It accepts the same optional predicate, but reads the current location from DI instead of taking the location accessor explicitly.
+
+```svelte
+<script lang="ts">
+  import { enableLinkComponentAriaCurrent } from '@nano_kit/svelte-router'
+
+  enableLinkComponentAriaCurrent()
+</script>
+```
+
+### `syncPageHead` & `syncHead`
+
+These functions synchronize the current page's `Head$` descriptors.
+
+Without DI, use `syncPageHead` with an explicit page accessor:
+
+```svelte
+<script lang="ts">
+  import { syncPageHead } from '@nano_kit/svelte-router'
+  import { page } from './router'
+
+  syncPageHead(page)
+</script>
+```
+
+With DI, use `syncHead` and let it read `Page$` from the current injection context:
+
+```svelte
+<script lang="ts">
+  import { syncHead } from '@nano_kit/svelte-router'
+
+  syncHead()
+</script>
+```
+
+### `getLocation`
+
+`getLocation` returns the current route location from the injection context.
+
+```svelte
+<script lang="ts">
+  import { getLocation } from '@nano_kit/svelte-router'
+
+  const location = getLocation()
+</script>
+
+<span>{$location.pathname}</span>
+```
+
+### `getNavigation`
+
+`getNavigation` returns the navigation API from the injection context.
+
+```svelte
+<script lang="ts">
+  import { getNavigation } from '@nano_kit/svelte-router'
+
+  const navigation = getNavigation()
+</script>
+
+<button onclick={() => navigation.back()}>Back</button>
+```
+
+### `getPaths`
+
+`getPaths` returns the typed path builders derived from your route definitions.
+
+```svelte
+<script lang="ts">
+  import { getPaths } from '@nano_kit/svelte-router'
+
+  const paths = getPaths()
+</script>
+
+<a href={paths.user({ id: '123' })}>View user</a>
+```
+
+### `getCanGoBack`
+
+`getCanGoBack` returns whether back navigation is currently possible.
+
+```svelte
+<script lang="ts">
+  import { getCanGoBack, getNavigation } from '@nano_kit/svelte-router'
+
+  const canGoBack = getCanGoBack()
+  const navigation = getNavigation()
+</script>
+
+<button disabled={!$canGoBack} onclick={() => navigation.back()}>
+  Back
+</button>
+```
diff --git a/website/src/content/docs/integrations/svelte-ssr.mdx b/website/src/content/docs/integrations/svelte-ssr.mdx
new file mode 100644
index 00000000..0f6e5d4b
--- /dev/null
+++ b/website/src/content/docs/integrations/svelte-ssr.mdx
@@ -0,0 +1,184 @@
+---
+title: Svelte SSR
+description: "Add server-side rendering to a Svelte + Nano Kit app using @nano_kit/svelte-ssr."
+sidebar:
+  order: 10
+---
+
+import { Steps, Tabs, TabItem, Code, Aside } from '@astrojs/starlight/components'
+
+`@nano_kit/svelte-ssr` is the Svelte adapter for server-side rendering in Nano Kit.
+
+## Installation
+
+<Tabs syncKey='pkg'>
+  <TabItem label='pnpm' icon='pnpm'>
+    <Code frame='none' lang='bash' code='pnpm add @nano_kit/store @nano_kit/router @nano_kit/svelte @nano_kit/svelte-router @nano_kit/svelte-ssr svelte' />
+  </TabItem>
+  <TabItem label='Yarn' icon='seti:yarn'>
+    <Code frame='none' lang='bash' code='yarn add @nano_kit/store @nano_kit/router @nano_kit/svelte @nano_kit/svelte-router @nano_kit/svelte-ssr svelte' />
+  </TabItem>
+  <TabItem label='npm' icon='seti:npm'>
+    <Code frame='none' lang='bash' code='npm install @nano_kit/store @nano_kit/router @nano_kit/svelte @nano_kit/svelte-router @nano_kit/svelte-ssr svelte' />
+  </TabItem>
+</Tabs>
+
+## Quick Start
+
+<Steps>
+
+1. **Define your app**
+
+   Create an index file that exports `routes` and `pages`. This file is the single source of truth consumed by both the server renderer and the Vite plugin.
+
+   ```ts
+   // src/index.ts
+   import { page, layout, loadable } from '@nano_kit/svelte-router'
+   import * as Layout from './Layout.svelte'
+
+   export const routes = {
+     home: '/',
+     about: '/about'
+   } as const
+
+   export const pages = [
+     layout(Layout, [
+       page('home', loadable(() => import('./pages/Home.svelte'))),
+       page('about', loadable(() => import('./pages/About.svelte')))
+     ])
+   ]
+
+   declare module '@nano_kit/router' {
+     interface AppContext {
+       routes: typeof routes
+     }
+   }
+   ```
+
+2. **Set up the Vite plugin**
+
+   Add `@nano_kit/svelte-ssr/vite-plugin` to your Vite config. No extra configuration is needed for a standard setup — the plugin uses built-in client and renderer templates automatically.
+
+   ```js
+   // vite.config.js
+   import { defineConfig } from 'vite'
+   import { svelte } from '@sveltejs/vite-plugin-svelte'
+   import ssr from '@nano_kit/svelte-ssr/vite-plugin'
+
+   export default defineConfig({
+     plugins: [
+       svelte(),
+       ssr({ index: 'src/index.ts' })
+     ]
+   })
+   ```
+
+   - **`vite dev`** — starts the development server with SSR rendering handled in-process.
+   - **`vite build`** — produces `dist/client/` (browser assets) and `dist/renderer/` (SSR renderer bundle).
+
+   Add `cookieStore: true` when SSR stores need access to request cookies. See [SSR Cookies](/ssr/cookies) for the full setup.
+
+3. **Write your production HTTP server**
+
+   For production, write your own HTTP server that imports the built renderer and calls `renderer.render(url)` for every incoming request:
+
+   ```js
+   // server.js
+   import { renderer } from './dist/renderer/index.js'
+
+   // Express example
+   app.get('*', async (req, res) => {
+     const result = await renderer.render(req.url, req.headers.cookie)
+
+     if (result.setCookieHeaders) {
+       res.setHeader('Set-Cookie', result.setCookieHeaders)
+     }
+
+     if (result.redirect) {
+       return res.redirect(result.statusCode, result.redirect)
+     }
+
+     if (result.html !== null) {
+       return res.status(result.statusCode).send(result.html)
+     }
+
+     res.status(result.statusCode).send('Not Found')
+   })
+   ```
+
+</Steps>
+
+## Custom Renderer
+
+To customize the HTML output, extend `SvelteRenderer` and override `renderToString`:
+
+```ts
+// src/renderer.ts
+import { SvelteRenderer, type RenderData } from '@nano_kit/svelte-ssr/renderer'
+import { routes, pages } from './index.js'
+
+class AppRenderer extends SvelteRenderer {
+  renderToString(data: RenderData) {
+    // call the default implementation or build your own HTML document
+    return super.renderToString(data)
+  }
+}
+
+export const renderer = new AppRenderer({
+  base: import.meta.env.BASE_URL,
+  manifestPath: import.meta.env.MANIFEST,
+  cookieStore: import.meta.env.SSR_COOKIE_STORE,
+  routes,
+  pages
+})
+```
+
+Then point the plugin to your custom renderer file:
+
+```js
+// vite.config.js
+ssr({
+  index: 'src/index.ts',
+  renderer: 'src/renderer.ts'
+})
+```
+
+## Custom Client
+
+To customize client-side hydration, provide your own client entry:
+
+```ts
+// src/client.ts
+import { hydrate } from 'svelte'
+import { setInjectionContext } from '@nano_kit/svelte'
+import { App } from '@nano_kit/svelte-router'
+import { ROOT_ID, ready } from '@nano_kit/svelte-ssr/client'
+import { routes, pages } from './index.js'
+
+ready({ routes, pages }).then((context) => {
+  hydrate((internals, props) => {
+    setInjectionContext(context)
+
+    return App(internals, props)
+  }, {
+    target: document.getElementById(ROOT_ID)!
+  })
+})
+```
+
+Then point the plugin to your client file:
+
+```js
+// vite.config.js
+ssr({
+  index: 'src/index.ts',
+  client: 'src/client.ts'
+})
+```
+
+## See Also
+
+- [SSR — Getting Started](/ssr) — how the base SSR package works
+- [SSR Cookies](/ssr/cookies) — request-bound cookies, `cookieStore: true`, and `Set-Cookie` forwarding
+- [Router SSR](/router/ssr) — how to add [`Stores$`](/router/ssr#stores-data-dehydration) and [`Head$`](/router/ssr#head-management) to page modules
+- [Svelte Router](/integrations/svelte-router) — [`App`](/integrations/svelte-router#app), [`browserNavigation`](/integrations/svelte-router#setup), [`router`](/integrations/svelte-router#router), and other Svelte router APIs
diff --git a/website/src/content/docs/integrations/svelte.mdx b/website/src/content/docs/integrations/svelte.mdx
new file mode 100644
index 00000000..b273e0a1
--- /dev/null
+++ b/website/src/content/docs/integrations/svelte.mdx
@@ -0,0 +1,98 @@
+---
+title: Svelte
+description: "Integrate @nano_kit/store with Svelte using @nano_kit/svelte."
+sidebar:
+  order: 8
+---
+
+import { Tabs, TabItem, Code, Aside } from '@astrojs/starlight/components'
+
+The `@nano_kit/svelte` package integrates `@nano_kit/store` signals and Dependency Injection with Svelte components.
+
+## Installation
+
+Install the package using your favorite package manager:
+
+<Tabs syncKey='pkg'>
+  <TabItem label='pnpm' icon='pnpm'>
+    <Code frame='none' lang='bash' code='pnpm add @nano_kit/store @nano_kit/svelte svelte' />
+  </TabItem>
+  <TabItem label='Yarn' icon='seti:yarn'>
+    <Code frame='none' lang='bash' code='yarn add @nano_kit/store @nano_kit/svelte svelte' />
+  </TabItem>
+  <TabItem label='npm' icon='seti:npm'>
+    <Code frame='none' lang='bash' code='npm install @nano_kit/store @nano_kit/svelte svelte' />
+  </TabItem>
+</Tabs>
+
+## Signals
+
+Import `@nano_kit/svelte` once in your app. It adds Svelte-compatible `subscribe` support to Nano Kit signals, so Svelte can use the `$signal` auto-subscription syntax.
+
+```svelte
+<script lang="ts">
+  import '@nano_kit/svelte'
+  import { signal } from '@nano_kit/store'
+
+  const count = signal(0)
+</script>
+
+<button onclick={() => count(count => count + 1)}>
+  Count: {$count}
+</button>
+```
+
+Writable signals also get a Svelte-compatible `set` method.
+
+## Dependency Injection
+
+### `setInjectionContext`
+
+To use the Dependency Injection system within Svelte, initialize an injection context in a component with `setInjectionContext`. Child components can then read dependencies from that context.
+
+You can provide an existing instance or an array of providers/values.
+
+```svelte
+<script lang="ts">
+  import { provide } from '@nano_kit/store'
+  import { setInjectionContext } from '@nano_kit/svelte'
+  import { Theme$ } from './tokens'
+  import App from './App.svelte'
+
+  setInjectionContext([
+    provide(Theme$, 'dark')
+  ])
+</script>
+
+<App />
+```
+
+### `getInject`
+
+`getInject` retrieves a dependency from the current injection context. It throws an error if the context is missing, ensuring your dependencies are always resolved.
+
+```svelte
+<script lang="ts">
+  import { getInject } from '@nano_kit/svelte'
+  import { Theme$ } from './tokens'
+
+  const theme = getInject(Theme$)
+</script>
+
+<button class={`btn-${theme}`}>Click me</button>
+```
+
+### `isolate`
+
+`isolate` creates a fresh injection boundary. Use it when a subtree must not inherit dependencies from the parent context.
+
+```svelte
+<script lang="ts">
+  import { isolate } from '@nano_kit/svelte'
+  import Preview from './Preview.svelte'
+
+  isolate()
+</script>
+
+<Preview />
+```