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.

This will open the Embed Builder, with a preview of what the embedded Pen will look like on your site. You can grab the copy & paste code from the box below the Pen preview.

The embed builder lets you customize the embed in a couple of ways.

  • Choose which tab to display: click the tab you want to show on your page (HTML, CSS, JS, or the result). The embed code will update automatically with your choice.
  • Make the preview "Click to Play": Check the checkbox next to "Use Click-To Play Preview Before Loading" to enable the "preview mode" version for your embedded Pen.

a Pen in Click-to-Play Preview Mode

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='http://codepen.io/chriscoyier/pen/ClnAe'>ClnAe</a> by Katja Hollar (<a href='http://codepen.io/afkatja'>@afkatja</a>) on <a href='http://codepen.io'>CodePen</a></p>

The embed code uses JavaScript to replace the HTML element with the class name "codepen" with an iframe with 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:

http://codepen.io/chriscoyier/embed/gfdDu

Embed Themes

All embeds have a theme, which controls the style of the CodePen header, tabs, and other style details on your embed. Every CodePen member can customize their default embed 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. So, for example, if you redesign your website you can update your CodePen embed theme to match it, and all of your embedded Pens will update at once.

Example

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

See the Pen CodePen Logo as Inline SVG by Chris Coyier (@chriscoyier) 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 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-custom-css-url http://cpdn.io/url.css
data-preview true none

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 embed iframe is fluid width and works down to widths of 300px, or even less, depending on which languages used (e.g. If you just use HTML, the only tab that shows is HTML, and thus has more available horizontal space. If you use Markdown, Stylus, and CoffeeScript, that's what the names of the tabs will be, and thus less horizontal space).

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*="codepen.io"] {
    width: 320px !important;
  }
}

Making Embedded Pens Resizeable

Here's a way to do it.