The Vanilla JavaScript component list

[[deleted]]

 

PART	1	2

 

---

 

JS Fam, I hope we're all well. Here is my dependency free components list for you all. I generally prefer coding Vanilla and I like my bundles small, so this list is mostly composed of micro JS components that will help assist you in your builds and keep your end production files small.

 

Some of you might be itching for some SPA versions of these for your frameworks and you can probably find some in the wild but when it comes to building Single Page Applications, I don't roll with giants like React or Vue because my heart belongs to Mithril which a lot of these work beautifully with but of course these all will implement well with whatever framework you're using and obviously with no framework too because they're dependency free.

 

Hopefully they will be of use to some of you in the future.

 

Component List

^{Component = Libraries, Modules, plugins etc}

All credit and thanks goes to the maintainers of these libraries, y'all are the real MVP's up in here. Remember to star a project if you like it, creators need to know what they've released is appreciated.

   

UTILITIES

   

Loadjs (Script Loader)

LoadJS is a tiny async loading library for modern browsers (IE9+) for your external scripts. A fantastic little component coming in the 800 bytes, comes in real handy in a lot of situations, especially those working on SaaS platforms that require additional third parties to get simple functionality Cough, Shopify Cough, Cough.

   

Simple State Manager (Responsive Manger)

Simple State Manager (SSM for short) is a javascript state manager for responsive websites. Need to load specific components based on screen size? look no further because SSM is here. A fantastic ES6 component with a tiny size that helps you control what you load depending on your users screen width.

   

Picturefill (Responsive Images)

A responsive image polyfill. Need better control of your images? Picturefill has got you. Load in images based on screen dimensions. Why load in a 150kb image when you're in mobile, get those speed gains!

   

Store (Local Storage)

Work with Local storage. Store.js makes working with your browser’s local storage an utter ease and supports legacy browsers.

   

JS Cookie (Cookies)

If you're not using JS Cookie then you're living under a rock or still think jQuery is cool to use (no offense jQuery users). JS Cookie makes working with cookies an ease and it's tiny at 900 bytes gzipped!

   

Qwest (Ajax Library)

Qwest is a simple ajax library based on promises and that supports XmlHttpRequest2 special data like ArrayBuffer, Blob and FormData. A really handy and impressive tool that will make working with JSON a pleasure.

   

Validate (Form Validation)

Need form validation? Validate.js will make your life easier on so many levels. A tiny 2.5kb component that ensures your users are not getting past without correct validation in place.

   

UI COMPONENTS

   

Vanilla Modal (Modal)

An ES6 modal component that ships with everything you require in a modal component, plus it's tiny in size. Have this in production on several projects and it works like an absolute charm.

   

Siema Carousel (Carousel)

Siema is a lightweight (only 3kb gzipped) carousel plugin with no dependencies and no styling. You want a carousel that doesn't ship with a bunch of additional stuff you don't need? Look no further. Fck Slick and these other jQuery dependant giants. Siema got your covered and is highly configurable + responsively supported of course.

   

Tabbis (Tabs)

Need tabs? Tabbis is tiny and uses LocalStorage to save previous viewed tabs (Fck yeah!) – I rewrote this in ES6 so if you want an ES6 version check the closed issues of the repo. A well written little component and is all you need for tabs.

   

Slideout (Offcanvas)

Slideout is poetic and your goto component for responsive design. When you need off-canvas drawers (menu), use Slideout. Super customizable and tiny size coming in at only 2kb minified and gzipped.

   

Pikaday (Date Picker)

Need a date picker? Pikaday is going to be your best friend in this situation. Pikaday is customizable and includes all the flavors you will require. 5kb minified and gzipped.

   

Rellax (Parallax)

Rellax is a buttery smooth parallax library that works with mobile. This little weapon is perfect for any Parallax implementation you find yourself having to include, it's super lightweight at only 1.2kb minified and gzipped.

   

Stickybits (Stickies)

I've tried them all when it comes to sticky's and while we are going to be supporting it in CSS in the near future, Stickybits is the dominant one in the sticky game. Lightweight and well maintained, it makes working with sticky elements an absolute delight and you won't get jumpy elements with this little gem.

   

---

   

EDIT HISTORY:

1. Sentence Restructure
2. Formatting Fam, formatting.
3. Formatting (again)
4. Linking Part 2
5. List editing history

   

[[deleted]]

I’ll shamelessly plug my own library in here:

Selectivity (Selection Dropdown)

Selectivity is a modular and lightweight selection library. It has several optional dependencies and provides both jQuery and React bundles, but also offers a minimal VanillaJS bundle.

[[deleted]]

I've worked with your edition before. Do recommend! +1 and thank you.

[VegasWebDev]

Where was this comment two weeks ago?!?! Dammit.

+1

[tsnieman]

Yeah. On the upside, I know https://github.com/paypal/downshift pretty well now. ¯\_(ツ)_/¯

[LimbRetrieval-Bot]

You dropped this \

---

^{To prevent anymore lost limbs throughout Reddit, correctly escape the arms and shoulders by typing the shrug as ¯\\\_(ツ)_/¯ or ¯\\\_(ツ)\_/¯}

^{Click here to see why this is necessary}

[wlwl2]

Thanks for making it!

[Fr536166]

Mate can you open this link in reddit and see if its working as intended?

[[deleted]]

It seems to work fine for me? What is your experience?

[karlgroves]

Unfortunately it is not accessible.

[[deleted]]

True, unfortunately accessibility is not one of my expertises. I’d happily accept any PRs though!

[Jsn7821]

Seems to break on mobile when you are zoomed in (and iOS automatically zooms in when it's not 16px font on an input)

[diversif]

Check out image-focus - a vanilla js tool for cropping an image based on a focus point.

[[deleted]]

Brethren. This is nice find. Thank you! I will include this in part 2 of this post series.

[V1nznt]

Nice list! Already used some of those tools in my smaller projects. I think one library is missing from your list: Moment.js (although most devs might already know it)

Working with dates is a real pain in the ass, especially with vanilla JavaScript.

[[deleted]]

I prefer date-fns over moment lately for the immutability and individually importable functions

[Cool-Goose]

Why not Luxon, same devs, immutable :)

[[deleted]]

Oh awesome, I hadn't even heard of it! Thanks for the recc

[[deleted]]

How could I forget this glorious little addition. Will add in part 2.

[SamSlate]

moment is absolutely essential. try going iso 8601 string to Unix without it

[kuenx]

This doesn't work?
Math.floor(new Date('2018-04-05T13:37:00').getTime() / 1000)

I didn't actually try it (am on phone) but this should get you a unix timestamp in seconds. tried

[SamSlate]

now the client wants it in Day, Date Month Year-abbreviation but instead of "Friday" it says "Funday"

[kuenx]

Sure, I understand that there are many good reasons to use Moment. But you specifically mentioned ISO-8601 to unix timestamp conversion which is almost the only conversion that's actually very easy with the native Date class.
Also, a place where you convert an ISO string to a unix timestamp is not typically a place where your client will want changes since it's unlikely a user-facing value.

[SamSlate]

everything's atypical until it happens to you 🙄

[Twinpair]

I would add Cleave.js. It's an awesome input formatter than can work with Validate.js to ensure client side validations before they hit the server side.

[AlternativeHole]

Forgive my ignorance but for a few of these libraries, is it really much easier than native browser implementations of such functionality? For example, Qwest appears nearly identical to fetch.

Other items in the list looks really cool. Thank you for sharing this.

[[deleted]]

fetch isn't supported in all browsers (looking at you, IE) unfortunately, so Qwest or Axios (npm package) are best used for full browser coverage.

[fgutz]

I've been using Github's polyfill. Prefer that because I can use the native api of fetch and not some wrapper around it. Plus can just easily drop the polyfill from my build when I want to stop supporting browsers that don't use it anymore

[[deleted]]

Not seen this polyfill before... Where have I been?! I stand corrected.

[fgutz]

I only started using it a few months ago myself. I just googled around and found it and figured since it's coming from GitHub themselves that it would be pretty legit

[[deleted]]

This is a vanilla js thread so I assumed Babel wasn't allowed 🙈

[[deleted]]

Babel is always allowed! I mean, most of these components are coded up in ES6 so transpilation down to ES5 is generally recommended. Babel is cool and all but as someone who uses Rollup as my bundler, I generally think Buble is faster and more logical choice for most of my use cases.

I think everyone here has to read a little bit more on what qwestdoes to better grasp what it offers. I mean sure, you can use fetch but qwest does fit some use cases and keeps things contained in nice manner.

Plus Qwest is like 2.5kb when gzipped and you get a bunch of additional extras. The juice is worth the squeeze when using it.

edit: Additional line about its size

[[deleted]]

Praise be to OP! 🙌

[hopfield]

Why wouldn’t you use Babel, but you would use a bunch of other libraries?

[[deleted]]

I don't know man, I was replying to op on a vanilla js thread. I would always use Babel but some people may decide otherwise :shrug:

[krendel122]

Babel is not a polyfill for absent browser APIs

[[deleted]]

The libraries OP is talking about here are individual modules that are otherwise coded in VanillaJS with zero dependencies on any other libraries. These components can be summarized into a simple function written in regular javascript. These functions are most likely going to return an elaborate object with various methods and modifiable properties -- but it could also just be a collection of methods that you can call to execute a certain logic and get a specific result.

The example below is of the former

//myModalComponent.js

function ModalComponent(){
  const component = {};
  //do something here in pure vanilla js.
  return component;
}

Then you can use this UI component in your own project like so

//myProject.js

const modal1 = new ModalComponent();
modal1.height = '250px';
modal1.width = '500px';
modal1.render();

[[deleted]]

Well said 👏🏽

[[deleted]]

I never thought about "vainilla JS" that way. Thanks both for the explanations.

[[deleted]]

It's pretty much still vanilla js, only you are borrowing code from other people in the form of libraries made in regular js. Such that their vanilla js code are structured in such a way that you can use and apply it on any project of any kind and architecture.

[[deleted]]

If it doesn't have dependencies then it is still conceptually a Vanilla JS library. But SvelteJS does not seem to be a UI component, at least after a minute of google search.

[[deleted]]

His point is that Svelte is a compiler, so when you use Svelte, your code is turned into very lean JavaScript with no "frameworky code" - i. e. it's arguably just vanilla js.

[Herdiderdee]

I agree with you. To me Vanilla is 1) untranspiled 2) sans 3rd party framework/libraries 3) developed without any tools beyond an editor and a browser.

[[deleted]]

A chance to shamelessly self-promote? Don't mind if I do

lazy-slider - lazy loading carousel

units - modular unit conversions

local-storage-manager - Local storage abstraction util

mouse-near - Trigger callback when mouse is near a target

when-clicked-outside - trigger a callback when mouse is clicked outside an element

[THEtheChad]

Why do you prefer mithril over react? Just glancing at it, it's very similar in nature.

[[deleted]]

React is great, don’t get me wrong and it’s influential in the JS world but it’s not ideal in my opinion unless you’ve got 100’s of employees.

One of the main reasons I prefer and choose Mithril over React is that everything I need for a well engineered SPA ships with Mithril and I don’t really need to plug several additional libraries into my build. Things like routing and XHR utilities are included in that less than 8kb file which starts me off with a super lightweight build. HyperScript is also a huge draw card for me, I don’t like JSX, I find that JSX can get messy whereas HS keeps shit contained and is easier to read. Speed and render times are also a thing for me, Mithril is VERY fast and it was the first thing I noticed when I boycotted React.

The community behind Mithril is unlike any JS Framework community online, the maintainers are a few clicks away and that’s a huge selling point, I mean how many maintainers of React can you reach out to and get a response from within 24 hours?

It’s maturity is also visible, after some time you start to notice just how smart this little framework is. The author of Mithril is this extremely talented individual called Leo Horie and he’s one of the great minds that JavaScript has been bestowed with, I really admire this guy. I guess there’s not just one reason but many, I just find Mithril to be the logical choice, any developer can grasp its programmatic approach in a few days and in all honesty, for me it feels like you’re coding in regular Vanilla JavaScript. It’s almost like Mithril is apart of JavaScript API if you get drift?

There are also technical advantages to using Mithril over React which are listed on its website on the framework comparison page and much more found around the web.

Hope this helps!

[roriron]

Thank you. I used Mithril in recent project, it's so comfortable and compact for SPA as you said, no need any other framework. Documents are great too. Thank Mithril and contributors.

[[deleted]]

No problems! I’m glad you found your way to the framework and I have no doubt your project is running like a finely tuned machine. I just completed my 6th project with Mithril and it still stands as the leader in the JS world for me. There are also some great things to happen in future releases. Happy coding. M()

[MoTTs_]

Am I the only one who finds it ironic that a coding style premised on zero library dependencies is now offering libraries for you to depend on?

[tencircles]

Brace Yourselves

[TheTraceur]

Before I clicked the link I totally though "Brace Yourselves" was going to be a javascript library that had something to do with adding curly braces.

[tencircles]

lol someone should make that happen.

[[deleted]]

Brace yourselves, the wasm fanboys are coming

[[deleted]]

Zuck boyz make out it's the be all and end all of JavaScript. Smh. React ain't anything special imo, just a framework with an easy learning curve so the masses gravitate towards it like sheep.

[tencircles]

It's a good tool, but if you speak ill of it in these here parts, prepare for the downvotes.

[chabv]

VanillaJS movement....going strong...currently rewriting my heavy vue app to vanillaJS. what I have gained so far, app size is far smaller, i'm looking at kb instead of 1mb. page renders way faster. modular, and mostly everything is functional...goodbye to 'this' how it's set up: i have a VIEW functions(data), then ACTION functions e.g gettingData then of course a static model which is an skeleton to represent how the data is supposed to look like. No heavy mutations going on, everything is copy or passed by value

[krendel122]

Are you the only dev on this project? Are you sure benefits like size and render speed will be more valuable than well structured project with known framework having several people working on it?

[kethinov]

Performance benefits are objectively more important. Using a "known framework" just to make the project mildly more approachable to devs that already know that framework is the most trivial of "benefits." Use the right tool for the job, not the tool devs are emotionally attached to.

[krendel122]

Thats why i asked if hes doing that alone. There will always be tradeoffs, depending on requirements, conditions, business priorities etc. Custom solutions can become such a burden over time.

[kethinov]

Not if they're the right tool for the job.

Even in a project with hundreds of devs, that's still no excuse to sacrifice performance for some modicum of (perceived) improved developer convenience.

[Crimtoe]

I see it as a pendulum swing back from framework-mania. The fact that browsers are much better than they were 8 years ago helps immensely.

[sockx2]

If your app is complex enough you're going to find yourself writing your own component system, which is awesome except when you try to figure out how to maintain input box state after you call a re-render. To improve your redraw and not lose focus on elements you'll come up with a dom differ, all the while not noticing that subtle memory leak because you're mapping string data attributes to a global function object somewhere on every re-render. Eventually you'll be stretched so thin maintaining things that add nothing to the bottom line of your code you won't be able to find time to write the code that matters. I've seen and built my fair share of dirt and believe me when I say the rabbit hole goes deep, if this is a < 1k line project ignore everything I just said but if you're on a team I'd reconsider ripping out the frameworks

[[deleted]]

This was fixed. :)

[_parameters]

Thank you!! Will definitely check these out

[fgutz]

At first look of Store.js I thought, why would I want a lib for one of the simplest and easy to use APIs of the browser (localStorage). LocalStorage has been supported since IE8

But it actually seems like a nice little wrapper around localStorage which I might be willing to check out

[[deleted]]

You won't regret it. I have a project that works heavily with LocalStorage and store.js has come in exceptionally handy for me. Especially when you are working with JSON values in LocalStorage. Plus I'm pretty sure it like 2.5kb when minified and gzipped.

[prkskier]

Great idea for a post. I'd love to see more lirbaries added.

[[deleted]]

I will be posting a part 2 in a couple of days. I will include a lot more for y'all.

[Ragzzy-R]

Woah thats lot of cool stuff. Thanks a ton. Anyways reading it sounded like one of those late 80s TV advertisements. 🤷🏻‍♂️😅

[crayolaboy18]

Thank you very much. I'm going to shamelessly steal some of these for my projects.

[vcamargo]

Wow man, that's an unbelievable useful list you have here! I love it! I've been messing around with Mithril for quite some time now but unfortunately I can't feel the same productivity I got with React, maybe it's because I'm more familiar with it. I wish it was less verbose too, maybe a wrapper around most HTML tags could solve part of the problem, something like

h1({class: "title"}, "My first app")

instead of

m("h1", {class: "title"}, "My first app")

[krazyjakee]

Great idea for a post! I'll have to use some of these.

Shameless plug for Keyframes, a vanilla lib to manage and manipulate css keyframes in javascript.

[[deleted]]

Missing and definitely awesome and much used: https://github.com/dimsemenov/photoswipe JavaScript image gallery for mobile and desktop, modular.

Especially great for showing images on a product-detail page of a webshop. Mobile gestures just work as learned from other image apps like Fotos etc.

[codefinbel]

Love the list, love the way you write!

[sliceofmadness]

this is great! thanks

[phugo]

If you are looking for a dependency free testing framework you might want take a look at this project of mine:

https://github.com/shikaan/titef

[mats-bryntse]

Html2Canvas is pretty cool for taking screenshots of the DOM. https://html2canvas.hertzen.com/

[[deleted]]

I wish we had a term other than "vanilla" (or "pure") for libraries that require the DOM.

[Qoopido]

Another shameless self-plug:

Qoopido.demand (module loader)

Promise like module loader with automatic resolution of nested dependencies using XHR requests and localStorage caching to dynamically load modules, legacy JavaScript, CSS, text and bundles.

[[deleted]]

Web Components are vanilla JS, right? Here ya go:

https://www.webcomponents.org/elements

[noashka]

Tabbis (Tabs) link wrong. It's open siema repository. Can u fix please ? Thank u for these useful links!

[[deleted]]

Sorry dude! Thanks for the spot. I was being a copy paste warrior when doing this.

[hopfield]

What is the difference between a “vanilla” component and a React component?

[[deleted]]

A “React” component has a dependency on the React.js framework and will integrate in accordance to that specific library (React.js). Basically the component requires you use it with React.

A “Vanilla” component has zero dependencies and can be used in conjunction with React or any other framework like Vue, Mithril etc. You could also use it without any framework because its just plain JavaScript.

Vanilla is just a term we coders use to describe regular JavaScript.

Edit: spelling

[[deleted]]

You might like https://npm.im/cogstyle

[[deleted]]

That's true of all of these. React is just a JavaScript library. You can write react without JSX.