Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

Babel is essentially a preprocessor for JavaScript. You write JavaScript with all the fancy ES6 (and beyond) features you want, and the code is compiled down to ES5 so it can run in pretty much whatever browser.

We used to use Traceur for this. Turns out Babel can do everything Traceur can does and more, and seems to have more love and momentum. So instead of offering Babel in addition to Traceur, we just replaced it. If you had a Traceur Pen, it’s using Babel now.

Bonus! React does JSX too

If you like writing in React, you may like writing in the JSX syntax as well. You know, the JavaScript with the HTML right in it that looks kinda weird but a lot of people like it.

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

The only way this worked before is if you included the JSX transpiler thingy and put the script on the page with a special type. You could do it on CodePen, but it was pretty hacky.

Now, just write your JSX right in the JavaScript editor with Babel selected, and you’re good. Just make sure you also include React as a library.

Here’s the basic example right from the React docs:

See the Pen ZpvBNJ by Dan Abramov (@gaearon) on CodePen.