storybookjs/storybook

[Bug]: "Show code" shows the story but the tags are displayed as HTML entities

Open

#30705 opened on Feb 27, 2025

View on GitHub
 (5 comments) (3 reactions) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
block: sourcebughelp wantedsev:S3web-components

Description

Describe the bug

I have a Stencil x Storybook repository configured, where I am creating some Stencil components and showing them in Storybook.

Here is the story I have configured for my component:

const AnonymousTemplate = args => `<deepgram-header active="${args.active}" debug="${args.debug}"></deepgram-header>`;

export const Anonymous = AnonymousTemplate.bind({});
Anonymous.args = {
  active: 'playground',
  debug: false,
};

Anonymous.parameters = {
  viewport: {
    defaultViewport: 'desktop',
  },
  layout: 'fullscreen',
};

When I run the app, everything but the code view works great. This is what appears in the show code box:

&lt;deepgram-header active="playground" debug="false"&gt;&lt;/deepgram-header&gt;

Reproduction link

https://github.com/deepgram/deepgram-components

Reproduction steps

  1. Clone the repository
  2. npm install
  3. npm start
  4. Click to the header component
  5. Click show code on either of the stories shown there

System

Storybook Environment Info:

  System:
    OS: macOS 15.4
    CPU: (12) arm64 Apple M3 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.9.0 - ~/.nvm/versions/node/v22.9.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v22.9.0/bin/yarn
    npm: 10.8.3 - ~/.nvm/versions/node/v22.9.0/bin/npm <----- active
  Browsers:
    Chrome: 133.0.6943.127
    Safari: 18.4
  npmPackages:
    @storybook/addon-essentials: ^8.6.0 => 8.6.0 
    @storybook/addon-viewport: ^8.6.0 => 8.6.0 
    @storybook/blocks: ^8.6.0 => 8.6.0 
    @storybook/experimental-addon-test: ^8.6.0 => 8.6.0 
    @storybook/test: ^8.6.0 => 8.6.0 
    @storybook/web-components: ^8.6.0 => 8.6.0 
    @storybook/web-components-vite: ^8.6.0 => 8.6.0 
    storybook: ^8.6.0 => 8.6.0

Additional context

This is using @storybook/web-components and @storybook/web-components-vite to work with Stencil components. Everything is working extremely well, except for this code view.

Contributor guide

Tech stack
typescriptreactweb components
Domain
frontenddocumentation
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Storybook basicsWeb components understanding
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65
Research direction
Investigate the 'Show code' functionality in the @storybook/web components addon. The issue is that HTML tags are being displayed as HTML entities (e.g., < becomes &lt;). This likely occurs in the code block rendering or in the transformation of story source. Look at files related to source generation, particularly in the addon docs or blocks package. Check if there is any escaping logic that needs to be adjusted for web components.