Integrating Storybook with SvelteKit

Intro

This is the new Svelte Sirens, Sirens Streams, a live stream every 2 weeks featuring a new technology with SvelteKit. On January 19th, we have Shadid Haque coming to teach us how to ingrate a GraphQL Database with FaunaDB.

• TLDR: Skip to full working code - Storybook-Tailwind-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 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

1. New SvelteKit project - npm init svelte@next storybook-sveltekit
2. Change directory into your project cd storybook-sveltekit
3. Install dependencies - npm i
4. Install storybook - npx sb@next init
5. Try running to see errors - npm run storybook
6. 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

1. 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'),
        },
      },
    },

1. 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'
	}
};

1. 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.
2. 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.

1. Add tailwind to the project - npx svelte-add@latest tailwindcss
2. Install dependencies - npm i
3. 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;
4. Install storybook's postcss addon npm i -D @storybook/addon-postcss.
5. 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'
	}
};

1. Import the tailwind CSS file inside .storybook/preview.js, mine was import '../src/app.css'.
2. 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 with the 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, Coding Cat Discord or the Svelte Discord. Later!

Video Chapters & Timestamps

Jump directly to any segment of Integrating Storybook with SvelteKit on YouTube using the timestamped chapters below:

• 00:00: Intro
• 00:00: Code start
• 00:00: Storybook start
• 00:00: Storybook installed
• 00:00: Storybook running
• 00:00: Page component & testing components
• 00:00: Bug with svelte addon
• 00:00: Restructuring the app
• 00:00: Aliases
• 00:00: Trying to setup aliases in webpack config
• 00:00: Tailwind test
• 00:00: webpack config testing
• 00:00: GitHub repo https://github.com/brittneypostma/storybook-sveltekit

Resources, Links & Official Documentation

• Watch on YouTube: Integrating Storybook with SvelteKit Full Video (plus Subscribe to CodingCat.dev)
• Svelte & SvelteKit Documentation: Runes, compiler internals, and full-stack SvelteKit routing
• Tailwind CSS Documentation: Utility-first styling, design tokens, and responsive workflows
• MDN CSS Reference: Modern layout, Grid, Flexbox, animations, and cascade layers

Related CodingCat.dev Tutorials & Podcast Episodes

• Open Source Svelte Magic: Melting Minds through Melt UI!: Thomas teaches Brittney and Alex how to use Melt and how Runes can be used to improve builders.
• SvelteKit with DaisyUI: Tamas joins us to add Daisy UI and Cloudinary to our simple SvelteKit site.
• 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 (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 on the CodingCat.dev YouTube channel. For a deeper dive into Svelte, check out our related guide: Open Source Svelte Magic: Melting Minds through Melt UI!.