CodePen Embed API

Client-side JavaScript API for rendering and lazy-loading embedded Pens on external web pages. Uses the global window.__CPEmbed() function with data-* attributes on a .codepen div to control height, theme, default tab, animations, and zoom level. A __CodePenIFrameAddedToPage callback is available for post-embed hooks.

Documentation

API entry from apis.yml

apis.yml Raw ↑
aid: codepen:embed
name: CodePen Embed API
description: Client-side JavaScript API for rendering and lazy-loading embedded Pens on external web pages.
  Uses the global window.__CPEmbed() function with data-* attributes on a .codepen div to control height,
  theme, default tab, animations, and zoom level. A __CodePenIFrameAddedToPage callback is available for
  post-embed hooks.
humanURL: https://blog.codepen.io/documentation/embedded-pens/
baseURL: https://public.codepenassets.com/embed/index.js
tags:
- Embeds
- JavaScript
- Front-End Development
properties:
- type: Documentation
  url: https://blog.codepen.io/documentation/embedded-pens/