Generate babel config

Create a Babel configuration with presets, plugins, and environment overrides.

freeworks offlinenothing uploaded

ToolBabel Config Generator

Input

Output

—

Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

AccentBackground

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

How it works

Selected presets and plugins are serialized into a configuration object, with environment overrides nested under env. The output describes transforms but does not install packages or run Babel.

Environment blocks separate development and production behavior.
Presets remain explicit because runtime targets differ.

Worked example

React with TypeScript

Generate a Babel config for a React + TypeScript project

Input

											Env: browser
Typescript: true
React: true
Modules: auto
Targets: > 0.25%, not dead
Decorators: false
Format: json

Output

												{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "> 0.25%, not dead",
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ],
    "@babel/preset-typescript",
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ]
  ]
}

When to use this

JavaScript projects, test runners, and library builds create Babel configs.

Edge cases

An uninstalled preset fails at runtime.
Plugin order can change generated syntax.
Production-only transforms do not apply in development.

References

Babel configuration