Vitebook 🖼️

🚨 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 that's powered by Vite. If you'd like to explore more about Vite vs traditional bundlers/dev environments such as Webpack, check out Why Vite.

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.

🏆 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 with a file-system based routing scheme (similar-ish to Next.js), and a uber-fast development environment thanks to Vite. At it's core that's all it is, bunch of files that are resolved into pages which are used to build up a site. Ultimately, Vitebooks aims to be a natural extension of Vite/Rollup whilst offering a minimal layer on top to make it easier for you to build, document, and test your components.

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 to a good developer experience. 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 is 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 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.

🚧 Missing Features

The missing features below could be dealbreakers for some. If so, feel free to keep using Storybook in the meantime, and reguarly check-in (tap the watch button above) to see how we're going with bringing these features to you. Also, feel free to chime in on the issues and share your thoughts!

Addons
Controls Addon
API Reference Addon
Viewport Addon
Event Logging
HTTP API Mocking
Testing Guides
Algolia Plugin
Component Search
Keyboard Shortcuts
Bundle Library for Production
Custom Themes with React/Preact/Vue

Quickstart

Not available yet (coming soon).

Documentation

Not available yet (coming soon to vitebook.dev).

Contributing

See contributing.md.

License

MIT

chrisbbreuer / vitebook