Sharing CodePen 2.0 demos on DEV

NOTE: the DEV team patched this and it is already working. No need for tricks or hacks. Just embed CodePen demos as you always did. Thanks, devs!

If you've tried the new CodePen 2.0 editor, you may have noticed that the URL format has changed. And if you've tried sharing one of these demos here on DEV, you've probably also noticed that it doesn't work with the standard CodePen embed code:

{% codepen https://codepen.io/editor/alvaromontoro/pen/019d657e-d7bc-746a-9bc3-4df2244c97cc/24ac30a5aad27b2b927702d3557c6e70 %}

If you try adding that code to a DEV article, you'll get this error:

So, the new URL doesn't work yet... but what if you still want to include it in a DEV article? Good news: you can! You just need to use the hash for the CodePen demo instead. Here's how to find it:

1. Click on the Share icon in the top-right corner
2. Select "Embed"
3. A modal will open, make sure "HTML (recommended)" is selected
4. In the code, look for data-slug-hash and data-user
5. Copy those values.

6. Use them to generate a classic CodePen URL in the embed tag:
   

   {% codepen https://codepen.io/[USER]/pen/[SLUGH_HASH] %}
   

7. That's it!

In the screenshot above, the hash is "MYjBBrm" and the user is "alvaromontoro", that makes the URL https://codepen.io/alvaromontoro/pen/MYjBBrm, so the embed tag becomes:

{% codepen https://codepen.io/alvaromontoro/pen/MYjBBrm %}

Which works just fine (it will only show the preview, not the code):

---

To be fair, I expect the DEV team to fix this soon. But in the meantime, this is a simple workaround for sharing CodePen 2.0 demos.

Comments

[Chris Coyier]

Hopefully they can fix! Feel free to hit me up at [e-mail] if there is anything I can do.

[Ben Halpern]

Coming right up @chriscoyier!

Support CodePen 2.0 editor URLs in CodePen embeds #23113

Copilot posted on Apr 08, 2026

CodePen 2.0 changed shared demo URLs to an /editor/.../pen/:editor_id/:slug_hash format, which Forem currently rejects as an invalid CodePen embed. This change teaches the CodePen liquid tag to recognize the new URL shape while preserving existing classic/team/embed/preview behavior.

• URL matching

  • Extend CodepenTag::REGISTRY_REGEXP to accept both:
    • existing CodePen URLs (/:user/pen/:slug, /:user/embed/:slug, team URLs, preview URLs)
    • CodePen 2.0 editor URLs (/editor/:user/pen/:editor_pen_id/:slug_hash)
  • Keep existing username and classic slug constraints intact.

• Embed normalization

  • Continue normalizing accepted CodePen links by converting /pen/ to /embed/.
  • This works for both classic URLs and CodePen 2.0 editor URLs without changing the downstream iframe rendering path.

• Regression coverage

  • Add tag-level coverage for a real CodePen 2.0 editor URL.
  • Add unified embed registry coverage so auto-detection recognizes the new format alongside legacy URLs.

{% codepen https://codepen.io/editor/alvaromontoro/pen/019d657e-d7bc-746a-9bc3-4df2244c97cc/24ac30a5aad27b2b927702d3557c6e70 %}

This now resolves to the embed form instead of being rejected as an invalid CodePen URL.

View on GitHub

[Alvaro Montoro]

To be honest, I was thinking about fixing it if no one is working on it yet, after all Forem is open source. @ben?

[Ben Halpern]

This is 100% something you're welcome to do in the future. I just mentioned above that we have the small patch incoming.

[Alvaro Montoro]

Checked out the repo and I can't even get to run it locally, so I'll leave this to the pros 😅

[Archit Mittal]

Nice catch and solid workaround. The speed from your post to Ben's PR to a merged fix is honestly one of the best things about the DEV/Forem ecosystem being open source -- problem identified, community flags it, patch ships in a day.

The slug-hash extraction trick is clever too. I run into similar URL format migration headaches when building automation workflows that scrape or embed content from platforms that update their URL schemas. Having a fallback pattern like this (extract the canonical identifier from the new format, reconstruct the legacy URL) is a good general strategy for any integration that depends on third-party URL structures.