New
Automatic visual tests in Storybook, plus 2.2x faster build times for React+TSVisual test with Chromatic
Star80,457
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
@hewes/storybook-addon-docs-graymatter
Storybook graymatter docs plugin
npm install @hewes/storybook-addon-docs-graymatter
Last updated almost 2 years ago
7
Downloads per week
Readme View on GitHub

GitHub GitHub tag (latest by date) npm (scoped) node-current (scoped)

A Storybook front-matter documentation addon

drop-in for integrating, for example, docusaurus or github docs

Usage

Install

npm install @hewes/storybook-addon-docs-graymatter

Then edit .storybook/main.js

module.exports = {
  "stories": [
    "../docs/**/*.md",
    // ...
  ],
  "addons": [
    {
      name: "@hewes/storybook-addon-docs-graymatter"
    },
    // ...
  ],
}

Options

Option Description Default
prefix Prefix the title with this "Folder" i.e. a value of Documentation would create titles like Documentation/Title, which would therefore be in a sub folder.
fileNameFallback If this is true then files without front-matter will still be displayed using the relative filename as the title false

TODO

  • filename fallback for files without front-matter
  • sidebar support (to support drop-in from docusaurus)
  • use https://github.com/atlassian/gray-matter-loader

Reference

Join the community
6,319 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI