@storybook/sveltekit
Advanced tools
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.
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 | Note |
|---|---|---|
$app/environment | ✅ Supported | version is always empty in Storybook. |
$app/forms | ⏳ Planned for 7.1 | See section in Troubleshooting |
$app/navigation | ⏳ Planned for 7.1. With mocks so the Actions addon will display when the hooks are being called. | See section in Troubleshooting |
$app/paths | ⏳ Planned for 7.1. | |
$app/stores | ✅ Supported | Mocks planned for 7.1, 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 | 🚧 Partially supported | Only supported in development mode. |
$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 | ✅ Supported | |
$lib | ✅ Supported | |
$service-worker | ⛔ Not supported | They are only meant to be used in service workers |
@sveltejs/kit/* | ✅ Supported |
This is just the beginning. We're close to adding basic support for many of the SvelteKit features. Longer term 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.
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
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
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.
Storybook 7.0 automatically loads your Vite config, and by extension your Svelte config. If you had a svelteOptions property in .storybook/main.cjs the automigration will have removed it, as it is no longer supported.
Install the framework:
yarn add -D @storybook/sveltekit@next
Update your main.cjs to change the framework property:
// .storybook/main.cjs
module.exports = {
...
framework: '@storybook/sveltekit',
};
Storybook 7.0 automatically loads your Vite config, and by extension your Svelte config. If you have a svelteOptions property in .storybook/main.cjs you need to remove that. See Troubleshooting below.
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
ERR! SyntaxError: Identifier '__esbuild_register_import_meta_url__' has already been declared when starting StorybookWhen starting Storybook after upgrading to v7.0, it breaks with the following error:
ERR! SyntaxError: Identifier '__esbuild_register_import_meta_url__' has already been declared
You'll get this error when manually upgrading from 6.5 to 7.0. You need to remove the svelteOptions property in .storybook/main.cjs, as that is not supported by Storybook 7.0 + SvelteKit. The property is also not necessary anymore because the Vite and Svelte configurations are loaded automatically in Storybook 7.0.
Cannot read properties of undefined (reading 'disable_scroll_handling') in previewSome stories don't load, instead they show the following error in the preview:
Cannot read properties of undefined (reading 'disable_scroll_handling')
You'll experience this if anything in your story is importing from $app/forms or $app/navigation, which is currently not supported. To get around this, separate your component into a shallow parent component that imports what's needed and passes it to a child component via props. This way you can write stories for your child component and mock any of the necessary modules by passing props in.
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.
FAQs
Storybook for SvelteKit
The npm package @storybook/sveltekit receives a total of 28,600 weekly downloads. As such, @storybook/sveltekit popularity was classified as popular.
We found that @storybook/sveltekit demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 12 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.
Security News
Research
Socket researchers found a malicious Maven package impersonating the legitimate ‘XZ for Java’ library, introducing a backdoor for remote code execution.