Creating Links to Codepen

You currently cannot embed codepens directly into the wiki.
However it is quite easy to create a link to codepen with a preview image.

This tutorial shows to create previews that look like this:


Or like this:

Get the Slug

To embed a codepen you need its CODEPEN_SLUG which is a combination of letters and numbers.
If your codepen is located at the username is bitcraftlab and your slug is MbjKNv.

Screenshots hosted at Codepen

With this slug you can retrieve screenshots provided by the codepen website.
A small screenshot is usually available at:

A large screenshot is usually available at:

Let's say, your slug is MbjKNv. Then the small image can be found at and the large one at

Codepen Image Link

This is the simple and fast way to link to codepens uson If you know your codepen slug you can easily create a image link using the thumbnail hosted at codepen using this syntax:


Let's say my username is bitcraftlab and I want to embed the codepen with the slug MbjKNv. Then the syntax goes like this:


This is what it looks like:


Thumbnail with Link

You can also provide an actual thumbnail, with a link to the codepen. This is more cumbersome, but looks nicer.