Vanilla JavaScript Repository

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

getButterfly
Vanilla JavaScript Repository

Best free JavaScript & CSS libraries for modern web design.
All scripts and libraries have been created in-house, either as client work or simply as a demo. Feel free to use and improve upon any of them.

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.

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.

Tiny

A custom, tiny confirmation modal dialog with Promise support to your website.

A zero-dependency, vanilla JavaScript draggable and horizontally scrollable carousel.

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.

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.

A zero-dependency, vanilla JavaScript boxed carousel.

tail.select

A custom replacement for your HTML <select> fields with nothing but vanilla JavaScript!

Minimal Slider

A minimal responsive JavaScript slider with CSS transitions, autoplay, infinite slides and wrap-around functionality.

inView

A tiny, tiny vanilla JavaScript lazy loading script that loads images based on screen visibility. Did I say tiny?

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.

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.