DEV Community

Cover image for How To Host Your Codepen
Tiiny Host
Tiiny Host

Posted on • Originally published at

How To Host Your Codepen

Codepen is a super useful tool. It's perfect for quickly dabbling with code online without the faff of an IDE. But, did you know that you can easily deploy and host your code in a couple of steps?

Here's how: 

Prerequisite: You're logged into any type of Codepen account (free or pro).

Step 1: Export your code from Codepen

Once you've found a Codepen you'd like to host, navigate to the bottom right hand corner your screen and click Export. You'll end up with a neat zip of all your files.

Export feature on Codepen

Note: This feature only appears on desktop

Step 2: Upload it to

Head over to, enter a subdomain, upload the neat zip you just downloaded from Codepen and click Launch.

Uploading to

And you're done! Your Codepen is now properly hosted and ready to show off to the world.

Top comments (0)