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.
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
5% of all pens use an HTML preprocessor
Of that 5%, the breakdown is this:
21% of all Pens use a CSS preprocessor
Of that 21%, the breakdown is this:
3% of all Pens use a JS preprocessor
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.