Storybook/HTML for Addon-Docs - storybook

Question

How can I add docs in 'mdx' format for my storie in Storybook/HTML? How can i connect my example.stories.js with example.stories.mdx, how example.stories.mdx should look like? On official documentation there is an example for React but I can`t find some guide dedicated for Storybook/HTML.

Answer 1

The key is to write the stories and docs separately, embedding the stories in the docs using their IDs (an ID of a story can be found in the URL, something like stories--story).
Let's say you have this index.stories.js file:
import docs from './docs.mdx'; // this import is important
export default {
title: 'Demo',
parameters: { // specify the docs MDX content here
docs: {
page: docs,
}
}
};
export const Heading = () => '<h1>Hello World</h1>';
export const Button = () => {
const btn = document.createElement('button');
btn.type = 'button';
btn.innerText = 'Hello Button';
btn.addEventListener('click', e => console.log(e));
return btn;
};
And the corresponding docs.mdx file would contain embedded stories:
import { Story, Preview } from '#storybook/addon-docs/blocks';
# Index
Writing `Markdown` here:
<Preview>
<Story id="demo--heading" />
<Story id="demo--button" />
</Preview>
And an individual story:
<Story id="demo--heading" />
Learn more:
MDX reference on embedding stories
Installation requirements for MDX