CodePen

CodePen Prefill Embeds API

Declarative embed API that transforms existing code blocks on a web page into live, interactive CodePen sandboxes without requiring users to navigate away. Code is supplied via data-prefill JSON attributes and pre elements; the embed script at public.codepenassets.com renders an isolated iFrame. Supports HTML, CSS, and JavaScript preprocessors, external stylesheets and scripts, and optional editable mode.

GitHub

Documentation

📖
Documentation
https://blog.codepen.io/documentation/prefill-embeds/

API entry from apis.yml

apis.yml Raw ↑ 
aid: codepen:prefill-embeds
name: CodePen Prefill Embeds API
description: Declarative embed API that transforms existing code blocks on a web page into live, interactive
  CodePen sandboxes without requiring users to navigate away. Code is supplied via data-prefill JSON attributes
  and pre elements; the embed script at public.codepenassets.com renders an isolated iFrame. Supports
  HTML, CSS, and JavaScript preprocessors, external stylesheets and scripts, and optional editable mode.
humanURL: https://blog.codepen.io/documentation/prefill-embeds/
baseURL: https://public.codepenassets.com/embed/index.js
tags:
- Embeds
- Front-End Development
- JavaScript
properties:
- type: Documentation
  url: https://blog.codepen.io/documentation/prefill-embeds/