New Interface for Embed Code and Embed Theme Builder

November 20, 2015

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.

Last week we slid out the door some fairly major changes to how you work with Embedded Pens. Not a lot of major changes in what you can do, just, hopefully, better UX.

Pick a Theme, Adjust the Height, and Go

The big idea for us was simplification. Before, when you clicked the Embed button when viewing a Pen, the modal was... a little complicated. We simplified it a ton. Now, when you click that Embed button, you get this:

We'd like it to be as obvious as possible how to get the code you need to embed a Pen. The choices that you might want to make on a per-Pen basis (e.g. how tall should it be?) are still there. But designing how a Pen looks is all about themes and thus we made...

Theme building a world of it's own

Also simplified, the old "Embed Builder" is now just the "Embed Theme Builder" and is solely dedicated to building embed themes. You can get to it anytime from your user dropdown menu.

The real beauty of themes is that you can update the look of a lot of Embedded Pens at once. For example, all the Pens on CSS-Tricks have the same theme. That way I can change the look of all of them easily to match any design changes. Check out this video on how that works.

You can change syntax highlighting themes for Embedded Pens now

The #1 requested feature of Embedded Pens! Any theme you can use here on CodePen itself you can now apply to your embeds (via a theme). That means you can use a light-on-dark theme, for example, if that is a better visual design fit for where you are embedding the Pen.