Front-end plug-in library

Original link:Front-end plug-in library
Sites:Front-end development document
Blog:Front-end plug-in library

Front-end plug-in library


Official website:

DataTables is a JavaScript function library of jQuery. Its purpose is to strengthen table operations (such as searching and sorting) and automatically add components into tables. It is very flexible and easy to use.


Official website:Lazy Load
Extension:Vanilla JavaScript Lazy Load Plugin

Lazy Load helps pages with a long height to delay loading pictures. When the page has not been browsed, pictures outside the viewing angle will not be loaded, thus improving efficiency.


Official website:JQuery lightSlider

JQuery lightSlider is a lightweight and responsive ticker/slide with thumbnail navigation. In addition, there are phase-based functions and vertical tickers, which are widely used.


Official website:

Alertify.js is a JavaScript framework created to beautify notification messages.

pickadate.js-Date/Time Selector

Official website:pickadate.js


Official website:Chosen

Chosen is a jQuery plug-in designed to make the long and bulky pull-down menu more friendly.



A flexible and solid suggestion list function library launched by Twitter.


Official website:textillate.js

Textillate.js combines many excellent function libraries and simply applies CSS3 animation effects.


Official website:Chart.js

For designers or developers, simple JavaScript icon application.


Official website:highlight.js

Highlight coloring for Web programs.


Official website:jquery-loading

Originated in order to lock a specific object during reading or running, while keeping other parts of the page accessible to the viewer.


Official website:jQuery Validation

The jQuery Validation plug-in makes it easier for clients to check forms and provides a large number of customized settings. It is a good choice whether to import new development or existing projects.


Official website:Moment.js

A lightweight JavaScript function library dedicated to parsing, verifying, manipulating, and formatting dates. Moment.js is designed for browsers and Node.js, and all components can run in both environments.


Official website:Animate.css

Pure CSS, without JavaScript, supports multi-browser animation effects, plug and play.


Official website:Ace

Ace is an online programming language editor plug-in developed through JavaScript. Its functions and performance are similar to those of general editors (Sublime, Vim, TextMate, etc.), and it is quite easy to import into any web page or JavaScript application. It is worth mentioning that Ace is maintained by Cloud9 IDE’s team and is an extension of Mozilla Skywriter(Bespin) project, with reliable quality.


Official website:PDF.js

PDF.js is a PDF reader constructed by HTML and promoted by Mozilla Labs. the goal is to establish a common PDF platform.

reveal.js-webpage change briefing

Official website:REVEAL.JS

Intro.js-Website navigation

Official website:Intro.js

Optimize the navigation function of the website, provide step guides to visitors, and enhance the user experience of the website.

Fine Uploader-Drag and Drop Upload

Official website:fine-uploader

Importing, dragging and uploading files, cross-browser, native JavaScript and free open source, can be started as long as JavaScript is loaded, and does not depend on other programs.


Official website:parallax.js

Parallax engine with high compatibility for any device.


Official website:Hover.css

Several CSS3 special effects for links, buttons, Logo, SVG and pictures.



IScroll is a high performance, small file, independent and multi-platform JavaScript drag-and-drop sliding library.


Official website:Toolbar.Js

A jQuery plug-in that generates toolbars.



NanoScroller.js is a jQuery plug-in that uses a simple method to make scrolls similar to Mac OS X style. Although it is not under continuous maintenance at present, it is still a good choice with relatively simple use and high support.


Official website:iCheck

Highly flexible customization for jQuery and ZeptocheckboxAndradioThe plug-in for the button.


Official website:KUTE.js

A mature native JavaScript animation engine, which provides website developers, designers and animators with quite a few basic functions, simple and easy-to-understand operation, cross-browser animation, has high quality, flexibility, professionalism and light weight (the main core only needs 17K).


Official website:Timeline.js

JQuery timeline plug-in, simple use is its advantage.


Official website:Muuri

Muuri is a JavaScript Layout engine that allows you to build a variety of Layouts with responsive, sortable, filterable, drag-and-drop or animation effects.

Algolia Places

Official website:Algolia Places

Algolia Places provides a quick and simple way for your website to automatically generate a JavaScript function library of address suggestion lists.


Official website:lightgallery.js

A highly flexible, modular and responsive jQuery plug-in for light boxes.


Official website:Tabslet

A jQuery plug-in for tabs, lightweight and easy to operate.


Official website:Masonry

Masonry is often used as a plug-in for waterfall layout.


Official website:Slidebars

Slidebars is a jQuery framework that provides sidebar menus for websites or website applications.


Official website:three.js

Easy-to-use and lightweight 3D library that providescanvasSVGCSS3 3DAndWebGLRenderer.

Videos.js-HTML5 video player

Official website:Video.js: The Player Framework

Video.js is a media player built with the coming of HTML5. it supports HTML5 and Flash video, PC and mobile devices. The project started in 2010 and has been used by more than 400,000 websites.


Official website:Leaflet

Leaflet is an interactive map friendly to mobile devices and an open source JavaScript function library, with a total size of only 38KB, but it has the needs that most developers want. Simple, professional, practical and cross-platform can be effectively used on PC and mobile devices, and there are a large number of plug-ins that can be extended, with a gorgeous but simple API, very easy to learn and highly readable source code.


Official website:SortableJS

Sortable is a JavaScript function library that can drag and drop moving lists on HTML objects, supports mobile devices and does not rely on other third parties such as jQuery, and is compatible with CSS frameworks such as Bootstrap.


Official website:clipboard.js

A small tool for copying content to a clipboard does not rely on Flash and only needs 3KB in size.


Official website:howler.js

Howler.js is an audio playing function library for current websites, preset as Web Audio API and HTML5 Audio, which makes it easier to play sound through JavaScript and is cross-platform.

p5.js-Drawing Plug-in

Official website:p5.js

P5.js is a JavaScript function library with complete drawing function, not limited to canvas. You can use the entire browser as your draft. In addition, there are plug-ins that make it easier for you to interact with HTML5, adding text bar, movie, video or audio functions.

fullPage.js-full page navigation

Official website:fullPage.js



For cross-browser data access that can be done for any project, the whole station can run with high browser support. Small projects do not want to import large frames.


Official website:JavaScript Calendar

Design a full-page calendar that can drag and drop events. Bootstrap’s typesetting style can read JSON format data, is easy to install and supports responsive typesetting.


Official website:Headroom.js

To maximize the space of the website, the navigation list does not need to be hidden and appears when needed. Css can make the picture more lively, and jQuery or Angular is also supported.


Official website:ScrollToFixed

ScrollToFixed enables navigation or headers of web pages to be fixed at the top or bottom, making it easier for users to operate or view information. In addition to navigation and header, other content can also be fixed, such as advertising, returning to the top, etc.


Official website:Handlebars.js

Handlebars is mainly to make you more efficient and not easily frustrated when making semantic templates, and is compatible with Mustache templates, most of which can be directly used interchangeably.



Faker.js can generate a large amount of fake data in the browser or Node.js Things that are quite convenient during the testing period can also be run through Google Extension.

TinyMCE-HTML editor

Official website:TinyMCE

TinyMCE is a full-featured and lightweight HTML editor, but it needs to be above IE11 to run.

List.js-Data sorting

Official website:List.js

List.js adds search, sorting, filtering and flexibility to tables, lists and various objects. it is built invisibly in HTML and is extremely simple and easy to use. Even though the periphery is not as good as Datatables, it does not depend on jQuery and its size is only 1/4 of DataTables (17KB after compression), and it has high compatibility and more than one pair to IE.<table>Yes<ul><ol>Or support for other HTML elementsList.jsOne of the advantages that cannot be ignored.


Official website: Swiper

Swiper is currently Wang Zheng’s slide/ticker plug-in, which is highly efficient and can be used on mobile devices and hybrid apps. It not only runs well on the latest version of IOS, but also performs well on Android, Windows Phone 8 and PC devices. It should be noted that Swiper is not compatible with all platform devices, but focuses on the compatibility and performance of current mainstream platform devices. And so is SwiperFramework7AndIonic FrameworkPart of the component of.


Official website:Toastr

Toastr is a JavaScript function library that prompts information, and jQuery must be loaded. Its purpose is to use a simple program function library for customization and extension. Toastr provides a sample page.toastr examples, convenient custom effect is similar to generating source code.Customize and download · BootstrapThe effect of convenient users to speed up the process, previously introducedALERTIFY JSThe overall level is much better than toastr, regardless of native JavaScript, overall file size and functional extensibility, but toastr’s simple operation mode may be a good choice if some old projects are in jQuery environment and some customized functions are required.

goodshare.js-Minimal animation drawing

Official website:Sketch.js


Official website:Quill

Quill is a high compatibility, powerful, rich and extensible text editor. Support for mobile devices is high.

Shave-Truncate text

Official website:Shave

Shave truncates text according to the maximum height of the content. It is a JavaScript plug-in without any dependency. And hide the extra words inspanLater, keep the integrity of the original text. CSS itself passestext-overflowThere are similar functions (Truncate String with Ellipsis), but need to set the width, if need not fixed width of the project, Shave should be a good choice.


Official website:Tabulator

Tabulator is a table content generator that is quite easy to operate. It only takes a little time to generate HTML interface tables from data in array or JSON format. It also supports responsive web pages and uses other plug-ins to make objects to generate data charts.

ScrollReveal-Dynamic display of content

Official website:ScrollReveal


Official website:datedropper

Datedropper is a tiny but powerful jQuery time selector. The built-in style is quite lively and lovely, which can increase the vitality of the website.

Cleave.js-Form Field Formatting Tool

Official website:Cleave.js

Infinite Scroll

Official website:Infinite Scroll

Infinite Scroll is jQuery’s plug-in for unlimited scrolling.