Skip to content

docs: svelte adapters #123

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dangreen merged 1 commit into from
May 9, 2026
Merged

docs: svelte adapters #123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand Down Expand Up @@ -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
Expand Down
12 changes: 12 additions & 0 deletions website/src/content/docs/examples/event-board.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
12 changes: 12 additions & 0 deletions website/src/content/docs/examples/rick-and-morty.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
4 changes: 4 additions & 0 deletions website/src/content/docs/examples/session.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
5 changes: 3 additions & 2 deletions website/src/content/docs/getting-started/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
3 changes: 3 additions & 0 deletions website/src/content/docs/integrations/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. |
2 changes: 1 addition & 1 deletion website/src/content/docs/integrations/next-router.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
2 changes: 1 addition & 1 deletion website/src/content/docs/integrations/next.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
Loading