Bit.dev and Storybook are two quite different tools. At first glance, it might seem that both provide a visual showcase for your UI components, and can be used to visually document and organize UI components. That is true, but that’s only a small part of what each of these tools can provide.
Storybook is a truly fantastic tool that excels in the local visual development of UI components and lets you save examples as a showcase gallery. bit.dev hosts UI components for distribution and collaboration across projects. It’s a cloud solution for components extracted, modularized and reused with Bit.
Storybook excels in the visual development of standalone components. Bit handles the full lifecycle of reusable UI components across projects.
Storybook is an excellent open-source tool that provides a user interface development environment and playground for UI components. It helps developers create components and showcase components interactively in an isolated development environment. A Static version of Storybook can also be built and deployed to a server, so you can create a static visual showcase gallery of your UI components, for yourself and your team to share. It does not extract UI components, hosts them, and distributes them across projects.
bit.dev is a platform that hosts UI components for distribution and collaboration across projects. It hosts Bit (open source) components, which are isolated, packed and extracted from their parent repos. Each component is automatically analyzed and packed with all files and dependencies. Each is built, tested and rendered in full isolation. Each is independently versioned and exported (to bit.dev or your server). Each is installed and updated as a standalone unit; no running CI for everything when you update a button. Each can be imported and modified from any new project. In bit.dev component examples are also rendered in isolation and showcased, but it does not yet provide a local visual environment to develop UI components.
While Storybook excels in the visual development of standalone components, Bit handles the full lifecycle of components already created. It completes Storybook from the point a component lives in your project, and beyond. It also provides build/test capabilities for isolated component development.
A Storybook static gallery visualizes component examples. A bit.dev collection hosts components, which were extracted and exported using Bit. These components are independently packed, versioned, built, tested and rendered in isolation. They can be independently installed and updated in different projects right off bit.dev. When you explore a UI component in bit.dev, you might notice it shows the source-code and dependencies of the component.
For example, let’s look at the Grommet button component. In the beautiful Storybook gallery, you view rendered examples based on the story file.
Example of a Grommet button component in Storybook
In the bit.dev component, you can view the actual source code, dependencies and consume the component itself in different projects (source code).
Source-code of a Grommet button component in bit.dev
Dependencies (which Bit automatically defines in an auto-generated package.json
for each component before it’s exported):
Consumption via npm install / yarn add / bit import (to modify the code).
Consumption of a Grommet button component in bit.dev
Let’s review these two parts: Bit (open-source) and bit.dev (platform).
Bit handles the full lifecycle of components: isolate, build, test, version and export standalone components from a repository. Track changes to components, track versions, control component depdancy-graphs, merge code changes, and more.
package.json
with all package and component dependencies for each component. Save overhead.button
? Automatically update button-group
without an unrelated slider
component. incrementally update parts of your UI, across repos and components.Bit.dev is the all-in-one hub where you can host, organize, search, consume, showcase and manage your team’s shared UI components.
A bit.dev collection is where components are exported to, imported from, managed and synced across your projects. It handles the distribution, consupmtion, and collaboartion of components. They resemble in the sense that like Storybook, bit.dev also presents visual examples of your components.
Well, your bit.dev collection hosts your actual components. You can export, import, install, and update components in your bit.dev collection.
A Storybook showcase gallery is a self-hosted documentation portal that leverages the stunning examples created by Storybook as a visual gallery.
Storybook example showcase
A bit.dev collection is a set of cloud-hosted components that can be consumed right from the collection itself. The collection hosts the actual component source-code, runs their CI, packs them in a registry and more.
bit.dev reusable UI components
It also provides a visual showcase experience and sandbox, which currently isn’t local but cloud-based- to help in the distribution of shared components.
On top, Bit provides search capabilities built for components, which take into effect parameters that go down to the API of the component itself, and enhances it with manual filters for component bundle-size and more.
Storybook and Bit can live separately or side by side. For example, Storybook can provide a visual development environment for component prototyping and to create examples. Bit can then isolate these components from their projects, help you make them truly reusable, and use them in new apps.
A tweet so true, even when bit.dev was bitsrc.io long ago
Ideally, Storybook and bit.dev can and should be integrated as an enjoyable experience. The bit.dev team is working on supporting component story formats both in Bit and bit.dev, so that your stories will render as examples in your bit.dev collection, optionally with the great Storybook experience. You will be able to share and consume components right from the place you see your stories.
This means you can leverage Stroybook’s excellent local development capabilities to visually develop UI components (+ leverage Bit to build and test each in isolation), then export the components to bit.dev and watch as your components are visually organized in your team’s component hub.
An official release note will be published once this support is ready. Meanwhile, feel free to combine the workflows as you see fit. For questions don’t hesitate to reach out to the team via Gitter or Support.
Happy coding!
☞ JavaScript Programming Tutorial Full Course for Beginners
☞ Learn JavaScript - Become a Zero to Hero
☞ Javascript Project Tutorial: Budget App
☞ E-Commerce JavaScript Tutorial - Shopping Cart from Scratch