New
Component Story Format 3 is hereAutomate with Chromatic
Storybook Day 2023
Star76,398
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Markdown Docs
Storybook addon for auto importing markdown docs.
npm install @sheriffmoose/storybook-md
Last updated 11 days ago
74
Downloads per week
Readme View on GitHub

Markdown Docs

Storybook addon for auto importing markdown/html docs.

Table of Contents

Getting started

  1. Install the addon:
yarn add @sheriffmoose/storybook-md -D
  1. Add the addon and update the stories imports in your main.js
module.exports = {
    ...
    "stories": [
        "../*.@(md|html)",
        "../src/**/*.stories.@(js|jsx|ts|tsx)"
    ],
    "addons": [
        "@sheriffmoose/storybook-md",
        ...
    ],
    ...
}
  1. Optionally you may want to pass mdInclude and/or mdExclude options if needed like so:
module.exports = {
    addons: [
        {
            name: '@sheriffmoose/storybook-md',
            options: {
                mdInclude: path.join(process.cwd(), 'src'),
                mdExclude: [/\.component\.html/] // Disable loading Angular component files
            }
        }
    ]
}

That's it, you're done. Now you will find README & CHANGELOG along with HTML docs if you want as well, in your Storybook sidebar and you can open them and see the contents.

Read More

I have a series of articles written to explain the motivation and purpose behind this addon. Feel free to read through.

Also make sure to check out these PRs that made this addon possible:

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

Maintained by
Chromatic
Special thanks to Netlify and CircleCI