/storybook-addon-html

Primary LanguageTypeScript

Storybook Addon HTML

This addon for Storybook adds a tab that displays the compiled HTML for each story.

Getting Started

With NPM:

npm i --save-dev @kickstartds/storybook-addon-html

With Yarn:

yarn add -D @kickstartds/storybook-addon-html

Register addon

// .storybook/main.js

module.exports = {
  // ...
  addons: [
    "@kickstartds/storybook-addon-html",
    // ...
  ],
};

Usage

You can add decorators to wrap the story. This is usefull if you only want a subset of your decorators being applied for the html output.

export const parameters = {
  html: {
    decorators: [
      (storyFn, context) => (
        <MyProvider>
          {storyFn(context)}
        </MyProvider>
      )
    ],
  },
};

Supported frameworks

  • React