Babel is a compiler. At a high level, it has 3 stages that it runs code in: parsing, transforming, and generation (like many other compilers).

For an awesome/simple tutorial on compliers, check out the-super-tiny-complier, which also explains how Babel itself works on a high level.

Now, out of the box Babel doesn’t do anything. It basically acts like const babel = code => code; by parsing the code and then generating the same code back out again.

You will need to add some plugins for Babel to do anything (they affect the 2nd stage, transformation).

Don’t know where to start? Check out some of our presets.


Don’t want to assemble your own set of plugins? No problem! Presets are sharable .babelrc configs or simply an array of babel plugins.

Official Presets

We’ve assembled some for common environments:

Many other community maintained presets are available on npm!

Stage-X (Experimental Presets)

Any transforms in stage-x presets are changes to the language that haven’t been approved to be part of a release of Javascript (such as ES6/ES2015).

“Changes to the language are developed by way of a process which provides guidelines for evolving an addition from an idea to a fully specified feature”

Subject to change

These proposals are subject to change so use with extreme caution, especially for anything pre stage-3.

The TC39 categorises proposals into 4 stages:

  • stage-0 - Strawman: just an idea, possible Babel plugin.
  • stage-1 - Proposal: this is worth working on.
  • stage-2 - Draft: initial spec.
  • stage-3 - Candidate: complete spec and initial browser implementations.
  • stage-4 - Finished: will be added to the next yearly release.

Also check out the current tc39 proposals and it’s process document.

Transform Plugins

These plugins apply transformations to your code.

Transform plugins will enable the corresponding syntax plugin so you don't have to specify both.









Misc Plugins

Syntax Plugins

These plugins allow Babel to parse specific types of syntax.

Plugin Options

Plugins can specify options. You can do so in your config by wrapping it in an array and providing a options object. For example:

  "plugins": [
    ["transform-async-to-module-method", {
      "module": "bluebird",
      "method": "coroutine"

Plugin Development

Please refer to the excellent babel-handbook to learn how to create your own plugins.

The simple plugin that reverse’s names (from the homepage):

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

Creating a Preset

To make your own preset, you just need to export a config.

// Presets can contain other presets, and plugins with options.
module.exports = {
  presets: [
  plugins: [
    [require('babel-plugin-transform-es2015-template-literals'), { spec: true }],

For more info, check out the babel handbook section on presets or just look at the es2015 preset repo as an example.