Back to integrations
Add your integration
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon

Integrate SvelteKit and Storybook

SvelteKit is a framework for rapidly developing robust, performant web applications using Svelte. This recipe shows you how to get the most out of SvelteKit in Storybook.


This recipe assumes that you already have a SvelteKit >= 1.0 app and have just set up Storybook >= 7.0 using the getting started guide. Don't have this? Follow Sveltekit's setup instructions then run:


Feature support

With our package, Storybook automatically mirrors the project settings of SvelteKit. Here's what you'll get:

  • 📚 Supports imports that use the special $lib alias
  • 👓 Components can read current environment information from $app/environment
  • 🖼️ $app/paths is supported so you can safely get paths for assets
  • 🛒 Stores in $app/stores are 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.

Storybook CLI automatically detecting a SvelteKit project

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.

Get involved

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.

Join the community
6,609 developers and counting
WhyWhy StorybookComponent-driven UI
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software

Maintained by
Special thanks to Netlify and CircleCI