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
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:
Click on the Share icon in the top-right corner
Select "Embed"
A modal will open, make sure "HTML (recommended)" is selected
In the code, look for data-slug-hash and data-user
Copy those values.
Use them to generate a classic CodePen URL in the embed tag:
{% codepen https://codepen.io/[USER]/pen/[SLUGH_HASH] %}
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.
Create template
Templates let you quickly answer FAQs or store snippets for re-use.
Submit
Preview
Dismiss
Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.
Hide child comments as well
Confirm
For further actions, you may consider blocking this person and/or reporting abuse

Nếu bạn đã thử nghiệm trình soạn thảo CodePen 2.0 mới, có thể bạn đã nhận thấy định dạng URL đã thay đổi đáng kể. Và nếu bạn từng cố gắng chia sẻ một trong những bản demo này lên DEV, có lẽ bạn cũng đã nhận ra rằng mã nhúng CodePen tiêu chuẩn hiện không còn hoạt động:

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

![Thông báo lỗi khi nhúng CodePen trên DEV](https://news1.webcdn.lehuy.net/articles/2026/04/253bdf2c3776e6e023af0ce516cf9416.png)

Vậy là URL mới hiện tại chưa hoạt động... nhưng nếu bạn vẫn muốn đưa nó vào bài viết trên DEV thì sao? Tin vui là bạn hoàn toàn có thể! Bạn chỉ cần sử dụng mã băm (hash) của bản demo CodePen thay vì URL dài dòng. Dưới đây là cách để tìm thấy nó:

1. Nhấp vào biểu tượng **Share (Chia sẻ)** ở góc trên bên phải.
2. Chọn tùy chọn **"Embed" (Nhúng)**.
3. Một hộp thoại (modal) sẽ mở ra, hãy đảm bảo tùy chọn **"HTML (recommended)"** được chọn.
4. Trong đoạn mã, hãy tìm thuộc tính `data-slug-hash` và `data-user`.

![Màn hình chia sẻ của CodePen với các thuộc tính cần tìm](https://news1.webcdn.lehuy.net/articles/2026/04/a1e5ae54dc0e774eebb312db50556cc0.png)

5. Sao chép các giá trị tương ứng.
6. Sử dụng chúng để tạo lại một URL CodePen dạng cổ điển trong thẻ nhúng:

```
{% codepen https://codepen.io/[TEN_NGUOI_DUNG]/pen/[SLUG_HASH] %}
```

7. Xong!

Trong ảnh chụp màn hình ở trên, mã hash là "MYjBBrm" và tên người dùng là "alvaromontoro". Điều này tạo thành URL `https://codepen.io/alvaromontoro/pen/MYjBBrm`, do đó thẻ nhúng sẽ trở thành:

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

Cách này hoạt động rất tốt (lưu ý: nó sẽ chỉ hiển thị bản xem trước, không hiển thị mã nguồn):

Có thể nói, tôi tin rằng đội ngũ DEV sẽ sớm khắc phục sự cố này để hỗ trợ URL mới. Nhưng trong thời gian chờ đợi, đây là một giải pháp đơn giản và hiệu quả để chia sẻ các bản demo CodePen 2.0 của bạn.

<p>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:<br>
</p>

<div class="highlight js-code-highlight">
<pre class="highlight plaintext"><code>{% codepen https://codepen.io/editor/alvaromontoro/pen/019d657e-d7bc-746a-9bc3-4df2244c97cc/24ac30a5aad27b2b927702d3557c6e70 %}
</code></pre>

</div>



<p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsw6iue79ihieveuheyjz.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsw6iue79ihieveuheyjz.png" alt="Whoops! Something went wrong: Invalid CodePen code" width="800" height="215"></a></p>

<p>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:</p>

<ol>
<li>Click on the <strong>Share icon</strong> in the top-right corner</li>
<li>Select "<strong>Embed</strong>"</li>
<li>A modal will open, make sure "<strong>HTML (recommended)</strong>" is selected</li>
<li>In the code, look for <code>data-slug-hash</code> and <code>data-user</code>
<img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0nv72myr2yya6f0ssa1f.png" alt="Screenshot of CodePen share modal with the data-slug-hash attribute and data-user highlighted" width="800" height="556">
</li>
<li>Copy those values.</li>
<li>
<p>Use them to generate a classic CodePen URL in the embed tag:<br>
</p>
<pre class="highlight plaintext"><code>{% codepen https://codepen.io/[USER]/pen/[SLUGH_HASH] %}
</code></pre>

</li>
<li><p>That's it!</p></li>
</ol>

<p>In the screenshot above, the hash is "MYjBBrm" and the user is "alvaromontoro", that makes the URL <a href="https://codepen.io/alvaromontoro/pen/MYjBBrm" rel="noopener noreferrer">https://codepen.io/alvaromontoro/pen/MYjBBrm</a>, so the embed tag becomes:<br>
</p>

<div class="highlight js-code-highlight">
<pre class="highlight plaintext"><code>{% codepen https://codepen.io/alvaromontoro/pen/MYjBBrm %}
</code></pre>

</div>



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

<p><iframe height="600" src="https://codepen.io/alvaromontoro/embed/MYjBBrm?height=600&amp;default-tab=result&amp;embed-version=2">
</iframe>
</p>




<p>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.</p>

Phiên bản CodePen 2.0 mới đã thay đổi định dạng URL, khiến mã nhúng tiêu chuẩn trên DEV không còn hoạt động. Bài viết này sẽ hướng dẫn bạn cách lấy slug hash để khắc phục vấn đề và nhúng thành công.

Hướng dẫn nhúng demo CodePen 2.0 lên DEV khi định dạng URL thay đổi

Bài viết liên quan