View on GitHub


JavaScript Library Boilerplate

download .ZIPdownload .TGZ

JavaScript Library Boilerplate

An easy boilerplate for rolling your own JavaScript Library like jQuery, Zepto, Prototype, etc.

The code is written in CoffeeScript, TypeScript and pure JavaScript.


Skip this if you want to use pure JavaScript version

For compiling CoffeeScript or TypeScript you will need to install Node.js

After installing Node.js you can compile the files throgh command-line


Install CoffeeScript package:

npm install -g coffee-script

Compile file:



Install TypeScript package:

npm install -g typescript

Compile file:

tsc jslibraryboilerplate.ts


Include the ´.js´ file in an html document and you are done!


Use any valid CSS selector for getting elements from the document

// all p elements
// all elements with class 'test'
// checkboxes


Copy, paste to an .html file and run (Live demo)

<!doctype html>
  <title>JavaScript Library Boilerplate</title>
  <!-- include .js file (you may change the name) -->
  <script src="jslibraryboilerplate.js"></script>
    // wait for the dom be ready
    $(function () {
      // get all p elements
      var ps = $('p');
      console.log('There are ' + ps.length + ' paragraphs on the page');
      // set some text for the empty paragraphs
      // iterate p elements to know if they are even or odd
      ps.each(function (i, el) {
        var evenodd = i % 2 === 0 ? ' even' : ' odd';
        this.textContent += ' (' + i +  evenodd + ')';

  <p>This is a paragraph</p>
  <p>Another p</p>

  <p class="fillme"></p>
  <p class="fillme"></p>
  <p class="fillme"></p>

Adding new methods

You can add any method you need to work with a JSLB DOM collection


$.fn.highlight = function (color) {
  color = color || 'yellow'
  return this.each(function () {'color', color);

// highlight all 'strong' elements

That's all, go and roll your own JavaScript Library.