react-showroom

https://react-showroom.js.org/

Document React components by declaring props definition and writing markdown.

Key Features

• Auto generate documentations for your component props from the component's TypeScript definition.
• Write markdown to show examples to use the component, which will become an editable playground.
• Auto generated props control/knobs based on component props type definitions.
• Supported languages for live examples: typescript (TSX and TS), javascript (JSX and JS), and HTML.
• Improve collaborations: edit code/add comments on specific examples with shareable URL without any backend.
• Ensure the components are SSR-friendly - the site can be pre-render on build time.

Built With

• webpack
• esbuild
• react-docgen-typescript
• Stitches
• Radix Primitives
• xdm

Inspired by

This project is largely inspired by React Styleguidist. To be honest this project was started as my plan to rewrite it to understand how it works.

The standalone editor view is inspired by Playroom.

Philosophy

The philosophy of React Showroom is that you should be continuing your existing workflow (declaring component props/writing standard markdown) and the Showroom is just an automatic side product (hopefully a valuable one) of that workflow.

This is in contrast with Storybook where it aims to be central part of your development workflow (and requires you to write examples/documentations in a special format).

We believe that compared to languages (TypeScript and markdown), libraries are generally short-lived and often less stable. Write your documentations in a more stable medium gives you more freedom and allows you to migrate to alternative tool in future.

Roadmap

Following are the ideas that I want to implement as enhancements (but I not sure if they are possible):

• Run jest tests in the Showroom
• Vue support

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Malcolm Kee 💻 🐛

This project follows the all-contributors specification. Contributions of any kind welcome!