Codepen Awesomepi Save

An unofficial API for CodePen.io

Project README

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

/

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. */

//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. */

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. */
Open Source Agenda is not affiliated with "Codepen Awesomepi" Project. README Source: TimPietrusky/codepen-awesomepi
Stars
106
Open Issues
9
Last Commit
9 years ago
Repository
TimPietrusky/codepen-awesomepi

Open Source Agenda Badge

Open Source Agenda Rating
Submit Review Review Your Favorite Project
Submit Resource Articles, Courses, Videos
Submit Article Submit a post to our blog

From the blog

Dec 11, 2022

How to Choose Which Programming Language to Learn First?

From the blog

Dec 11, 2022

How to Choose Which Programming Language to Learn First?