This article was published 6 years ago, therefore the contents of this post may be out of date.

JavaScript and CSS libraries are incredibly useful tools for any designer or developer to be familiar with. They can add some powerful functionality to your site or spruce up the design, resulting in a better experience for your users.

While there’s an endless number of resources out there, Today post showcases 15 best JavaScript and CSS Libraries that are sure to take your site to the next level .

1. deeplearn.js

deeplearn.js is an open source hardware-accelerated JavaScript library for machine intelligence. deeplearn.js brings performant machine learning building blocks to the web, allowing you to train neural networks in a browser or run pre trained models in inference mode.

2. Carbon

Carbon allows you to create and share beautiful images of your code. All you need to do is paste your code in the editor or just write it yourself. You can customise the way the image looks by changing the font styles, editor’s theme, syntax highlighting, and even the window buttons.

3. Jarvis

J.A.R.V.I.S. (Just A Rather Very Intelligent System) will put in your browser all the relevant information you need from your webpack build whether in dev or in prod.Tons of features are on the roadmap but still, this beta version will improve the way you look at webpack-dev-server or webpack production build bundle, chunks and other output assets.

4. Micron.js

Micron.JS is a micro interaction library which can be used to add Interactions to different DOM Elements. Micron.JS animates an element using CSS power and the interactive behaviours are controlled by JavaScript.Micron.JS is easy to adapt and can bring interactions to life using html5 data attributes or a chain of JavaScript methods.

5. Wiki

Wiki.js is a powerful wiki app built on Node.js, Git and Markdown. You can use the built-in editor to write your content in Markdown format that is automatically synced with your Git repository.

6. ClarifyJS

With ClarifyJS you can easily create chained methods that can be executed in any order you want. Usually, JavaScript methods are executed from left-to-right, but with ClarifyJS you can change the order in which they are executed. It also allows controlling async methods by choosing whether the process should wait for a specific async method to complete or just execute and move on.

7. Mark.js

Mark.js is JavaScript library that dynamically highlights words matching given search terms or regular expressions. It has built-in diacritics support, separate word search, custom synonyms, iframes support, custom filters and more. Can be used with plain JavaScript or as jQuery plugin.


8. Draggable JS

Draggable is a lightweight, modular drag and drop library by Shopify. It offers advanced drag and drop functionality with fast DOM reordering, clean API and accessible markup. It comes with additional modules that can be included to add more features like sorting, swapping and other utilities.

9.  Spectre

Spectre is a completely free, responsive and elegant CSS framework. It offers basic styles for typography, flexbox based responsive and mobile-friendly layout system and beautifully designed pure CSS components. It is really lightweight, only 10KB gzipped and has support for most modern browsers.

10. Lit

Lit is a small and responsive CSS framework. It offers 12 column responsive grid, different typography styles, custom inputs, three types of buttons and all of the features that a CSS framework should offer. Lit works on all modern browsers, as well as some older ones like IE11

11. Devices.css

A library that showcases modern mobile devices created with pure CSS. It includes some of the most popular mobile devices like iPhone X, Google Pixel 2 XL and Samsung Galaxy S8. The designs are elegant and high-quality and can be used for landing or screenshot pages.

12. Primer

Primer is the design system that powers GitHub. Primer includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it’s easy to include all or part of Primer within your own project.

13. Vivify

Vivify is a CSS-only animation library. You simply need to add the vivify class to the element you want to animate. You can also add the infinite class to make the animations repeat on a loop. The library offers a large selection of over 50 animations with different effects and movement directions.

14. Now UI Kit

Now UI Kit is a CSS frameworks built on top of Bootstrap 4. It comes with over 50 flat styled components, the Nucleo icon set, and Sketch/PSD files for prototyping. Now UI also offers 3 templates for landing, login, and profile pages that will help you get started in no time.

15. AnimTrap

AnimTrap is a CSS Framework for animations. Its like bootstrap for JS animations. All you need is to import AnimTrap and use it for animations in your webapp easily.AnimTrap supports animations like scrolling and simple effects which would make a richer the experience from your webapp


15 Best JavaScript and CSS Libraries