Subscribe

Embedded Pens take a big leap forward today. Now you have 100% control over the look of the embeds with the new Embed Builder. From the Embed Builder, you can change all of the colors used, decide on a border, control the animation stopping, and change the default tab. And that's not all!

You can bring up the Embed Builder from any Pen.

It's a button in the footer now (not in the Share dropdown anymore).

It will bring up a popup like this:

There are a lot of options here, but each one gives you control over how the Embedded Pen will look on your site. My favorite: drag the bar along the bottom of the Embed preview to adjust the height to get it just right for showing off.

Theming Makes It Easy

All those color settings and choices you make can be saved as a theme.

The beauty of a theme is that they can be updated right from the Embed Builder, all your Embedded Pens that use that theme will instantly be updated. That means you can design your Embedded Pens to perfectly match your site, and not worry that if you redesign your site later they will clash. You can just update the theme they use and they will match again!

All users get a "Default" theme, which you can alter however you wish. PRO users can create and manage unlimited themes.

Different sites, different themes.

The Dedicated Embed Builder

Going to the Editor View of the Pen you want to embed is no longer the only way to get the embed code. There is now a dedicated area just for Embeds. You can get there from the main menu:

This brings you to the dedicated Embed Builder:

This area allows you to choose from Pens you own on the left. Clicking them updates the active Pen inside the Embed Builder. This can be pretty handy when, for example, writing a blog post where you know you'll need to embed several Pens. Easier to do it all without having to bounce around different pages of the site.

PRO Features

Unlimited Themes

Create and manage unlimited themes. Very useful if you have multiple sites with different looks.

Hide the Tab Bar

Want to show just the result (or just some code)? PRO users can hide the tab bar, which also hides the CodePen branding.

Custom CSS

Link to your own .css file, giving you absolute and total control over every aspect of the Embedded Pen. Want a gradient background for the Tab Bar? You go ahead and do it!

Theme Your Pen Directly With CodePen

If you're a PRO user, you have the ability to link to a custom .css file to customized your Embedded Pens. You can create that .css file directly on CodePen! Essentially you use the Pens as Resources feature, where you can pull the CSS directly from any Pen.

To make it easier, I've set up a Pen you can Fork, customize, then use in your theme.

I only just listened to the Shop Talk episode with all three of you on it, just want to say I really appreciate all the work you guys put into Codepen. Really is an awesome site. This feature is a really nice addition.

Sara Soueidan

Definitely my favorite feature so far! Excellent work you guys, we appreciate all the hard work you put into making Codepen an awesome place for us devs

http://www.crocodillon.com/ Dillon de Voor

Agreed, this really is a nice feature. A lot of extra love to PRO users as well… I’d almost upgrade!

http://timpietrusky.com/ TimPietrusky

This is so fucking fucking awesome! I wondered today why the “share embed pen” option from the “share” menu was gone Now I have my answer. Thanks!

Chris Nager

This is great and comes at a perfect time!!

Mark Reveley

codepen rules. case closed.

http://christian-fei.com/ Christian Fei

My favourite feature is still CodePen
Nice work, you guys rock!

Chris Nager

This is one of my favorite features! Give ‘n’ Go is my latest creation using the new customizable embed builder. It’s a curated gallery of Dribbble shots reworked as interactive CodePen pens. http://give-n-go.tumblr.com/

chriscoyier

Woah!

alex vazquez

This is awesome. Great job picking out great looking Pens!

http://www.mathewporter.co.uk/ Mathew Porter

Brilliant!

BrianGenisio

I want to be able to change the pen on my page on-the-fly. I’ve come up with a way of doing it:

1. Overwrite the IFRAME you create with a new
2. CodePenEmbed.init();

This works well for me. Is there a more recommended way of doing this?