Need Prize Money

    @whitespace/storybook-addon-html
    TypeScript icon, indicating that this package has built-in type declarations

    5.0.3 • Public • Published

    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.

    Animated preview

    Getting Started

    Install the addon and its dependencies.

    With NPM:

    npm i --save-dev @whitespace/storybook-addon-html prettier react-syntax-highlighter

    With Yarn:

    yarn add -D @whitespace/storybook-addon-html prettier react-syntax-highlighter

    Register addon

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

    Usage

    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 in the html parameter:

    // .storybook/preview.js
    
    export const parameters = {
      // ...
      html: {
        prettier: {
          tabWidth: 4,
          useTabs: false,
          htmlWhitespaceSensitivity: "strict",
        },
      },
    };

    You can override the wrapper element selector used to grab the component HTML.

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

    Some frameworks put comments inside the HTML. If you want to remove these you can use the removeComments parameter. Set it to true to remove all comments or set it to a regular expression that matches the content of the comments you want to remove.

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

    You can also use the removeEmptyComments parameter to remove only empty comments like <!----> and <!-- -->.

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

    You can override the showLineNumbers and wrapLines settings for the syntax highlighter by using the highlighter parameter:

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

    Install

    npm i @whitespace/storybook-addon-html

    DownloadsWeekly Downloads

    23,119

    Version

    5.0.3

    License

    AGPL-3.0-or-later

    Unpacked Size

    53.9 kB

    Total Files

    27

    Last publish

    Collaborators

    • ruslana_zholobnytska
    • hinderson
    • jeanfredrik
    • linnws
    • whitespace-se
    • pbrotherton
    • johan-westin
    • degeer