Storybook for SvelteKit
Our goal is to help you use the tools you love together with Storybook. That’s why Storybook has zero-config support for SvelteKit with the @storybook/sveltekit package.
Check out our Frameworks API announcement for what this all means for you and our continued efforts to make Storybook a seamless integration for any project.
Table of Contents
Supported features
All Svelte language features are supported out of the box, as Storybook uses the Svelte compiler underneath. However SvelteKit has some Kit-specific modules that currently aren't supported. It's on our roadmap to support most of them soon:
| Module | Status |
|---|---|
$app/environment |
🔜 Coming in 7.0 |
$app/forms |
⏳ Planned for 7.1 |
$app/navigation |
⏳ Planned for 7.1. With mocks so the Actions addon will display when the hooks are being called. |
$app/paths |
🔜 Coming in 7.0 |
$app/stores |
⏳ Planned for 7.1. With mocks so you can set different store values per story. |
$env/dynamic/private |
⛔ Not supported. They are meant to only be available server-side, and Storybook renders all components on the client. |
$env/dynamic/public |
🔜 Coming in 7.0 |
$env/static/private |
⛔ Not supported. They are meant to only be available server-side, and Storybook renders all components on the client. |
$env/static/public |
🔜 Coming in 7.0 |
$lib |
🔜 Coming in 7.0 |
$service-worker |
⛔ Not supported. They are only meant to be used in service workers |
@sveltejs/kit/* |
✅ Supported |
This is just the beginning. We're planning on making it an even better experience to build, test and document all the SvelteKit goodies like pages, forms and layouts in Storybook, while still integrating with all the addons and workflows you know and love.
Requirements
Getting Started
In a project without Storybook
Run the following command in your SvelteKit project's root directory, and follow the prompts:
npx storybook@next init
More on getting started with Storybook
In a project with Storybook
This framework is designed to work with Storybook 7. If you’re not already using v7, upgrade with this command:
npx storybook@next upgrade --prerelease
Automatic migration
When running the upgrade command above you should get a prompt asking you to migrate to @storybook/sveltekit, which should handle everything for you. In some cases it can't migrate for you, eg. if your existing Storybook setup is based on Webpack. In such cases, refer to the manual migration below.
Manual migration
Install the framework:
yarn add -D @storybook/sveltekit@next
Update your main.cjs to change the framework property:
// .storybook/main.cjs
module.exports = {
...
// shorthand
framework: '@storybook/sveltekit',
// or if you need options
framework: {
name: '@storybook/sveltekit',
options: {...},
},
};
Storybook 7.0 automatically loads your Vite config, and by extension your Svelte config. If you have a svelteOptions property in main.cjs you should remove that, unless you explicitly want different options between your app and Storybook.
Remove any redundant dependencies, if you have them:
yarn remove @storybook/svelte-vite
yarn remove @storybook/svelte-webpack5
yarn remove storybook-builder-vite
yarn remove @storybook/builder-vite
Acknowledgements
Integrating with SvelteKit would not have been possible if it weren't for the fantastic efforts by the Svelte core team - especially Ben McCann - to make integrations with the wider ecosystem possible.