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 (image link)


Or like this (thumbnail with link)

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. 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:


Codepen Thumbnail with Link

You can also provide an actual thumbnail, with a link to the codepen. This is more cumbersome, because you need to upload the screenshot to our wiki, but it sure looks nicer.

This is how you do it:

  • Download the screenshot from codepen, or make one yourself
  • Upload the screenshot to the wiki using the Uploader at Wikipages > Uploads.
    • Filename: use a unique image name, I suggest codepen-CODEPEN_SLUG.png
    • License: (c) by the image uploader
    • Source: url of your codepen

Once you have uploaded the screenshot, you can embed it like this:

[[File:codepen-CODEPEN_SLUG.png|400px|thumb|left|[ view on codepen]]]

This is what it looks like in the wiki:

That's it.

Have fun!