ESM and CommonJS, side by side, in one click
You opened an old Node project and the file uses `require` and `module.exports`. Or the opposite: a tutorial pastes `import`/`export` and your codebase still runs on plain CommonJS. Same JavaScript, two dialects, every developer eventually has to translate between them.
This converter does exactly that. Paste a file on the left, pick a direction (ESM → CommonJS or CommonJS → ESM), and the right pane shows the same code in the other format. It handles the eight forms you actually meet in real code: default imports, named imports, namespace imports, side-effect imports, default exports, named const exports, batched `export { a, b }`, and bare `require('x')`.
Where the two formats do not map cleanly (dynamic `require`, `__dirname` in ESM, conditional exports, top-level `await`), a yellow warning panel tells you exactly what to fix by hand. No upload, no install, no Babel config: the conversion runs in your browser the moment you stop typing.
How to use it
- Pick a direction at the top: ESM → CommonJS if your source uses `import` / `export`, CommonJS → ESM if it uses `require` / `module.exports`.
- Paste your code in the left pane. A sample file is loaded by default so you can see what the output looks like before you replace it.
- The right pane shows the converted code immediately (auto-convert is on). Turn it off if you want to edit a large file first and click Convert when you are ready.
- Copy the result with the button in the top-right corner of the output pane. Drop it into your editor and you are done.
- If a yellow warning panel appears below the panes, read it: those are lines the converter could not rewrite cleanly (dynamic `require`, `__dirname`, top-level `await`, mixed exports). The panel points to the line and explains what to do.
- Click Swap sides to round-trip the converted output back through the other direction. Handy when you want to sanity-check that your file works in both.
- Use Load sample to drop in a realistic example for the current direction, useful when you forgot which forms map where.
When this is useful
Seven situations where flipping between ESM and CommonJS would otherwise take half an hour of hand-editing:
- Migrating an old Node project to ESM. Your team set `"type": "module"` in `package.json` and now every file with `require` breaks. Paste each one in, get the ESM version, paste back. A 50-file migration drops from a day to about an hour.
- Copying a tutorial snippet into a CommonJS project. The blog post uses modern `import x from 'pkg'` syntax, your codebase still runs Node 14 / Jest 27 with plain CJS. One paste, one click, the snippet now matches your project style.
- Sharing a code answer that works for everyone. You are posting on Stack Overflow or in a Slack thread and you do not know which format the reader uses. Convert your snippet to the opposite and paste both, with a one-line note about which dialect each is.
- Authoring a dual package. You publish a library that ships both ESM and CommonJS builds. Write it once in ESM, convert to CJS for the `.cjs` build, eyeball the warnings, ship both. Saves a Rollup config for tiny single-file packages.
- Onboarding into a legacy codebase. The codebase you joined still uses `module.exports`. You think in `import`. Paste each file in as you learn it, read the ESM version to build a mental model, then go back to the actual code.
- Quick refactor before a code review. A reviewer asked you to "use ESM throughout". Run each touched file through the converter, fix the warnings, ship the PR. The boring mechanical part takes 5 minutes instead of 50.
- Teaching the difference between the two. Show a file on the left, the equivalent on the right. The eight common forms line up next to each other, easier than slides for a junior developer's first week.