Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/davidhund/awesome-vanilla-js

Listing (awesome) plain—Vanilla—Javascript resources
https://github.com/davidhund/awesome-vanilla-js

List: awesome-vanilla-js

Last synced: about 1 month ago
JSON representation

Listing (awesome) plain—Vanilla—Javascript resources

Awesome Lists containing this project

README 

        
# Awesome ‘Vanilla’ Javascript [![Awesome](https://awesome.re/badge.svg)](https://awesome.re)



A simple listing of *plain* — *[‘Vanilla’](http://vanilla-js.com/)* — Javascript resources.

Because sometimes you don't need a big library such as jQuery (which remains awesome IMO).



> **P.S.** ‘Vanilla’ JS is not *‘better’* than jQuery et. al! jQuery is a very good library. [It can be argued](http://stackoverflow.com/a/3393922) that many plugins and functions in the resources below are ‘worse’: less well documented, tested, less cross-browser compatibility, etc. However: sometimes a swiss-army knife monolith such as jQuery is too much. Tiny, reusable & modular modules FTW!



## Contents



- [Components](#components)

  - [Accordion](#accordion)

  - [Carousel](#carousel)

  - [Drag and Drop](#drag-and-drop)

  - [Dropdowns](#dropdowns)

  - [File Uploaders](#file-uploaders)

  - [Modals](#modals)

  - [ScrollSpy](#scrollspy)

  - [Switches](#switches)

  - [Table of Contents](#table-of-contents)

  - [Tabs](#tabs)

  - [Tooltips](#tooltips)

- [Lists](#lists)

- [Articles](#articles)

- [Code](#code)



## Components



### Accordion

aka Collapsible



- [Vanilla JS Accordion](https://github.com/zoltantothcom/vanilla-js-accordion) - Vanilla JavaScript accordion - accessible and super tiny.



### Carousel



- [SwiperJS](https://swiperjs.com/) - "The most modern mobile touch slider"

- [Flickity](https://flickity.metafizzy.co/) - "Touch, responsive, flickable carousels"

- [Vanilla JS Carousel](https://github.com/zoltantothcom/vanilla-js-carousel) - "Tiny JavaScript carousel with all the features most of us will ever need."



### Drag and drop

- [SortableJS](https://sortablejs.github.io/sortablejs/) - JavaScript library for reorderable drag-and-drop lists



### Dropdowns



- [Slim Select](https://slimselectjs.com/) - Slim advanced select dropdown.

- [tail.select](https://github.pytes.net/tail.select/) - A multiselect component with a lot of options.

- [Choices](https://joshuajohnson.co.uk/Choices/) - A lightweight, configurable select box/text input plugin.

- [Vanilla JS Dropdown](https://github.com/zoltantothcom/vanilla-js-dropdown) - Tiny JavaScript replacement for `` that makes styling easy and consistent.



### File Uploaders



- [Filepond](https://pqina.nl/filepond/) - "A JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience."



### Modals



- [Micro Modal](https://micromodal.now.sh/) - A lightweight, configurable and a11y-enabled modal.



### ScrollSpy



- [Gumshoe](https://github.com/cferdinandi/gumshoe) - Update a nav list based on scroll position.



### Switches



- [Simple Switch](https://github.com/aeolingamenfel/simple-switch) - Simple, accessible, performant implementation of the Switch UI element.



### Table of Contents



- [Tocbot](https://tscanlin.github.io/tocbot/) - Generate a table of contents based on the heading structure of an html document



### Tabs



- [Tabby](https://github.com/cferdinandi/tabby) - Lightweight, accessible vanilla JS toggle tabs.

- [Vanilla JS Tabs](https://github.com/zoltantothcom/vanilla-js-tabs) - Vanilla JavaScript Tabs - simple and awesome.



### Tooltips

aka Popovers



- [TippyJS](https://atomiks.github.io/tippyjs/) - "The complete tooltip, popover, dropdown, and menu solution for the web"

- [Vanilla JS Tooltip](https://github.com/zoltantothcom/vanilla-js-tooltip) - Vanilla Javascript tooltip. Accepts plain text and fancy HTML.



## Lists



Listing native methods, functions and plugins



- [plainjs.com](https://plainjs.com/) - Vanilla *Plugins* and *Functions*

- [youmightnotneedjquery.com](http://youmightnotneedjquery.com/) - Vanilla JS snippets for common jQuery methods and functions. Shows IE compatibility.

- [youmightnotneedjqueryplugins.com](http://youmightnotneedjqueryplugins.com/) - In addition to [youmightnotneedjquery.com](http://youmightnotneedjquery.com/) this is a list of commonly used plugins without dependencies.

- [The Vanilla JavaScript Toolkit](https://vanillajstoolkit.com) - A growing collection of [code snippets](https://vanillajstoolkit.com/code-snippets), [helper functions](https://vanillajstoolkit.com/helpers), [polyfills](https://vanillajstoolkit.com/polyfills), [plugins](https://vanillajstoolkit.com/plugins), and [learning resources](https://vanillajstoolkit.com/resources), by [Chris Ferdinandi](https://gomakethings.com/).

- [Frend.co](https://frend.co/) - Modest and dependency-free components. Built with web standards, compliant, keyboard navigable and properly interpreted by assistive technologies.

- [Microjs.com](http://microjs.com/) - Microjs.com helps you discover the most compact-but-powerful microframeworks, and makes it easy for you to pick one that’ll work for you.

- [140byt.es](http://www.140byt.es/) - A collection of *heavily minified* JS snippets. **Note:** These are more of a *coding challenge* and probably not the best resource for *production* code! Inspirational, sure!

- [HTML5 Cross Browser Polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills) - Not ‘Vanilla’ per se, but a neat list of HTML5 cross-browser polyfills, by the folks from [Modernizr](http://modernizr.com/)

- Search [NPM](https://www.npmjs.com/), [Github](https://github.com/search?l=JavaScript&o=desc&q=vanilla&s=&type=Repositories&utf8=%E2%9C%93) or [Google](https://www.google.com/?q=Vanilla+JS+%3Cplugin%3E) - Don't forget to search NPM when you ‘`require`’ a specific JS module! Looking for a ‘Vanilla-version’ of a plugin? Try searching Google or Github directly :)



## Articles



Articles on moving away from jQuery towards native Javascript



- [“Ditching jQuery for Vanilla JS”](http://gomakethings.com/ditching-jquery) - Awesome write-up by [Chris Ferdinandi](http://gomakethings.com/) of how he goes about writing vanilla JS. Full of tips and Vanilla equivalents of jQuery functions

- [“Essentials to learning JavaScript from a jQuery background”](http://toddmotto.com/is-it-time-to-drop-jquery-essentials-to-learning-javascript-from-a-jquery-background/) - [Todd Motto](http://toddmotto.com/) describes many native equivalents of jQuery methods and functions

- [“Uncovering the Native DOM API”](http://ponyfoo.com/articles/uncovering-the-native-dom-api) - [Nicolas Bevacqua](http://ponyfoo.com/) ([@nzgb](https://twitter.com/nzgb)) covering the DOM API that libraries such as jQuery often ‘abstract away’ in their neat util functions.

- [“Getting over jQuery”](http://ponyfoo.com/articles/getting-over-jquery) - Nicolas Bevacqua again. This time outlining how we could go about creating our own little ‘microlibrary’

- [“The Basics of DOM Manipulation in Vanilla JavaScript”](https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/) - Sebastian Seitz gives you a crash course in DOM manipulation with vanilla JavaScript, abstracting the more verbose parts into a set of helper functions.



## Code



Little Vanilla snippets—or microlibraries—of goodness



- [Buoy](https://github.com/cferdinandi/buoy) - A lightweight collection of helper methods for getting stuff done in native JavaScript.

- [Min.js](https://github.com/remy/min.js) - A super tiny JavaScript library to execute simple DOM querying and hooking event listeners by [Remy Sharp](https://remysharp.com/)

- [Bind.js](https://github.com/remy/bind.js) - Two way data binding for HTML and JavaScript (with node.js compatibility) with additional support for transforming data before it arrives in the DOM. By Remy Sharp

- [Bling.js](https://gist.github.com/paulirish/12fb951a8b893a454b32) - Paul Irish adds `$` (qSA) and `.on` in a few lines of goodness. Check comments for more (`Promise`, etc.)



## Your turn!



Again, do you know of other awesome resources? [Discuss](), [PR]() or [Tweet @valuedstandards](https://twitter.com/valuedstandards)



Thanks, [David Hund](http://valuedstandards.com)