# @storybook/codemod

> A collection of codemod scripts written with JSCodeshift

Latest version **10.6.0** (published 2026-09-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install @storybook/codemod
pnpm add @storybook/codemod
yarn add @storybook/codemod
bun add @storybook/codemod
```

## Health

**Score 75/100 (B)** — status: active.

Positive: esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; popular repo; extremely popular.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 10.6.0 |
| Published | 2026-09-02 |
| First published | 2017-05-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 8 |
| Unpacked size | 42.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 91131 |
| Maintainers | ndelangen, shilman, tmeasday, ghengeveld, winkervsbecks, yannbf, kylegach, jreinhold, kasperpeulen, valentinpalkovic, domyen, storybook-bot |
| Keywords | storybook |

## Links

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

## Dependencies (8)

- [prettier](https://npm.io/package/prettier.md) ^3.7.1
- [storybook](https://npm.io/package/storybook.md) 10.6.0
- [es-toolkit](https://npm.io/package/es-toolkit.md) ^1.43.0
- [tinyglobby](https://npm.io/package/tinyglobby.md) ^0.2.13
- [cross-spawn](https://npm.io/package/cross-spawn.md) ^7.0.6
- [jscodeshift](https://npm.io/package/jscodeshift.md) ^0.15.1
- [tiny-invariant](https://npm.io/package/tiny-invariant.md) ^1.3.1
- [@types/cross-spawn](https://npm.io/package/@types/cross-spawn.md) ^6.0.6

## Recent versions

- 10.6.0 (latest) — 2026-09-02
- 11.0.0-alpha.1 (next) — 2026-09-19
- 0.0.0-pr-36141-sha-6ddbeb4a (canary) — 2026-09-03
- 0.0.0-pr-35198-sha-9d05c353 (v9-canary) — 2026-06-17
- 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
- 9.1.20 (v9) — 2026-03-05
- 0.0.0-pr-34009-sha-c90626e7 (v8-canary) — 2026-03-04
- 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
- … 3480 more at https://npm.io/package/@storybook/codemod/versions

## README

# Storybook Codemods

Storybook Codemods is a collection of codemod scripts written with JSCodeshift.
It will help you migrate breaking changes & deprecations.

## CLI Integration

The preferred way to run these codemods is via the CLI's `migrate` command.

To get a list of available codemods:

```
npx sb migrate --list
```

To run a codemod `<name-of-codemod>`:

```
npx sb migrate <name-of-codemod> --glob="**/*.stories.js"
```

## Installation

If you want to run these codemods by hand:

```sh
yarn add jscodeshift @storybook/codemod --dev
```

- `@storybook/codemod` is our collection of codemod scripts.
- `jscodeshift` is a tool we use to apply our codemods.

After running the migration commands, you can remove them from your `package.json`, if you added them.

## How to run a codemod script

From the directory where you installed both `jscodeshift` and `@storybook/codemod` run:

Example:

```sh
./node_modules/.bin/jscodeshift -t ./node_modules/@storybook/codemod/dist/transforms/upgrade-hierarchy-separators.js . --ignore-pattern "node_modules|dist"
```

Explanation:

    <jscodeShiftCommand> -t <transformFileLocation> <pathToSource> --ignore-pattern "<globPatternToIgnore>"

## Transforms

### upgrade-hierarchy-separators

Starting in 5.3, Storybook is moving to using a single path separator, `/`, to specify the story hierarchy. It previously defaulted to `|` for story "roots" (optional) and either `/` or `.` for denoting paths. This codemod updates the old default to the new default.

```sh
./node_modules/.bin/jscodeshift -t ./node_modules/@storybook/codemod/dist/transforms/upgrade-hierarchy-separators.js . --ignore-pattern "node_modules|dist"
```

For example:

```js
storiesOf('Foo|Bar/baz');
storiesOf('Foo.Bar.baz');

export default {
  title: 'Foo|Bar/baz.whatever',
};
```

Becomes:

```js
storiesOf('Foo/Bar/baz');
storiesOf('Foo/Bar/baz');

export default {
  title: 'Foo/Bar/baz/whatever',
};
```

### csf-hoist-story-annotations

Starting in 6.0, Storybook has deprecated the `.story` annotation in CSF and is using hoisted annotations.

```sh
./node_modules/.bin/jscodeshift -t ./node_modules/@storybook/codemod/dist/transforms/csf-hoist-story-annotations.js . --ignore-pattern "node_modules|dist" --extensions=js
```

For example:

```js
export const Basic = () => <Button />
Basic.story = {
  name: 'foo',
  parameters: { ... },
  decorators: [ ... ],
};
```

Becomes:

```js
export const Basic = () => <Button />
Basic.storyName = 'foo';
Basic.parameters = { ... };
Basic.decorators = [ ... ];
```

The new syntax is slightly more compact, is more ergonomic, and resembles React's `displayName`/`propTypes`/`defaultProps` annotations.

Learn more about Storybook at [storybook.js.org](https://storybook.js.org/?ref=readme).

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