Vitebook

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 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.

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 with a file-system based routing scheme, and a uber-fast development environment thanks to Vite. Ultimately, Vitebooks aims to be a natural extension of Vite/Rollup whilst offering a minimal layer on top, making 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 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!