Programmatically Creating a CodePen

Background

I’m helping https://twitter.com/mickfuzz with https://github.com/webgameclubs/edlab-gamemakers-club . I’m trying to find a way to create https://codepen.io/ environments automatically from the GitHub repo.

How Can I Create a New Pen Using Code?

There is an API documented here: https://blog.codepen.io/documentation/api/prefill/

I’d like to test it. Can I do that on CodePen itself? Here’s a work in progress: https://codepen.io/davepottssoftware/pen/XBvLjW?editors=0011

Initial Attempts with JavaScript Fetch

If you follow the link to the CodePen above you’ll see that I can run the sample HTML form to create the pen just fine. I can’t seem to make that work with a JavaScript Fetch request.

The way that CodePen responds to a call to its API is to send an HTTP 302 redirect to load a new Pen with the values set up as per the API parameters. It seems to use the “codepen_session” cookie to then know what details to load in the resulting Pen. This new Pen is not saved at this point. It needs user interaction to be able to save the resulting Pen.

Hypothesis for How To Create Pens From GitHub

I’m going to try to create a button in the readme.md file shown on GitHub that will take the contents of the files in the repository folder and create a new CodePen Pen from them.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s