The plugins listed here are official extensions to the nano JavaScript framework, created by the nano development team.

Name Description Author Version Update Licence Download
Browser Client and platform detection James Watts 1.0 15/01/2010 GPL Download
Ajax Ajax library James Watts 1.0 20/01/2010 GPL Download
Cookie Cookie handling James Watts 1.0 20/01/2010 GPL Download
Event Enhanced event controls James Watts 1.0 15/02/2010 GPL Download
DragDrop Drag and Drop events James Watts 1.0 15/02/2010 GPL Download
Query Query the DOM using CSS selectors James Watts 1.0 01/03/2010 GPL Download
Validate Basic input validation James Watts 1.0 01/03/2010 GPL Download
FX Visual effects library James Watts 1.0 01/10/2010 GPL Download

How to add a plugin

To add a plugin, simply include the plugin script in the HEAD of your page using a SCRIPT tag. Make sure that the plugin is included after the main framework script.

  <!DOCTYPE html>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <title>My Site</title>
      <script type="text/javascript" src="path/to/nano.js"></script>
      <script type="text/javascript" src="path/to/nano.plugin.js"></script>
      <!-- your content here -->

How to create a plugin

Plugins allow you to easily extend the funcionality of the API. As an example, we'll create a plugin that adds a new parameter when creating a DOM node, a new method to the API wrapper, and an object to store our plugin internals. Here's the code:

  if (nano) { // check that nano exists

      nano.plugin({ // defines our methods to add to the API wrapper

          addMyClass: function() { // simple function to add a predefined class

              return this.addClass(nano.myPlugin.someValue);


      function() {

          this.reg({ // defines new parameters to make available when creating a new DOM node

              myParam: function(value) { // "value" contains the value passed from the parameter

                  this.attr('example', value + ' was added!');



          this.myPlugin = { // this object will be available as "nano.myPlugin"

              someValue: 'my-class'




With the previously defined plugin you will be able to do the following:

  // add a new DOM node with an "example" attribute using the new "myParam" parameter

  var foo = new nano({
      parent: nano.body(),
      tag: 'div',
      text: 'Hello World',
      myParam: 'test'

  foo.get('example'); // returns "test was added!"

  foo.addMyClass(); // modify the node using the new "addMyClass" method

The API documentation for nano.plugin() can be found here, and for nano.reg() here.