You can embed Pens on other websites with our copy-and-paste Embed code. To get the code, click the "Embed" button in the footer of the Editor on any Pen. Or, select "Embed Pen" from the export menu.

This will open the Embed Builder.

The Embed Builder helps you customize your embed. You can:

Choose your embed theme: We have two built-in themes: Light and Dark. Every CodePen also gets a customizable, personal default theme. PRO members get unlimited embed themes.

Choose which tabs to display: the embed builder will start out with your result tab and one of your code tabs selected. You can choose a different code tab, turn off the code tabs entirely to maximize the result, or hide the result and maximize a code tab.

Make the preview "Click-to-Load": Check the checkbox next to "use click-to-load" to enable the preview version for your embedded Pen. Preview embeds show a static image preview of your Pen with a "Run Pen" button. When your visitors click the button, the Pen will load.

a Pen in Click-to-Play Preview Mode

Make the embed editable: PRO members can make their embeds editable, just like the editor on CodePen. You can read more about how editable embeds work in our PRO Embeds documentation.

Set the embed height: Drag the bar at the bottom of the embed to change its height. The Copy & Paste code will update with the new height.

After you've finished customizing the embed code, copy the code from the "Copy & Paste Code" box below the embed preview. Paste the code into your website and your embed will appear.

The Embed Code

Here's an example of what the embed code looks like. It is HTML:

<p data-height="268" data-theme-id="0" data-slug-hash="ClnAe" data-user="afkatja" data-default-tab="result" class='codepen'>See the Pen <a href=''>ClnAe</a> by Katja Hollar (<a href=''>@afkatja</a>) on <a href=''>CodePen</a></p>

The embed code uses JavaScript to replace the HTML element with the class name "codepen" with an iframe of the actual embed. We do it this way so that it is semantic, accessible, progressively-enhanced, and syndication-friendly (i.e. there will be usable links/information in RSS feeds). We also apply the theme and do some design-y stuff via the JavaScript. If you absolutely can't use JavaScript — but you can use an iframe — you can iframe the embed URL itself. Change /pen/ in your Pen's URL to /embed/. For example:

Embed Themes

All embeds have a theme, which controls the style of the CodePen header, tabs, and other style details on your embed. We have two built-in themes, Light and Dark. Every CodePen member also gets a customizable, personal default theme. PRO members can create unlimited embed themes, and have access to a few extra-special theme customization options.

When you change one of your embed themes, all of the Pens that use that theme will be updated at the same time. For example, if you redesign your website, you can update your CodePen embed theme to match it. All of your embedded Pens will update with your new theme immediately.


Here's an example of a Embedded Pen with a custom theme:

See the Pen CodePen Logo as Inline SVG by CodePen (@codepen) on CodePen.

The Embed Theme Builder

You can get to the Embed Theme Builder from your user menu in the header:

This is the Embed theme builder, which can be used to customize the look and feel of your embedded Pens. All controls are on the left, ranging from animations, to colors, to border appearances. PRO users can also customize the tab bar's visibility, add custom CSS, and make as many themes as you want (everyone gets one customizable default theme for free).

Remember, changes to your embed themes will apply directly to all the Pens that use the theme, including any Pens you embedded before changing the theme.

Video Tutorial

Here's a five minute video tutorial on theming Embedded Pens:

Override Attributes

You'll notice in the HTML embed code, there are

data-* attributes (e.g. data-theme-id="178"). These attributes control which Pen is embedded and how it looks and behaves. These attributes have the power to override anything set in the theme itself, much like how inline styles override styles set in CSS. Here's a list of all the available attribute overrides:

Attribute Example Value Default Notes
data-theme-id 319 0
data-slug-hash gfdDu n/a Required
data-user chriscoyier n/a Not required
data-default-tab html result html/css/js/result
data-height 250 300 Not a part of themes
data-show-tab-bar true true true/false, PRO only
data-animations run run run/stop-after-5
data-border none none none/thin/thick
data-border-color #000000 #000000 Hex Color Code
data-tab-bar-color #3d3d3e #3d3d3e Hex Color Code
data-tab-link-color #76daff #76daff Hex Color Code
data-active-tab-color #cccccc #cccccc Hex Color Code
data-active-link-color #000000 #000000 Hex Color Code
data-link-logo-color #ffffff #ffffff Hex Color Code
data-class my-special-class Added to <iframe> of embed
data-preview true none

PostMessage API

If you like, you can interact with CodePen embed iFrames through a postMessage API, which allows you to change the active tabs without user interactions.

By sending an object with an activeTabs attribute (which can be any of the tabs available in the Pen) you can change which tabs are seen.

For example, this would set the embeds active tabs to CSS and Result:

    activeTabs: "css, result"
}, "*");

And this would set the embeds active tabs to JavaScript only:

    activeTabs: "js"
}, "*");

This Pen shows an example of using this API to rotate the embedded Pens active tabs, changing the tab every 2 seconds.

Using Embeds in a CMS

You probably don't need anything special at all, as long as your CMS supports HTML. Just paste in the code.

If you use WordPress, we have a plugin which isn't required, but might be useful.

Embeds and HTTPS

Embeds work on HTTPS sites, but keep in mind that if your embedded Pen includes any assets loaded over HTTP, it can cause mixed-content warnings on your HTTPS site. You don't need to worry about this if you use CodePen PRO hosted assets — they're HTTPS by default!

Mobile Rendering

Embeds on mobile devices generally work fine. The side-by-side code and results layout works at a minimum width of 600px. At smaller widths, the embed will show either your chosen code tab, or the result if you've toggled the code tabs off.

WebKit Quirks

We've seen an issue though, on mobile WebKit, where the iframe renders far too wide and the text appears much larger. This happens on Pens with very long lines of code. Unfortunately you can't force the width of the iframe back to a normal width with something like iframe { width: 100%; }, and having it sit in a container you know to be of a correct normal width. Quirk of WebKit, we suppose.

You CAN fix it by forcing a non-percentage width on the iframe. You might want to try doing that in a media query in the CSS of the page your are embedding onto, like:

@media (max-width: 400px) {
  iframe[src*=""] {
    width: 320px !important;

Making Embedded Pens Resizeable

Here's a way to do it.