Today, I launched my personal repository of JavaScript libraries and components. All scripts and libraries in this repository have been created in-house, either as client work or simply as a demo. The libraries range from masonry grids to custom <select>
elements to sliders and entire design libraries. All of these components and libraries have been optimized over time for size and performance and zero dependencies, and I am using them in most of my projects.
As I mostly work with back-end development, these libraries are very helpful to me to create interfaces that look modern and behave pixel-perfect on all devices.
There are several sites out there that compile libraries and offer links to their respective authors and GitHub repositories, so I did the same, and I created demo pages, GitHub repositories (if available), and the actual code (if a repository is not available).
This is just the beginning, as I have various more that I am currently using, but they are not standardized yet, I simply copy them from one project to another. Whenever this becomes too tedious, I turn them into libraries, and, if they are big enough, they are getting a GitHub repo and, maybe, an npm
link.
Feel free to use any of them in any of your projects, they are GPL-licensed. Here is the list of the initial 12 libraries (alphabetically ordered):
Table of Contents
- Boxed Carousel
- Draggable Carousel
- DragonflyJS
- inView
- Minimal Slider
- Price Range Slider
- RoarJS
- Stackgrid
- tail.select
- Thin Select
- Thin UI
- Tiny
Boxed Carousel
A zero-dependency, vanilla JavaScript boxed carousel.
Draggable Carousel
A zero-dependency, vanilla JavaScript draggable and horizontally scrollable carousel.
DragonflyJS
A tiny vanilla JavaScript library that enables drag and drop functionality with zero dependencies. By implementing this library, a user is able to drag and drop elements and reorder them.
inView
A tiny, tiny vanilla JavaScript lazy loading script that loads images based on screen visibility. Did I say tiny?
Minimal Slider
A minimal responsive JavaScript slider with CSS transitions, autoplay, infinite slides and wrap-around functionality.
Price Range Slider
All JavaScript range sliders are hacks or workarounds. Because thereās no native HTML element for a range slider (only a single value slider), there are lots of libraries and solutions out there.
Mine is the simplest 𤨠and the most fit for my purpose. Feel free to borrow it and improve upon it.
RoarJS
A responsive, customizable, accessible, zero-dependency, vanilla JavaScript alert/confirm replacement. It automatically centers itself on the page and looks great on any device.
Stackgrid
A lightweight, easy to implement and fully responsive vanilla JavaScript Masonry grid. As the screen width changes, the grid automatically adjusts the size and position of the cards to create a seamless and visually appealing layout.
tail.select
A custom replacement for your HTML <select>
fields with nothing but vanilla JavaScript!
Thin Select
A custom <select>
element with vanilla JavaScript and CSS. Drop your <select>
elements inside a <div class="thin-select"></div>
element and call it a day.
Thin UI
Thin UI is an opinionated, lightweight UI framework consisting of a Flex-powered column grid and a list of basic components, such as form fields and buttons. Built using a functional CSS approach, which means you get exactly what you ask for, without any hidden surprises. The resulting file size is far smaller than a traditional CSS framework.
Tiny
A custom, tiny confirmation modal dialog with Promise support to your website.

Technical SEO specialist, JavaScript developer and senior full-stack developer. Owner of getButterfly.com.
If you like this article, go ahead and follow me on Twitter or buy me a coffee to support my work!