React Cosmos

React Cosmos is a component development sandbox: instead of building and testing UI components inside a full application (with all its routing, state, and data dependencies), you write small “fixtures” that render a component in isolation with specific props and mock data, then browse and interact with every fixture through a dedicated UI.

The project is a monorepo of focused packages rather than one monolithic tool — react-cosmos-core and react-cosmos-renderer handle the shared fixture-rendering logic, react-cosmos-dom and react-cosmos-native provide platform-specific rendering for web and React Native, and separate plugin packages (react-cosmos-plugin-vite, -webpack, -boolean-input, -open-fixture) extend the core with bundler support and UI controls rather than baking every feature into the core.

MIT licensed and actively maintained, React Cosmos works with both Vite and Webpack projects, making it a build-tool-agnostic alternative for teams that want an isolated component workshop without adopting a specific bundler’s ecosystem.

What You Get

• A fixture-based workflow for rendering components in isolation with specific props and mock data
• A dedicated sandbox UI for browsing, interacting with, and switching between component fixtures
• Platform-specific renderers for both web (react-cosmos-dom) and React Native (react-cosmos-native)
• Pluggable bundler support for Vite and Webpack instead of being locked to one build tool

Common Use Cases

• Developing a new UI component in isolation before wiring it into the full application, without needing real data or routing set up
• Visually testing component states and prop combinations that are hard to trigger through the running app
• Building a living component library/workshop for a design system that developers can browse and reference
• Testing React Native components in a sandbox without deploying to a device or simulator for every change

Under The Hood

Architecture React Cosmos splits its functionality across many small packages instead of one large tool: react-cosmos-core defines the shared fixture and configuration model, react-cosmos-renderer handles rendering fixtures, and react-cosmos-dom/react-cosmos-native implement platform-specific rendering on top of that shared core. Bundler support (react-cosmos-plugin-vite, react-cosmos-plugin-webpack) and UI controls (react-cosmos-plugin-boolean-input, react-cosmos-plugin-open-fixture) are implemented as plugins rather than hardcoded into the core, so the tool can support new bundlers or input types without core changes.

Tech Stack TypeScript throughout, with react-cosmos-ui providing the sandbox interface, Vite and Webpack plugin packages for bundler integration, and dedicated native support for React Native projects. Tested with Codecov-tracked coverage and CI-gated builds via GitHub Actions.

Code Quality CI status and Codecov coverage badges are both actively tracked in the README, and the monorepo’s clean package boundaries (core/renderer/platform/plugins) suggest a codebase designed for maintainability across a wide surface area (many packages) rather than a single large one.

What Makes It Unique Unlike component-workshop tools tied to a specific bundler, React Cosmos’s plugin-based architecture treats Vite and Webpack support as swappable plugins on top of a shared rendering core — the same fixture format works whether you’re on a Vite or Webpack project, and the same core extends to React Native, not just web.

Self-Hosting

Licensing Model MIT licensed — fully open source with no license key or paid tier.

Self-Hosting Restrictions None; React Cosmos runs entirely as a local development tool with no hosted service or account.

License Key Required No.