Svelte
Display genko.me entry lists and detail pages in a Vite Svelte SPA, and understand the limitations.
You can display genko.me content in a Svelte app without SvelteKit, such as a Vite SPA. The delivery API is REST. Call @genko-me/sdk in the browser and pass the result to @genko-me/svelte components.
Only the location of the fetch differs from SvelteKit. Components such as ListClient, EntryProvider, ListItem, and ViewItem are ordinary Svelte 5 components and work in either setup. If you use SvelteKit, see SvelteKit.
Packages
| Package | Purpose |
|---|---|
@genko-me/sdk | Delivery API client that uses browser fetch |
@genko-me/svelte | Thirteen display components; none require SvelteKit |
Unavailable in this setup: fetchGenkoList, fetchGenkoEntry, genkoPaginationHandler, and genkoPaginationAction from @genko-me/svelte/server. They use node:crypto and require server files such as SvelteKit's +page.server.ts or +server.ts. A Vite-only SPA has no such server, so call the SDK directly. Build pagination with your own loadPage function instead of server-signed tokens.
API keys and SEO
An API key used directly in the browser is public. Anyone can inspect the bundled value or the X-API-KEY request header. Even though it is read-only, assume anyone can read the APIs allowed by that key.
- Limit the key to selected APIs whose content can be public.
- Give it a short lifetime and rotate it regularly.
- For private data, fetch on your own server and return JSON to the browser.
A browser-rendered SPA has SEO limits. Its initial HTML contains an empty <div id="app">; content appears after JavaScript runs. The server cannot return entry-specific Open Graph titles and descriptions. If search traffic or social previews matter, SvelteKit can return server-rendered HTML.
Good fit
- News or help content in signed-in screens or internal tools that do not depend on search traffic.
- Replacing one section of an existing Svelte SPA with genko.me content.
- Showing updates immediately without rebuilding the app.
Limitations
- Public pages that depend on search engines or social previews.
- Applications that must keep the API key private.
- Receiving webhooks without a server. See the approach in the tutorial.
Next steps
- Get started: Install and display a list and a single entry
- Tutorial: Add pagination, draft previews, and content updates
- Sorting, filtering, and search
- Delivery API: Fetch over HTTP without the SDK
Last updated: October 6, 2026