Tools.JS is a minimalist JavaScript framework/library to create web applications. Tools.JS is for developers who prefer Vanilla JavaScript. While plain JS is often good enough, basic operations can be quite verbose. Tools.JS offers a collection of utility functions that allow for a shorter notation without curbing developer freedom and creativity

Download official version 1.0 from this website (permanent link, never changes):
Download latest ToolsJS package (3.5 KB)

Shasum256 verification of package:

Package has been signed by Gabor Software, to verify your package copy the public key from the footer at GaborSoftware and use signify to check the authenticity of this file.

Full source code can be downloaded from: ToolsJS on local site. or: ToolsJS on github.

Licensed BSD (do everything you want with it).


Instead of having to type document.querySelector(All) all the time, you can use the functions: qs() (query selector) and qsa() (query selector all). Note that Tools.JS assigns the document object to letter D. So instead of document you can write just D.


//get a single node
qs(D, '.myelement');

//get all external links
qsa(D, 'a[target="_blank"]');


To create a new DOM element use ce()/wrp():

//create a link
a = ce('a');

//create html...
wrp('<a href="#"></a>');

The wrp() function will wrap the specified HTML in a div node. You can adjust the wrapping node like this:

wrp(html, classes, nodetype);

For example, to wrap your HTML in a PRE node with class 'code':


Use the functions html()/txt()/attr() to get/set (depending on the number of arguments) innerHTML, innerText and attributes respectively:

//set innerHTML of h1 tag
html( qs( D, 'h1' ) 'Title' );

//get href of a link
var h = attr( mylink, 'href' );

dat() works just like attr() but prefixes the specified key with data- so you can set data attributes.

classmod() can be used to modify the class list of a node: it accepts a list of class names to be added and a list of class names to be removed, both are optional.

classmod( node, ['show'], ['hide'] );

Use mv() to move a node in the DOM tree, rm() to delete it and cp() to copy it (cpr() to copy recursively). ls() can be used to list the child nodes under a specific node. The function mv() accepts a position parameter (0 = append as last child, 1 = append as sibling, 2 insert before ).

//add task to list
mv( task, qs('ul') );


To apply DOM manipulations to a set of nodes instead of just one use each() or bat(). The following example illustrates how to open all links in new windows:

//Using each():
each(qsa(D,'a'), function(a){
	attr(a, 'target', '_blank');

//Using bat():
bat('attr', qsa(D,'a'), 'target', '_blank');


Given a dataURI show() opens a new browser window displaying the object in the dataURI by registering an object url. If 2nd argument 'noopen flag' is set, no window will be opened and the blob object will be returned instead.

//display pdf
show( pdfdata );

fread() reads a file object. Mode 0 = read as text (default) Mode 1 = read as data url:

fread(upload, func, 1);

download() downloads a string as a file in the browser.

download( 'hello', 'test.txt', 'text/plain' );

rq() sends an async request to server.

//alert this page
rq( '', alert );

//post data
rq('/post', callback, [1,2,3]);