You can embed Pens on other sites through our provided copy-and-paste Embed code. To get the code, click the Embed This Pen button you'll find in the footer of the Editor on any Pen.

embed-this-pen

This will open the Embed Builder. Here you can see a preview of what the Embedded Pen will look like on your site, customize it, and get the embed code. The embed code is in the upper right corner.

embed-builder-popup

All Embedded Pens have a theme. Even if you don't chose one, it will use the default theme. You can update your default theme (all users get one theme for free) or leave it as-is. The controls along the left are for controlling and updating that theme. The advantage to using a theme is that all Embedded Pens using that theme can be updated visually all together. If you need more than one theme, our PRO plan offers unlimited Embed Themes.

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 are free to iframe the embed URL itself. It has /embed/ in place of /pen/ in the URL. For example:

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

Example

Here's an example customized Embedded Pen:

See the Pen CodePen Logo as Inline SVG by Chris Coyier (@chriscoyier) on CodePen

Video Tutorial

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

The Embed Builder

Under the main menu, there is a link to the Embed Builder:

main-menu-embed-builder

This is the "Full Page" embed builder, which presents a list of all the Pens you own on the left to choose from. This can be helpful if you are embedding several Pens at a time and don't want to bounce around to different pages to do it.

full-page-embed-builder

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 inline styles override styles set in CSS. Here's a list of all the available attribute overrides:

PRO only

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

Using in CMSs

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

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

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).

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 width 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.