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.

The next step on our journey of providing good RSS feeds for everything you might want on CodePen is here. This step might seem small but it’s actually quite big! The “homepage” feeds now contain images of the Pens, so you can see a preview of it right from your feed reader.

It should work in any feed reader. I’ve been liking Feedly and this is what an entry from the Editor’s Picks feed looks like:


We show:

  • The title
  • An image preview
  • The description
  • Links to jump to CodePen (editor, full page, details)
  • Info about what tech it uses

We just have these three feeds yet:

Editor’s Picks: http://codepen.io/picks/feed/
Popular Pens: http://codepen.io/popular/feed/
Recent Pens: http://codepen.io/recent/feed/

Well, other than the activity feed.

I think it looks pretty dang cool when Feedly uses the images in creative ways in it’s layout. I imagine Flipboard does cool stuff too. It’s an interesting time for feed readers with the demise of Google Reader.


Want to see the image previews of your Pens?

Append /image/large.png or /image/small.png to the end of the /pen/ URL for any of your Pens. It will redirect to where we store that image. Like:


These image are created with Phantom.js. 99.99% of all Pens ever created have an image preview now. You’ll probably see differences between what you see in the live preview and what the image preview looks like. We plan to improve that over time, but for now, we’re just snapping what the regular “headless WebKit” gives us in Phantom.

Moving on

Now that we have image previews for each Pen, we plan to do more with them. Stay tuned for related cool stuff.

We also plan to offer more feeds as well as other programatic access to things as we are able. If you have ideas for what you’d like to see, we’re all ears.