11.1K ·GitHub
What is this?
React Styleguidist is a component development environment with a hot-reloaded dev server and a living style guide you can share with your team. It lists component propTypes and shows live, editable usage examples pulled from Markdown files.
React Styleguidist is a component development environment with a hot-reloaded dev server and a living style guide you can share with your team. It lists component propTypes and shows live, editable usage examples pulled from Markdown files.Is this a component library or a documentation tool?It is a documentation/dev-environment tool that generates a style guide site from your existing React components, not a UI component library itself.
It is a documentation/dev-environment tool that generates a style guide site from your existing React components, not a UI component library itself.How do I get it running on my project?Install Styleguidist and point it at your component files following the Getting Started and Locating components guides, then run its dev server CLI to view the live style guide.
Install Styleguidist and point it at your component files following the Getting Started and Locating components guides, then run its dev server CLI to view the live style guide.Do I need to set up webpack myself?If you use Create React App it works out of the box, but for other setups you need to configure webpack yourself so Styleguidist knows how to load your code.
If you use Create React App it works out of the box, but for other setups you need to configure webpack yourself so Styleguidist knows how to load your code.Does it work with Vue components too?No, this project is React-only; Vue projects need the separate 'Vue Styleguidist' integration.
No, this project is React-only; Vue projects need the separate 'Vue Styleguidist' integration.Can the dev server have custom backend endpoints?Yes, the examples show a style guide with custom Express endpoints, so you can extend the dev server with your own API routes.
Yes, the examples show a style guide with custom Express endpoints, so you can extend the dev server with your own API routes.Are there third-party add-ons for testing?Snapguidist adds snapshot testing, and react-styleguidist-visual adds automated visual testing using Puppeteer and pixelmatch.
Snapguidist adds snapshot testing, and react-styleguidist-visual adds automated visual testing using Puppeteer and pixelmatch.Is there proof it's used in real projects?The Showcase lists real adopters like Rumble Charts, Semantic UI Components for React, and Bulma Components.
The Showcase lists real adopters like Rumble Charts, Semantic UI Components for React, and Bulma Components.How are component examples written?Usage examples are written as live, editable code blocks inside Markdown documentation files next to each component.
Usage examples are written as live, editable code blocks inside Markdown documentation files next to each component.What are similar projects?docz, chakra-ui, fluentui, base-ui, Monocharts, react-redux-starter-kit, storybook, ink-kit
docz, chakra-ui, fluentui, base-ui, Monocharts, react-redux-starter-kit, storybook, ink-kitWhich topics is it in?hmr, developer-experience, styleguide, documentation-tool, react-components, express, webpack, design-system, component-library, ui-components, documentation, hacktoberfest
hmr, developer-experience, styleguide, documentation-tool, react-components, express, webpack, design-system, component-library, ui-components, documentation, hacktoberfest