A Repository of Fine JavaScript Libraries and Components

Ciprian on Monday, February 27, 2023 in Blog, JavaScript

NEW! Learn JavaScript by example. Code snippets, how-to's and tutorials. Try now!

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

A zero-dependency, vanilla JavaScript boxed 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.

Related posts

Leave a Reply

Your email address will not be published. Required fields are marked *