Registry / web-framework / react-styleguidist

react-styleguidist

library13.1.4jsnpmunverified

React Styleguidist is a robust tool for generating living style guides and developing React components in isolation. It provides a hot-reloaded development server where developers can view, interact with, and document components. The current stable version is 13.1.4, with recent maintenance releases addressing bug fixes and minor improvements, typically seeing several releases per year including minor versions and patches. Key differentiators include its reliance on Markdown files for component documentation, automatic listing of `propTypes`, and the ability to show live, editable usage examples. It also offers extensive configuration options for Webpack and theming, allowing deep integration into existing project setups. Unlike some alternatives, it focuses on generating a static style guide from existing components and their documentation, rather than being a visual drag-and-drop builder, promoting a documentation-driven development workflow.

web-framework testing

npm install react-styleguidist

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-STYLEGUIDIST

react-styleguidist

web-frameworkjavascriptv13.1.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

styleguidist

✓ const styleguidist = require('react-styleguidist');

✗ import styleguidist from 'react-styleguidist';

The primary programmatic API is a CommonJS default export factory function. ESM `import` is not commonly used or directly supported for the Node.js API without a transpilation step.

styleguide.config.js (config export)

✓ module.exports = { /* config */ };

✗ export default { /* config */ };

Configuration files like `styleguide.config.js` typically use CommonJS `module.exports` for their configuration object. While ESM syntax might work in some environments with proper setup, `module.exports` is the idiomatic and most compatible approach.

styleguidist(config).build

✓ const styleguidist = require('react-styleguidist')(config); styleguidist.build((err, conf) => { /* ... */ });

✗ import { build } from 'react-styleguidist';

The `build` method is available on the object returned by the `react-styleguidist` factory function, not as a direct named export from the package.

This quickstart sets up a basic `react-styleguidist` project. It includes `package.json` scripts, a `styleguide.config.js` with Babel for JSX support, a simple `Button` component, and its accompanying Markdown documentation.

{ "name": "my-component-library", "version": "1.0.0", "scripts": { "styleguide": "styleguidist start", "styleguide:build": "styleguidist build" }, "dependencies": { "react": ">=18.0", "react-dom": ">=18.0" }, "devDependencies": { "react-styleguidist": "^13.1.4", "babel-loader": "^9.0.0", "@babel/core": "^7.0.0", "@babel/preset-env": "^7.0.0", "@babel/preset-react": "^7.0.0" } } // styleguide.config.js module.exports = { components: 'src/components/**/*.jsx', webpackConfig: { module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/preset-react'] } } ] } }, title: 'My Component Library Style Guide' }; // src/components/Button/Button.jsx import React from 'react'; import PropTypes from 'prop-types'; function Button({ children, onClick = () => {} }) { return ( <button style={{ padding: '10px 20px', border: 'none', borderRadius: '5px', backgroundColor: '#2D9EE0', color: 'white', cursor: 'pointer', }} onClick={onClick} > {children} </button> ); } Button.propTypes = { /** * Button content */ children: PropTypes.node.isRequired, /** * Click handler */ onClick: PropTypes.func, }; export default Button; // src/components/Button/Button.md ```## Button A versatile button component. ### Usage ```jsx <Button onClick={() => alert('Clicked!')}>Click Me</Button> ``` ```jsx <Button>Another Button</Button> ``` ```

styleguidist --version

Debug

Known issues

breakingReact Styleguidist v13.0.0 dropped support for React 16. Projects using v13 or later must use React 17 or newer.

fix

Upgrade your project's `react` and `react-dom` dependencies to version `^17.0.0` or `^18.0.0`.

affects: >=13.0.0

breakingReact Styleguidist v12.0.0 deprecated support for Webpack 4. If you are using v12 or higher, your project must use Webpack 5.

fix

Upgrade your project's `webpack` and `webpack-cli` dependencies to version `^5.0.0`.

affects: >=12.0.0

gotchaThe `defaultProps` property on functional components is deprecated in modern React (v18+). While React Styleguidist v13.1.3 fixed an internal bug related to `defaultProps`, direct usage on functional components is discouraged.

fix

For functional components, migrate `defaultProps` to use default parameter values or destructuring with defaults directly in the function signature (e.g., `function Button({ children, onClick = () => {} })`).

affects: >=13.1.3

gotchaIncorrect Webpack configuration is a common source of issues, leading to compilation failures or components not rendering correctly within the style guide. React Styleguidist internally uses Webpack and allows extensive customization.

fix

Carefully review the 'Configuring Webpack' section in the official documentation. Ensure all necessary loaders (e.g., `babel-loader`, `css-loader`) and plugins are installed as dev dependencies and correctly configured in `styleguide.config.js`.

affects: >=11.0.0

Errors

Common errors & fixes

Error: Webpack 4 is no longer supported.

Your project is using `react-styleguidist` v12 or higher with Webpack 4.

fix

Upgrade Webpack to version 5: `npm install webpack@^5 webpack-cli@^4 --save-dev`.

Error: You must install peer dependencies: react@>=18.0 react-dom@>=18.0

Your project is running `react-styleguidist` v13.1.1 or higher with an older version of React or ReactDOM.

fix

Upgrade `react` and `react-dom` to version 18 or higher: `npm install react@^18.0.0 react-dom@^18.0.0`.

Error: Cannot find module 'babel-loader' (or similar loader name)

Your `styleguide.config.js` requires a specific Webpack loader (e.g., `babel-loader`), but it has not been installed as a dependency in your project.

fix

Install the missing loader as a development dependency: `npm install --save-dev babel-loader` (replace `babel-loader` with the actual missing loader).

TypeError: Cannot read properties of undefined (reading 'build')

Attempting to call `.build()` or `.server()` directly on `require('react-styleguidist')` without passing a configuration object to the factory function.

fix

Pass your configuration object to the `react-styleguidist` factory function to instantiate it correctly: `const styleguidist = require('react-styleguidist')(config); styleguidist.build(...);`

Upgrade

Version history

13.1.4latest on npm

Audit

Dependencies

reactrequiredRequired peer dependency for React component rendering.

react-domrequiredRequired peer dependency for React DOM rendering.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/styleguidist/react-styleguidist ↗

packagehttps://www.npmjs.com/package/react-styleguidist ↗

homepagehttps://react-styleguidist.js.org ↗