Using JS Preprocessors

We only have one JavaScript preprocessor available right now, but it’s easily the most popular one: CoffeeScript. To enable it, click the arrow in the upper right of the JS editor while editing a Pen to reveal the options.

Click the CoffeeScript button:

Now you can write in CoffeeScript and it will compile to regular JavaScript before being previewed below.

For example this code:

mood = greatlyImproved if singing

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

date = if friday then sue else jill

Will turn into this JavaScript:

var date, mood;

if (singing) {
  mood = greatlyImproved;
}

if (happy && knowsIt) {
  clapsHands();
  chaChaCha();
} else {
  showIt();
}

date = friday ? sue : jill;

To see that yourself (a great way to learn what CoffeeScript does), click the title “JS (CoffeeScript)” and the editor will show you the compiled preview of what you have written. You can’t edit it there.

You can click it again to go back to your CoffeeScript code and regular editing mode.