A simple jQuery plugin to show CodePen's on a personal website.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



A simple jQuery plugin which uses the unofficial CodePen API to show pens on a personal website.

pentizr uses the unofficial CodePen API to fetch the data and creates some nice output for you.

If you like this, please hit me @TimPietrusky so that I can add your site to the live examples!

But just see for yourself... A pentizr custom template in action:

Live examples

Johan van Tongeren aka "Dreamdealer"


Patrick Cox


Tim Pietrusky


How to

Step 1: Default stuff

Add jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

Step 2: pentizr

Add pentizr.js

<script src="https://raw.github.com/TimPietrusky/pentizr/master/js/pentizr-min.js"></script>

Step 2.5 (optional): Add pentizr.css

You can create your own (based on a simple template system) or add the default stuff:

<link rel="stylesheet" href="https://raw.github.com/TimPietrusky/pentizr/master/css/pentizr-min.css">

Step 3: GO GO GO!

We use the same HTML on all examples:

<div class="my-pens"></div>

Get owned pens of user "Mobilpadde" (aka Mads "The Cat" Cordes)

$(function() {
  $('.my-pens').pentizr({username: 'Mobilpadde'});

Get 6 owned pens of user "Dreamdealer" (aka Johan van Tongeren)

$(function() {
    username: 'Dreamdealer',
    type: 'owned',
    limit: 6

Create a custome template and get your owned pens of user "TimPietrusky"

$(function() {
        username: 'TimPietrusky', 
        type : 'owned', 
        limit : 9,
        callback : function() {
            // Custom callback after everything was created (elements are dom ready)
        // A custom template
        template : ''+
        '<div class="entry">'+
            '<h2 class="label" id="{{title}}" data-label="{{hearts}} ♥ | {{views}} views">{{title}}</h2>'+
            '<div class="entry-body">'+
                '<b>See it in action</b>'+
                '<p><a href="{{urlPen}}" target="_blank">{{urlPen}}</a></p>'+
                '<b>Write a comment</b>'+
                '<p><a href="{{urlDetails}}" target="_blank">{{urlDetails}}</a></p>'+

Get last 3 loved pens of user "HugoGiraudel"

$(function() {
  $(function() {
      username : 'HugoGiraudel',
      type : 'loved',
      limit : 3