Skip to content

Codepen embed code generator

Paste any codepen URL — get a ready-to-paste iframe for pens, projects, and collections with a live, interactive preview.

How to embed codepen content

Paste a CodePen link

Copy any codepen.io URL — a Pen, a Project, or a Collection.

Get the embed code

The tool detects the content type and generates the right embed HTML.

Copy & paste

Click Copy code, then paste the HTML into your blog, docs, CMS, or any HTML editor.

Why use our codepen embed code generator

No manual setup

Skip opening the Embed Builder on CodePen. Paste any Pen link and get working embed HTML.

Live, interactive preview

The embed runs the actual Pen — readers can see the HTML, CSS, and JS result and tweak the code inline.

Customizable preview card

Switch to Card mode to customize colors, fonts, and layout before copying.

Free, no signup

Generate up to 50 CodePen embeds per day. No login, no API key, no watermarks.

CodePen Embed with one click.

Powered by the Microlink Embed API — the same infrastructure handling embeds at scale.

  • Editable, runnable Pens

    The embed shows the rendered result plus the HTML, CSS, and JS tabs, so readers can run and edit the code.

  • Pens, Projects & Collections

    Individual Pens, full Projects, and Collections of Pens — the tool handles all CodePen URL formats.

  • Preview card fallback

    A styled preview card with title and image when native embedding is restricted.

  • Editable, runnable Pens

    The embed shows the rendered result plus the HTML, CSS, and JS tabs, so readers can run and edit the code.

  • Pens, Projects & Collections

    Individual Pens, full Projects, and Collections of Pens — the tool handles all CodePen URL formats.

  • Preview card fallback

    A styled preview card with title and image when native embedding is restricted.

FAQ

How do I embed a CodePen Pen on my website?

Paste any codepen.io Pen URL into the tool and click Generate. You will get a ready-to-paste iframe with a live preview.

Can I embed CodePen Projects and Collections?

Yes. Pens, Projects, and Collections are all supported — the tool detects the type from the URL.

Is the embedded Pen editable?

Yes. The embed shows the live result alongside the HTML, CSS, and JS tabs, so readers can run and edit the code inline.

What happens if a Pen cannot be embedded directly?

If native embedding is restricted, the tool falls back to a styled preview card with the title and image that links to the Pen.

Is this free?

Yes — 50 requests per day, no login, no credit card.