Skip to main content
iotools.cloudiotools.cloud

Babel Config Generator

Generate a babel.config.json or .babelrc from form fields: @babel/preset-env (targets, modules, useBuiltIns/corejs), preset-react (runtime, development), preset-typescript, preset-flow, common syntax/transform plugins, a decorators toggle (legacy or current proposal), and env overrides for tests (Jest) and production (strip console.*). Also shows the matching npm install command.

Input

Only changes the header comment — the JSON body is valid either way.

Presets

Browserslist query. Leave empty to use your project's own .browserslistrc / package.json browserslist field.

Set to false when a bundler (Webpack/Rollup/Vite) handles ES modules itself, so tree-shaking still works.

Inject core-js polyfills for the features your targets are missing.

React

TypeScript

Flow

Plugins

Output Options

Output

Generated Config
Install command
Was this helpful?

More ways to use this tool

REST API

curl -X POST https://api.iotools.cloud/v1/tool/babel-config-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "outputFormat": "babel.config.json",
    "presetEnv": "true",
    "envTargets": "> 0.25%, not dead",
    "envModules": "auto",
    "envUseBuiltIns": "usage",
    "envCorejs": "3.38",
    "presetReact": "true",
    "reactRuntime": "automatic",
    "reactDevelopment": "",
    "presetTypescript": "true",
    "tsAllExtensions": "",
    "presetFlow": "",
    "plugins": "[\"@babel/plugin-transform-runtime\",\"@babel/plugi…",
    "pluginDecorators": "true",
    "decoratorsLegacy": "",
    "envTestNodeCurrent": "true",
    "envProdRemoveConsole": "true",
    "includeComments": "true",
    "includeHeader": "true"
  }'

Swap in your own key from your account. The tool's fields are the body — no wrapper.

Ask an AI agent

Use the IOTools `babel-config-generator` tool (Babel Config Generator) on this input:

YOUR_INPUT_HERE

Paste this at any agent connected to the IOTools MCP server, then add your input.

Embed widget

<iframe
  src="https://iotools.cloud/embed/babel-config-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Babel Config Generator — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Drop this into your own page — free, no key required, just a link back.

Cost per API/MCP callFrom 5 credits
Need more credits?View pricing

Also available with

IntegrationsBrowser extensionVS Code extension

Guides

Build a babel.config.json or .babelrc without hand-typing preset names, plugin options, or the exact shape Babel expects. Tick the presets and plugins you need, set their options, and copy out a ready-to-use, commented config — plus the matching npm install command.

What it covers

  • @babel/preset-env — targets (a browserslist query), modules (auto/false/commonjs), and useBuiltIns (false/usage/entry) with a corejs version.
  • @babel/preset-react — runtime (automatic for React 17+, or classic) and a development flag.
  • @babel/preset-typescript — with isTSX/allExtensions when you need TSX syntax inside .ts files.
  • @babel/preset-flow.
  • Common syntax/transform plugins: plugin-transform-runtime, plugin-transform-class-properties, plugin-transform-private-methods, plugin-transform-private-property-in-object, plugin-syntax-dynamic-import, plugin-proposal-export-default-from.
  • Decorators — @babel/plugin-proposal-decorators, either the current TC39 proposal version or legacy-style decorators (older Angular/MobX/TypeORM code).
  • Environment overrides — a test override targeting the current Node version (the standard Jest setup) and a production override that strips console.* calls.

How to use it

  1. Pick which presets you need and set their inline options (targets, modules, useBuiltIns, runtime, …).
  2. Select any extra plugins from the multi-select list, and turn on decorators if your code uses them.
  3. Toggle the test/production environment overrides if they apply to your project.
  4. Copy the generated file into your project root as babel.config.json (or .babelrc), and run the install command shown below it.

Babel parses its own config files leniently — the // comments in the output are safe to keep, or strip them for a stricter JSON file.

FAQ

Should I use babel.config.json or .babelrc?

babel.config.json is the modern, project-wide option — it applies across a monorepo's packages and to node_modules files you explicitly compile. .babelrc is scoped to the single package it lives in. Unless you have a reason to keep config local to one package, prefer babel.config.json.

Do I need @babel/plugin-transform-runtime?

Only if you want Babel's helper functions (and polyfilled built-ins with the corejs option) shared via @babel/runtime instead of duplicated in every compiled file — it shrinks bundle size at the cost of one extra runtime dependency. Skip it for a simple app; it's most useful for libraries.

Need to check the config after editing it further? Paste it into the JSON Formatter to validate the syntax. For the TypeScript-side compiler config instead of Babel's, see the tsconfig.json Generator.

Runs entirely in your browser — nothing is uploaded.

babelbabelrcbabel.config.jsonpreset-envpreset-reactjsxtranspilerbrowserslistpolyfilldeveloper tools

Love the tools? Lose the ads.

One payment clears every ad from your account, for good. No subscription, no tracking.

Remove ads