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 a JavaScript preprocessor that compiles future-syntax JavaScript down to JavaScript that can run in browsers today. I’ve actually written about how that concept can sometimes be problematic. It’s actually not that problematic in Babel though (my post was more about CSS).

Babel does it in the best possible way. Namely:

  • By default, it only enables features from specs that are in Draft, Candidate, or Finished stages.
  • If you want to enable anything more cutting edge, you have enable it.
  • JavaScript is kinda all-powerful anyway, so new features can typically be done in older “versions”, it just might take a bunch more code and be less elegant (perfect thing for a preprocessor to help with).

Default is exactly how we were processing your Babel, until now. Default (or “stage 2 and above” on their chart) is probably a good way to write production code. But CodePen isn’t typically a place for production code. It’s often a place for experimentation. So, we’ve enabled Stage 0 and Stage 1 features as well.

So you can use those things as well now:

See the Pen Stage 0 and 1 Things in Babel by Chris Coyier (@chriscoyier) on CodePen.