Online Tool Store
Babel Config Generator
Pick your target environments and features (TypeScript, React, JSX) to generate a ready-to-use Babel configuration file.
🔒 This tool runs entirely in your browser. Your files are never uploaded to a server.
babel.config.json
How Babel Config Generator works
- Set your browser targets (a browserslist query) or a specific Node.js version if this build only ever runs server-side.
- Toggle the features your codebase actually uses — TypeScript syntax, React JSX, class properties, and runtime helpers.
- The tool assembles the matching
presets/pluginsarray live as you change any option, in the same shape Babel itself expects inbabel.config.json. - Copy the config, then run the generated
npm installcommand to add exactly the packages it references — no more, no less.
What each option changes
@babel/preset-env is always included and reads your targets to decide which
syntax needs transpiling — the narrower your target list, the less code it has to output. TypeScript and
React add their own presets to strip types and compile JSX respectively. Runtime helpers
(@babel/plugin-transform-runtime) avoid duplicating Babel's helper functions in every output
file, which matters for library authors more than app authors. Keeping ES modules
(modules: false) is for projects where a bundler like webpack or Rollup — not Babel — handles
the module transform, so it can still tree-shake.
FAQ
What's the difference between the browserslist query and the Node target?
The browserslist query (e.g. "> 0.5%, last 2 versions, not dead") tells @babel/preset-env which browsers to transpile for. Filling in a Node target instead switches to targeting that Node.js version specifically — the two are mutually exclusive in the generated config, matching how preset-env's targets option actually works.
Why does the automatic JSX runtime checkbox matter?
React 17+ no longer requires "import React" in every file that uses JSX. Checking this sets @babel/preset-react's runtime option to "automatic" so Babel injects the new JSX transform instead of compiling to React.createElement calls that need React in scope.
Does this file work with Babel 7?
Yes — it targets the current @babel/preset-env / @babel/preset-react / @babel/preset-typescript package names used since Babel 7, and the "npm install" line under the config lists exactly the dev dependencies this config needs.
How we compare
| Feature | Online Tool Store | Copying a config from a blog post | The official Babel REPL |
|---|---|---|---|
| No file upload — runs in your browser | ✓ | N/A | ✗ |
| No sign-up required | ✓ | ✓ | ✗ |
| Free, no watermark | ✓ | ✓ | ✗ |
A blog post's sample config is often stale or built for a stack that isn't yours; the Babel REPL is great for testing transforms but doesn't hand you a ready file plus the exact install command. Babel Config Generator produces both, tailored to the options you actually checked.