Storybook and Docsify integrator (But it's altmost Docsify)
npm install @nju33/storybook__addon-docsify
Downloads per week



Install like below,

yarn add -D @nju33/storybook__addon-docsify

And you should add the following to your addon.js (if you're using TypeScript then addon.ts).

import '@nju33/storybook__addon-docsify/dist/register';

Finally, place Docsify root as index.html following like. (The details is in Docsify document.)

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <title>Document Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="Description" />
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css" />
    <div id="app"></div>
      window.$docsify = {
        basePath: '/',
        name: 'Document',
    <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>

After Docsify will do it for you. ๐Ÿ‘ป


In the below is first example.

storiesOf('html-button', module)
  // html-button/foo-bar.md
  .add('foo-bar', () => <button>foo-bar</button>)
  // html-button/bar-baz.md
  .add('bar-baz', () => <button>bar-baz</button>);

In the above, The document path is html-button/foo-bar. In this case, Storybook has interapted key is html-button--foo-bar that using -- as separator.

That -- is handled / by this addon. Thus index.html#/html-button/foo-bar will be loaded then.

If you want to change its behavior, You maybe change it by pass to parameter into your story.

storiesOf('html-button', module)
    docsify: {
      path: 'html-button/README'
  // html-button/README.md
  .add('foo-bar', () => <button>foo-bar</button>)
  // html-button/README.md
  .add('bar-baz', () => <button>bar-baz</button>);

This addon read the parameter using by docsify. By setting path, you can make Docsify is loaded *.md you wish.