Package Exports

@whitespace/storybook-addon-html
@whitespace/storybook-addon-html/html

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@whitespace/storybook-addon-html) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Storybook Addon HTML

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

Animated preview

Requirements

Storybook 10.x

Use this version of the addon.

Storybook 9.x

Use version 8.x of this addon.

Installation

Install the addon with your package manager.

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

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

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

Register addon

// .storybook/main.ts
import type { StorybookConfig } from '@storybook/your-framework';

const config: StorybookConfig = {
  // ...
  addons: ['@whitespace/storybook-addon-html'],
};

export default config;

Usage

All options are configured under the html story parameter.

`root`

Override the wrapper selector used to capture HTML.

export const parameters = {
  html: {
    root: '#my-custom-wrapper', // default: '#storybook-root, #root'
  },
};

`removeComments`

Remove comments from captured HTML. Set to true for all comments, or pass a RegExp to remove matching comments only.

export const parameters = {
  html: {
    removeComments: /^\s*remove me\s*$/,
  },
};

`removeEmptyComments`

Remove empty comments like  and .

export const parameters = {
  html: {
    removeEmptyComments: true,
  },
};

`highlighter`

Configure syntax highlighter rendering in the panel.

export const parameters = {
  html: {
    highlighter: {
      showLineNumbers: true, // default: false
      wrapLines: false, // default: true
    },
  },
};

`transform`

Transform output HTML before rendering.

export const parameters = {
  html: {
    transform: (code: string) => code.replace(/(?:_nghost|ng-reflect).*?="[\S\s]*?"/g, ''),
  },
};

`disable`

Hide/disable the panel for a story.

export const parameters = {
  html: {
    disable: true,
  },
};