# @storybook/addon-highlight

> Highlight DOM nodes within your stories

Latest version **8.6.14** (published 2025-05-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install @storybook/addon-highlight
pnpm add @storybook/addon-highlight
yarn add @storybook/addon-highlight
bun add @storybook/addon-highlight
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score; popular repo; extremely popular.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 8.6.14 |
| Published | 2025-05-16 |
| First published | 2022-06-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 11.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 91122 |
| Author | winkerVSbecks |
| Maintainers | ndelangen, shilman, tmeasday, ghengeveld, winkervsbecks, yannbf, kylegach, jreinhold, kasperpeulen, valentinpalkovic, domyen, storybook-bot |
| Keywords | storybook-addons, essentials, style, appearance |

## Links

- npm: https://www.npmjs.com/package/@storybook/addon-highlight
- Repository: https://github.com/storybookjs/storybook
- Homepage: https://github.com/storybookjs/storybook/tree/next/code/addons/highlight
- Issues: https://github.com/storybookjs/storybook/issues
- Funding: https://opencollective.com/storybook
- npm.io page: https://npm.io/package/@storybook/addon-highlight

## Dependencies (1)

- [@storybook/global](https://npm.io/package/@storybook/global.md) ^5.0.0

## Recent versions

- 8.6.14 (latest) — 2025-05-16
- 7.6.24 (v7) — 2026-03-06
- 8.6.18 (v8) — 2026-03-06
- 0.0.0-pr-34011-sha-c45b0f3f (v7-canary) — 2026-03-06
- 0.0.0-pr-34009-sha-c90626e7 (v8-canary) — 2026-03-04
- 0.0.0-pr-31494-sha-c99bda03 (canary) — 2025-05-16
- 9.0.0-alpha.12 (next) — 2025-03-30
- 8.2.10 (tag-for-publishing-older-releases) — 2024-11-04
- 7.1.1-pr-23508-1689802571-5ec8c1c3.0 (pr-23508) — 2023-07-19
- 7.1.1-pr-22631-1689802540-351503cb.0 (pr-22631) — 2023-07-19
- 7.1.0-alpha.29 (future) — 2023-06-06
- 0.0.0-pr-34011-sha-1f3f0b01 — 2026-03-04
- 8.6.17 — 2026-02-18
- 7.6.23 — 2026-02-18
- 0.0.0-pr-33859-sha-95913f7f — 2026-02-17
- … 1135 more at https://npm.io/package/@storybook/addon-highlight/versions

## README

# Storybook Addon Highlight

Storybook addon allows for highlighting specific DOM nodes within your story.

Use it to call attention to particular parts of the story. Or use it to enhance other addons that you might be building. For example, [Accessibility](https://storybook.js.org/addons/@storybook/addon-a11y/) addon uses it to highlight DOM nodes that are failing accessibility checks.

![Story with highlight](./docs/highlight.png)

## Usage

This addon requires Storybook 6.5 or later. Highlight is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run the following command:

yarn:

```sh
yarn add --dev @storybook/addon-highlight
```

npm:

```sh
npm install @storybook/addon-highlight --save-dev
```

pnpm:

```sh
pnpm add --save-dev @storybook/addon-highlight
```

Add `"@storybook/addon-highlight"` to the addons array in your `.storybook/main.js|ts`:

```ts
// .storybook/main.ts
// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';

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

export default config;
```

### Highlighting DOM Elements

Highlight DOM nodes by emitting the `HIGHLIGHT` event from within a story or an addon. The event payload must contain an `elements` property assigned to an array of selectors matching the elements you want to highlight.

```ts
// MyComponent.stories.ts
import type { Meta, StoryObj } from '@storybook/react';
import { useChannel } from '@storybook/preview-api';
import { HIGHLIGHT } from '@storybook/addon-highlight';
import { MyComponent } from './MyComponent';

const meta: Meta<typeof MyComponent> = {
  component: MyComponent,
};

export default meta;
type Story = StoryObj<typeof MyComponent>;

export const Highlighted: Story = {
  decorators: [
    (storyFn) => {
      const emit = useChannel({});
      emit(HIGHLIGHT, {
        elements: ['.title', '.subtitle'],
      });
      return storyFn();
    },
  ],
};
```

### Reset highlighted elements

Highlights are automatically cleared when the story changes. You can also manually clear them by emitting the `RESET_HIGHLIGHT` event.

```ts
// MyComponent.stories.ts|tsx
import type { Meta, StoryObj } from '@storybook/react';
import { useChannel } from '@storybook/preview-api';
import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
import { MyComponent } from './MyComponent';

const meta: Meta<typeof MyComponent> = {
  component: MyComponent,
};

export default meta;
type Story = StoryObj<typeof MyComponent>;

export const ResetHighlight: Story = {
  decorators: [
    (storyFn) => {
      const emit = useChannel({});
      emit(RESET_HIGHLIGHT); //👈 Remove previously highlighted elements
      emit(HIGHLIGHT, {
        elements: ['header', 'section', 'footer'],
      });
      return storyFn();
    },
  ],
};
```

### Customize style

The addon applies a standard style to the highlighted elements you've enabled for the story. However, you can enable your custom style by extending the payload object and providing a `color` and/or `style` properties. For example:

```ts
// MyComponent.stories.ts
import type { Meta, StoryObj } from '@storybook/react';
import { useChannel } from '@storybook/preview-api';
import { HIGHLIGHT } from '@storybook/addon-highlight';
import { MyComponent } from './MyComponent';

const meta: Meta<typeof MyComponent> = {
  component: MyComponent,
};

export default meta;
type Story = StoryObj<typeof MyComponent>;

export const StyledHighlight: Story = {
  decorators: [
    (storyFn) => {
      const emit = useChannel({});
      emit(HIGHLIGHT, {
        elements: ['.title', '.subtitle'],
        color: 'red',
        style: 'solid', // 'dotted' | 'dashed' | 'solid' | 'double'
      });
      return storyFn();
    },
  ],
};
```

---
_Source: https://npm.io/package/@storybook/addon-highlight · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._