Back to integrations
Add your integration
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
HTML Preview
A Storybook addon that extracts and displays compiled syntax-highlighted HTML
npm install @whitespace/storybook-addon-html
Last updated 9 days ago
Downloads per week
Readme View on GitHub

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


Version 6 of this addon requires Storybook 8 and Prettier 3. If you are still using Storybook 7, you can use version 5.

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: [
    // ...


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

Another way of hiding unwanted code is to define the transform option. It allows you to perform any change to the output code, e.g. removing attributes injected by frameworks.

html: {
  transform: (code) => {
    // Remove attributes `_nghost` and `ng-reflect` injected by Angular:
    return code.replace(/(?:_nghost|ng-reflect).*?="[\S\s]*?"/g, "");
Join the community
6,588 developers and counting
WhyWhy StorybookComponent-driven UI
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software

Maintained by
Special thanks to Netlify and CircleCI