DEV Community

How to Embed CodePens into your dev.to posts - It's easy.

Stella Mwanahamuntu on January 31, 2020

Hey Devs, So I recently started writing blog series to share and help me keep track of some courses I have been taking. The only challenge I had ...

Read full post

Andrew Wooldridge • Feb 1 '20 • Edited

Yes! You can embed a lot of different kinds of content - see this article dev.to/devteam/ways-to-enhance-you... ( there are even more like codesandbox

{% codesandbox 23948skjfksjdf %}

There's another article about even more embeds plus a link to the editor's guide dev.to/awwsmm/a-mild-complaint-3jl5

Thor Galle • Nov 19 '20

Thanks for explaining! If you also want to configure the CodePen options, there is at least the officially supported default-tab option. Example:

{% codepen https://codepen.io/th0rgall/pen/OJXYxdm default-tab=js,result %}

Documentation: dev.to/p/editor_guide

Jakub T. Jankiewicz • Nov 25 '22

Options are not documented it seems, where you can find all of them? I want to find how to require click to run the pen.

Cassidy Williams • Feb 23 '21

I just googled how to embed Pens and was startled seeing my own Pen on this, hahaha! Thank you for the post!!

Oscar Ortiz • Apr 7 '23

I couldn't get this to work for the life of me. Thank you for this small quick post on getting embed code to work on a blog post. I'm a fan of being able to show the live demo while the user is reading the post.