Table of Contents

• Getting started
• Read More

Getting started

1. Install the addon:

1yarn add @sheriffmoose/storybook-md -D

2. Add the addon and update the stories imports in your main.js

1module.exports = {
2    ...
3    "stories": [
4        "../*.@(md|html)",
5        "../src/**/*.stories.@(js|jsx|ts|tsx)"
6    ],
7    "addons": [
8        "@sheriffmoose/storybook-md",
9        ...
10    ],
11    ...
12}

3. Optionally you may want to pass mdInclude and/or mdExclude options if needed like so:

1module.exports = {
2    addons: [
3        {
4            name: '@sheriffmoose/storybook-md',
5            options: {
6                mdInclude: path.join(process.cwd(), 'src'),
7                mdExclude: [/\.component\.html/] // Disable loading Angular component files
8            }
9        }
10    ]
11}

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