CodePen

CodePen is a social development environment for front-end designers and developers, offering a browser-based playground for writing and sharing HTML, CSS, and JavaScript. The platform allows users to create "Pens" (interactive code snippets) and share them publicly or privately. CodePen provides developer-facing APIs including an Embed API for displaying Pens on external sites, a POST to Prefill API for programmatically opening the Pen editor with pre-populated code, Prefill Embeds for transforming existing code blocks into interactive sandboxes, and an oEmbed endpoint for standard embed discovery. The platform is widely used by educators, tutorial authors, and documentation teams who need live, interactive code examples embedded in external pages.

CodePen is listed with 4 APIs on the APIs.io network. Tagged areas include Developer Tools, Front-End Development, Code Playground, Embed, and Education.

The CodePen catalog on APIs.io includes 1 JSON-LD context.

CodePen’s developer surface includes documentation, engineering blog, pricing, and 8 more developer resources.

🌐 Visit website 📡 Profile data on GitHub

16.1/100 emerging ▬ flat Agent 1/100 human only Heartbeat 84/100 alive saas Full breakdown ↓
scored 2026-11-06 · rubric v0.27.0 · Show this score on your site →

AccessFreemium

4 APIs

Developer Tools Front-End DevelopmentCode PlaygroundEmbed Education

Kin Score

Kin Score How this is scored →
scored 2026-11-06 · rubric v0.27.0

Composite quality — 16.1/100 · emerging

Contract Quality 2.3 / 21

Developer Ergonomics 2.0 / 17

Access Clarity 3.1 / 17

Operational Transparency 1.2 / 11

Contract Governance 0.0 / 10

Discoverability 6.1 / 9

Regulatory Posture 1.6 / 15

Agent readiness — 1/100 · human only

Machine-Readable Contract 0 / 18

Agentic Access Contract 0 / 10

Documented Reversibility 0 / 6

MCP Server 0 / 12

Machine-Readable Auth 0 / 10

Idempotency 0 / 9

Stable Error Semantics 0 / 8

Request/Response Examples 0 / 7

Rate-Limit Signaling 7 / 7

Typed Event Surface 0 / 6

Agent Skills 0 / 5

Well-Known Catalog 0 / 4

Consent & Bot Identity 0 / 3

A2A Agent Card 0 / 8

Dry-Run / Simulate Mode 0 / 4

Delegated User Identity 0 / 6

Protected Resource Metadata 0 / 5

Registration Without a Human 0 / 6

Agentic Commerce Well-Known Document 0 / 5

Pagination 5 / 5

Distinct Operations 3 / 3

MCP Tool Quality 6 / 6

Regulatory Posture applies to this provider. Its tags matched the Education & Research regime, so Regulatory Posture carries 15 points of the composite. If this regime is wrong for your business, say so on your provider repo — the applicability map is public and we will correct it.

Create-or-Update Ergonomics could not be measured. We hold no machine-readable contract for this provider to read, so there is nothing to measure a write surface against. Excluded rather than scored zero: never-measured and measured-empty are different facts. Publishing an OpenAPI is what makes this facet — and several others — scorable at all.

The six quality facets above are damped to 85 points between them, because the conditional facet above carries the other 15. That is why each facet's contribution is shown against a damped maximum: raising a quality facet moves the composite by 85% of its nominal weight, not 100%. The full arithmetic is at apis.io/rating/.

Show this score on your site.

It updates itself when the score changes. Paste this where you link to your API docs:

<a href="https://apis.io/providers/codepen/"><img src="https://apis.io/badge/codepen/card.svg" alt="CodePen on APIs.io — Kin Score by API Evangelist"></a>

Other styles, a README pill and a shields.io endpoint are on the badge page.

Raise your score.

Agent readiness — checks not met, largest first (exact, from this profile):

Machine-Readable Contract +18 pts — api_specs includes an OpenAPI document
MCP Server +12 pts — deployment.mode + probe verdict on the mcp/ manifest, not the pointer; an unprobed slug falls back to authorship
Agentic Access Contract +10 pts — agentic_access artifact present (x-agentic-access), graded by author
Machine-Readable Auth +10 pts — a served openid-configuration/oauth-authorization-server carrying `issuer` (served), else the securitySchemes class in the provider OpenAPIs — bound (mutualTLS, DPoP, Signature) > negotiable (oauth2 authorizationCode/clientCredentials, openIdConnect) > bearer (http bearer, apiKey)
Idempotency +9 pts — OpenAPI mutating operations declare an idempotency key — a header, a request-body property, or a named de-duplication token whose own description says so (verified); else common[].type matches /idempoten/i (documented)
Stable Error Semantics +8 pts — OpenAPI $refs a shared error schema across 4xx/5xx responses (verified), else common[].type includes ErrorCatalog / ErrorCodes / DeclineCodes

12 more unmet checks in the Agent Readiness table above.

Kin Score — facets with the most composite points still available (weight × headroom):

Contract Quality scores 10.7 — up to +22.3 composite points
Developer Ergonomics scores 11.9 — up to +17.6 composite points
Access Clarity scores 18.4 — up to +16.3 composite points

Each check links to what satisfies it. Publish the artifact, or tell us where it already lives, and the score moves on the next scoring run.

Improve this rating by publishing the missing artifacts — every area above can be raised, and the full rubric is at apis.io/rating/. Every facet and dimension name above is a link: it opens that measurement's own page — what it means, the exact checks that feed it, how the whole catalog distributes on it, and the providers at the top of it. This rating is computed from the provider profile at artifacts.apis.io/codepen/apis.yml: open an issue on github.com/api-evangelist/codepen to ask a question or point us at an artifact you publish. Submit an artifact on GitHub — free → Manage your own listing — the Influence plan, $499/mo →

Markets this provider is in provisional

The Kin Score Market layer reads a provider inside its market: its position, and how deep its integrations go. Depth is only comparable within a position. Provisional and unweighted: not part of the Kin Score or agent readiness.

Market	Position	Depth	Registered MCP server	Declares compatibility
Raycast Store Extensions (first-party publishers + community-wrapped products)	covered	12.1 (thin)	-	-
Obsidian Community Plugins (third-party APIs the Obsidian plugin ecosystem integrates)	covered	12.1 (thin)	-	-

Registered MCP server and declares compatibility are report only — not weighted. Undeclared means we found nothing we can read, so there is no number: we never infer integrations.

APIs 4

Individual APIs this provider publishes, each with its own machine-readable definition.

CodePen oEmbed API

Standard oEmbed endpoint that returns a rich embed payload (iframe HTML, thumbnail URL, author metadata) for any public CodePen Pen URL. Supports JSON and JSONP response formats...

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 d...

CodePen POST to Prefill API

HTTP POST endpoint that accepts JSON-encoded code and configuration and opens a new (unsaved) Pen in the CodePen editor pre-populated with that content. Supports HTML, CSS, and ...

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 ...

CodePen API pricing

Not yet checked against CodePen's own pricing page. Compiled by API Evangelist on 2026-06-12 from codepen.io/pricing; confirm before you rely on a figure. A free plan or tier is listed.

Plan	Price
Free free	Free
Starter paid	$8 per monthly Price / month · Free
Developer paid	$12 per monthly Price / month · Free
Super paid	$26 per monthly Price / month · Free
Team paid	$12 per monthly Price per User / month

Plan details, limits and sources →

Rate limits

oEmbed API: unlimited requests per minute
Embed Script (CDN): unlimited requests per minute
POST to Prefill: unlimited requests per minute

Compiled by API Evangelist, not yet checked against CodePen's documentation. Rate-limit details →

Pricing Plans 1

Published pricing tiers and plan structures.

Codepen Plans Pricing

5 plans

PLANS

Rate Limits 1

Documented rate limits and quota policies.

Codepen Rate Limits

3 limits

RATE LIMITS

FinOps 1

Cost, billing, and metering signals for API financial operations.

Codepen Finops

FINOPS

Semantic Vocabularies 1

JSON-LD contexts and semantic vocabularies used across these APIs.

Codepen Context

0 classes · 37 properties

JSON-LD

Security Posture 1

Authentication, domain security, vulnerability disclosure, and trust-center signals.

Codepen Domain Security

TLSv1.3 · HSTS · DNSSEC · DMARC

SECURITY

Resources

Documentation 1

Reference material describing how the API behaves

Documentation

Documentation

Build 1

SDKs, sample code, and the tooling you integrate with

GitHubOrganization

GitHubOrganization

Access & Security 1

Authentication, authorization, and security posture

DomainSecurity

DomainSecurity

Operate 1

Status, limits, changes, and where to get help

RateLimits

RateLimits

Commercial 3

Pricing, plans, and the legal terms of use

Pricing

Pricing

Plans

Plans

FinOps

FinOps

Company 3

The organization behind the API

Website

Website

LinkedIn

Blog

Blog

Other 1

Properties that don't map to a standard resource type

Source (apis.yml)

aid: codepen
name: CodePen
description: CodePen is a social development environment for front-end designers and developers, offering a browser-based
  playground for writing and sharing HTML, CSS, and JavaScript. The platform allows users to create "Pens" (interactive code
  snippets) and share them publicly or privately. CodePen provides developer-facing APIs including an Embed API for displaying
  Pens on external sites, a POST to Prefill API for programmatically opening the Pen editor with pre-populated code, Prefill
  Embeds for transforming existing code blocks into interactive sandboxes, and an oEmbed endpoint for standard embed discovery.
  The platform is widely used by educators, tutorial authors, and documentation teams who need live, interactive code examples
  embedded in external pages.
type: Index
deliveryModel:
  model: saas
  open_source: false
  commercial: true
  callable_host: false
  label: Hosted service · you call their endpoint
  confidence: medium
  source:
  - pricing
  generated: '2026-08-28'
  method: derived
accessModel:
  pricing: freemium
  onboarding: unknown
  trial: false
  try_now: false
  public: false
  label: Freemium
  confidence: low
  source:
  - plans
  - security
  generated: '2026-11-06'
  method: derived
image: https://kinlane-images.s3.amazonaws.com/shared/apis-json/icons/codepen.png
tags:
- Developer Tools
- Front-End Development
- Code Playground
- Embed
- Education
tags_raw:
- Developer Tools
- Front-End Development
- Code Playground
- Embeds
- Education
url: https://raw.githubusercontent.com/api-evangelist/codepen/refs/heads/main/apis.yml
created: '2026-06-12'
modified: '2026-06-12'
specificationVersion: '0.23'
apis:
- aid: codepen:oembed
  name: CodePen oEmbed API
  description: Standard oEmbed endpoint that returns a rich embed payload (iframe HTML, thumbnail URL, author metadata) for
    any public CodePen Pen URL. Supports JSON and JSONP response formats and an optional height parameter.
  humanURL: https://blog.codepen.io/documentation/oembed/
  baseURL: https://codepen.io/api/oembed
  tags:
  - oEmbed
  - Embed
  - Front-End Development
  tags_raw:
  - oEmbed
  - Embeds
  - Front-End Development
  properties:
  - type: Documentation
    url: https://blog.codepen.io/documentation/oembed/
- 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:
  - Embed
  - JavaScript
  - Front-End Development
  tags_raw:
  - Embeds
  - JavaScript
  - Front-End Development
  properties:
  - type: Documentation
    url: https://blog.codepen.io/documentation/embedded-pens/
- aid: codepen:post-to-prefill
  name: CodePen POST to Prefill API
  description: HTTP POST endpoint that accepts JSON-encoded code and configuration and opens a new (unsaved) Pen in the CodePen
    editor pre-populated with that content. Supports HTML, CSS, and JS content fields, preprocessor choices, external resources,
    and editor layout. No authentication is required.
  humanURL: https://blog.codepen.io/documentation/prefill/
  baseURL: https://codepen.io/pen/define/
  tags:
  - Front-End Development
  - Developer Tools
  properties:
  - type: Documentation
    url: https://blog.codepen.io/documentation/prefill/
- 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:
  - Embed
  - Front-End Development
  - JavaScript
  tags_raw:
  - Embeds
  - Front-End Development
  - JavaScript
  properties:
  - type: Documentation
    url: https://blog.codepen.io/documentation/prefill-embeds/
common:
- type: DomainSecurity
  url: security/codepen-domain-security.yml
- type: Website
  url: https://codepen.io
- type: Documentation
  url: https://blog.codepen.io/documentation/
- type: GitHubOrganization
  url: https://github.com/codepen
- type: LinkedIn
  url: https://www.linkedin.com/company/codepen
- type: Blog
  url: https://blog.codepen.io
- type: Pricing
  url: https://codepen.io/pricing
- type: X
  url: https://twitter.com/CodePen
- type: Plans
  url: plans/codepen-plans-pricing.yml
- type: RateLimits
  url: rate-limits/codepen-rate-limits.yml
- type: FinOps
  url: finops/codepen-finops.yml
maintainers:
- FN: Kin Lane
  email: kin@apievangelist.com

CodePen API — frequently asked questions

Does CodePen have an API?

Yes. APIs.io lists 4 APIs from CodePen, including CodePen oEmbed API, CodePen Embed API and CodePen POST to Prefill API, and 1 more.

How much does the CodePen API cost?

APIs.io lists 5 pricing plans for CodePen, with each plan's price, limits and inclusions under Pricing on this page.

Is the CodePen API ready for AI agents?

CodePen has a Kin Score of 16.1 out of 100 (emerging) and an Agent Readiness score of 0.6 (human-only), scored by API Evangelist on 2026-11-06.

Work with this as data

Every provider here is available over the APIs.io API and to AI agents over MCP.

MCP server

One button, every client — Claude, Cursor, VS Code and the rest.

https://apis.io/mcp

Tools for providers

9 MCP tools reach this

find_providersBrowse and filter every provider in the catalog.
get_provider_artifactsEvery artifact this provider publishes, grouped by type.
get_provider_operationsEvery operation across all of their OpenAPIs — one call instead of parsing every spec.
get_provider_toolsEvery MCP tool they ship, with the operation each wraps.
get_provider_evidenceHow each part of their score was established. Free — the basis for a claim should not sit behind it.
get_provider_ratingPRO — composite, band, trend and facet scores.
apis_io_searchSTART HERE — APIs, providers and tags for one query, each with its total.
resolveTurn a domain, URL or GitHub org into the provider it belongs to.
find_cohortsEvery scored population of providers in the catalog.

All 92 tools →

Call it yourself

curl for this page

This provider

curl "https://apis.io/api/v1/providers/codepen"

All providers

curl "https://apis.io/api/v1/providers?limit=25"

Every operation they expose

curl "https://apis.io/api/v1/providers/codepen/operations?limit=25"

How their score was established

curl "https://apis.io/api/v1/providers/codepen/evidence"

Calls without X-API-Key need no key. Calls with it need a paid plan — get a key.

Get an API key

Free tier, no form to fill in. Signing in shares your email address with us — we store it to create your key and to recognise you if you sign in with another provider. See our Privacy Policy and Terms.

GitHub Google LinkedIn

A second provider on the same verified email joins the account you already have.