New
Storybook for SvelteKitAutomate with Chromatic
Storybook Day 2023
Star77,604
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
HTML preview
This a fork intended to make use of pull request in original addon: https://github.com/whitespace-se/storybook-addon-html/pull/61
npm install @tanelterras-elisa/storybook-addon-html-raw-html
Last updated 9 months ago
6
Downloads per week
Readme View on GitHub

Storybook Addon HTML

This a fork intended to make use of pull request in original addon: https://github.com/whitespace-se/storybook-addon-html/pull/61

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

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',
    // ...
  ],
};

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
  },
};

When using Web Components, the HTML will contain empty comments, i.e. <!---->. If you want to remove these, use the removeEmptyComments parameter:

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

By default the HTML will contain DOM rendered attributes. If you want to remove these, use the showRawHTML parameter:

export const parameters = {
  html: {
    showRawHTML: 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
    },
  },
};

Supported frameworks

As of version 4.0.0 all frameworks are supported per default 🎉

Join the community
6,056 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI