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.

We’ve launched a new PRO feature — editable embeds! And we’ve made some improvements to the overall embed experience for everyone.

Editable Embeds

PRO members, you can now make embeds of your Pens editable, just like the Editor on CodePen itself! The preview is updated live on your website as your visitors type into the editor panels.

This is great for sharing code examples in your documentation or tutorial demos. Editable embeds encourage your visitors to play with your code, and they won’t have to leave your site to start learning and experimenting.

New Embed Layout

Now your embeds can show the code and the result side-by-side. When you set up your embed, you can toggle the editor tabs to choose what’s displayed by default. You can also turn off the result panel to default to a code panel, or you can turn off all the code and default to the result.

New Themes

We’ve added two new themes, Light and Dark. As always, every member has one customizable theme, and PRO members can make unlimited custom themes.

New Settings Menu

We’ve made it easier to choose your theme, enable the “Click to Load” preview state, or make the embed editable with a new, more detailed settings menu.

Go Team!

Hats off to Tim Holman, who took the lead on this feature!