Styleguidist generates documentation for your components based on the comments in your source code, propTypes declarations, and Readme files.
See examples of documented components in our demo style guide.
Code comments and propTypes
Styleguidist will display your components’ JSDoc comment blocks. Also, it will pick up props from propTypes declarations and display them in a table.
Usage examples and Readme files
Styleguidist will look for any
ComponentName.md files in the component’s folder and display them. Any code block with a language tag of
You can configure examples file name with the getExampleFilename option.
static modifier with a language tag (e.g.
External examples using doclet tags
Additional example files can be associated with components using
@example doclet syntax.
The following component will also have an example loaded from the
You’ll need a regular example file (like
Readme.md) too when skipComponentsWithoutExample is
By default, any methods your components have are considered to be private and are not published. Mark your public methods with JSDoc
@public tag to get them published in the docs:
By default, all props your components have are considered to be public and are published. In some rare cases, you might want to remove a prop from the documentation while keeping it in the code. To do so, mark the prop with JSDoc
@ignore tag to remove it from the docs:
Defining custom component names
@visibleName JSDoc tag to define component names that are used in the Styleguidist UI:
The component will be displayed with a custom “The Best Button Ever 🐙” name and this will not change the name of the component used in the code of your app or Styleguidist examples.
Using JSDoc tags
You can use the following JSDoc tags when documenting components, props and methods:
When documenting props you can also use:
All tags can render Markdown.
Writing code examples
Code examples in Markdown use ES6+JSX syntax. You can use the current component without explicitly importing it:
To use other components, you need to explicitly
You can also
import other modules, like mock data:
Or you can explicitly import all your example dependencies, to make examples easier to copy into your app code:
rsg-example module is an alias defined by the moduleAliases config option.
You can only use
import by editing your Markdown files, not by editing the example code in the browser.
Each example acts as a function component and you can use the
useState Hook to handle its state.
If a component uses React Context, you need a context provider in the example or in a custom
Wrapper component. See ThemeButton example.
import it in Markdown.
In some cases Styleguidist may not understand your components, see possible solutions.