An unofficial API for CodePen.io
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
app
.gitignore
.htaccess
README.md
index.php

README.md

CodePen AwesomePI

An unofficial API for CodePen made by a fan.

This simple API parses the requested CodePen page with the PHP Simple HTML DOM Parser and returns JSON.

2012 - 2015 by http://timpietrusky.com

Basics

Base URL

http://codepen-awesomepi.timpietrusky.com

Response

The response is JSON-encoded (content-type: application/json).

If you want to use the response within JavaScript you can append jsonp as a callback.

pentizr.js

Get your CodePens onto your website with pentizr.js.

$(function() {
  $('.my-pens').pentizr({username: 'TimPietrusky'});
});
<body>
  <div class="my-pens"></div>
</body>

JSONP example in jQuery

$.ajax({
    dataType: 'jsonp',
    jsonp: 'jsonp',
    url: 'http://codepen-awesomepi.timpietrusky.com/picks',
    success: function (data) {
        alert(data);
    }
});

Null values

If the value of a field is not specified, it will get the value null.

Error handling

If the request is invalid you will get an error:

{
    "status" : {
        "code":1337,
        "message":"invalid"
    },
    "content":null
};

URL explanation

Why are there four URLs?

<tr>
    <td>pen</td>
    <td>Code split view: Above is the source code (HTML, CSS, JS) and below is the CodePen</td>
</tr>

<tr>
    <td>details</td>
    <td>Details split view: Above are details, stats, lovers and comments and below is the CodePen</td>
</tr>

<tr>
    <td>full</td>
    <td>The CodePen is shown fullpage</td>
</tr>

<tr>
    <td>fullgrid</td>
    <td>The CodePen is shown fullpage, but all interactive stuff e.g. CSS3 animation or requestAnimationFrame is stopped after 5 seconds</td>
</tr>
URL Description

API Reference

/<user>

CodePens for a specific user.

Method

http://codepen-awesomepi.timpietrusky.com/{username}/{type}/{page}

Parameters

<tr>
	<td>username</td>
	<td>String</td>
	<td>Name of the CodePen user</td>
	<td>Yes</td>
</tr>

<tr>
    <td>type</td>
    <td>String</td>
    <td>
        <ul>
            <li>public (former <i>owned</i>)</li>
                <ul>
                    <li>list</li>
                </ul>
            <li>loved</li>
            <li>forked</li>
            <li>pen</li>
        </ul>
    </td>
    <td>No</td>
</tr>

<tr>
    <td>page</td>
    <td>Number</td>
    <td>The page to show</td>
    <td>No</td>
</tr>
Parameter Type Description Required

Example

Display page "1" of all "public" pens of user "TimPietrusky"

http://codepen-awesomepi.timpietrusky.com/TimPietrusky/public/1

If you don't specify the page, it's automatically set to "1"

http://codepen-awesomepi.timpietrusky.com/TimPietrusky/public
{
    "status": {
        "code":0,
        "message":"ok"
    },
    "content": {
        "pens": [
            {
                "title":"Breaking Bad",
                "description":"A tribute to the best fucking series in the world. ",
                "views":75218,
                "hearts":100,
                "comments":32,
                "url": {
                    "pen":"http:\/\/codepen.io\/TimPietrusky\/pen\/Bsegb",
                    "details":"http:\/\/codepen.io\/TimPietrusky\/details\/Bsegb",
                    "full":"http:\/\/codepen.io\/TimPietrusky\/full\/Bsegb",
                    "fullgrid":"http:\/\/codepen.io\/TimPietrusky\/fullgrid\/Bsegb"
                },
                "hash":"Bsegb"
            }
        ]
    }
};

/* Note: Output was shortened. */

/<user>/pen

A specific CodePen for a specific user.

Method

http://codepen-awesomepi.timpietrusky.com/{username}/pen/{hash}

Parameters

<tr>
    <td>username</td>
    <td>String</td>
    <td>Name of the CodePen user</td>
    <td>Yes</td>
</tr>

<tr>
    <td>pen</td>
    <td>String</td>
    <td>Get source (CSS, HTML, JavaScript) and tags</td>
    <td>Yes</td>
</tr>

<tr>
    <td>hash</td>
    <td>String</td>
    <td>The unique hash of the CodePen</td>
    <td>Yes</td>
</tr>
Parameter Type Description Required

Example

Get the source of the pen WebPlatform.org logo and the configuration stuff (e.g. prefix-free or SASS enabled).

http://codepen-awesomepi.timpietrusky.com/TimPietrusky/pen/fCejn
{
   "status":{
      "code":0,
      "message":"ok"
   },
   "content":{
      "pen":{
         "created_at":"2012-10-08T21:59:25Z",
         "css":"@import url(http:\/\/fonts.googleapis.com\/css?family=Bitter:700);\n\n$background: #f7f4f0;\n\n$orange: rgba(247, 147, 17, 1);\n$red: rgba(221, 35, 15, .8);\n$purple: rgba(88, 56, 153, .65);\n$cyan: rgba(46, 179, 196, 1);\n\n$middle: #873E77;\n\nbody {\n  background:$background;\n  margin:0;\n}\n\nh1 {\n  position:absolute;\n  left:50%;\n  top:60%;\n  margin:0 0 0 -4em;\n  height:.5em;\n  width:.5em;\n  font:bold 2em\/2.5em 'Bitter', Georgia, serif;\n  letter-spacing:-.04em;\n  color:#474646;\n  border-radius:50%;\n  box-shadow:\n    \/* left - cross *\/\n    3.7em -2.4em 0 -.065em $background,\n    2.25em -.95em 0 -.065em $background,\n    3.7em -2.4em 0 .25em $middle,\n    2.25em -.95em 0 .25em $red,\n    \n    \/* left - vertical *\/\n    2.25em -3.55em 0 -.065em $background,\n    2.25em -3.55em 0 .25em $orange,\n    2.25em -.95em 0 .25em $orange,\n    \n    \/* right - cross *\/\n    5.155em -.95em 0 -.065em $background,\n    5.155em -.95em 0 .25em $purple,\n    \n    \/* right - vertical *\/\n    5.155em -3.55em 0 -.065em $background,\n    5.155em -3.55em 0 .25em $cyan,\n    5.155em -.95em 0 .25em $cyan\n  ;\n}\n\nh1:hover {\n  -webkit-filter:grayscale(.65);\n  filter:grayscale(.65);\n}\n\nh1:before,\nh1:after,\nh1 span:before,\nh1 span:after {\n  position:absolute;\n  content:'';\n  width:1em;\n}\n\n\/* left - vertical *\/\nh1:after {\n  z-index:-2;\n  height:2.55em;\n  top:-3.25em;\n  left:2em;\n  background:$orange;\n}\n\n\/* left - cross *\/\nh1:before {\n  z-index:-1;\n  height:2em;\n  top:-2.45em;\n  left:2.76em;\n  background:$red;\n  transform:rotate(45deg);\n}\n\nh1 span {\n  position:absolute;\n  left:6.475em;\n  top:0;\n  color:#a3a2a2;\n}\n\n\/* right - vertical *\/\nh1 span:after {\n  z-index:-2;\n  height:2.55em;\n  top:-3.25em;\n  left:-1.57em;\n  background:$cyan;\n}\n\n\/* right - cross *\/\nh1 span:before {\n  z-index:-1;\n  height:2em;\n  top:-2.45em;\n  left:-2.325em;\n  background:$purple;\n  transform:rotate(-45deg);\n}",
         "css_external":"",
         "css_pre_processor":"scss",
         "css_prefix_free":true,
         "css_starter":"neither",
         "description":"I want to celebrate the launch of the http:\/\/WebPlatform.org! A place to document the web for everybody. \n\nIt's the first version and it should definitely be improved & simplified.\n\nYou can see the single elements on ```h1:hover```\n\n## Web What?\nhttp:\/\/blog.webplatform.org\/2012\/10\/one-small-step",
         "head":"",
         "html":"<h1>WebPlatform<span>.org<\/span><\/h1>",
         "html_classes":"",
         "html_pre_processor":"none",
         "js":"\/**\n  WebPlatform.org logo\n  \n  # What? #\n  I want to celebrate the launch of the WebPlatform.org! \n  A place to document the web for everybody. \n\n\n  # 2012 by Tim Pietrusky\n  # timpietrusky.com\n**\/",
         "js_external":"",
         "js_library":"none",
         "js_modernizr":false,
         "js_pre_processor":"none",
         "private":null,
         "hash":"fCejn",
         "title":"WebPlatform.org logo",
         "updated_at":"2012-10-10T06:59:08Z",
         "url":{
            "pen":"http:\/\/codepen.io\/TimPietrusky\/pen\/fCejn",
            "details":"http:\/\/codepen.io\/TimPietrusky\/details\/fCejn",
            "full":"http:\/\/codepen.io\/TimPietrusky\/full\/fCejn",
            "fullgrid":"http:\/\/codepen.io\/TimPietrusky\/fullgrid\/fCejn"
         }
      },
      "tags":[
         "css",
         "logo",
         "webplatform"
      ]
   }
}

/picks

Editor's Picks.

Method

http://codepen-awesomepi.timpietrusky.com/picks/{page}

Parameters

<tr>
    <td>page</td>
    <td>Number</td>
    <td>The page to show</td>
    <td>No</td>
</tr>
Parameter Type Description Required

Example

Display page "2" of Editor's Picks

http://codepen-awesomepi.timpietrusky.com/picks/2
{
    "status": {
        "code":0,
        "message":"ok"
    },
    "content": {
        "pens": [
            {
                "title":"CSS Dribbble invite request",
                "description":"Pure CSS Dribbble logo. Pure CSS loader. Pure CSS animations. Pure CSS refle...",
                "views":320,
                "hearts":9,
                "comments":7,
                "url": {
                    "pen":"http:\/\/codepen.io\/HugoGiraudel\/pen\/FBbDd",
                    "details":"http:\/\/codepen.io\/HugoGiraudel\/details\/FBbDd",
                    "full":"http:\/\/codepen.io\/HugoGiraudel\/full\/FBbDd",
                    "fullgrid":"http:\/\/codepen.io\/HugoGiraudel\/fullgrid\/FBbDd"
                },
                "hash":"FBbDd",
                "user": {
                    "nickname":"HugoGiraudel",
                    "realname":"Hugo Giraudel",
                    "gravatar":"https:\/\/secure.gravatar.com\/avatar\/729edf889ced7863dedba95452272bca?d=https:\/\/a248.e.akamai.net\/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png"
                }
            }
        ]
    }
};

/* Note: Output was shortened. */

/popular

The most popular pens.

Method

http://codepen-awesomepi.timpietrusky.com/popular/{page}

Parameters

<tr>
    <td>page</td>
    <td>Number</td>
    <td>The page to show</td>
    <td>No</td>
</tr>
Parameter Type Description Required

Example

{
    "status": {
        "code":0,
        "message":"ok"
    },
    "content": {
        "pens": [
            {
                "title":"CSS3 iPhone v0.1",
                "description":"CSS3 iPhone v0.1 by Dylan Hudson (@dyln_hdsn on twitter)",
                "views":77500,
                "hearts":77,
                "comments":20,
                "url": {
                    "pen":"http:\/\/codepen.io\/dylnhdsn\/pen\/pheJs",
                    "details":"http:\/\/codepen.io\/dylnhdsn\/details\/pheJs",
                    "full":"http:\/\/codepen.io\/dylnhdsn\/full\/pheJs",
                    "fullgrid":"http:\/\/codepen.io\/dylnhdsn\/fullgrid\/pheJs"
                },
                "hash":"pheJs",
                "user": {
                    "nickname":"dylnhdsn",
                    "realname":"dylnhdsn",
                    "gravatar":"https:\/\/secure.gravatar.com\/avatar\/2e6377be71ded525989c6c101ddf133a?d=https:\/\/a248.e.akamai.net\/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png"
                }
            }
        ]
    }
};

/* Note: Output was shortened. */

/recent

Recently added pens.

Method

http://codepen-awesomepi.timpietrusky.com/recent/{page}

Parameters

<tr>
    <td>page</td>
    <td>Number</td>
    <td>The page to show</td>
    <td>No</td>
</tr>
Parameter Type Description Required

Example

{
    "status": {
        "code":0,
        "message":"ok"
    },
    "content": {
        "pens": [
            {
                "title":null,
                "description":null,
                "views":1,
                "hearts":"",
                "comments":0,
                "url": {
                    "pen":"http:\/\/codepen.io\/chrisxclash\/pen\/mzoHt",
                    "details":"http:\/\/codepen.io\/chrisxclash\/details\/mzoHt",
                    "full":"http:\/\/codepen.io\/chrisxclash\/full\/mzoHt",
                    "fullgrid":"http:\/\/codepen.io\/chrisxclash\/fullgrid\/mzoHt"
                },
                "hash":"mzoHt",
                "user": {
                    "nickname":"chrisxclash",
                    "realname":"chrisxclash",
                    "gravatar":"https:\/\/secure.gravatar.com\/avatar\/6d0056af25ebcda49d4e38c6985e6cb1?d=https:\/\/a248.e.akamai.net\/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png"
                }
            }
        ]
    }
};

/* Note: Output was shortened. */