Sharing CodePen 2.0 demos on DEV

How to share CodePen 2.0 demos on DEV

title: Sharing CodePen 2.0 demos on DEV published: true description: How to share CodePen 2.0 demos on DEV tags: meta,dev cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v6os61zdhth7fjm1wrql.png

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):

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

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.