What is Vitebook?
WARNING
Vitebook is still in early stages of development, so this means you can expect bugs and certain features to be missing. As much as we'll try not to break existing API's, occasionally it might happen.
Vitebook is a fast and lightweight alternative to Storybook
If you're unfamiliar with Storybook, it's an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation. Vitebook aims to provide the same capabilities but in a more laxed, lighter, faster and configurable way.
Playgrounds
Design Goals
You can think of Vitebook as a SSG that's a mix between something like Vitepress
and Storybook .
The Vitebook core is simply a static site generator
Here's some of our overall design goals:
- Minimal. We try not to assume anything about how you want to showcase your components. Most features are off by default, and we leave it to you decide what you need and when you need it.
- Light. Both our package installation sizes and final production builds are tiny compared
to Storybook. The base default theme starts at ~40KB minzipped, and if you decide to
build a custom theme, the client itself comes in at ~10KB minzipped. All thanks to
Svelte
👏. - Fast. Speed is critical for a good developer's experience (DX). Getting up and running quickly,
instant feedback via hot module reloading (HMR) whilst preserving component state, fast TypeScript
compilation via ESBuild
, and fast production builds are how we focus on speed. All thanks to Vite/ESBuild 👏. - Simple. No complex iframes or shadow roots. Simple CSS scoping is used to style Vitebook themes and leave your components untouched. This also means your components feel part of an application as they would in the real world, rather than unnaturally isolated.
- Idiomatic. Build, play, test, and document your components the way you would naturally use
them. No funky
.story.{js,ts}
files and templates/args. Import and use your components in.jsx
,.tsx
,.vue
,.svelte
files and interact with them as you normally would. - Themeable. You should control how you want to display your component library. Easily swap
out the default theme and build your own. You'll find it baked right into the configuration
folder (
.vitebook/theme
). - Extendable. As mentioned, we aim to extend Vite/Rollup without losing any of their configurability or power. Vitebook plugins are an extension of Vite plugins, which are an extension of Rollup plugins. Thus, their ecosystem of features and plugins are all at your disposal.
Inspiration
Vitebook was heavily inspiried by the projects listed below. Huge thanks to the authors and contributors of these projects, who helped pave the way for us to build Vitebook.
Special Thanks
We use the following services when developing and deploying Vitebook!