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.

One thing we hear fairly often from you fine folks is that visiting CodePen can cause your computer’s cooling fans to kick on. Happens to us too! People use CodePen to build some pretty CPU intensive demos and we’re not shy about featuring those on the homepage. By default on desktop, we show them in <iframe>s:


Combine six or more of those on a single page and you might hear those fans kicking on or worse, experience some serious browser slowdown. We’ve made the call already to not serve these iframes to mobile devices. Mobile devices are generally far less powerful than desktops and frankly could use the help. This kind of thing will get better over time as browsers and computers get better, but it’s worth doing something about now. If you commonly have this issue, we have a new setting for you:

Under your user dropdown menu, go to Your Settings then the Defaults tab.

Checking that checkbox will mean that you will always see images instead of iframes when browsing CodePen (while logged in).

Notice they look different than the iframes. We do the best we can (e.g. make @font-face work, render on Mac Minis…) but images just will never live up to the real thing.

And notice that guy in the bottom left there, no image at all. Once in a while the screenshot service just kinda chokes out. It’s an ongoing battle. If you see one that is screwed up, you can request it be re-shot (on anybodies Pen).

You’ll see the option in the context menu if you have the Use Images setting turned on.

You might wanna try it out even if you think your computer handles CodePen just fine. It’s kinda fun to see how stuff like pagination happens so much more quickly. Plan on using this? Let us know what you think.