Looking for a shareable component template? Go here --> sveltejs/component-template

svelte app with storybook

This is taken from the tutorial lessons on combining Svelte and Storybook, found at Learn Storybook. Remarkably, this was better for learning about both Svelte and Storybook than many of the Svelte materials I'd found.

This is a project template for Svelte apps. It lives at https://github.com/sveltejs/template.

To create a new project based on this template using degit:

npx degit sveltejs/template svelte-app
cd svelte-app

Note that you will need to have Node.js installed.

Get started

Install the dependencies...

cd svelte-app
npm install

Add in Storybook:

npx -p @storybook/cli sb init --type svelte

...then start Rollup:

# Command to run Svelte dev
npm run dev

# And to run Storybook
npm run storybook

Also,

Navigate to localhost:5000. You should see your app running. Edit a component file in src, save it, and reload the page to see your changes.

Note that Storybook will start its own tab in your default browser, pointing to localhost:6006. Any editing of stories or components will cause a hot-reload of the component displayed.