Unofficial Codepen JSON API in the project

Hello people,
Hope you are doing great. :slight_smile:

I came across with an idea to dynamically add all the pens from codepen rather manually updating them using iframe.

To implement the idea, I spend whole Saturday looking for some intenllignt API availabe somewhere done by Codepen Developer. I didn’t had much luck from codepen blog so decided to leave and decided to add mannually.

But how can I leave like that after reading this

Failure will never overtake me if my determination to succeed is strong enough

After spending more time come across with the codepen awesome API by Tim Pietrusky Here is his github repo
Yehh… :nerd_face:

Unfortunately it’s not working :fearful:

After doing some more dig in finally found something which is still working created by Nate Wiley Here is link and implemented into my portfolio’s lab section you can see here :grinning:

It is very cool and easy to implement with the JSON response data. My only worry is that it is unofficial API. It could go down like it happen to codepen awesome API by Tim Pietrusky.:roll_eyes:

Is it a good idea to use it on the website ?
What should we need to know before using external resource ?

Please advise.

Happy coding.


If you ultimate goal is to use the website to attract employers, then you will not want to use Codepen at all. Instead, you should get your own domain name and host all of your projects somewhere. If you you are just going to be hosting sites with html/css/js then you could use Github pages.

I’m with @RandellDawson. I would go for Github Pages because it’s super easy to use if you use their npm package and because with Codepen, as you just said, you’re relying on any changes made by them in their website.

Thank you @RandellDawson and @SpaniardDev It’s super cool idea to use github pages. I have set myself to use it now. It sounds so complicated but it is super easy to set up.


1 Like