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.


This will open the Embed Builder. Here you can see a preview of what the embedded Pen will look like on your site. Here, you can choose which tab (HTML, CSS, JS or the result) the pen will open up on your site. As well as whether the Pen should load the preview, or go straight to the pen, when your page loads. You can then get the code, from the bottom of the 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. To change your theme, you will use the Embed Theme Builder (explained below).  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=''>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 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:


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 Theme Builder

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

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 and border appearances. Pro users can also customize the tab bar's visibility, and add custom CSS, as well as make as many themes as you want. (Everyone gets one for free)

Remember, changes to your themes will apply directly to all the pens you have already embedded.

Pen Previews

oEmbedded Pens show in "preview mode" by default:

If you're embedding pen regularly, you'll just have to tick the "Use Click-To-Play Preview Before Loading" checkbox, and your embed code will update automatically.

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:

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

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

Making Embedded Pens Resizeable

Here's a way to do it.