Getting started with SvelteKit

Installation

SvelteKit uses the same package as plain Svelte — there is no separate SvelteKit plugin.

pnpm i -D poveste @poveste/plugin-svelte
# OR
npm i -D poveste @poveste/plugin-svelte
# OR
yarn add -D poveste @poveste/plugin-svelte

Supported versions

@poveste/plugin-svelte declares @sveltejs/kit@^2.53.0 as an optional peer — enforced when Kit is installed, ignored when it is not, since the same package serves plain Svelte.

2.53.0 is the first SvelteKit release to peer Vite 8 and @sveltejs/vite-plugin-svelte@^7, and v7 is in turn the first plugin major to peer Vite 8, which Poveste requires. CI runs ahead of the floor: examples/sveltekit pins ^2.55.0.

That example is the most thoroughly checked one we have: build, Playwright, and svelte-check on every pull request.

Configuring it

A standalone poveste.config.ts works exactly as it does above — Poveste reads it and the poveste key of your Vite config and merges the two. Since SvelteKit already owns vite.config.ts, keeping everything in one file is usually the tidier option, and it is what examples/sveltekit does:

/// <reference types="poveste" />

import { HstSvelte } from '@poveste/plugin-svelte'
import { sveltekit } from '@sveltejs/kit/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    sveltekit(),
  ],
  poveste: {
    plugins: [
      HstSvelte(),
    ],
    setupFile: '/src/poveste.setup.ts',
  },
})

setupFile points at a file of your own that runs before every story — where you import global CSS, register stores, or install anything your components expect to be there already. Create it, or drop the key until you have something to put in it. The path is relative to your project root, which is what the leading slash means. See Global JS and CSS for what goes inside.

Importing @poveste/plugin-svelte is already enough to type the poveste key — poveste augments Vite's config type, and importing any poveste package pulls that augmentation into your program. The /// <reference types="poveste" /> line makes it explicit, and is what you need in a config that sets the poveste key without importing a poveste package.

If TypeScript does report the key as unknown, that reference is the fix. Do not reach for as any on the config object: Vite genuinely checks it for unknown keys, so a cast throws away that checking for everything inside — including the Poveste options you came for.

Nothing else needs changing. svelte.config.js and your adapter stay as they are, and @poveste/plugin-svelte already excludes SvelteKit's compile plugin from the stories build, so you do not need to configure viteIgnorePlugins yourself.

Command Line Interface

Add the scripts to your package.json, alongside the ones SvelteKit already gave you:

{
  "scripts": {
    "story:dev": "poveste dev",
    "story:build": "poveste build",
    "story:preview": "poveste preview"
  }
}