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.
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>
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.
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>
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}`);
}
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.
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"
})
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
<script>
var sound = new Howl({
src: ['sound.webm', 'sound.mp3']
});
</script>
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.
<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">
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>
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>
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.
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
}
}
}
});
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.
Top comments (38)
Vanilla js librairies, how does that makes sense ?
I thought vanilla was js precisely without libs
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.
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.
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":
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.
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.
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? 😜
My exact thought.
I guess, it means it doesn't require some framework like React, Angular, Vue, JQuery, etc.
JQuery isn't really a framework though, yet I'd still consider it non vanilla JS.
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.
With this definition then libraries like Vue and React are "Vanilla JS" libraries.
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.
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.
Because you can use them with vanilla JS, w/o dependencies nor supersets.
Vanilla JS is when you don’t abstract away to a framework like React or JQuery etc... You can still use libraries.
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...
What about popper.js? I think it makes tool-tips easy.
Cool, thanks for your suggestion. Will definitely try it
Nice article!
Also, tippy.js for tooltips and popovers
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.
French Vanilla JS then. 🙄
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.
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.
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!
Thank you!
Thanks for the share
You're welcome
Great stuff - thanks!
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.
Cool libraries. Thanks for sharing!
You're welcome!