> Canonical URL: https://codingcat.dev/post/integrating-storybook-with-sveltekit # Integrating Storybook with SvelteKit ✏️ Blog PostJune 4, 2022[Svelte & SvelteKit](/topic/svelte) # Integrating Storybook with SvelteKit ![](https://cdn.sanity.io/images/hfh83o0w/production/0a974b403f056384c923b5decaff392d6af61e95-1920x1080.jpg?w=1920&h=1080&q=82&fit=max&auto=format)[![Brittney Postma](https://cdn.sanity.io/images/hfh83o0w/production/f25e504779cb6ebb7c0dd7df367f2c7490e17784-735x735.png?w=96&h=96&q=82&fit=max&auto=format)Brittney Postma](/author/brittney-postma)✏️ Visual Architecture Diagram ## how this post connects together. Follow AJ from first principles to production-ready architecture. Let’s build it!✏️ Visual Diagram: Integrating Storybook with SvelteKit✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for Integrating Storybook with SvelteKit: start with Integrating Storybook , implement Hands-On Implementation, and ship to production.AAA Contrast Verified ## Intro This is the new [Svelte Sirens](https://www.sveltesociety.dev/), Sirens Streams, a live stream every 2 weeks featuring a new technology with SvelteKit. On January 19th, we have [Shadid Haque](https://twitter.com/HaqueShadid) coming to teach us how to ingrate a GraphQL Database with FaunaDB. - TLDR: Skip to full working code - [Storybook-Tailwind-SvelteKit](https://github.com/brittneypostma/storybook-sveltekit) ## Aliases and Tailwind I wanted to put this towards the top to not torture you with this. We struggled during the live stream, fighting storybook's webpack setup with the vite setup of SK. One of the amazing [Svelte Discord](https://svelte.dev/chat) community members showed us after how they got it done. So, I'm going to go through step by step, what I did to go from nothing to a fully working Storybook & Tailwind project in SvelteKit with aliases functional. ## Steps - New SvelteKit project - `npm init svelte@next storybook-sveltekit` - Change directory into your project `cd storybook-sveltekit` - Install dependencies - `npm i` - Install storybook - `npx sb@next init` - Try running to see errors - `npm run storybook` - Fix storybook errors. Inside the generated `.storybook` folder add a new `package.json` file. - Add this code snippet to the `package.json` - Then in `.storybook/main.js` switch the `require` for `import` ``` - "preprocess": require("../svelte.config.js").preprocess + "preprocess": import("../svelte.config.js").preprocess ``` That's it for the initial setup, Storybook should now be able to run with `npm run storybook`. Next we'll get the aliases fixed. ## Steps to fix aliases - In the `svelte.config.js` file, add the aliases you want to use. The base ones I configured were the `$lib` and `$components`: ``` vite: { resolve: { alias: { $lib: path.resolve('./src/lib'), $components: path.resolve('./src/lib/components'), }, }, }, ``` - In the `.storybook/main.js` file, configure the aliases for Webpack. This is my `main.js` file. ``` const path = require('path'); module.exports = { stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'], addons: [ '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-svelte-csf', { name: '@storybook/addon-postcss', options: { postcssLoaderOptions: { implementation: require('postcss') } } } ], framework: '@storybook/svelte', svelteOptions: { preprocess: import('../svelte.config.js').preprocess }, webpackFinal: async (config) => { config.module.rules.push({ test: [/\.stories\.js$/, /index\.js$/], use: [require.resolve('@storybook/source-loader')], include: [path.resolve(__dirname, '../src')], enforce: 'pre' }); config.resolve.alias = { ...config.resolve.alias, $lib: path.resolve(__dirname, '../src/lib'), $components: path.resolve(__dirname, '../src/lib/components') }; return config; }, core: { builder: 'webpack4' } }; ``` - Try switching out your imports in the `.svelte` files of your components to use one of the aliases. I switched `Header.svelte` import to `import Button from '$components/Button/Button.svelte`. - Run Storybook - `npm run storybook` ## Tailwind We'll be using svelte-add to add Tailwind to the project and then do the steps to get it working inside Storybook. - Add tailwind to the project - `npx svelte-add@latest tailwindcss` - Install dependencies - `npm i` - Add some tailwind to any of the css files. I changed the primary button css to use tailwind with `@apply bg-teal-400 text-white;` - Install storybook's postcss addon `npm i -D @storybook/addon-postcss`. - Add the config to the `.storybook/main.js` file. The final output is below. ``` const path = require('path'); module.exports = { stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'], addons: [ '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-svelte-csf', { name: '@storybook/addon-postcss', options: { postcssLoaderOptions: { implementation: require('postcss') } } } ], framework: '@storybook/svelte', svelteOptions: { preprocess: import('../svelte.config.js').preprocess }, webpackFinal: async (config) => { config.module.rules.push({ test: [/\.stories\.js$/, /index\.js$/], use: [require.resolve('@storybook/source-loader')], include: [path.resolve(__dirname, '../src')], enforce: 'pre' }); config.resolve.alias = { ...config.resolve.alias, $lib: path.resolve(__dirname, '../src/lib'), $components: path.resolve(__dirname, '../src/lib/components') }; return config; }, core: { builder: 'webpack4' } }; ``` - Import the tailwind CSS file inside `.storybook/preview.js`, mine was `import '../src/app.css'`. - Try it out - `npm run storybook` ## Lessons learned There are still a few things Storybook has to get running easier with ESM. There is still an [open issue](https://github.com/storybookjs/addon-svelte-csf/issues/37) with the [addon-svelte-csf](https://github.com/storybookjs/addon-svelte-csf) at the time of writing. Overall though, we were able to get a SvelteKit project up and running with Storybook and Tailwind integrated and aliases working. As always, you can find me on [Twitter](https://twitter.com/BrittneyPostma), [Coding Cat Discord](https://discord.gg/kGYAaAKZQf) or the [Svelte Discord](https://svelte.dev/chat). Later! ## Video Chapters & Timestamps Jump directly to any segment of [**Integrating Storybook with SvelteKit**](https://www.youtube.com/watch?v=Kc1ULlfyUcw) on YouTube using the timestamped chapters below: - [**00:00**](https://www.youtube.com/watch?v=Kc1ULlfyUcw&t=0s): Intro - [**00:00**](https://www.youtube.com/watch?v=Kc1ULlfyUcw&t=0s): Code start - [**00:00**](https://www.youtube.com/watch?v=Kc1ULlfyUcw&t=0s): Storybook start - [**00:00**](https://www.youtube.com/watch?v=Kc1ULlfyUcw&t=0s): Storybook installed - [**00:00**](https://www.youtube.com/watch?v=Kc1ULlfyUcw&t=0s): Storybook running - [**00:00**](https://www.youtube.com/watch?v=Kc1ULlfyUcw&t=0s): Page component & testing components - [**00:00**](https://www.youtube.com/watch?v=Kc1ULlfyUcw&t=0s): Bug with svelte addon - [**00:00**](https://www.youtube.com/watch?v=Kc1ULlfyUcw&t=0s): Restructuring the app - [**00:00**](https://www.youtube.com/watch?v=Kc1ULlfyUcw&t=0s): Aliases - [**00:00**](https://www.youtube.com/watch?v=Kc1ULlfyUcw&t=0s): Trying to setup aliases in webpack config - [**00:00**](https://www.youtube.com/watch?v=Kc1ULlfyUcw&t=0s): Tailwind test - [**00:00**](https://www.youtube.com/watch?v=Kc1ULlfyUcw&t=0s): webpack config testing - [**00:00**](https://www.youtube.com/watch?v=Kc1ULlfyUcw&t=0s): GitHub repo https://github.com/brittneypostma/storybook-sveltekit ## Resources, Links & Official Documentation - **Watch on YouTube: ** [Integrating Storybook with SvelteKit Full Video](https://www.youtube.com/watch?v=Kc1ULlfyUcw) (plus [Subscribe to CodingCat.dev](https://www.youtube.com/@CodingCatDev?sub_confirmation=1)) - [**Svelte & SvelteKit Documentation:**](https://svelte.dev/docs) Runes, compiler internals, and full-stack SvelteKit routing - [**Tailwind CSS Documentation:**](https://tailwindcss.com/docs) Utility-first styling, design tokens, and responsive workflows - [**MDN CSS Reference:**](https://developer.mozilla.org/en-US/docs/Web/CSS) Modern layout, Grid, Flexbox, animations, and cascade layers ## Related CodingCat.dev Tutorials & Podcast Episodes - [**Open Source Svelte Magic: Melting Minds through Melt UI!**](/podcast/cwcc-1-2-meltui): Thomas teaches Brittney and Alex how to use Melt and how Runes can be used to improve builders. - [**SvelteKit with DaisyUI**](/podcast/sveltekit-with-daisyui): Tamas joins us to add Daisy UI and Cloudinary to our simple SvelteKit site. - [**SvelteKit with Notion CMS and Cloudinary**](/podcast/sveltekit-with-notion-cms-and-cloudinary): Tamas joins us to add Daisy UI and Cloudinary to our simple SvelteKit site. ## Frequently Asked Questions (FAQ) ### What are the main takeaways from Integrating Storybook with SvelteKit? Brittney walks through how to get Storybook working in a new SvelteKit project. Integrating Storybook with SvelteKit: Brittney will work on getting storybook integrated with SvelteKit. One of the amazing Svelte community members on Discord shared how to get Tailwind and the aliases working. The repo has been updated with the code and I'll be doing a write-up on it. GitHub repo: https://github.com/brittneypostma, hello everyone how are we doing today everybody doing good gonna kind of just chill out here for a few minutes let a few people get on for a minute um today is the very first of our svelte siren siren streams our goal is going to be to stream every two weeks on a new technology and try to integrate it with spell kit today we're going to be trying out storybook with spell kit and in two weeks on ja... Throughout this post, Brittney Postma breaks down real-world implementation details for Svelte, Tailwind CSS, CSS so developers can apply these patterns directly in production. ### How do you implement Svelte best practices in production? When adopting Svelte and Tailwind CSS in a production stack, start by validating your configuration against the [**Svelte & SvelteKit Documentation**](https://svelte.dev/docs) (Runes, compiler internals, and full-stack SvelteKit routing). Focus on incremental adoption, automated testing, and observability so your team can measure performance and developer velocity improvements at each stage. ### Where can I watch the full Integrating Storybook with SvelteKit walkthrough and find related code resources? You can watch the complete video session for [**Integrating Storybook with SvelteKit**](https://www.youtube.com/watch?v=Kc1ULlfyUcw) on the [**CodingCat.dev YouTube channel**](https://www.youtube.com/@CodingCatDev?sub_confirmation=1). For a deeper dive into Svelte, check out our related guide: [**Open Source Svelte Magic: Melting Minds through Melt UI!**](/podcast/cwcc-1-2-meltui). ## ✏️ Video Summary Integrating Storybook with SvelteKit: Brittney will work on getting storybook integrated with SvelteKit. One of the amazing Svelte community members on Discord shared how to get Tailwind and the aliases working. The repo has been updated with the code and I'll be doing a write-up on it. GitHub repo: https://github.com/brittneypostma — hello everyone how are we doing today everybody doing good gonna kind of just chill out here for a few minutes let a few people get on for a minute um today is the very first of our svelte siren siren streams our goal is going to be to stream every two weeks on a new technology and try to integrate it with spell kit today we're going to be trying out storybook with spell kit and in two weeks on ja... ## recent blog posts. [All Blog Posts→](/blog)[![The Heads of AI wearing black company logo t-shirts and shaking hands in a circular web of cloud and GPU investments](https://cdn.sanity.io/images/hfh83o0w/production/d1d83d596ce5899d797cd3aaf1bd0142038f282a-1376x768.jpg?w=1376&q=82&fit=max&auto=format)](/post/anthropic-s1-ipo-circular-ai-economy-etf-risk)October 26, 2026[![](/logos/amplify/amplify.svg)![](/logos/amplify/amplify.svg)AWS Amplify](/topic/amplify)[AI & MCP Agents](/topic/ai) ### [Anthropic's S-1, $518B in cloud commitments, and circular AI capex](/post/anthropic-s1-ipo-circular-ai-economy-etf-risk) Anthropic just filed its Form S-1 for a Nasdaq IPO under ticker ANT, revealing $518B in take-or-pay cloud commitments to Google, AWS, and Microsoft. Here is how Mark Zuckerberg, Elon Musk, Jensen Huang, Sundar Pichai, Satya Nadella, Tim Cook, and Dario Amodei built a circular revenue machine, and what happens to your S&P 500 ETF if it stalls. [![Alex Patterson](https://cdn.sanity.io/images/hfh83o0w/production/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![PHP2Shell (CVE-2026-109618): How AI Found a Decade-Old Bug in 70% of the Web](https://cdn.sanity.io/images/hfh83o0w/production/e83065d0a4e2f841ce64d3f4aea8ddbbf07e5cb9-1376x768.jpg?w=1376&q=82&fit=max&auto=format)](/post/php2shell-cve-2026-109618-ai-php-security-scramble)October 22, 2026[![](/logos/amplify/amplify.svg)![](/logos/amplify/amplify.svg)AWS Amplify](/topic/amplify)[AI & MCP Agents](/topic/ai) ### [PHP2Shell (CVE-2026-109618): How AI Found a Decade-Old Bug in 70% of the Web](/post/php2shell-cve-2026-109618-ai-php-security-scramble) Two critical pre-authentication RCE flaws in PHP (CVE-2026-109618 and CVE-2026-109619), uncovered by AI models from OpenAI and Google Gemini, sparked a global patching scramble across 70% of the web. Here is how PHP2Shell works and how to patch your servers. [![Alex Patterson](https://cdn.sanity.io/images/hfh83o0w/production/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)