DEV Community

Cover image for Some libraries you can use with Vanilla JS
Unnati Bamania
Unnati Bamania

Posted on • Updated on

Some libraries you can use with Vanilla JS

Never underestimate the power of simplicity. It's hard to imagine the application of concepts like push real-time notifications, using databases, having a rich text editor with Vanilla JS. But you can do a lot with it. Here are some examples of their libraries that make Vanilla JS somewhat impeccable. I will try to embellish each library with its features and other attributes concerning its documentation.

Pushjs

I've been breaking my head all around to find the best tutorials for implementing the push notification feature. But Pushjs made my work painless. The documentation is easy and beginner-friendly.
Alt Text

All the effort that you need to take is to create an HTML file in a folder.
The next step is followed by the installation part. Either install it using the npm package manager or using Github download the zip file. After downloading, unzip the folder and copy-paste push.min.js and serviceWorker.min.js into your project directory.

Code for index.html

<body>

    <script src="push.min.js"></script>
    <script src="serviceWorker.min.js"></script>

    <script>
        function start() {
            Push.create("Hello from Unnati!", {
                body: "Here's your push notification demo",
                icon: 'https://gw.alipayobjects.com/zos/antfincdn/4zAaozCvUH/unexpand.svg',
                timeout: 4000,
                onClick: function () {
                    window.focus();
                    this.close();
                }
            });
        }
    </script>
    <h1>Push notification implementation</h1>
    <h3>Click on this button to view notification</h3>

    <a href="javascript:void(0)" onclick="start()">Start</a>

</body>

Enter fullscreen mode Exit fullscreen mode

Alt Text

EditorJS

Next, the amazing library on the list is Editor Js. We need text editors in our project quite often, hence EditorJs is one of the simple and captivating libraries. You can use it with Vanilla Js, ReactJs, and other frameworks. Making your text bold or italics or adding a heading, has it all. Just quickly run through the documentation and you'll get a clear gist of this library. Let's come to the coding part. Again, you can either install it using the npm package manager or use its cdn.
Alt Text

index.html
<body>
    <h1>Enter your content here</h1>

    <div id="editorjs"></div>

    <button id='button'>Save article</button>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
    <script src="index.js"></script>
  </body>

Enter fullscreen mode Exit fullscreen mode

index.js

try {

  var editor = new EditorJS({
    holderId : 'editorjs',
    placeholder: 'Let`s write an awesome story!',
    autofocus: true,

  });

  editor.isReady
    .then(() => {
      console.log("Editor.js is ready to work!");
    })
    .catch((reason) => {
      console.log(`Editor.js initialization failed because of ${reason}`);
    });

  const btn = document.getElementById("button");

  btn.addEventListener("click", function () {
    editor.save().then((outputData) => {
        console.log('Article data: ', outputData)
      }).catch((error) => {
        console.log('Saving failed: ', error)
      });


  });
} catch (reason) {
  console.log(`Editor.js initialization failed because of ${reason}`);
}
Enter fullscreen mode Exit fullscreen mode

After installing if your try to import editorjs it will give an error, you need to make some configurations for import to work. Hence, you use the above code for reference.
It can also help you to save your write-up material.
You get a lot of options for configuring your editor like adding headers, lists, embed.
Alt Text

import Header from '@editorjs/header';
import List from '@editorjs/list';
import MyParagraph from 'my-paragraph.js';
const editor = new EditorJS({

  tools: {
    header: Header,
    list: List,
    myOwnParagraph: MyParagraph
  },
  defaultBlock: "myOwnParagraph"
})

Enter fullscreen mode Exit fullscreen mode

Howler.js

You must've used audio and video tags in your projects. Howlerjs, is here to enhance your experience. The documentation explains the code well. Here's the reference piece of code which gives you a basic idea of HowlerJS
Alt Text

<script>
    var sound = new Howl({
      src: ['sound.webm', 'sound.mp3']
    });
</script>

Enter fullscreen mode Exit fullscreen mode

Alt Text

Reveal.js

Ever wondered one day you'll be able to create presentation slides using Javascript. Reveal.js, made it possible. This is an amazing library that I would like to add to the list. You can install it using npm package manager or navigate to Github and download zip and include the files in your project folder. Create an HTML file and fetch all the CSS and javascript files.
Alt Text

<link rel="stylesheet" href="dist/reset.css">
<link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/black.css" id="theme">
<link rel="stylesheet" href="plugin/highlight/monokai.css" id="highlight-theme">
Enter fullscreen mode Exit fullscreen mode

Javascript files

<script src="dist/reveal.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script>
     Reveal.initialize({
    hash: true,
        plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
   });
</script>
Enter fullscreen mode Exit fullscreen mode

For the slides part.

In index.html inside body tag create a div with id name reveal and nest another div with id name slides. Inside the nested keep adding the section div depending upon the slide requirement.

<div class="reveal">
  <div class="slides">
   <section>
    <h1>Slide 1</h1>
    <h3>This is an amazing library</h3>
   </section>
  <section>
   <h1>Slide 2</h1>
   <h3>You can just play around with a lot of stuff</h3>
  </section>
  <section>
   <h1>Slide 3</h1>
   <h3>That's it for the slide Show</h3>
   </section>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Alt Text

ChartJS

Presentations and displaying graphical charts go hand in hand. Javascript has a stunning library Chartjs where we can represent data using these charts. It includes bar graphs, pie diagrams, dot diagrams, and a lot more.
Alt Text
Here's the sample code for the pie chart

 var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'pie',
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                datasets: [{
                    label: '# of Votes',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

Enter fullscreen mode Exit fullscreen mode

There are a lot of other popular and useful libraries which can be used with Vanilla Js. That's it for this post. If you know more stunning libraries like these please do mention them in the comment section below.

Oldest comments (38)

Collapse
 
mjgs profile image
Mark Smith

Cool libraries. Thanks for sharing!

Collapse
 
commentme profile image
Unnati Bamania

You're welcome!

Collapse
 
rajvirsingh1313 profile image
Rajvir Singh

Thanks, I was looking for a push notification to add to my current side project and slides to my personal site. Btw Great work keep it up!

Collapse
 
commentme profile image
Unnati Bamania

Thank you!

Collapse
 
fabiocosta89 profile image
Fabio Costa

Thanks for the share

Collapse
 
commentme profile image
Unnati Bamania

You're welcome

Collapse
 
mrwolferinc profile image
mrwolferinc

Hey I tried some of these before

Collapse
 
commentme profile image
Unnati Bamania

Great! If you have something in your list which is not there in this post please do share.

Collapse
 
uwenayoallain profile image
Uwenayo Alain Pacifique

Thanks, this will help.

Collapse
 
commentme profile image
Unnati Bamania

I'm glad.

Collapse
 
ashishk1331 profile image
Ashish Khare😎

What about popper.js? I think it makes tool-tips easy.

Collapse
 
commentme profile image
Unnati Bamania

Cool, thanks for your suggestion. Will definitely try it

Collapse
 
dixpac profile image
Dino

Nice article!

Also, tippy.js for tooltips and popovers

Collapse
 
kigiri profile image
Clément

Vanilla js librairies, how does that makes sense ?

I thought vanilla was js precisely without libs

Collapse
 
casperbraske profile image
Luis

My exact thought.

Collapse
 
hakimio profile image
Tomas Rimkus

I guess, it means it doesn't require some framework like React, Angular, Vue, JQuery, etc.

Collapse
 
kayron013 profile image
Angel Campbell

JQuery isn't really a framework though, yet I'd still consider it non vanilla JS.

Collapse
 
kjellski profile image
Kjell Otto

I don't think that's necessarily the case - I always thought that it means without the prerequisite of a framework like Angular or library like React...

Collapse
 
z2lai profile image
z2lai • Edited

I get that there might be an established definition of Vanilla JS. But isn't Vanilla JS libraries just JS functions packaged together. I don't see much of a difference between keeping the JS all in one file, vs storing it in another module and importing it.

Collapse
 
itwasmattgregg profile image
Matt Gregg

With this definition then libraries like Vue and React are "Vanilla JS" libraries.

Thread Thread
 
z2lai profile image
z2lai

Yeah good point. I think of React as non-vanilla because of how many layers of abstraction it has. But I guess ultimately, if there's even one layer of abstraction, like packaging a one-liner into a library, then it might as well be considered non-vanilla.

Collapse
 
kigiri profile image
Clément

For me the difference is, directly using the browser API and writing code just for your needs and understanding the API behind the code.

In a way, react can be use as just a vanilla JS library in that case, you don't even need to write JSX and can use it for some elements only... It's probably lighter than some of the libraries listed in this article.

Collapse
 
vladimirc profile image
Vladimir C

This totally makes sense to me in a matter that the "library" doesn't have any other dependencies like jQuery, React/Vue, etc. i.e. if you're familiar with JS you can just get the library and start using it without cognitive overload by finding that you also have to use that on a specific platform only, having other packages installed and be in a parallel universe.

Collapse
 
bigbott profile image
bigbott

This totally makes sense to any seasoned developer or any backend developer. But frontend developers nowadays have a mess in their heads. They believe that React is a library because they thought to believe this. Therefore they don't understand completely what a library actually is. Hence a comment: "Vanilla js librairies, how does that makes sense ?" with 17 likes. Awful.

Thread Thread
 
kigiri profile image
Clément

Kindly please describe what is a library to you, their might be an interesting discussion here.

If we take the example of the editor.js "library":

  • it's 574k of js bundled
  • has dependencies (at least highlight.js for syntax highlighting)
  • has an ecosystem of plugins all only working for this library

The line between library and framework is a bit fuzzy, I would still consider react a framework because it is how people use it and arguably the recommanded way to use it.

My message was not about react being a lib, more than using huge library not the spirit of what I would call vanilla JS.

Thread Thread
 
bigbott profile image
bigbott

It is not fuzzy and it never was. It always was simple and clear. It became fuzzy when promoters of React decided to call it "library".
A library is just a set of methods/functions regardless of its size. It can be GB in size and it still will be the library. Editor.js is a perfect example of a library. Another one jQuery - 30,000 plugins and why it even matters?

Framework on another side can be several lines of code, but still, be a framework just because it requires your code to be written in a certain way. React which requires extending classes and implementing methods is a perfect example of a framework.

General principle:
Your code calls the library, but the framework calls your code.

Speaking of "Vanilla JS", "Vanilla JS" is a part of jQuery hate strategy invented by the same frauds who call React the library.

The power of a language is in its libraries and frameworks. "Vanilla JS" is nonsense, the same way as "Vanilla Java" or "Vanilla Python". We just need to call libraries - libraries and frameworks - frameworks and use them where they make sense.

Thread Thread
 
james_palermo_bc208e463e4 profile image
James Palermo

Thanks bigbott, I was skimming the comments and thinking “please tell me SOMEONE knows what a library is! Big ol bundle of code!”

Maybe people don’t “need” to learn C++ but I swear a week with it and people wouldn’t be confused by stuff like the idea of a “library” that is just a big block of text.

It’s almost like how a real library is a place that holds lots of useful information data and methods to achieve things. Weird, right? 😜

Collapse
 
merthod profile image
Merthod • Edited

Because you can use them with vanilla JS, w/o dependencies nor supersets.

Collapse
 
mudlabs profile image
Sam

Vanilla JS is when you don’t abstract away to a framework like React or JQuery etc... You can still use libraries.

Collapse
 
itwasmattgregg profile image
Matt Gregg

I think having the title "Vanilla JS" is misleading here. Vanilla JS usually means using methods and features natively available in most browsers and included in the standard of ECAMScript without importing external libraries. This is a good post about libraries you recommend (and these are all great libraries) but there is not really such thing as a Vanilla JS library IMO.

Collapse
 
james_palermo_bc208e463e4 profile image
James Palermo • Edited

French Vanilla JS then. 🙄

Collapse
 
anhvandev profile image
anhvandev

I suggest adding Swiperjs, a very handy slide library :D

Collapse
 
nevkatz profile image
Nevin Katz

Great stuff - thanks!

Collapse
 
prof3ssorst3v3 profile image
Steve Griffith

Came for the comments and ensuing firestorm over "Vanilla JS" and "Library" in the same sentence.
Was not disappointed. 🔥 🔥 🔥

Collapse
 
rishitkhandelwal profile image
Rishit Khandelwal

EditorJS and PushJS seem to be quite cool, never tried them

Collapse
 
loganliffick profile image
Logan Liffick

Yikes, these comments are a bad take. Great article!

It looks like there are a ton of developers out there who don't see the difference between libraries built (or adapted) to work with frameworks and libraries built to work in non-framework-dependent environments.

Collapse
 
peppermint_juli profile image
Juliana Jaime 🎃

These look like great libraries, thanks for sharing! I was actually looking for an Editor for my webapp so I'll give EditrJS a try!

PS. Shame on everyone in the comments hating on the title for no reason, devs can be a pain in the a sometimes.

Collapse
 
ashleyjsheridan profile image
Ashley Sheridan

I'd always recommend against Chart.js just because it produces an innaccessable mess. Charts built using HTML5 canvas are problematic anyway, just because they only ever expose a single DOM node which makes it impossible to provide a proper alternative to screen readers. Chart.js goes further though, and just doesn't provide anything as alternative text.

Effectively, it's just giving a big middle finger to anyone who's relying on a screen reader to browse the web.