@storybook-addons/docs

Documentation layout for official @storybook/addon-docs with the ability to embed examples and placeholders.

Usage no npm install needed!

<script type="module">
  import storybookAddonsDocs from 'https://cdn.skypack.dev/@storybook-addons/docs';
</script>

README

@storybook-addons/docs · npm (scoped)

Documentation layout for official @storybook/addon-docs with the ability to embed examples and placeholders.

Install

npm i -D @storybook-addons/docs @storybook/addon-docs

Usage

  1. Add @storybook/addon-docs into addons in main.js file:
module.exports = {
  addons: ['@storybook/addon-docs'],
}
  1. Set DocsPage in preview.js file:
import { addParameters } from '@storybook/react'
import { DocsPage } from '@storybook-addons/docs'

addParameters({
  docs: {
    container: DocsPage,
  },
})
  1. Add documentation for your story:
import documentation from './Component.md'

export default {
  title: 'Controls/Component',
  parameters: {
    docs: {
      readme: documentation,
    },
  },
}

Params

Option Description Default
enableNavigation Show navigation at right sidebar true
readme Documentation content
placeholders Object with placeholder which should be replaced

Markdown syntax

Inline stories

Your can embeded single or multipile stories (with tabs) in documentation:

<!-- single story -->

{{%story::story-id%}}

<!-- multi stories with tab names -->

{{%story::tabName:story-id|tabName:story-id%}}

Placeholders

If necessary you can embedded placeholder for example other part of documentation:

{{%inject::placeholderName%}}

License

Project is MIT licensed.