SvelteKit
Render genko.me lists and detail pages on the server with SvelteKit, including pagination and draft previews.
Use @genko-me/svelte with SvelteKit. Fetch in the load function of +page.server.ts and render the returned data with display components. The API key stays on the server, and the initial HTML contains your content.
This integration targets Svelte 5 with runes. For a Svelte app without SvelteKit, see Svelte.
Packages
npm install @genko-me/svelte @genko-me/sdk| Import | Contents |
|---|---|
@genko-me/svelte | Thirteen display components (ListClient, EntryProvider, ListItem, ViewItem, ListLink, Pagination, Error, Null, Loading, PreviewNotice, RichText, ShareButtons, AppearanceProvider) and createGenkoPageLoader |
@genko-me/svelte/server | fetchGenkoList, fetchGenkoEntry, genkoPaginationHandler, and genkoPaginationAction |
@genko-me/sdk | Delivery API client; define APIs and schemas with createGenko |
@genko-me/svelte/server uses node:crypto. Import it only from server files such as +page.server.ts or +server.ts. Importing it in a .svelte file fails the build.
How components map to React
Component names match @genko-me/react. Svelte 5 uses snippets where React uses children.
| React | SvelteKit |
|---|---|
Regular children of <List> | children snippet of ListClient |
<Error> inside <List> | error snippet |
<Null> inside <List> | empty snippet |
<Loading> inside <List> | loading snippet |
<Pagination> inside <List> | pagination snippet |
<ListItem fallback={<span/>} /> | <ListItem>{/* fallback snippet */}</ListItem> |
<List api={…}> fetches on the server | fetchGenkoList() in +page.server.ts |
<View api={…}> fetches on the server | fetchGenkoEntry() in +page.server.ts |
className | class (className also works) |
Two differences arise because snippets cannot be inspected:
- Fields to fetch. React collects
<ListItem id="…">from JSX and fetches only those fields. In Svelte, passfieldstofetchGenkoListorfetchGenkoEntry. Omitting it fetches all fields. - Pagination
modeandparam. React reads the props of<Pagination mode="url" />. In Svelte, setpaginationOptionsonListClientandpaginationonfetchGenkoList.Paginationitself accepts labels and classes only.
Good fit
- Public pages that need search indexing and social previews. The initial HTML contains the content.
- Applications that keep the API key on the server.
- Pages that need pagination and saved draft previews without building those features from scratch.
Limitations
- Svelte 4 or earlier.
@genko-me/svelteuses Svelte 5 runes and snippets. - Fully static output with
adapter-static. Pagination needs a server endpoint (+server.ts) or form action. A single-page list can still be exported statically. - Server runtimes other than Node.js.
@genko-me/svelte/serverusesnode:cryptoand expects a Node.js adapter.
Next steps
- Get started: Install and display a list and a single entry
- Tutorial: Add pagination, draft previews, and webhooks
- Sorting, filtering, and search
- Delivery API: Fetch over HTTP without the SDK
Last updated: October 6, 2026