Versioned style guides with React Storybook

A while ago I wrote about how we are using Storybook to generate a living style guide, for use within a design system. While continuing work on a living style guide, we encountered the need to be able to see the various versions of each component in the UI library we were creating. As such, we created a new add-on for just that: versions.


- static-storybook
|-- 0.2.4
|-- 0.2.5
|-- 0.2.6
|-- 0.3.0

So now we can navigate to our different storybook folders and see what each different version looks like, say http://styleguides/0.2.5/ for version 0.2.5. However, there is no way to actually do that from within Storybook. To solve this, we created the versions add-on. What this does is that it adds a new panel showing you the various versions available. For the time being, the way the plugin works is that it expects to find a JSON file in the root of the host, giving info about what versions are installed and what the path pattern is (which is a regex, which is black magic).

"storybook": {
"versions": [
"regex": "\/([^\/]+?)\/?$"

See the documentation for more information on how to set it up.

With it all setup then, the add-on is installed and the config available. Here is what it looks like. In the example below we have a button component with the style changing between different versions (we are using the info add-on to add the documentation around the component).

Navigating different versions of the style guide

Nice and simple then, and we can now travel back and forth in versions, seeing how a component evolved. Add the ability to comment with blabbr and you now have a living style guide, showing you all the different versions of your components and all the discussions around them.

Additionally, there is a “dev” checkbox, which shows a “local dev” button. This is handy as when you are running your Storybook locally as a developer, you will want to see what the code you are writing does. However, you can still navigate to the other versions, living on another host, as long as your config is valid. But then, once you go to the official version, how do you go back to your local dev version? Just enable the dev mode and the flag travels across the versions (as URL params, like all other Storybook options) and you can go back & forth.

Simple. Hope it helps. :-)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store