We just released an update to Embedded Pens. You don’t need to do anything, you might not even notice, but enough has changed that it’s worth noting. In fact, while it’s a bit useful to call these “v3”, we’ll stop with the idea of versioned embeds…

Embed “versions” are gone

v2 embeds were different enough from v1 that we decided to keep all the old code around so you could use either version, even though v2 was way better. Well, v3 is better still, so we’re doing away with versions. Now all embeds are just embeds.

New! View Resources

You can see all the authored HTML, CSS, and JavaScript in Embedded Pens, as well as click a button to see the compiled version of any preprocessed code.

But sometimes that doesn’t tell the whole story. Maybe some layout is happening that doesn’t seem to be in the CSS, or a global is being used in JavaScript that seems to come from nowhere. That’s probably because the Pen uses external resources, a very common and encouraged thing on CodePen!

Now Embedded Pens show that information:

New! Zooming

Presentation Mode had this feature since launch: little buttons that are able to “shrink” the preview area down to half or a quarter of the size. The idea in Presentation Mode is that often overhead projectors have lower resolution and less screen real estate than the computers we normally work on. So instead of re-working a Pen, you can just shrink it quick.

The same premise applies to Embedded Pens… often a preview that works great full-screen or in the preview area of the editor ends up being too small in an embed in a blog post or documentation. So… now you can shrink it on the fly!

New! Gettin’ Narrow

v3 Embedded Pens fill whatever space you want to give them. You can configure the default height, but the width will expand to fit the container you put them in. Then, if that container changes height or width, the embed will come along for the ride filling the space.

You can get mighty big, and in this update, you can get mighty small as well (you’d be OK down to ~300px), which is useful for your responsive designs:

New! More clear active states

This is a little thing and a bit silly, but before, the :hover/:focus state of the tabs was identical to the active state. This made things confusing as you were turning on-and-off tabs. Now the :hover/:focus is an opacity change, which means it works with any theme (all your custom themes should require no alterations), and the UX of turning on-and-off tabs should be much clearer.

Remember, PRO accounts have more features

As a PRO, you can:

  • Remove the top bar, which removes the CodePen branding and can be helpful to display code/result without any UI.
  • Apply custom CSS through your embed themes, so you can take total design control over the entire embed, making it your own. Or do something really unusual and awesome like this Multi-Pane embed.
  • Make them editable! Bring a live editor right to your own site.

Minor things

  • There used to be a postMessage API you could use to change the tabs of the embed from the parent page. It was almost never used, a bit buggy, and a security concern so that’s gone.
  • There used to be some HTML attributes you could use to control the position of the “Rerun” button. Those are gone, but you can still control stuff like that through custom CSS if you like.