# @storybook/source-loader

> Source loader

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

## Install

```sh
npm install @storybook/source-loader
pnpm add @storybook/source-loader
yarn add @storybook/source-loader
bun add @storybook/source-loader
```

## 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 | 2019-05-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 40.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 91059 |
| Maintainers | ndelangen, shilman, tmeasday, ghengeveld, winkervsbecks, yannbf, kylegach, jreinhold, kasperpeulen, valentinpalkovic, domyen, storybook-bot |
| Keywords | lib, storybook |

## Links

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

## Dependencies (3)

- [prettier](https://npm.io/package/prettier.md) ^3.1.1
- [es-toolkit](https://npm.io/package/es-toolkit.md) ^1.22.0
- [estraverse](https://npm.io/package/estraverse.md) ^5.2.0

## Alternatives

- [@cantoo/pdf-lib](https://npm.io/package/@cantoo/pdf-lib.md) — 297.9K weekly downloads
- [datatables.net-buttons](https://npm.io/package/datatables.net-buttons.md) — 200.1K weekly downloads
- [@ckeditor/ckeditor5-export-pdf](https://npm.io/package/@ckeditor/ckeditor5-export-pdf.md) — 167.0K weekly downloads
- [scanbot-web-sdk](https://npm.io/package/scanbot-web-sdk.md) — 15.0K weekly downloads
- [@syncfusion/ej2-angular-pdfviewer](https://npm.io/package/@syncfusion/ej2-angular-pdfviewer.md) — 8.8K 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-31369-sha-038fb8e0 (canary) — 2025-05-19
- 9.0.0-rc.0 (next) — 2025-05-12
- 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
- … 2049 more at https://npm.io/package/@storybook/source-loader/versions

## README

<h1>Source Loader</h1>

Storybook `source-loader` is a webpack loader that annotates Storybook story files with their source code. It powers the [storysource](https://github.com/storybookjs/storybook/tree/next/code/addons/storysource) and [docs](https://github.com/storybookjs/storybook/tree/next/code/addons/docs) addons.

- [Options](#options)
  - [parser](#parser)
  - [prettierConfig](#prettierconfig)
  - [uglyCommentsRegex](#uglycommentsregex)
  - [injectDecorator](#injectdecorator)

## Options

The loader can be customized with the following options:

### parser

The parser that will be parsing your code to AST (based on [prettier](https://github.com/prettier/prettier/tree/master/src/language-js))

Allowed values:

- `javascript` - default
- `typescript`
- `flow`

Be sure to update the regex test for the webpack rule if utilizing Typescript files.

Usage:

```js
module.exports = function ({ config }) {
  config.module.rules.push({
    test: /\.stories\.tsx?$/,
    use: [
      {
        loader: require.resolve('@storybook/source-loader'),
        options: { parser: 'typescript' },
      },
    ],
    enforce: 'pre',
  });

  return config;
};
```

### prettierConfig

The prettier configuration that will be used to format the story source in the addon panel.

Defaults:

```js
{
  printWidth: 100,
  tabWidth: 2,
  bracketSpacing: true,
  trailingComma: 'es5',
  singleQuote: true,
}
```

Usage:

```js
module.exports = function ({ config }) {
  config.module.rules.push({
    test: /\.stories\.jsx?$/,
    use: [
      {
        loader: require.resolve('@storybook/source-loader'),
        options: {
          prettierConfig: {
            printWidth: 100,
            singleQuote: false,
          },
        },
      },
    ],
    enforce: 'pre',
  });

  return config;
};
```

### uglyCommentsRegex

The array of regex that is used to remove "ugly" comments.

Defaults:

```js
[/^eslint-.*/, /^global.*/];
```

Usage:

```js
module.exports = function ({ config }) {
  config.module.rules.push({
    test: /\.stories\.jsx?$/,
    use: [
      {
        loader: require.resolve('@storybook/source-loader'),
        options: {
          uglyCommentsRegex: [/^eslint-.*/, /^global.*/],
        },
      },
    ],
    enforce: 'pre',
  });

  return config;
};
```

### injectDecorator

Tell storysource whether you need inject decorator. If false, you need to add the decorator by yourself;

Defaults: true

Usage:

```js
module.exports = function ({ config }) {
  config.module.rules.push({
    test: /\.stories\.jsx?$/,
    use: [
      {
        loader: require.resolve('@storybook/source-loader'),
        options: { injectDecorator: false },
      },
    ],
    enforce: 'pre',
  });

  return config;
};
```

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