Skip to main content Accessibility Feedback

Vanilla JS Plugins

These are hand-selected plugins that I would actually use or have used on a project.

As a result, the list is a lot shorter than some of the bigger “plugin repositories” you’ll find on the web. Ideally, the quality is better.

Note: Plugins with a 👋 next to them are ones that I wrote or manage.

Build Tools

Hide & Show Content

  • 👋 Houdini. A progressively enhanced expand-and-collapse and accordion widget.
  • 👋 Modals. Simple, mobile-friendly modal dialogue windows.
  • 👋 Tabby. Lightweight toggle tabs.
  • ScrollReveal. Easy scroll animations.
  • 👋 Smooth Scroll. Animate scrolling to anchor links.
  • 👋 Gumshoe. A framework agnostic scrollspy script.
  • 👋 Astro. A responsive, mobile-first navigation menu.
  • 👋 Drop. Mobile-friendly dropdown menus.
  • Offside.js. Simple off-canvas navigation menus.

Design & Layout

  • 👋 Reef. A simple, lightweight alternative to React, Vue, and other bloated frameworks.
  • 👋 safeInnerHTML.js. Sanitizes string-based HTML before injecting it into the DOM to reduce the risk of XSS attacks.
  • 👋 Sticky Footer. Dynamic, responsive sticky footers.
  • Vanilla FitText.js. Create scalable headlines that fill the width of a parent element.
  • Rellax. A lightweight parallax library.

User Experience

  • 👋 Form Saver. Let users save, reuse, and delete form data.
  • 👋 X-Ray. Let users toggle password visibility.

Photos & Video

  • PhotoSwipe. An amazing photo gallery plugin.
  • Swiper. Rich touch-supported sliders.
  • FluidVids. Add true responsive support to your video embeds.
  • Media Player. A tiny, totally cross browser, accessible, fully customizable media player.

Touch, Gesture, and Keyboard Support

  • Hammer. A complex touch gesture support library.
  • Sortable. Create sortable, interactive lists.
  • Egg.js. Add hidden easter eggs to your site with keystroke combinations.

Feature Detection & Progressive Enhancement

  • features.js. A lightweight feature detection library.
  • loadJS. Asynchronously load JavaScript files.
  • loadCSS. Asynchronously load CSS files.

Micro-Libraries

  • 👋 bin. A tiny localStorage and sessionStorage library.
  • 👋 jar. A tiny helper library that makes working with cookies easier.
  • 👋 atomic. Easily make Ajax/HTTP requests.
  • 👋 bouncer. A lightweight form validation script that augments native HTML5 form validation elements and attributes.
  • Dinero.js. A library for working with monetary values in JavaScript.
  • Day.js. A 2kB alternative to Moment.js with the same modern API. Parse, validate, manipulate, and display dates and times in JavaScript.

Get Daily Developer Tips

I send out a short email each weekday with code snippets, tools, techniques, and interesting stuff from around the web.