Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

It’s always interesting to see the tools developers build to help them do exactly the things they need to do. CodePen, despite the fact that we don’t really have an true “API”, has spawned a number of such tools. Here’s some of the ones on GitHub.


jhey tompkins created “a local development boilerplate set up for creating new Pens”:

Because I’m not always online, but I want a quick and easy way to work on pens locally and then simply push them up to CodePen later. Plus, it’s nice to have them all in version control.


Feed this Node tool that Frederico created a URL to a Pen and it’ll fetch you the HTML, CSS, and JavaScript.

This can be done either via a command line tool or from a provided download method.

And speaking of downloading files… push2.io will download a Pen and host it for you, with no UI (like Debug View) at their domain.


Chris Bogardo gave himself a nice little shortcode for Embeds

An extension for cebe/markdown to provide a shortcode to embed codepens from http://codepen.io/ in your Markdown.


Alex Zaworski’s Chrome Extension is on GitHub as well.

A Chrome extension meant to enhance the CodePen experience.


Konrad Dzwinel’s DevTools add-on which can send DevTools-selected elements over to CodePen (styles and all!):

Chrome/Chromium extension that allows easy CSS+HTML extraction of specific DOM element. Created snippet can be then exported to CodePen, jsFiddle or JS Bin with one click.