Sharing CodePen 2.0 demos on DEV

By Alvaro Montoro on Apr 7, 2026. Originally published on DEV.to.
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 %}
Enter fullscreen mode Exit fullscreen mode

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

Whoops! Something went wrong: Invalid CodePen code

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 Screenshot of CodePen share modal with the data-slug-hash attribute and data-user highlighted
  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 %}
Enter fullscreen mode Exit fullscreen mode

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.