Storybook and Docsify integrator (But it's altmost Docsify)

View on Github



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="//" />
    <div id="app"></div>
      window.$docsify = {
        basePath: '/',
        name: 'Document',
    <script src="//"></script>

After Docsify will do it for you. 👻


In the below is first example.

storiesOf('html-button', module)
  // html-button/
  .add('foo-bar', () => <button>foo-bar</button>)
  // html-button/
  .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/
  .add('foo-bar', () => <button>foo-bar</button>)
  // html-button/
  .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.