https://github.com/malcolm-kee/react-showroom
Document React components by declaring props definition and writing markdown.
https://github.com/malcolm-kee/react-showroom
component-library react showroom typescript
Last synced: about 1 year ago
JSON representation
Document React components by declaring props definition and writing markdown.
- Host: GitHub
- URL: https://github.com/malcolm-kee/react-showroom
- Owner: malcolm-kee
- Created: 2021-08-29T17:29:48.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2023-11-11T03:46:39.000Z (over 2 years ago)
- Last Synced: 2025-04-12T19:53:14.077Z (about 1 year ago)
- Topics: component-library, react, showroom, typescript
- Language: TypeScript
- Homepage: https://react-showroom.js.org/
- Size: 2.14 MB
- Stars: 44
- Watchers: 2
- Forks: 1
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-showroom
[](#contributors-)
[](https://badge.fury.io/js/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](https://webpack.js.org/)
- [esbuild](https://esbuild.github.io/)
- [react-docgen-typescript](https://www.npmjs.com/package/react-docgen-typescript)
- [Stitches](https://stitches.dev/)
- [Radix Primitives](https://www.radix-ui.com/)
- [xdm](https://github.com/wooorm/xdm)
## Inspired by
This project is largely inspired by [React Styleguidist](https://react-styleguidist.js.org/). 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](https://github.com/seek-oss/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](https://storybook.js.org/) 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](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
