Markdown Docs

Storybook addon for auto importing markdown/html docs.

Table of Contents

• Getting started
• Read More

Getting started

1. Install the addon:

yarn add @sheriffmoose/storybook-md -D

2. 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",
        ...
    ],
    ...
}

3. 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.

• Addon-Kit is a developer’s dream come true
• Storybook Markdown Docs (not mdx)
• Storybook Markdown Docs (not mdx) Part 2
• Storybook Addon for Auto Markdown Import
• Support .html files in Storybook

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

• storybookjs/storybook #20679 Update Story Indexer to support DocsOnly pages from Markdown/HTML
• storybookjs/docs-mdx #10 Add support for Markdown/HTML titles