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

#beginners #tutorial #discuss

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 was trying to figure out how to display and demonstrate the way code works on the dev.to platform itself. I literally tweeted asking someone to do a tutorial.

Turns out it is really as simple as typing

{% codepen https://codepen.io/cassidoo/pen/MyaWzp %}

just make sure to avoid putting the back ticks that cause the black background.

So if it is done correctly,

this should happen.
Ps. I used one of Cassidy's codepens.

Yep so IT IS really simple.
I am happy to answer any questions or demonstrate in any other way possible.

Thank you for reading.

Top comments (8)

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.

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.