Storybook has been the tool of choice both for demoing a library/design system and for use during the development process by WMF and WMDE teams. Storybook is a powerful tool with many useful features and addons that can empower developers to create documentation and interactive demos.
However, Storybook has its downsides. Here are a few I've run into:
* Configuration and story-writing aren't straightforward, especially when you're first learning. While text documentation only requires markdown knowledge, you must be comfortable with JavaScript to edit stories (e.g. component documentation)
* Storybook isn't built for Vue and this shows both when writing stories and reading the docs.
* Stories are not the same as normal Vue components, which means the demos we're creating don't line up 1:1 with the code an end user needs to use that component. For this reason and others, the code samples displayed on the demo tab are not sufficient for our needs (see T287049).
* It has many dependencies (e.g. the `docs` addon requires markdown, which requires react)
* I set up Storybook with Vite/Vue 3 in an experimental project, using `storybook-builder-vite`, an [[ https://github.com/eirslett/storybook-builder-vite | experimental library ]] in its early stages, and ran into issues:
** Source code isn't working, both in the story source panel in the addons tab, or in the "show code" feature on the docs tab. This is a critical feature for us.
** HMR doesn't work when you're editing a story file
Now that we have decided to use Vite to build the new library, we may want to consider VitePress, a Vue-powered static site generator built with Vite (as opposed to VuePress, which is built with Webpack), or other options.