> ## Documentation Index
> Fetch the complete documentation index at: https://docs.codemod.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Codemod for OSS Maintainers

export const MigrationsTemplateDemo = () => {
  return <div style={{
    position: 'relative',
    paddingBottom: 'calc(62.5% + 41px)',
    height: '0',
    width: '100%'
  }}>
      <iframe src="https://demo.arcade.software/QEtLo6oVoxUnNNejORqp?embed&amp;embed_mobile=inline&amp;embed_desktop=inline&amp;show_copy_link=true" title="Quickstart" frameBorder="0" loading="lazy" allowFullScreen allow="clipboard-write" style={{
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    colorScheme: 'light'
  }} />
    </div>;
};

Framework, library, and SDK builders use codemods to move users to new releases without carrying long-term backward compatibility.

Building and maintaining codemods is hard. It does not scale well, adoption is hard to measure, and feedback is limited.

Codemod gives maintainers an easy way to publish official codemods with each release, accept community contributions, and see how codemods are actually used.

Codemod is already used by projects like React, Node.js, ESLint, Express, Nuxt, and many more.

<CardGroup cols={4}>
  <Card href="https://github.com/nodejs/userland-migrations">
    <div className="relative w-full pb-[100%]">
      <div className="absolute inset-0 flex items-center justify-center">
        <img src="https://mintcdn.com/codemod/gRb6XBlMzDjpVOwP/images/logos/nodejs-dark.svg?fit=max&auto=format&n=gRb6XBlMzDjpVOwP&q=85&s=f46795075e9654d41813ad58e96ecfb8" alt="Node.js logo" className="block dark:hidden" noZoom width="267" height="80" data-path="images/logos/nodejs-dark.svg" />

        <img src="https://mintcdn.com/codemod/gRb6XBlMzDjpVOwP/images/logos/nodejs-light.svg?fit=max&auto=format&n=gRb6XBlMzDjpVOwP&q=85&s=4033e071511c0e56d1a3a585f240a674" alt="Node.js logo" className="absolute inset-0 m-auto hidden dark:block" noZoom width="267" height="80" data-path="images/logos/nodejs-light.svg" />
      </div>
    </div>
  </Card>

  <Card href="https://react.dev/blog/2024/04/25/react-19-upgrade-guide#codemods">
    <div className="relative w-full pb-[100%]">
      <div className="absolute inset-0 flex items-center justify-center">
        <img src="https://mintcdn.com/codemod/gRb6XBlMzDjpVOwP/images/logos/react-dark-and-light.svg?fit=max&auto=format&n=gRb6XBlMzDjpVOwP&q=85&s=00e720ab12bc875d6b3929aea623b067" alt="React logo" className="block dark:hidden" noZoom width="491" height="437" data-path="images/logos/react-dark-and-light.svg" />

        <img src="https://mintcdn.com/codemod/gRb6XBlMzDjpVOwP/images/logos/react-dark-and-light.svg?fit=max&auto=format&n=gRb6XBlMzDjpVOwP&q=85&s=00e720ab12bc875d6b3929aea623b067" alt="React logo" className="absolute inset-0 m-auto hidden dark:block" noZoom width="491" height="437" data-path="images/logos/react-dark-and-light.svg" />
      </div>
    </div>
  </Card>

  <Card href="https://github.com/eslint/codemods">
    <div className="relative w-full pb-[100%]">
      <div className="absolute inset-0 flex items-center justify-center">
        <img src="https://mintcdn.com/codemod/H2zI4sMoIL05x5kX/images/logos/eslint-dark.svg?fit=max&auto=format&n=H2zI4sMoIL05x5kX&q=85&s=c1c69685774f9e46b49386b8b24a023b" alt="ESLint logo" className="block dark:hidden" noZoom width="203" height="58" data-path="images/logos/eslint-dark.svg" />

        <img src="https://mintcdn.com/codemod/H2zI4sMoIL05x5kX/images/logos/eslint-light.svg?fit=max&auto=format&n=H2zI4sMoIL05x5kX&q=85&s=0f2cefb1bbe3cd4b533c51ad37e3fb41" alt="ESLint logo" className="absolute inset-0 m-auto hidden dark:block" noZoom width="203" height="58" data-path="images/logos/eslint-light.svg" />
      </div>
    </div>
  </Card>

  <Card href="https://webpack.js.org/migrate/5/#codemods">
    <div className="relative w-full pb-[100%]">
      <div className="absolute inset-0 flex items-center justify-center">
        <img src="https://mintcdn.com/codemod/gRb6XBlMzDjpVOwP/images/logos/webpack-dark.svg?fit=max&auto=format&n=gRb6XBlMzDjpVOwP&q=85&s=20193743f5117f8eb085976e6e4bed7d" alt="Webpack logo" className="block dark:hidden" noZoom width="3047" height="876" data-path="images/logos/webpack-dark.svg" />

        <img src="https://mintcdn.com/codemod/gRb6XBlMzDjpVOwP/images/logos/webpack-light.svg?fit=max&auto=format&n=gRb6XBlMzDjpVOwP&q=85&s=03102dfcdbf35a1bdaf8e820372b001d" alt="Webpack logo" className="absolute inset-0 m-auto hidden dark:block" noZoom width="3047" height="876" data-path="images/logos/webpack-light.svg" />
      </div>
    </div>
  </Card>

  <Card href="https://nuxt.com/docs/4.x/getting-started/upgrade#migrating-using-codemods">
    <div className="relative w-full pb-[100%]">
      <div className="absolute inset-0 flex items-center justify-center">
        <img src="https://mintcdn.com/codemod/gRb6XBlMzDjpVOwP/images/logos/nuxt-dark.svg?fit=max&auto=format&n=gRb6XBlMzDjpVOwP&q=85&s=83eaf05e4790a3377c3eb63b644745ec" alt="Nuxt logo" className="block dark:hidden" noZoom width="128" height="32" data-path="images/logos/nuxt-dark.svg" />

        <img src="https://mintcdn.com/codemod/gRb6XBlMzDjpVOwP/images/logos/nuxt-light.svg?fit=max&auto=format&n=gRb6XBlMzDjpVOwP&q=85&s=55dee7fd36fc791f7cd8bafdcb1b8487" alt="Nuxt logo" className="absolute inset-0 m-auto hidden dark:block" noZoom width="128" height="32" data-path="images/logos/nuxt-light.svg" />
      </div>
    </div>
  </Card>

  <Card href="https://github.com/pnpm/codemod?tab=readme-ov-file">
    <div className="relative w-full pb-[100%]">
      <div className="absolute inset-0 flex items-center justify-center">
        <img src="https://mintcdn.com/codemod/gRb6XBlMzDjpVOwP/images/logos/pnpm-dark.svg?fit=max&auto=format&n=gRb6XBlMzDjpVOwP&q=85&s=5f27e5027f24e6176aabd099a2dcfb82" alt="pnpm logo" className="block dark:hidden" noZoom width="226" height="160" data-path="images/logos/pnpm-dark.svg" />

        <img src="https://mintcdn.com/codemod/gRb6XBlMzDjpVOwP/images/logos/pnpm-light.svg?fit=max&auto=format&n=gRb6XBlMzDjpVOwP&q=85&s=d628934c38ab233ad79d8d403217c32a" alt="pnpm logo" className="absolute inset-0 m-auto hidden dark:block" noZoom width="226" height="160" data-path="images/logos/pnpm-light.svg" />
      </div>
    </div>
  </Card>

  <Card href="https://github.com/mswjs/codemods">
    <div className="relative w-full pb-[100%]">
      <div className="absolute inset-0 flex items-center justify-center">
        <img src="https://mintcdn.com/codemod/H2zI4sMoIL05x5kX/images/logos/msw-dark.svg?fit=max&auto=format&n=H2zI4sMoIL05x5kX&q=85&s=540db278a65ed3c8adb61a5a2557ff1b" alt="MSW logo" className="block dark:hidden" noZoom width="128" height="128" data-path="images/logos/msw-dark.svg" />

        <img src="https://mintcdn.com/codemod/H2zI4sMoIL05x5kX/images/logos/msw-light.svg?fit=max&auto=format&n=H2zI4sMoIL05x5kX&q=85&s=829d4085c94aa7910fa7e59a9d838b5d" alt="MSW logo" className="absolute inset-0 m-auto hidden dark:block" noZoom width="128" height="128" data-path="images/logos/msw-light.svg" />
      </div>
    </div>
  </Card>

  <Card href="https://reactrouter.com/upgrading/remix#2-update-dependencies">
    <div className="relative w-full pb-[100%]">
      <div className="absolute inset-0 flex items-center justify-center">
        <img src="https://mintcdn.com/codemod/gRb6XBlMzDjpVOwP/images/logos/react-router-dark.svg?fit=max&auto=format&n=gRb6XBlMzDjpVOwP&q=85&s=1d746aea0b7ffaff0d98f1659a85ac80" alt="React Router logo" className="block dark:hidden" noZoom width="602" height="360" data-path="images/logos/react-router-dark.svg" />

        <img src="https://mintcdn.com/codemod/gRb6XBlMzDjpVOwP/images/logos/react-router-light.svg?fit=max&auto=format&n=gRb6XBlMzDjpVOwP&q=85&s=bdd7efe6901538d7ed19701325988e90" alt="React Router logo" className="absolute inset-0 m-auto hidden dark:block" noZoom width="602" height="360" data-path="images/logos/react-router-light.svg" />
      </div>
    </div>
  </Card>
</CardGroup>

## Get started

<Frame>
  <MigrationsTemplateDemo />
</Frame>

<Steps>
  <Step title="Create a dedicated repo to host your codemods">
    Scaffold a dedicated repository under your project’s GitHub organization to host official codemods:

    ```bash theme={null}
    npx codemod init --workspace
    ```

    The generated layout:

    * keeps shared publishing and repo configuration at the root
    * isolates each codemod under `codemods/<slug>/`
    * keeps migration logic separate from product code
    * gives maintainers a dedicated repo for collaboration and releases under the project scope

    See the [ESLint codemods repo](https://github.com/eslint/codemods) for an example.
  </Step>

  <Step title="Secure your official scope">
    * Create a free Codemod account and sign in.
    * Add your GitHub organization.
    * Install the Codemod GitHub App on your codemod repo.

    This enables trusted publishing under your org scope from GitHub Actions with no API keys or secrets to manage. See the [Node.js official codemods filtered via scope:nodejs in the registry](https://app.codemod.com/registry?q=scope%3Anodejs) for an example.
  </Step>

  <Step title="Build and publish codemods">
    At this point, your repo is fully set up for collaboration and publishing.

    * You or your community can open PRs to add or improve codemods.
    * Once merged, you can use the GitHub Action to publish the codemod to the registry under your org scope. Make sure codemod names start with your scope (`@your-github-org-name/codemod-name`, for example `@eslint/v8-to-v9-config`).
  </Step>
</Steps>

<Tip>
  If you do not know how to build or publish codemods yet, check out the following guides:

  * [Build your first codemod with MCP](/oss-quickstart#2-scaffold-and-build-your-codemod)
  * Use [Codemod Studio](/platform/codemod-studio) for:
    * A live codemod runner
    * An AST viewer
    * Shareable links with test fixtures for review and debugging
  * [Publishing codemods](/publishing) to the registry.
</Tip>

## Getting help

<CardGroup cols={2}>
  <Card title="Join the community" icon="slack" href="https://go.codemod.com/community">
    Ask questions, get help, and connect with other framework maintainers on Slack.
  </Card>

  <Card title="Book a call" icon="calendar" href="https://cal.com/alexbit">
    Schedule a demo or get hands-on help from the Codemod team.
  </Card>
</CardGroup>

## Next steps

<CardGroup cols={2}>
  <Card title="CLI" icon="terminal" href="/cli">
    Learn more about Codemod CLI.
  </Card>

  <Card title="Workflows" icon="diagram-project" href="/workflows/introduction">
    Orchestrate complex multi-step migrations.
  </Card>

  <Card title="JSSG" icon="js" href="/jssg/intro">
    Learn the transformation engine in depth.
  </Card>

  <Card title="Publishing" icon="upload" href="/publishing">
    Authentication methods and CI/CD setup.
  </Card>
</CardGroup>
