Updated on August 2, 2026easy, ~1 min

How to Embed a CodePen in Notion

CodePen is on Notion's list of supported embeds, so a pen URL becomes a running demo rather than a link. Copy the pen's address from your browser, type /embed on a Notion page, paste it, and click "Embed link". The pen renders and runs inside the block, which makes it a practical way to put a working example in documentation instead of a screenshot and a description of what happens.

Why embed CodePen in Notion?

  • Show a UI pattern actually working next to the notes describing it.
  • Keep a runnable example in a design system page rather than a static image.
  • Let a reader change a value and see the result without cloning anything.

CodePen and Notion: what runs in the block

Notion names CodePen among the services it embeds directly, so no embed script is involved. The pen runs in the block with its editor panes and preview, which is the same thing you would see on CodePen itself. Because it points at the live pen, saving a change in CodePen changes what the Notion page shows.

How to embed CodePen in Notion

  1. Open the pen and copy its URL

    Open the pen on codepen.io and copy the address from your browser. It looks like https://codepen.io/username/pen/abcdef. Private pens will not load for other readers, so use a public pen for anything shared.

  2. Paste it into Notion

    Type /embed on your Notion page, press Enter, paste the URL, and click "Embed link". The pen loads and starts running.

  3. Size it for the demo

    Drag the block taller than feels necessary. CodePen splits the space between code panes and the preview, so a short block leaves both cramped.

Good to know

  • Private pens do not render for other readers. Use a public pen on any page you share.
  • The embed loads and runs the pen's JavaScript, so a heavy demo will slow the Notion page down when it scrolls into view.
  • Editing inside the embed does not save back to CodePen. Changes are throwaway unless the reader opens the pen itself.
  • Which panes appear is controlled by the pen's own default view rather than by anything you set in Notion.

Frequently asked questions

How do I embed a CodePen in Notion?

Copy the pen's URL, type /embed on your Notion page, paste it, and click "Embed link". CodePen is a supported embed source, so the pen runs directly in the block.

Can readers edit the code in the embed?

They can type in it, but nothing saves back to CodePen. Treat any change made inside the Notion embed as temporary.

Why is my CodePen embed blank?

The most common cause is a private pen, which will not render for anyone but you. Make the pen public, or use a different pen for the page you are sharing.

Need a widget that doesn’t exist yet?

Describe it in plain English and generate a custom Notion widget with a stable embed link — no code required.

Create a widget
All embed guides