React Cosmos

Sandbox for developing and testing UI components in isolation.

• Visual TDD. Develop one component at a time. Isolate the UI you're working on and iterate quickly. Reloading your whole app on every change is slowing you down!
• Component library. Bookmark component states, from blank states to edge cases. Your component library keeps you organized and provides a solid foundation of test cases.
• Open platform. React Cosmos can be used in powerful ways. Including snapshot and visual regression testing, as well as custom integrations tailored to your needs.

Live demo Documentation Sponsor

Why React Cosmos?

5 Reasons to Choose React Cosmos | Medium

React Cosmos

• Makes developers more productive
• Leads to high-quality, reusable UI components
• Makes it easy to share component libraries
• Helps with automated testing

React Cosmos is

• An isolated component environment
• Simple, detail-oriented and battle-tested
• The result of over 5 years of fine-tuning
• React-only
• Compatible with other bundlers (aside from webpack)

React Cosmos is not

• A style guide generator
• A documentation tool
• A testing framework

Many other similar tools have emerged since React Cosmos was created. Choose wisely based on your unique needs and personal taste.

A Brief History of React Cosmos

• 2014 Cosmos.js, autonomous components for scaling user interfaces | Reddit
• 2015 Can components be truly encapsulated? | React Europe
• 2016 Fighting for Component Independence | Medium
• 2017 UI Development Made Simple | JSHeroes
• 2019 React Cosmos 5 in 21 tweets | Twitter
• 2019 I made a tool for creating React components with visual TDD | SourceSort
• 2020 A development environment for ambitious developers | SurviveJS

Credits

Hi there. I'm Ovidiu, the core maintainer of React Cosmos. I spend ridiculous amounts of time perfecting this project because I love building user interfaces and making useful things.

React Cosmos is licensed as MIT and will always be free. If you want to support me, however, become a Sponsor and ensure this journey continues!

Special thanks to

• @maxsalven and @xavxyz for the long conversations and recurring support along the years.
• @catalinmiron, @flaviusone, @NiGhTTraX, @ovidiubute, @RadValentin, @tkjone, and all the other contributors.
• Kreativa Studio for the iconic Cosmonaut illustration.

React Cosmos is still alive because of you!