Storybook addon to aid in developing with Docusaurus
npm install storybook-addon-docusaurus
Downloads per week


๐Ÿฆ– A Storybook addon to aid in developing with Docusaurus.

This addon does the following:

  • Applies the core Docusaurus Webpack config.
    • Module aliases such as @theme, @docusaurus, @generated, @site, etc. are recognized. This also means @theme (and sibling aliases) respect loading order between core theme, plugin-provided, and Swizzled components.
    • Correctly loads SVG, fonts, MDX, and CSS modules the Docusaurus way.
    • Prefers docusaurus-plugin-sass over other SASS loaders.
    • Sets up resolution of assets in staticDirectories.
    • Passes the Webpack config through all plugins that have a configureWebpack method so they can apply their own tweaks.
  • Imports all the client modules contributed via plugins that have a getClientModules method, so they are loaded into the Storybook preview window.
    • For example, if you're using the classic theme it'll automatically load the Infima global styles and the customCss file you've set up.

โš ๏ธ This is a work in progress! If you have time and would like to improve this addon please go ahead and open a PR.


Here's how to use this addon:

  • Storybook needs to be set up in your project.
  • Install the dependency with yarn add --dev storybook-addon-docusaurus or npm i --save-dev storybook-addon-docusaurus
  • Add storybook-addon-docusaurus it to the list of addons in ./storybook/main.js. Learn more.
  • You should now be able to import components that uses Docusaurus aliases.