CodePen Blog

This is where we post announcements, tips and tricks, new and updated features, fun roundups, new podcast episodes, and more. There's an RSS feed.

Posts Sunset

We are removing the Posts editor from CodePen in December 2020. If you’re looking for a great place to publish blog posts, there are lots of places you can blog for free, like the developer-focused DEV,, or hey, maybe it’s a good time to play around with a static site generator and self-publish. Here’s what’s […]

#281: Collection Reordering

We’ve got a big update coming for Collections! Stephen and Marie are on to give you a sneak peek at reordering and more of what’s coming soon for the Collections feature on CodePen.

#279: Mini-Releases

Dee, Stephen and Marie talk about CodePen’s evolving strategy of releasing mini features and updates rather than waiting for a big, mega update. They also talk about using feature flagging to test new features with specific users, and how to avoid building “the Homer car” with a minimum viable product mentality.

#278: Community Creativity

Chris and Marie talk about the creativity in creations they’ve seen on CodePen, including photo effects, water droplets, live streaming code, and making sheep!

1,000 SVG Icons!

Well, 996 to be exact. I think it’s fair to say that Font Awesome is the most successful icon project ever, and in addition to their paid offerings, they have an open-source free version. We’ve always offered up SVG icons you can easily copy/paste in our free Assets panel, but up until now, there were […]

Lazy Loading and `srcset` images in the Grid

We make screenshots of all Pens and serve them in a variety of ways, most notably in any “grid” of Pens on CodePen. All Pens will show an image in the grid at first, and then if the Pen is animated (and you don’t have the user setting to only show images) it will fade […]

Updates to the Click-to-Load Embeds

When you open up the Embed modal in the Pen Editor, this is where you get the copy-and-paste code for Embedded Pens. You can do lots here, like change the theme, flip on an option to make the embed have a live editor, adjust the height, and also enable the click-to-load feature. The purpose of […]

#277: Putting Out Fires

Outages, bugs, and other production nightmares — every startup has them. Dee and Marie are on to talk about what the process is when something goes wrong at CodePen, and tips and tactics for how to deal with a production fire.

← Older posts
Newer posts →
12 3