As a react developer, I believe that everyone who is working on a react project must develop all the components separately for taking advantage of that components philosophy behind this amazing front-end framework.
Developing components separately can help you gain control of your project workflow, which allows you to develop and test every component first without having to worry about the whole project logic, more than that with this approach you can improve the components reuse, testability and development speed, which will simplify the organization and the distribution of tasks within your team.
If this is your first time to hear about storybook or react styleguidist, this article is your best place to start with, but if you have already heard about it or perhaps have worked with it, this article also is super helpful to know some amazing storybook alternatives.
Let's started.
Storybook : (21K Stars )
One of the most famous and powerful react tool to build components, that’s described in GitHub as an interactive UI component dev & test that support react, react-native, vue and angular. In other words, storybook is a development environment for UI components. It allows you to browse all your components project and view the different states of each component. Storybook comes with a lot of add-ons for components design, documentation, testing and much more. As an example, you can play with your component props easily using the storybook prop add-on.
You can use storybook-preview and storybook-deploy to generate and deploy your stories as a documentation static website.
React Cosmos : (4k Starts)
Cosmos scan your project for component and enables you to render components under any combination of props, context, and state. That means if you have already started your project and you need to add new functionalities to your components without losing your mind. Cosmos will Mock every external dependency like your rest API or local storage. Also, you can see states evolve in real-time while interacting with running instances, to handle all those features, Cosmos uses the fixture and proxy architecture.
React Styleguidist : (4k stars)
React Styleguidist is a component development environment with hot reloaded dev server and a living style guide that you can share with your team. It lists component prototypes and shows live, editable usage examples based on Markdown files and it works with react create app out of the box.
Catalog : (500 stars)
Catalog is a tool for creating living style guides for digital products. It combines design documentation and assets with real and live components in one single place. I think this tool is more powerful when you need to present your system design colors, typography, audio, video and of course, your react component, and much more inside your markdown pages and with multiple screen size options.
There are also other tools like Atellier, Carte Blanche, React BlueKit, React Cards, React-demo.
If I Am missing a good tool feel free to share it with us in a comment. And if you are using any tools let me know your feedback and your experience about it?
Top comments (8)
Do these tools fall into any broad categories? As in, it doesn't seem like a team would use all of these right? I'm wondering what would be the minimum that I can deploy to my team with the lowest friction...
Using storybook is so helpful in your case.
My team uses Styleguidist at the moment. It’s working out pretty well although demoing certain components doesn’t always work well with the way the demo screens at built with their default css. The live code editor is really cool and auto-documentation of props is very nice (JsDoc support as well)
Yes,it look like all those tools have some kind of limitations specifically on css position and dragging behavior
Storybook looks great!
Thanks for the heads up on these! Really useful for a beginner like me :D
Welcome 😊
Thanks for sharing, I think MDX and some new mdx tools are really interesting in that field.
jxnblk.com/mdx-go/
jxnblk.com/mdx-docs/