This recipe assumes that you are using SvelteKit >= 1.0 as well as Storybook >= 7.0
How to setup SvelteKit and Storybook
Svelte is quickly becoming a major framework in the front-end ecosystem, offering lots of fantastic features for web developers. With SvelteKit, it also provides a powerful meta-framework for applications. At Storybook, we're investing in the Svelte ecosystem to create a seamless and enjoyable experience for users of Svelte and Storybook.
Fortunately, there is now an easier way to develop isolated components with the new
@storybook/sveltekit framework package. As an industry-standard for component development, Storybook is proud to offer SvelteKit 1.0 features in a seamless integration. With our package, Storybook automatically mirrors the project settings of both SvelteKit. Here's what you'll get:
- 📚 Supports imports that use the special
- 👓 Components can read current environment information from
$app/pathsis supported so you can safely get paths for assets
- 🛒 Stores in
$app/storesare supported out of the box
In a project without Storybook
Run the following command in your SvelteKit project's root directory, and follow the prompts:
Storybook will automatically detect your SvelteKit project and install the necessary packages and configurations.
In a project with Storybook
If you’re already using Storybook prior to version 7 in a project, upgrade Storybook with this command, and follow the prompts:
If your existing project is configured with the Vite builder, it will prompt you to migrate your Storybook configuration and dependencies to the new
@storybook/sveltekit package automatically.
If your existing Storybook setup is using the Webpack builder, it can’t automatically migrate for you, because there’s no way to migrate your Webpack configuration to a Vite configuration. In that case, follow the manual migration steps instead.
Now you're ready to use SvelteKit with Storybook. 🎉 If you use SvelteKit at work, we'd love your feedback on the SvelteKit + Storybook experience.
Join the maintainers and our thriving community in Discord.