Babel is a JavaScript compiler.

Use next generation JavaScript, today.

Babel transforms your JavaScript

You put JavaScript in

[1,2,3].map(n => n + 1);

And get JavaScript out

[1,2,3].map(function(n) {
  return n + 1;

Start by installing the Babel CLI and a preset

$ npm install --save-dev babel-cli babel-preset-latest

Create a .babelrc file in your project (or use your package.json)

  "presets": ["latest"]

ES2015 and beyond

Babel has support for the latest version of JavaScript through syntax transformers. These plugins allow you to use new syntax, right now without waiting for browser support. Check out our ES2015 preset to get started.

You can install this preset with

$ npm install --save-dev babel-preset-es2015

and add "es2015" to your .babelrc presets array.


Since Babel only transforms syntax (like arrow functions), you can use babel-polyfill in order to support new globals such as Promise or new native methods like String.padStart (left-pad). It uses core-js and regenerator. Check out our babel-polyfill docs for more info.

You can install the polyfill with

  $ npm install --save-dev babel-polyfill

Use it by requiring it at the top of the entry point to your application or in your bundler config.

JSX and Flow

Babel can convert JSX syntax and strip out type annotations. Check out our React preset to get started. Use it together with the babel-sublime package to bring syntax highlighting to a whole new level.

You can install this preset with

$ npm install --save-dev babel-preset-react

and add "react" to your .babelrc presets array.

export default React.createClass({
  getInitialState() {
    return { num: this.getRandomNumber() };

  getRandomNumber(): number {
    return Math.ceil(Math.random() * 6);

  render(): any {
    return <div>
      Your dice roll:

Learn more about JSX and Flow


Babel is built out of plugins. Compose your own transformation pipeline using existing plugins or write your own. Easily use a set of plugins by using or creating a preset. Learn more →

Create a plugin on the fly with

// A plugin is just a function
export default function ({types: t}) {
  return {
    visitor: {
      Identifier(path) {
        let name =;
        // reverse the name: JavaScript -> tpircSavaJ = name.split('').reverse().join('');


Source map support so you can debug your compiled code with ease.

Debuggable Sourcemaps

Who's using Babel?