node package manager


Vanillin.js – Almost like vanilla JavaScript


jQuery used to be virtually indispensable, if you wanted to develop a cross-browser website without getting a headache.

Today, however, you might not need jQuery, especially, if you're developing a library and want to avoid unnecessary dependencies.

Still, some helpers could be useful... Vanillin is an opinionated set of helpers that I find most useful, a bare minimum to make life easier.


You can either install Vanillin as a node module:

$ npm i --save avris-vanillin


$ yarn add avris-vanillin


Use a CDN:

<script src=""></script>

Or simply copy-paste whatever filters you need from the source code.


_each(iterable, function (el, i))

Iterate in a consistent way, whether it's over an array or an object, without having to check for hasOwnProperty in every loop.

each(object, function (val, key) {
    // ...


Convert an HTML string into a DOM element with one simple helper.

const el = _el('<div class="lorem"><a href="/test">OK</a></div>');

_findParent(el, selector)

Finds the first parent of el that matches selector.

parent = _el(el, 'section.important')

_on(selector, event, handler (e))

Attaches the handler as an event listener or event for all elements that match selector, even if they don't exist yet at that moment.

_on('', 'click', function (e) {
    console.log('foo link clicked', this.attributes.href.value)

_request(method, url, data, headers)

Performs an AJAX request to url using a specified HTTP method, attaching data (they can be either FormData, an object, or a DOM element containing form data) and using specified headers. Returns a Promise.

_request('POST', '/document/create', document.querySelector('form'), {Authorization: 'Basic YWxhZGRpbjpvcGVuc2VzYW1l'})
    .then((data) => {
        alert('Document created with ID: ' + JSON.parse(data).id);
    .catch((xhr) => {
        alert('Error while creating a document');

_extend = (out, ...args)

Extends out with data from ...args, useful for resolving configs:

function Helper(options) {
    this.config = _extend({}, defaultOptions, options);


To install dev dependencies:


To build a minified, babel-ified version:

yarn build

To run tests:

yarn test

and open http://localhost:8777.