Minimalist JavaScript

Lightweight Pure JavaScript Components


minjs stays out of your way. It does not dictate how you to design your UI. It tries to make no assumptions about the layout of the HTML or CSS it's running in.


minjs is not a framework. It's a collection of independent components. Use only what you need. Each component also doesn't depend on any frameworks or libraries: they're pure JS.


Each minjs component was created for Vocabulink. They've been running there (and other places) for years.

Can't find a calendar that looks and behaves just how you want? drcal provides a minimal calendar builder. It handles the date calculations and a few other basic tasks and leaves the behavior and styling up to you.

Minimal Example

<div id="drcal1"></div>
<script type="text/javascript">
  var cal = drcal();
  cal.addEventListener('drcal.renderDay', function (event) {
  cal.changeMonth(new Date());

Nicer Example

<div id="drcal2"></div>
<script type="text/javascript">
  var cal = drcal();
  cal.addEventListener('drcal.renderDay', function (event) {
    var dayNum = document.createElement('div');
    dayNum.className = 'daynum';
    var div = document.createElement('div');
  cal.changeMonth(new Date());
  selected = null;
  cal.addEventListener('click', function (event) {
    if ( === 'DIV') {
      if (selected) selected.className = '';
      selected =;
      selected.className = 'selected';
  // Twitter Bootstap removes default styling
  var buttons = cal.querySelectorAll('button');
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].className += ' btn';
<style type="text/css">
#drcal2 .calendar {border-collapse: collapse;}
#drcal2 .calendar th {text-align: center;}
#drcal2 .calendar td {
  border: 1px solid #AEAEAE;
  width: 6em;
  height: 5em;
  padding: 0;
#drcal2 .calendar td > div {
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
#drcal2 .calendar thead tr:first-child th {
  font-size: large;
  padding-bottom: 0.5em;
#drcal2 .calendar thead tr:last-child th {
  font-weight: normal;
  font-size: small;
  color: #939393;
#drcal2 .calendar .prev {float: left;}
#drcal2 .calendar .prev:before {content: "<";}
#drcal2 .calendar .next {float: right;}
#drcal2 .calendar .next:after {content: ">";}
#drcal2 .calendar .today, .calendar .today.selected { background-color: #E9EFF8;}
#drcal2 .calendar .selected {background-color: #F3F3F3;}
#drcal2 .calendar .extra {color: #AEAEAE;}
#drcal2 .calendar .daynum {
  position: absolute;
  top: 0.5ex;
  right: 0.5ex;

longtable takes an existing HTML table and converts it into a paged table. No need to worry about AJAX, etc. Oh, and styling is up to you.

JavaScript VersionRelease Date
1.0March 1996
1.1August 1996
1.2June 1997
1.3October 1998
1.5November 2000
1.6November 2005
1.7October 2006
1.8June 2008
1.8.2June 22, 2009
1.8.5July 27, 2010 CC-BY-SA

<table id="jsversions">
    <tr><th>JavaScript Version</th><th>Release Date</th></tr>
    <tr><td>1.0</td><td>March 1996</td></tr>
    <tr><td>1.1</td><td>August 1996</td></tr>
    <tr><td>1.2</td><td>June 1997</td></tr>
    <tr><td>1.3</td><td>October 1998</td></tr>
    <tr><td>1.5</td><td>November 2000</td></tr>
    <tr><td>1.6</td><td>November 2005</td></tr>
    <tr><td>1.7</td><td>October 2006</td></tr>
    <tr><td>1.8</td><td>June 2008</td></tr>
    <tr><td>1.8.2</td><td>June 22, 2009</td></tr>
    <tr><td>1.8.5</td><td>July 27, 2010</td></tr>
<script type="text/javascript">
  longtable(document.getElementById('jsversions'), {'perPage': 5});
<style type="text/css">
  .paging-controls {text-align: center;}
  .paging-controls a {color: green;}
  .paging-controls a:visited {color: #0069D6;}
  .paging-controls .prev {float: left;}
  .paging-controls .prev:before {content: "< prev";}
  .paging-controls .next {float: right;}
  .paging-controls .next:after {content: "next >";}
  .paging-controls .elipsis:before {content: " ... ";}

minform allows you to use a few HTML5 form enhancements even if the browser doesn't support them.

<form id="minform-ex" method="GET" action="">
  <input name="placeholder" placeholder="Placeheld Text">
  <input name="autofocus" autofocus>
  <input name="required" required>
  <input type="submit" class="btn">
<script type="text/javascript">