Vanilla JSVanillin

Vanilla JS is a fast, lightweight, cross-platform framework
for building incredible, powerful JavaScript applications.

Introduction

The Vanilla JS team maintains every byte of code in the framework and works hard each day to make sure it is small and intuitive. Who's using Vanilla JS? Glad you asked! Here are a few:

In fact, Vanilla JS is already used on more websites than jQuery, Prototype JS, MooTools, YUI, and Google Web Toolkit - combined.

Download

Ready to try Vanilla JS? Choose exactly what you need!

Final size: 0 bytes uncompressed, 25 bytes gzipped.

Testimonials

Getting Started

The Vanilla JS team takes pride in the fact that it is the most lightweight framework available anywhere; using our production-quality deployment strategy, your users' browsers will have Vanilla JS loaded into memory before it even requests your site.

To use Vanilla JS, just put the following code anywhere in your application's HTML:

  1. <script src="path/to/vanilla.js"></script>

When you're ready to move your application to a production deployment, switch to the much faster method:

  1.  

That's right - no code at all. Vanilla JS is so popular that browsers have been automatically loading it for over a decade.

Speed Comparison

Here are a few examples of just how fast Vanilla JS really is:

Retrieve DOM element by ID

Codeops / sec
Vanilla JSdocument.getElementById('test-table');
12,137,211
 
Dojodojo.byId('test-table');
5,443,343
 
Prototype JS$('test-table')
2,940,734
 
Ext JSdelete Ext.elCache['test-table']; Ext.get('test-table');
997,562
 
jQuery$jq('#test-table');
350,557
 
YUIYAHOO.util.Dom.get('test-table');
326,534
 
MooToolsdocument.id('test-table');
78,802
 

Retrieve DOM elements by tag name

Codeops / sec
Vanilla JSdocument.getElementsByTagName("span");
8,280,893
 
Prototype JSPrototype.Selector.select('span', document);
62,872
 
YUIYAHOO.util.Dom.getElementsBy(function(){return true;},'span');
48,545
 
Ext JSExt.query('span');
46,915
 
jQuery$jq('span');
19,449
 
Dojodojo.query('span');
10,335
 
MooToolsSlick.search(document, 'span', new Elements);
5,457
 

Code Examples

Here are some examples of common tasks in Vanilla JS and other frameworks:

Fade an element out and then remove it

Vanilla JSvar s = document.getElementById('thing').style; s.opacity = 1; (function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})();
jQuery<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $('#thing').fadeOut(); </script>

Make an AJAX call

Vanilla JSvar r = new XMLHttpRequest(); r.open("POST", "path/to/api", true); r.onreadystatechange = function () { if (r.readyState != 4 || r.status != 200) return; alert("Success: " + r.responseText); }; r.send("banana=yellow");
jQuery<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $.ajax({ type: 'POST', url: "path/to/api", data: "banana=yellow", success: function (data) { alert("Success: " + data); }, }); </script>

Further Reading

For more information about Vanilla JS:

When powering your applications with Vanilla JS, feel free to use this handy button!