Storybook Addon HTML

This addon for Storybook adds a tab that displays the compiled HTML for each story. It uses highlight.js for syntax highlighting.

Getting Started

With NPM:

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

With Yarn:

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

Register addon

// .storybook/main.js

module.exports = {
  // ...
  addons: [
    '@whitespace/storybook-addon-html/register',
    // ...
  ],
};

Usage

Add withHTML as a global decorator inside .storybook/preview.js:

// .storybook/preview.js

import { withHTML } from '@whitespace/storybook-addon-html/react';

export const decorators = [
  // ...
  withHTML,
];

The HTML is formatted with Prettier. You can override the Prettier config (except parser and plugins) by providing an object following the Prettier API override format:

// .storybook/preview.js

import { withHTML } from '@whitespace/storybook-addon-html/react';

export const decorators = [
  // ...
  withHTML({
    prettier: {
      tabWidth: 4,
      useTabs: false,
      htmlWhitespaceSensitivity: 'strict',
    },
  }),
];

Supported frameworks

When importing the decorator, use the correct path for your framework, e.g. @whitespace/storybook-addon-html/react for React or @whitespace/storybook-addon-html/html for HTML.

Right now, the addon can be used with these frameworks:

• HTML
• React