{"id":13518286,"url":"https://github.com/davidhund/awesome-vanilla-js","last_synced_at":"2026-01-30T21:10:59.589Z","repository":{"id":53566522,"uuid":"37876612","full_name":"davidhund/awesome-vanilla-js","owner":"davidhund","description":"Listing (awesome) plain—Vanilla—Javascript resources","archived":false,"fork":false,"pushed_at":"2021-03-23T21:57:13.000Z","size":27,"stargazers_count":176,"open_issues_count":2,"forks_count":9,"subscribers_count":14,"default_branch":"master","last_synced_at":"2024-05-19T03:33:48.481Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/davidhund.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE-OF-CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-06-22T19:38:21.000Z","updated_at":"2024-05-14T14:26:21.000Z","dependencies_parsed_at":"2022-09-21T14:41:44.200Z","dependency_job_id":null,"html_url":"https://github.com/davidhund/awesome-vanilla-js","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidhund%2Fawesome-vanilla-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidhund%2Fawesome-vanilla-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidhund%2Fawesome-vanilla-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidhund%2Fawesome-vanilla-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davidhund","download_url":"https://codeload.github.com/davidhund/awesome-vanilla-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246365641,"owners_count":20765546,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T05:01:43.269Z","updated_at":"2026-01-30T21:10:59.545Z","avatar_url":"https://github.com/davidhund.png","language":null,"funding_links":[],"categories":["Technical","Other Lists"],"sub_categories":["awesome-*","TeX Lists"],"readme":"# Awesome ‘Vanilla’ Javascript [![Awesome](https://awesome.re/badge.svg)](https://awesome.re)\n\nA simple listing of *plain* — *[‘Vanilla’](http://vanilla-js.com/)* — Javascript resources.\nBecause sometimes you don't need a big library such as jQuery (which remains awesome IMO).\n\n\u003e **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 \u0026 modular modules FTW!\n\n## Contents\n\n- [Components](#components)\n  - [Accordion](#accordion)\n  - [Carousel](#carousel)\n  - [Drag and Drop](#drag-and-drop)\n  - [Dropdowns](#dropdowns)\n  - [File Uploaders](#file-uploaders)\n  - [Modals](#modals)\n  - [ScrollSpy](#scrollspy)\n  - [Switches](#switches)\n  - [Table of Contents](#table-of-contents)\n  - [Tabs](#tabs)\n  - [Tooltips](#tooltips)\n- [Lists](#lists)\n- [Articles](#articles)\n- [Code](#code)\n\n## Components\n\n### Accordion\naka Collapsible\n\n- [Vanilla JS Accordion](https://github.com/zoltantothcom/vanilla-js-accordion) - Vanilla JavaScript accordion - accessible and super tiny.\n\n### Carousel\n\n- [SwiperJS](https://swiperjs.com/) - \"The most modern mobile touch slider\"\n- [Flickity](https://flickity.metafizzy.co/) - \"Touch, responsive, flickable carousels\"\n- [Vanilla JS Carousel](https://github.com/zoltantothcom/vanilla-js-carousel) - \"Tiny JavaScript carousel with all the features most of us will ever need.\"\n\n### Drag and drop\n- [SortableJS](https://sortablejs.github.io/sortablejs/) - JavaScript library for reorderable drag-and-drop lists\n\n### Dropdowns\n\n- [Slim Select](https://slimselectjs.com/) - Slim advanced select dropdown.\n- [tail.select](https://github.pytes.net/tail.select/) - A multiselect component with a lot of options.\n- [Choices](https://joshuajohnson.co.uk/Choices/) - A lightweight, configurable select box/text input plugin.\n- [Vanilla JS Dropdown](https://github.com/zoltantothcom/vanilla-js-dropdown) - Tiny JavaScript replacement for `\u003cselect\u003e` that makes styling easy and consistent.\n\n### File Uploaders\n\n- [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.\"\n\n### Modals\n\n- [Micro Modal](https://micromodal.now.sh/) - A lightweight, configurable and a11y-enabled modal.\n\n### ScrollSpy\n\n- [Gumshoe](https://github.com/cferdinandi/gumshoe) - Update a nav list based on scroll position.\n\n### Switches\n\n- [Simple Switch](https://github.com/aeolingamenfel/simple-switch) - Simple, accessible, performant implementation of the Switch UI element.\n\n### Table of Contents\n\n- [Tocbot](https://tscanlin.github.io/tocbot/) - Generate a table of contents based on the heading structure of an html document\n\n### Tabs\n\n- [Tabby](https://github.com/cferdinandi/tabby) - Lightweight, accessible vanilla JS toggle tabs.\n- [Vanilla JS Tabs](https://github.com/zoltantothcom/vanilla-js-tabs) - Vanilla JavaScript Tabs - simple and awesome.\n\n### Tooltips\naka Popovers\n\n- [TippyJS](https://atomiks.github.io/tippyjs/) - \"The complete tooltip, popover, dropdown, and menu solution for the web\"\n- [Vanilla JS Tooltip](https://github.com/zoltantothcom/vanilla-js-tooltip) - Vanilla Javascript tooltip. Accepts plain text and fancy HTML.\n\n## Lists\n\nListing native methods, functions and plugins\n\n- [plainjs.com](https://plainjs.com/) - Vanilla *Plugins* and *Functions*\n- [youmightnotneedjquery.com](http://youmightnotneedjquery.com/) - Vanilla JS snippets for common jQuery methods and functions. Shows IE compatibility.\n- [youmightnotneedjqueryplugins.com](http://youmightnotneedjqueryplugins.com/) - In addition to [youmightnotneedjquery.com](http://youmightnotneedjquery.com/) this is a list of commonly used plugins without dependencies.\n- [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\u0026nbsp;Ferdinandi](https://gomakethings.com/).\n- [Frend.co](https://frend.co/) - Modest and dependency-free components. Built with web standards, compliant, keyboard navigable and properly interpreted by assistive technologies.\n- [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.\n- [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!\n- [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/)\n- Search [NPM](https://www.npmjs.com/), [Github](https://github.com/search?l=JavaScript\u0026o=desc\u0026q=vanilla\u0026s=\u0026type=Repositories\u0026utf8=%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 :)\n\n## Articles\n\nArticles on moving away from jQuery towards native Javascript\n\n- [“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\n- [“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\n- [“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.\n- [“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’\n- [“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.\n\n## Code\n\nLittle Vanilla snippets—or microlibraries—of goodness\n\n- [Buoy](https://github.com/cferdinandi/buoy) - A lightweight collection of helper methods for getting stuff done in native JavaScript.\n- [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/)\n- [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\n- [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.)\n\n## Your turn!\n\nAgain, do you know of other awesome resources? [Discuss](), [PR]() or [Tweet @valuedstandards](https://twitter.com/valuedstandards)\n\nThanks, [David Hund](http://valuedstandards.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidhund%2Fawesome-vanilla-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavidhund%2Fawesome-vanilla-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidhund%2Fawesome-vanilla-js/lists"}