React Cosmos

A dev environment for building scalable, high-quality user interfaces.

• 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?

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!

🌤