You can embed Pens on your website easily with our copy-and-paste embed code. This allows you to show off your code and creations directly on your own site.

Embedded Pens can be put on any website to show off both the code and preview of a Pen. They are useful in places like Blog Posts, Documentation, Portfolios, Collaborative Workspaces or wherever you might display a code sample.

An Embedded Pen looks like this:

How to Embed a Pen

To embed a Pen, open the Embed Pen dialog from the Share menu and clicking the Embed option. This will open the Embed Pen dialog where you can control certain aspects of how the Embedded Pen will look before you copy the code and paste wherever you need it to be.

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

Choose your embed theme: We have two built-in themes: Light and Dark. Every CodePen member also gets a customizable, personal “Default” theme. PRO members get unlimited themes and extra customization options.

Make the preview “click-to-Load”: Slide the toggle next to “use click-to-load” to “On” 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.

Set the embed height: Drag the gray bar at the bottom of the embed preview 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’s HTML.

The Embed Code

Here’s an example of what the (recommended) embed code looks like. It is HTML:

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="Mamboleoo" data-slug-hash="XWJPxpZ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Walkers - How to">
  <span>See the Pen <a href="https://codepen.io/Mamboleoo/pen/XWJPxpZ">
  Walkers - How to</a> by Louis Hoebregts (<a href="https://codepen.io/Mamboleoo">@Mamboleoo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public-assets.codepen.test/ei/index.js"></script>Code language: HTML, XML (xml)

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 control some aspects of the Embedded Pen with the script.

Attributes (and URL Params)

Most of these attributes will already be present on the HTML element that we provide as code to copy/paste automatically. But if you need fine grained control for any reason, here they are, along with the equivalent URL query param on the /embed/ URL, which is only relevant if you’re using the iframe-style embeds.

Required Attributes

Theming Attributes

View Attributes

Different Types of Embeds (Attribute-Controlled)

Temporary Attributes (Beta)

Other Code Formats

WordPress

If you’re specifically using a WordPress website, we’ve got a CodePen Embed Block plugin specifically for use in the Block Editor, or a CodePen Embedded Pens Shortcode if you’re using the classic editor.

Prefill Embed

Prefill Embeds are a special type of Embedded Pen where the code used in the Pen is in the embed HTML itself, rather than being pulled from a saved Pen on CodePen. We’ve got docs specifically for this special type of embed.

Iframe

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:

https://codepen.io/chriscoyier/embed/gfdDuCode language: JavaScript (javascript)

We provide a copy and paste version of this in the Embed Dialog as well, which will help setting the height and theme and other settings.

Callback

If you use the HTML embed code, there is a callback function that you can use to run code after the embeds have been added to the page.  A callback function:

__CodePenIFrameAddedToPage

with call when the embeds have been added, so overriding it, like:

function __CodePenIFrameAddedToPage() {
  console.log("do extra things here");
}Code language: JavaScript (javascript)

… is how you can hook into it.

Delayed Embeds

If you want to dynamically add a CodePen embed to the DOM after it’s loaded or create your own “Click to Run” functionality, you can call window.__CPEmbed() to trigger the embed script to rerun. By default, window.__CPEmbed() looks for elements with the .codepen class, just like when it runs on load, but if you provide a selector as the first argument, window.__CPEmbed('.my-class'), it will only run embeds on elements matching that selector.

For a “Click to Run” button, set up your embeds as you normally would, only don’t use the class name codepen on the wrapping <div>. Instead, use any other selector you can target like codepen-later.

Then on whatever action you choose (could be something like a click, or a scroll into view event, some kind of timeout, or whatever you can think of), you call our global API to convert them into embeds. Here’s an example of a button click to load them:

<div class="codepen-later" data-user="ellebt" data-slug-hash="QYdRLx">
  <!-- You may include other Embed attributes, but `data-user` and `data-slug-hash` are required -->
  <button class="enhance-me">See example</button>
</div>
<script async src="https://public-assets.codepen.test/ei/index.js"></script>Code language: HTML, XML (xml)

document.querySelector('.enhance-me').addEventListener('click', e => {
  // you could also `fetch` the ei.js script in here.

  // The API for looking for and creating embeds
  window.__CPEmbed(".codepen-later");
});Code language: JavaScript (javascript)

Embed Themes

Embedded Pens are themeable in that you can create a theme right on CodePen choosing colors and other design options, then apply that theme to the Embedded Pen. We have docs specifically on how themes work here.

Troubleshooting Embeds

Embed Doesn’t Load

If an embed fails to load, you’ll see text with a link to the Pen instead. There are a couple of reasons why this can happen.

CMS restrictions: some CMS’s don’t allow 3rd party JavaScript, iframes, or other elements of a CodePen embed. For example, you can’t use the iframe or HTML embed code in a Medium post. If your CMS supports oEmbed, you can embed you Pen by pasting a link to the Pen into your page. Read more about oEmbed.

Preview vs. Published in a CMS: Some CMS’s do allow embeds, but won’t expand the embed in a “preview” version of your page (for example, an unpublished draft). In that case, your embed will be visible once your post or page is published.

Incomplete copy of the code: There’s a script element at the bottom of the embed code that’s required for the embed to run. If that’s missing or blocked you’ll see the placeholder text instead.

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.

iOS Quirks

We’ve seen an issue on iOS, 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 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 you are embedding onto, like:

@media (max-width: 400px) {
  iframe[src*="codepen.io"] {
    width: 320px !important;
  }
}Code language: CSS (css)

Making Embedded Pens Resizeable

Here’s a way to do it.

oEmbed

CodePen supports oEmbed, a clever system for making it super easy to embed rich content. Here’s an example of oEmbed: drop a YouTube video URL on its own line in (say) a blog post, and it will get replaced with an actual embedded video. That’s how CodePen oEmbed works, drop a Pen URL into the content area of an oEmbed-enabled site and it will be converted into an embedded Pen, automatically.

This requires the place you are putting the URL to support oEmbed though. Some examples of sites that do: Notion, WordPress, and Medium. It’s decently common in apps for creating content. oEmbed is limited, though — you have more control embedding any other way.