Alternatives to React Storybook
Tags: react, storybook
Published: 2019-07-29 13:07:53

---
title: Alternatives to React Storybook
published: true
tags: react, storybook 
canonical_url: https://blog.logrocket.com/alternatives-to-react-storybook/
---

![](https://thepracticaldev.s3.amazonaws.com/i/y1vyo7kfj4sa7nos0qql.png)

[React Storybook](https://storybook.js.org/docs/guides/guide-react/) is a user interface development environment and playground for UI components. It allows developers to develop their components and showcase them interactively in an isolated environment.

Storybook also allows the developer to provide code examples of component usage which may, in turn, serve as documentation for the component. Storybook is widely used by engineers around the world to speed up UI development and provide documentation for their components.

Storybook also has amazing documentation and this [walkthrough](https://www.learnstorybook.com/react/en/get-started/) will get one set up from scratch. They also provided this [live demo](https://storybooks-official.netlify.com/?path=/story/ui-panel--default) of how storybook works. You may also want to take a look at [this article](https://dev.to/bnevilleoneill/how-react-storybook-can-simplify-component-testing-1l8m) on how Storybook can simplify component testing.

Pretty useful right? It gets better as there are many other ways to achieve results similar to those provided by Storybook. In this article, we’ll be looking at other alternatives to Storybook for React applications. These alternatives include:

- Atellier
- React Cosmos
- Docz
- Carte Blanche
- React Styleguide Generator
- React Bluekit

[![LogRocket Free Trial Banner](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/f760c-1gpjapknnuyhu8esa3z0jga.png?resize=1200%2C280&ssl=1)](https://logrocket.com/signup/)

## Atellier

[Atellier](https://scup.github.io/atellier/) is probably one of our more versatile options in our list. Developed by [Scup](https://www.scup.com/social/en/), Atellier allows you to preview and share components while providing features such as the ability to edit props, state and functions attached to a component as well as manipulate styling. You can see just how detailed this is using this [live demo](http://scup.github.io/atellier/material-ui-atellier/) with material UI which showcases a variety of components.

Atellier is also fairly easy to set up. To do so, install the `react-attelier package` like this:

```jsx
npm install react-atellier
```

Next, let’s import it and set it up in our project:

```jsx
import ReactAtellier from 'react-atellier';
import myComponent from 'myComponent';
//import other components here

const componentList = [{
  componentName : myComponent.displayName,
  component : myComponent
  },
  //...map other components
];

//pass the list of components to atellier via props 
var AtellierWrapper = React.createClass({
  render: function() {
    return (
      <ReactAtellier components={componentList} />
    );
  }
});

//render atellier somewhere in your app
render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="atellier" component={AtellierWrapper}/>
    </Route>
  </Router>
), document.body)
```

And that’s it, on the atellier route of your app you will find the components rendered in a demo with all of Atellier’s features available.

Atellier is open source and they are open to contributions to developers with a CLI currently being worked on to improve the development experience.

It’s important to note that this package hasn’t been updated since 2016.

![](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2019/07/attelier.png?resize=1600%2C923&ssl=1)

## React Cosmos

[React Cosmos](https://github.com/react-cosmos/react-cosmos) is another great option. Cosmos scans your project and enables you to do the following:

- Render components under any combination of props, context and state
- Mock every external dependency (eg. API responses, localStorage, etc)
- See app state evolve in real-time while interacting with running instances

Cosmos is a dev tool first, made to improve all components, big and small, not just the stateless UI bits. The [fixture](https://github.com/react-cosmos/react-cosmos#fixtures) and [proxy](https://github.com/react-cosmos/react-cosmos#proxies) architecture doubles as an [automated testing utility](https://github.com/react-cosmos/react-cosmos#headless-testing), providing a complete solution for developing robust and reusable components. Cosmos also makes it easy to create a living style guide, but it’s a secondary goal and you might get more value from alternatives if this is your chief concern.

A live demo of Cosmos at work can be found [here](https://react-cosmos.github.io/).

![](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2019/07/cosmos.png?resize=512%2C282&ssl=1)

## Docz

[Docz](https://www.docz.site/) is a fantastic tool for documenting your components with zero configuration and live preview. Docz is powered by [Gatsby](https://www.gatsbyjs.org/) making it blazing fast. It is built on five main principles:

- **Zero config and easy to learn** – no unnecessary build steps with confusing setups
- **Blazing fast** – it’s built with performance in mind from the start
- **Easy to customize** – create something that will be easy to use and customize
- **MDX based** – the best standard for writing documentation
- **Pluggable** – plugins are the best choice when you need a custom and flexible solution

Docz also offers plugin and themes support therefore improving customization and usability.

![](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2019/07/docz.png?resize=512%2C334&ssl=1)

![](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2019/07/docz2.png?resize=512%2C297&ssl=1)

## Carte Blanche

[Carte Blanche](https://github.com/carteb/carte-blanche)is an isolated development space with integrated fuzz testing for your components. See them individually, explore them in different states and quickly and confidently develop them.

Setting up Carte Blanche is an easy two-step process:

1. 
  1. Install the plugin with `npm install --save-dev carte-blanche`
  2. Add it to the plugins in your development webpack configuration, specifying a relative path to the folder with your components in the componentRoot option:

```jsx
var CarteBlanche = require('carte-blanche');
/* … */
plugins: [
  new CarteBlanche({
    componentRoot: './src/components'
  })
],
```

That’s it, now start your development environment and go to /carte-blanche to see your Carte Blanche. The team was kind enough to provide this [short video](https://www.youtube.com/watch?v=6g3-TQ6aaw8) illustrating the available features.

Like Atellier, it’s important to note that this package hasn’t been updated since 2016.

## React Styleguide Generator

[React Styleguide Generator](https://github.com/pocotan001/react-styleguide-generator) is used to easily generate a good-looking style guide by adding some documentation to your React project.

You can find a [demo](http://pocotan001.github.io/react-styleguide-generator/#!.) here created with React-Bootstrap showcasing documentation for a number of components.

![](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2019/07/rsg.png?resize=1600%2C925&ssl=1)

## React Bluekit

Created by [Blueberry](https://www.blueberry.io/), [Bluekit](http://bluekit.blueberry.io/) is a fantastic looking component documentation tool that seamlessly integrates with [gulp](https://gulpjs.com/).

To install it run `npm install react-bluekit --save`.

Add the following lines to your gulp file:

```jsx
import createBlueKit from 'react-bluekit/lib/createBlueKit';

createBlueKit({
 // your directory where components are located
 baseDir: `${__dirname}/src/browser`,
 // relative paths from base dir where to look for components
 paths: ['./components', './auth']
});
```

Then run `gulp build-bluekit` to generate information about your components.

```jsx
import Bluekit from 'react-bluekit';
import componentsIndex from './componentsIndex';

<BlueKit
 componentsIndex={componentsIndex}
 inline // display inline (not full page)
/>
```

You can also setup BlueKit to be built on application start and then to watch for component changes using the `gulp watch-bluekit` task:

```jsx
gulp.task('default', ['build-bluekit', 'server', 'watch-bluekit']);
```

![](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2019/07/bluekit.png?resize=730%2C423&ssl=1)

## Conclusion

Documentation is important even for UI components as it helps create an environment where developers can collaborate easily and build applications faster. The tools above can help achieve this. If you have an open-source UI component library, this can also help your users get familiar with your tools faster.
* * *
## Plug: [LogRocket](https://logrocket.com/signup/), a DVR for web apps
 
![LogRocket Dashboard Free Trial Banner](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/1d0cd-1s_rmyo6nbrasp-xtvbaxfg.png?resize=1200%2C677&ssl=1)
 
[LogRocket](https://logrocket.com/signup/) is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
 
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
 
[Try it for free](https://logrocket.com/signup/).
* * *
The post [Alternatives to React Storybook](https://blog.logrocket.com/alternatives-to-react-storybook/) appeared first on [LogRocket Blog](https://blog.logrocket.com).