We offer four different JavaScript preprocessors on CodePen: CoffeeScript, LiveScript, TypeScript, and Babel. To enable a preprocessor, click the gear icon in the header of the JS editor in Editor View. Then select your favorite preprocessor from the JavaScript Preprocessor menu. Press the green “Save & Close” button at the bottom of the settings window to save your selection.

Now you can write in the syntax of that language and it will compile to regular JavaScript. For example this CoffeeScript code:

mood = greatlyImproved if singing

if happy and knowsIt
  clapsHands()
  chaChaCha()
else
  showIt()

lunch = if friday then pizza else tacos

Will turn into this JavaScript:

(function () {
    var lunch, mood;
    if (singing) {
        mood = greatlyImproved;
    }
    if (happy && knowsIt) {
        clapsHands();
        chaChaCha();
    } else {
        showIt();
    }
    lunch = friday ? pizza : tacos;
}.call(this));

To see that yourself (a great way to learn what CoffeeScript does), click the “View Compiled” button and the editor will show you the compiled preview of what you have written. Note that you can’t edit the compiled view, though.

Click the “View Compiled” button again to go back to your CoffeeScript code and regular editing mode.