Building a Plugin

Back to tutorials

Designing your Plugin

Before you begin writing the actual code for your plugin you should first create 3 things:

Writing the Code

Once you're ready to build your plugin create the file where you'll write the code. This file should include the plugin name, the current version, a copyright notice and the license details.

   *  nano Example Plugin v0.1
   *  Copyright (c) 2018 Person/Company. All rights reserved.
   *  This is FREE software, licensed under the GPL

  if (nano) {

          // methods added to the API wrapper are defined here

      function() {
          this.example = {

              // global plugin methods are defined here


To begin, check to make sure the nano JavaScript framework has been included in the document. Then, use the nano.plugin() function to add your plugin to the API. This function recieves 2 arguments:

The first argument is an object of methods that will be added to the API wrapper. These methods are made available when wrapping a DOM node with the API. If a method already exists it will be overwritten with the new one. To skip this argument pass null or an empty object.

The second argument is a function which creates the plugin namespace (if required) and sets up the plugin with any additional resources. The scope of this within this function is the framework API, the global nano object.

The documentation for the nano.plugin() function can be found here.

Registering Parameters

The framework provides a method to register parameters which are available when creating new elements. These parameters can modify the DOM node thats created or add new features. For example, the following parameter adds the attribute "example" to the node with the value passed with the parameter:

  nano.reg({example: function(value) { this.attr({example: value}); }});

To use this parameter, you would add it to your parameters object when creating the node, for example:

  var span = new nano({tag: 'span', parent: nano.body(), example: 'This is a test'});

The SPAN that was created now has an attribute named "example" with the value "This is a test".