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 month we released a new version of embeds, adding a bunch of new themes and layout options!

One little-shared feature of these embeds (we were silently testing!), is a postMessage API, you can use to change the tabs within the embed with your own code. For example, if you’re a PRO user, you can hide the original embed navigation tabs and build your own completely custom navigation. Maybe something like this:

The HTML, CSS, and JS tabs above aren’t part of the native CodePen embed (iframe), they are sitting next to it. They are wired up through JavaScript/postMessage to change the active tabs inside the embed.

You can check out an example of how it works in this demo Pen. And if you have any ideas of what you’d like to see next, let us know!