I became interested in Storybook.js when I was creating a new UI component and wanted a way to quickly iterate on the design and be able to demo the different ways it could be used to my team members.
In the past I would temporarily add a page to our application, add multiple versions of the component, configure them for each variation, and then demo it. Then repeat as we refined the design. The temporary page would never be committed to the product's main branch.
Storybook had recently released version 6 so I thought I'd give it a try. I was really impressed with how easy it was to use for my scenario.
You define your component as you normally would (in VueJS in my case) and import it into a "story file". A story file is just a JS (or Typescript file) where you define the properties for your component for any variations (use cases) in which you are interested. Storybook then reads that file and renders pages containing the component for each story.
I was able to quickly modify my component, interact with it, style it, create new stories for different property configurations, and Storybook re-displayed them on each save. It made for a fast and easy development cycle!
TL;DR: These are the key takeaways for using Storybook when developing web components:
I was so impressed by Storybook I put together a "lightning talk" on using it with VueJS for the Northwest Chicago JavaScript meetup September 2020 virtual meeting. Check it out to see how easy and powerful Storybook is to use. Here's the video of my presentation (unfortunately, the first few minutes didn't get recorded):
If you'd like to see my slides they are online. Use arrow keys/spacebar to navigate them.
If you develop web components/controls give Storybook.js a try to simplify component development and test, provide an interactive component browser, and component documentation.