Babel Config Generator

Generate Babel config files for JavaScript, React, Expo, presets, plugins, browser targets, TypeScript, and build tooling.

Output:A ready-to-use configuration file for Babel Config with best practices applied.

Quick Summary

Use a Babel Config Generator when you need to configure the Babel compiler with specific presets and plugins to transpile modern JavaScript, React JSX, or TypeScript into backwards-compatible JavaScript for older browsers or environments.

What is this tool?

A Babel Config Generator is an online tool that creates the configuration file (babel.config.js or .babelrc) required by the Babel compiler. Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards-compatible version of JavaScript in current and older browsers or environments.

Instead of manually looking up the exact syntax for babel-plugin-transform-runtime or figuring out the babel config for react or Expo, this tool lets you select your stack and outputs a clean, correct configuration file instantly.

How to Use This Tool

Select Environment — Choose your target environment (Web, Node.js, React Native, or Expo).
Choose Presets — Add core presets like @babel/preset-env, @babel/preset-react, or @babel/preset-typescript.
Configure Targets — Specify the browsers or Node versions you need to support (e.g., '> 0.25%, not dead').
Add Plugins — Include specific plugins for experimental syntax like decorators or class properties.
Download — Save the generated file as babel.config.js or babel.config.json in your project root.

What This Tool Generates

babel.config.js — The recommended project-wide JS configuration.
babel.config.json — A static JSON alternative to the JS config.
.babelrc — A file-relative configuration (useful for sub-packages).

Example Output Explanation

A standard babel config js example optimized for React and TypeScript:

module.exports = function (api) {
  api.cache(true);

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

Best Practices

Use babel.config.json (or .js): Prefer project-wide configuration over .babelrc files, as .babelrc only applies to files in its own directory and can cause issues in monorepos.
Use preset-env: Always use @babel/preset-env rather than specifying individual syntax plugins. It automatically determines which transformations are needed based on your target browsers.
Use the Automatic JSX Runtime: When configuring @babel/preset-react, set '{ runtime: "automatic" }' so you don't have to manually 'import React from "react"' in every component file.

Common Mistakes

Duplicating TypeScript Compilation: If you are using tsconfig.json to compile TypeScript to JavaScript (using tsc), you generally don't need @babel/preset-typescript. Use one or the other as your primary transpiler.
Not Installing Dependencies: Generating a config file does not install the plugins. You must run 'npm install --save-dev @babel/core @babel/preset-env' (etc.) for the config to work.
Create React App Overrides: If you are using Create React App, modifying the babel config requires 'ejecting' or using a tool like CRACO. Standard babel configs are ignored by CRA.

Security Notes

Babel executes javascript when reading a 'babel.config.js' file. Do not use untrusted configuration files without reviewing the code, as they can execute arbitrary shell commands.

Testing Instructions

Save the configuration as 'babel.config.js'.
Run your bundler (Webpack via 'npm run build') or the Babel CLI ('npx babel src --out-dir lib').
Verify the output folder (e.g., 'lib') contains valid, transpiled JavaScript.

Frequently Asked Questions

What is a Babel Config Generator?

A Babel Config Generator is a tool that scaffolds the configuration file (like babel.config.js) required to tell the Babel compiler which modern JavaScript features it needs to transpile down into older, browser-compatible code.

How do I create babel.config.js?

Create a file named 'babel.config.js' (or 'babel.config.json') in your project root. You can use our generator to visually select the presets (like @babel/preset-react) and plugins you need, and then copy the output directly into that file.

What is a Babel configuration file?

A Babel configuration file tells the Babel transpiler how to process your code. It typically consists of 'presets' (pre-configured sets of plugins, like preset-env or preset-typescript) and individual 'plugins' (for specific syntax like decorators).

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

For most modern projects (especially monorepos), 'babel.config.js' (or .json) is recommended because it applies globally to all files in the project. '.babelrc' is a local configuration file that only applies to files within its own directory.

How do I configure Babel for React?

To compile JSX, you must include '@babel/preset-react' in your Babel configuration. If you are using modern React (v17+), you should pass the '{ runtime: "automatic" }' option to the preset so you don't need to manually import React in every file.

How do I configure Babel for Expo?

React Native and Expo projects generally require the 'babel-preset-expo' preset. A standard Expo babel.config.js will export a function that calls 'api.cache(true)' and returns an object containing 'presets: ["babel-preset-expo"]'.

Do I still need Babel with Vite or Webpack?

It depends! Vite uses esbuild internally which is incredibly fast and handles TS/JSX, so Babel is often unnecessary unless you need specific plugins (like macros or legacy decorators). Webpack heavily relies on Babel (via babel-loader) to transpile modern JavaScript.

How We Keep Your Configs Safe & Valid

Built-in Error Checking

Every file is checked against official rules. We catch missing fields and bad syntax. YAML indentation errors are flagged right away. Kubernetes, Terraform, and Docker specs are all covered. API versions and labels are verified too. You get valid output every time you generate.

100% Private & Local

All tools run in your browser only. Your API keys never leave your machine. We do not use any tracking scripts. No data is sent to any server. Passwords and secrets stay on your device. Crypto operations use the Web Crypto API. Your privacy is fully protected at all times.

Secure Settings by Default

Configs use safe defaults out of the box. Containers run as non-root users. Root filesystems are set to read-only. Dangerous Linux capabilities are dropped. Network policies limit pod-to-pod traffic. TLS 1.3 is enabled for web servers. Security headers are added where needed.

Ready for CI/CD & Git

Output files are ready for your Git repo. Use them with ArgoCD, Flux, or GitHub Actions. Files use clear formatting and comments. Code review is easy for your team. Indentation and key order are consistent. Test in staging before going to production. Every file is clean and well-structured.

Infrastructure as Code

Store configs in Git alongside your code. Terraform modules include typed variables. Backend configs support remote state locking. Outputs work across multiple modules. Ansible playbooks use clear task steps. Chef and Puppet configs are also supported. Every file works with version control tools.

Monitoring & Tracing

Set up Prometheus with auto-discovery rules. Create Grafana dashboards with template variables. Add alerting rules with severity labels. Use OpenTelemetry for trace collection. Forward logs to Loki or Elasticsearch. Connect to Jaeger or Tempo for tracing. Monitor metrics, logs, and traces together.

Container & Docker Safety

Dockerfiles use multi-stage builds for small images. Base images are pinned to exact versions. Dev files are excluded from final images. Health checks are added for orchestrator use. Containers switch to non-root users. Docker Compose uses named volumes and networks. Resource limits are set in deploy configs.

Multiple Output Formats

Export as YAML, JSON, HCL, or TOML. Kubernetes uses YAML with proper separators. Terraform uses HCL with correct escaping. JSON output has consistent indentation. Copy to clipboard with one click. Preview output with syntax highlighting. Line numbers help you review quickly.