At the time of this writing, there have been over a quarter-million Pens created on CodePen (public stats). This gives us some pretty interesting data about the tech choices people make when they write code on CodePen. Let's look at preprocessor usage in specific.

By default on CodePen, all preprocessors are off. People creating Pens have to make a specific choice to turn them on.

HTML: HAML, Markdown, Slim
CSS: LESS, Sass w/ Compass, SCSS w/ Compass
JS: CoffeeScript

We have also had this exact set of preprocessors since launch (pretty much), so time available isn't a factor.

23% of all Pens use some kind of preprocessor

Check out this Pen!

5% of all pens use an HTML preprocessor

Check out this Pen!

Of that 5%, the breakdown is this:

Check out this Pen!

21% of all Pens use a CSS preprocessor

Check out this Pen!

Of that 21%, the breakdown is this:

Check out this Pen!

3% of all Pens use a JS preprocessor

Check out this Pen!

We only offer CoffeeScript at this time so the 3% is all CoffeeScript.

Can you feel the love?

Just for fun, we cross-referenced preprocessor usage with how many hearts those Pens received. On average, Pens get 2.56 hearts on CodePen. Pens that use an HTML preprocessor get 4.88 hearts, so about twice as popular as the average pen. Pens that use an JavaScript preprocessor get 7.49 hearts, so about three times as popular as the average pen. Pens that use a CSS preprocessor get 1.08 hearts, so less than half as popular as the average pen. Sad trombone for the lovability of CSS preprocessor Pens!

Future

We'll put out statistics like this once in a while. It'll be interesting to see how things change over time. We also plan to add back in Jade and Stylus (and maybe TypeScript) as soon as we can, and we'll make sure to mark the date so that usage stats aren't skewed by how long it has been available on CodePen.