Embed a public CodePen on your own website

The useful answer

If you need to show a live HTML, CSS, and JavaScript snippet on your own page without sending visitors to another site, use CodePen's public embed feature. It loads a public Pen into an external page through an asynchronous JavaScript loader and HTML elements that carry data attributes. The host page does not need Sass, Less, Babel, or any other preprocessor installed; CodePen compiles those in the browser before rendering the output.

Worked embed configuration

Place the following markup where you want the Pen to appear. Replace the placeholder values with a real public Pen.

<p class='codepen' data-height='350' data-default-tab='result' data-slug-hash='EXAMPLESLUG' data-user='exampleuser' data-theme-id='light' data-editable='false'>
  See the Pen Example snippet by Example User (@exampleuser) on CodePen.
  Pen URL: https://codepen.io/exampleuser/pen/EXAMPLESLUG
</p>
<script async src='https://cpwebassets.codepen.io/assets/embed/ei.js'></script>

Where to run: paste this into the HTML of your host page or CMS template. You need write access to that template or page editor. No server restart or build step is required.

What each attribute controls

• data-slug-hash: the unique identifier for the Pen, found in the Pen's URL.
• data-user: the CodePen username of the Pen owner.
• data-default-tab: the panel shown first, such as html, css, js, or result.
• data-height: the embed container height in pixels.
• data-theme-id: light or dark for the embed's UI theme.
• data-editable: true lets visitors edit code in place; false shows a read-only preview.

The text inside the p element is a fallback reference. If JavaScript is blocked or the loader fails, visitors still see a reference to the Pen on CodePen instead of a blank space.

How the loader initializes the Pen

The ei.js script runs asynchronously. It scans the page for elements with the codepen class, reads the data attributes, and injects a self-contained preview and optional editor UI. Because compilation happens client-side, a visitor viewing a Sass or Babel Pen does not need those tools on the host server.

Limits and common mistakes

• JavaScript is required. Visitors with JavaScript disabled may see only the fallback reference or an empty area.
• Fixed height can clip content. data-height sets a pixel height. On smaller screens, tall output may be cut off unless you wrap the embed in a responsive container or override the size with CSS.
• Public Pens only on free plans. Private Pens and certain Pro-only asset or collaboration features are not guaranteed to embed without the corresponding plan. Verify the Pen's visibility before embedding.
• External assets follow host-page rules. Fonts, images, or API calls inside the Pen are subject to your page's Content Security Policy (CSP) and CORS settings, not CodePen's settings.
• Missing loader or wrong slug. The embed will not initialize if the script tag is absent, the data-slug-hash is incorrect, or the data-user does not match the Pen owner.
• Markup can change. CodePen may update embed markup, script behavior, or attribute names without notice. Re-test embeds after platform updates.

Verification and diagnostic checks

1. Copy the example markup into a local HTML file and open it in a browser. Confirm the preview and editor controls appear.
2. Change data-default-tab among html, css, js, and result and refresh. Confirm the matching panel opens by default.
3. Remove the async ei.js script tag and refresh. Confirm the embed no longer initializes, which shows the loader is required.
4. Open the page with JavaScript disabled to observe fallback behavior for non-JavaScript visitors.
5. Open browser developer tools and check the Console and Network tabs for CORS or mixed-content warnings when the Pen references external fonts, APIs, or images.

Practical result check: after publishing, open the host page on desktop and mobile. The Pen should render at the configured height, and the fallback reference should remain visible if the embed fails to load.

Note: this draft describes established embed behavior based on public documentation patterns. Because CodePen can change embed markup or script behavior without notice, verify the generated embed code from your own CodePen account before deploying to production.