rakesh-mohanta / cosmos

DX tool for designing truly encapsulated React components.

Cosmos

Cosmos is a JavaScript DX* tool for designing truly encapsulated React components.

It scans your project for React component fixtures and loads them inside ComponentPlayground, enabling you to:

1. Render your components under any combination of props and state
2. See component states evolve in real-time as you interact with running instances

Working with ComponentPlayground improves the component design because it surfaces any implicit dependencies. It also forces you to define sane inputs for every component, making them more predictable and easier to debug down the road.

*DX stands for Developer Experience, the counterpart of UX in building a product, system or service.

Requirements

• You should already be using CommonJS modules to structure your code and webpack to bundle your modules for the browser
• You need to create fixtures for each set of props and states you want to load your components with.

Installing

Cosmos used to be dev dependency binary, but has been transformed into a webpack boilerplate. This makes it more customizable and easier to understand. Check out the webpack-boilerplate folder for instructions.

Thank you for your interest!

Explore the Contributing Guide for more information.

Thanks to Kreativa Studio for the Cosmos logo.