# @storybook/addon-storysource

> View a story’s source code to see how it works and paste into your app

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

## Install

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

## 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 | 2018-02-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 1.8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 91076 |
| Maintainers | ndelangen, shilman, tmeasday, ghengeveld, winkervsbecks, yannbf, kylegach, jreinhold, kasperpeulen, valentinpalkovic, domyen, storybook-bot |
| Keywords | addon, storybook, code |

## Links

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

## Dependencies (3)

- [estraverse](https://npm.io/package/estraverse.md) ^5.2.0
- [tiny-invariant](https://npm.io/package/tiny-invariant.md) ^1.3.1
- [@storybook/source-loader](https://npm.io/package/@storybook/source-loader.md) 8.6.14

## Alternatives

- [flatbuffers](https://npm.io/package/flatbuffers.md) — 6.0M weekly downloads
- [jwt-simple](https://npm.io/package/jwt-simple.md) — 259.5K weekly downloads
- [@exodus/patch-broken-hermes-typed-arrays](https://npm.io/package/@exodus/patch-broken-hermes-typed-arrays.md) — 28.5K weekly downloads
- [@native-to-anchor/buffer-layout](https://npm.io/package/@native-to-anchor/buffer-layout.md) — 12.2K weekly downloads
- [binary-parser-encoder](https://npm.io/package/binary-parser-encoder.md) — 5.3K weekly downloads

## 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.14 (next) — 2025-04-02
- 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
- 6.5.17-alpha.0 (prerelease) — 2023-03-23
- 6.0.28-alpha.3 (debug) — 2020-10-29
- 0.0.0-pr-34011-sha-1f3f0b01 — 2026-03-04
- 8.6.17 — 2026-02-18
- … 2174 more at https://npm.io/package/@storybook/addon-storysource/versions

## README

<h1>Storybook Storysource Addon</h1>

This addon is used to show stories source in the addon panel.

[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)

![Storysource Demo](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/storysource/docs/demo.gif)

- [Getting Started](#getting-started)
  - [Install using preset](#install-using-preset)
- [Theming](#theming)
- [Displaying full source](#displaying-full-source)

## Getting Started

First, install the addon

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

You can add configuration for this addon by using a preset or by using the addon config with webpack

### Install using preset

Add the following to your `.storybook/main.js` exports:

```js
export default {
  addons: ['@storybook/addon-storysource'],
};
```

You can pass configurations into the addon-storysource loader in your `.storybook/main.js` file, e.g.:

```js
export default {
  addons: [
    {
      name: '@storybook/addon-storysource',
      options: {
        rule: {
          // test: [/\.stories\.jsx?$/], This is default
          include: [path.resolve(__dirname, '../src')], // You can specify directories
        },
        loaderOptions: {
          prettierConfig: { printWidth: 80, singleQuote: false },
        },
      },
    },
  ],
};
```

To customize the `source-loader`, pass `loaderOptions`. Valid configurations are documented in the [`source-loader` README](https://github.com/storybookjs/storybook/tree/next/code/lib/source-loader/README.md#options).

## Theming

Storysource will automatically use the light or dark syntax theme based on your storybook theme. See [Theming Storybook](https://storybook.js.org/docs/configure/user-interface/theming) for more information.

![Storysource Light/Dark Themes](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/storysource/docs/theming-light-dark.png)

## Displaying full source

Storybook 6.0 introduced an unintentional change to `source-loader`, in which only the source of the selected story is shown in the addon. To restore the old behavior, pass the`injectStoryParameters: false` option.

If you're using `addon-docs`:

```js
export default {
  addons: [
    {
      name: '@storybook/addon-docs',
      options: {
        sourceLoaderOptions: {
          injectStoryParameters: false,
        },
      },
    },
  ],
};
```

If not:

```js
export default {
  addons: [
    {
      name: '@storybook/addon-storysource',
      options: {
        loaderOptions: {
          injectStoryParameters: false,
        },
      },
    },
  ],
};
```

This bug will be resolved in a future version of the addon.

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