DEV Community

Cover image for Sharing CodePen 2.0 demos on DEV
Alvaro Montoro
Alvaro Montoro Subscriber

Posted on

Sharing CodePen 2.0 demos on DEV

#meta #dev

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

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.

Top comments (0)