Storybook

Storybook is an open-source frontend tool for building and documenting UI components. It’s a form of a living style guide, that helps to keep designers' and developers' work in sync.

Storybook stands out from other component documentation tools that we’ve used at Kiwee (like kss-node) because it uses the actual component implementation to display the component documentation—read more about the differences in our blog post. Not only does it make documenting components much easier for the developers but also allows you to interact with the component directly in the Storybook dashboard, where you can play with the properties, exploring all component states.

Apart from the obvious benefit of providing comprehensive component documentation, Storybook offers many more features that developers can use out of the box—or with minimal configuration—including:

• Snapshot testing.
• Accessibility testing.
• Interaction testing.
• Reusing stories configuration for component tests.

What makes Storybook very flexible is the addons system. Addons are a way to extend Storybook functionality, customize the UI, or integrate Storybook with other tools. The library of existing addons is quite extensive. If you have some specific requirements that are not covered yet, you can also develop you own extension easily.

Because of the additional effort required to maintain Storybook, we think that the decision about adding it to the front-end stack of the project needs to be very conscious and well-thought-out. It might be a good solution for bigger teams and projects with a large number of components with the plan to reuse them in the future.

At Kiwee, we are assessing Storybook and will definitely consider adding it to the stack if we find it a good fit for the project.