Introduction
Welcome to the React Cosmos documentation!
What Is React Cosmos?
React Cosmos is a powerful tool for developing and testing UI components in isolation. It allows you to focus on one component at a time, resulting in faster iteration and higher-quality components.
With React Cosmos, you can build a component library that keeps your project organized and friendly to new contributors. Reusing components across projects saves time and promotes consistency. Sharing your design language with the community enhances collaboration and ensures a cohesive user experience.
React Cosmos revolutionizes component development, testing, and sharing. Its sandbox environment and component library capabilities optimize your workflow, enabling you to deliver exceptional UI experiences.
Key Features
| Feature | Description |
|---|---|
| Fixtures | A file-system based module convention for defining component states effortlessly. Enhanced with decorators. |
| User Interface | User-friendly interface for browsing fixtures. Component preview with responsive viewports. |
| Control Panel | Component data manipulation UI based on component props and custom input definitions. |
| Static Export | An interactive component library deployable to any static hosting service. |
| Integration | First-class integrations with Vite, Webpack, React Native, Next.js, and support for integrating with custom setups. |
| Plugins | Full-stack plugin system for extending every aspect of React Cosmos to suit your needs. |
| High Quality | 100% TypeScript. Minimal dependencies. Meticulously designed and tested to ensure the best developer experience. |
Why Is React Cosmos Architecturally Unique?
React Cosmos aims to be lightweight and efficient by employing the following strategies:
- Library over framework approach: Instead of replicating all the environments it operates in, React Cosmos functions as a modular library that can be seamlessly integrated into any environment. This enables compatibility with a wide range of bundlers while ensuring a compact and robust React Cosmos codebase.
- Comprehensive plugin system: React Cosmos offers extensive extendability while maintaining a small surface area of powerful low-level plugin APIs. This means that all aspects of React Cosmos can be easily extended, and even the core functionality is built using the very same plugin system.
- Dedicated to React: React Cosmos focuses solely on React. By doing so, it harnesses the full potential of the React component model and delivers an exceptional experience for React developers. We firmly believe that React is still just getting started and holds a bright future ahead.
For a detailed explanation of React Cosmos' architecture, visit the Architecture section.