CodePen is a “playground for the front end side of the web”. It’s a great tool to experiment with code and share it with others. You can easily share your “Pens” by embedding them to your WordPress.com site

You can sign up for CodePen and start making Pens here: http://codepen.io

To embed a Pen from CodePen, you will need to create or edit a Post or Page on your site.

Next, copy the URL of your Pen and paste it on a line by itself in your Visual editor. Make sure that it is not hyperlinked.

Example of inserting a Pen

That’s it! The update will preview live in the Visual Editor so you can see what it looks like without having to click Preview Changes.

The final result will look something like this:

Troubleshooting

For information about troubleshooting CodePen embeds, take a look at our Troubleshooting Embed Links doc.