[Must-Know JavaScript Libraries] - Tool Plugins/Libraries That Solve 95% of Problems - 1

foreword

In the context of the tight R&D cycle, remember to avoid time overhead on useless work (such as building wheels) How to effectively confirm whether there are wheels, this article will make a list to help you. Just remember the library below to solve 95% of everyday problems at work.

All links below are source code repositories.

- ---

editor

• ace : Ace, the Ajax.org Cloud9 Editor.
• CodeMirror : A browser-side code editor implemented in JS.
• esprima : ECMAScript parser for multipurpose analysis.
• quill : A cross-browser rich text editor with API.
• medium-editor : A clone of the WYSIWYG editor used by Medium.com.
• pen : Enjoy online editing (supports markdown).
• jquery-notebook : An easy-to-use, concise and elegant text editor. Inspired by Medium.
• bootstrap-wysiwyg : Small, bootstrap compatible WYSIWYG rich text editor.
• -releases : The web text editor for everyone.
• editor : A markdown editor, but still in development.
• EpicEditor : An embeddable JavaScript Markdown editor with split-screen editing, instant preview, auto-save drafts, and offline support.
• jsoneditor : Web tool for viewing, editing, and formatting JSON.
• vim.js : Has a persistent ~/.vimrc feature and supports Vim's JavaScript interface.
• Squire : An HTML5 rich text editor.
• TinyMCE : A JavaScript rich text editor.
• trix : Rich text editor for everyday writing, made by Basecamp.
• Trumbowyg : A lightweight and amazing WYSIWYG JavaScript editor
• Draft.js : React framework for building text editors.
• bootstrap-wysihtml5 : A simple and beautiful WYSIWYG editor.
• wysihtml5 : HTML5-based, progressively enhanced open source rich text editor that uses very strict rules to generate HTML5-compliant tags, avoiding non-canonical tags and peer styles.
• raptor-editor : Raptor, an HTML5 WYSIWYG content editor!
• popline : Popline is an HTML5 rich text toolbar.
• Summernote : A minimalist WYSIWYG editor.

Documentation

• DevDocs : An all-in-one interface document reader with a unified interface, high efficiency, and excellent typesetting.
• dexy : A free-form and artistic documentation tool for writing any technical documentation that includes code.
• docco : A fast and dirty, a hundred lines, literary and artistic document generator, implemented with Literate CoffeeScript.
• styledocco : Generate a style specification document from a style sheet.
• Ronn : Build Manual. Convert simple text files that are friendly to human reading into roff format files, which are convenient for terminal display, and can also be converted into HTML, which is convenient for Web display.
• dox : A JavaScript document generator developed by Node.js. Dox doesn't generate strictly styled documents, but instead uses JSON notation for markdown and JSDoc-style tags.
• jsdox : A documentation generator that converts JSDoc3 to markdown.
• ESDoc : An excellent documentation generator for JavaScript.
• YUIDoc : A Node.js application that extracts source code comments to generate interface documentation, similar to Javadoc and Doxygen.
• coddoc : A jsdoc parsing library. Coddoc differs from other tools in that it is easily extensible to add tags and code parsers via coddoc.addTagHandler and coddoc.addCodeHandler. Coddoc can also parse source code to generate interface documentation.
• sphinx : A tool that makes it easier to create smart and beautiful documents.
• Using JSDoc
• Beautiful docs : A document reader in markdown format.
• documentation.js : Interface documentation generator supporting ES2015+ and stream annotations.
• jsduck : An interface documentation generator developed for the Sencha JavaScript framework, although other frameworks can also be used.
• codecrumbs : A visualization tool for learning and documenting codebases, implemented by inserting breadcrumbs into the source code.

document

• Papa Parse : A powerful CSV library that supports parsing CSV files/strings, and can also export CSV.
• jBinary : Perform advanced I/O (load, parse, manipulate, serialize, store) operations on binary files that describe file types and data structures in a declarative syntax.
• diff2html : git diff output parser, also HTML beautifier.
• jsPDF : A JavaScript PDF file generator.
• PDF.js : A JavaScript PDF reader, community driven, supported by Mozilla.

functional programming

• underscore : Utilities for JavaScript.
• lodash : A utility library that provides consistency, customizability, high performance, and extra functionality.
• Sugar : A JavaScript library that extends the functionality of native objects.
• lazy.js : similar to Underscore , but with better performance
• ramda : A utility library for JavaScript programmers.
• : Modular JavaScript tool library.
• mesh : Streaming data synchronization tool.
• preludejs : JavaScript hardcore functional programming.
• rambda : A fast and small replacement for the Ramda .

reactive programming

• RxJs : Reactive extension to JavaScript.
• Bacon : FPR (Functional Reactive Programming) library for JavaScript.
• Kefir : FRP library inspired by Bacon.js and RxJS, focusing on high performance and low memory consumption.
• Highland : A rethinking of JavaScript utilities, Highland manages synchronous and asynchronous messages with ease, using only standard JavaScript and Node-like streams.
• Most.js : High-performance FRP library.
• Cycle.js : A functional and reactive JavaScript framework for predictable code.
• concent : Definitely ❤️ the simplest yet ⚡️ most powerful state management development framework for react, predictable, progressive, and performant.

data structure

data structure library is used to build a more complex application.

• immutable-js : Immutable collections of data, including Sequence, Range, Repeat, Map, OrderedMap, Set, and sparse Vector.
• mori : A library that uses ClojureScript to persist data structures and support native JavaScript APIs.
• buckets : A complete, well-tested and well-documented JavaScript library for data structures.
• hashmap : Simple hashmap implementation that supports any type of key-value.

date

.

• moment : Parse, validate, manipulate and display dates.
• moment-timezone : Moment.js based time zone library.
• jquery-timeago : A jQuery plugin that supports automatic updating of fuzzy timestamps (eg "4 minutes ago").
• timezone-js : Make JavaScript Date objects timezone capable. Use the Olson zoneinfo file to record time zone data.
• date : Human-friendly Date().
• ms.js : Tiny millisecond conversion tool.
• countdown.js : Super small countdown.
• timeago.js : A very lightweight (~1.7 Kb) library for converting time to xxx pretime format.
• fecha : Lightweight date formatting and parsing library (~2kb). Can be used to replace moment.js formatting and parsing date functions (moment.js is relatively large - Translator's Note).
• date-fns : A library for modern JavaScript date functions.
• map-countdown : Browser countdown built on Google Maps.
• dayjs : Day.js is a date library with the same modern interface as Moment.js, but it is only 2kb in size and can be used to replace Moment.js.

string

• voca : A super easy-to-use JavaScript string library.
• selecting : A library that allows you to get user selected text.
• underscore.string : String manipulation extension for Underscore.js.
• string.js : Additional JavaScript string methods.
• he : Robust HTML entity encoder/decoder.
• multiline : Multiline string.
• query-string : Parse and stringify URL query strings.
• URI.js : URL manipulation library.
• jsurl : Lightweight URL manipulation library.
• sprintf.js : Implements string formatting.
• url-pattern : Simpler than regular expression matching url or other strings, strings and data can be converted into each other.
• plexis : Low-fidelity, powerful, community-driven string manipulation library.

number

• Numeral-js : A library for formatting and manipulating numbers.
• chance.js : JavaScript random generator that can generate numbers, strings, etc.
• odometer : Smooth digital transition effects.
• accounting.js : Lightweight library for formatting numbers, money, currency, fully localized and dependency free.
• money.js : A small (1kb) currency conversion library for web and nodeJS.
• Fraction.js : A rational number library.
• Complex.js : A complex number library.
• Polynomial.js : A polynomial library.
• Quaternion.js : A quaternion manipulation library for JavaScript.

storage

• store.js : Wraps LocalStorage for all browsers without using cookies and flash. Covert use of localStorage, globalStorage and user data.
• localForage : Improved offline storage. It encapsulates IndexedDB, WebSQL and localStorage, and has a simple and powerful API.
• jStorage : jStorage is a simple key-value database for storing data on the browser side.
• cross-storage : After obtaining permission, it can be stored locally across domain names.
• basket.js : Resource loader for loading and caching scripts with localStorage.
• bag.js : Can cache scripts and load resources, similar to basket.js, but adds a key-value interface and support for localStorage/websql/indexedDB.
• basil.js : Smart JavaScript data persistence layer library.
• jquery-cookie : A lightweight and simple jQuery plugin for reading, editing and deleting cookies.
• js-cookie : A simple, lightweight jQuery plugin for reading, writing and deleting cookies.
• Cookies : A client-side cookie manipulation library.
• DB.js : Promise-based library that wraps IndexedDB.
• lawnchair.js : Simple client-side JSON storage.
• sql.js : Compile SQLite to JavaScript based on Emscripten.
• crumbsjs : A lightweight native ES6 cookies and local storage JavaScript library.
• awesome-web-storage : Everything you must know about client-side storage.

colour

• randomColor : JavaScript color generator.
• chroma.js : JavaScript library with various color manipulations.
• color : JavaScript color conversion and manipulation library.
• colors : Smarter default web colors.
• PleaseJS : JavaScript library that randomly creates pleasing colors and color schemes.
• TinyColor : Fast, lightweight color manipulation and conversion library.
• Vibrant.js : Extracts the primary color from the image.

Internationalization and Localization

• i18next : An easy way to implement internationalization (i18n) with JavaScript.
• polyglot : Small internationalization helper library.
• babelfish : An i18n library that provides a friendly and understandable API, with built-in support.
• ttag : A trendy JavaScript internationalization and localization library based on ES6 tag templates and the good old GNU gettext.

control flow

• async : Async tool library for node.js and browsers.
• q : JavaScript tool for implementing asynchronous promises.
• step : An asynchronous control flow library that makes logic execution simpler.
• contra : Asynchronous flow control implemented in a functional style.
• Bluebird : A full-featured promise library focused on functional innovation and performance improvements.
• when : Fast and reliable, Promises/A+ canonical when() implementation with other nice features for asynchronous operations.
• ObjectEventTarget : Add an event listener prototype for normal objects (just like the browser DOMElement's EventTarget).
• sporadic : Compositional concurrency abstraction on top of promises (like streams, coroutines and similar Go channels), supporting Node.js and browser engines.

routing

• director : A small, URL-isomorphic route.
• page.js : Small client router inspired by Express router (~1200 bytes).
• pathjs : Simple, lightweight web routing.
• crossroads : JavaScript routing.
• davis.js : Downgradable RESTful JavaScript routing based on pushState.
• navaid : A browser-side navigation aid system (which can also become a router), with a volume of only 850 bytes!

safety

• DOMPurify : DOM-only, ultra-fast, fault-tolerant XSS filter for HTML, MathML, and SVG.
• js-xss : Through whitelist configuration, untrusted HTML can be filtered (to prevent XSS attacks).
• xss-filters : Secure XSS filter by Yahoo.

log

• log : Console.log with styles.
• Conzole : A debug panel that encapsulates the JavaScript native console object methods and functions, and displays the panel in the page.
• console.log-wrapper : Clear logs to console, compatible with all browsers.
• loglevel : The lightest JavaScript logging tool library, adding a reliable log level to the encapsulated console.log method.
• minilog : A lightweight, streaming API exposed logging library that can be used on both the client and server sides.
• storyboard : Universal logging library + Chrome extension. Provides a single entry to view task trigger logs including client and server.

regular expression

• RegEx101 : Online JavaScript regular expression tester and debugger. Python, PHP and PCRE are also supported.
• RegExr : HTML/JS tool for creating, testing and learning regular expressions.

voice command

• annyang : A speech recognition library that adds voice commands to websites.
• voix.js : JavaScript library for adding voice commands to websites, apps, or games.

API

• axios : Promise-based HTTP client for Node.js and browsers.
• bottleneck : Powerful speed limiter that makes regulating traffic easier.
• oauth-signature-js : OAuth 1.0a signature generator for node and browsers.
• amygdala : Provides a RESTful HTTP client solution for web applications.
• jquery.rest : A jQuery plugin that makes RESTful APIs easier to use.
• Rails Ranger : A strict REST client designed for the Ruby Tails interface.
• wretch : A small package for the intuitive syntax fetch function.
• FarFetch : Simple-to-use wrapper around the modern Fetch interface that simplifies file uploads.
• Optic : Optic for automated testing and documentation of APIs.
• SWR : React Hooks library for remote data pull.

stream media

• Tailor : Streaming layout service for front-end microservices, inspired by Facebook BigPipe.

visual inspection

• tracking.js : A modern approach to implementing computational vision on the web.
• ocrad.js : JavaScript OCR implementation based on Emscripten.

machine learning

• ConvNetJS : JavaScript Deep Learning. Train a convolutional neural network (or a normal neural network) in the browser environment.
• DN2A : Digital Neural Network Architecture.
• Brain.js : JavaScript neural network.
• Mind.js : A flexible neural network library.
• Synaptic.js : Schemaless neural network library for Node.js and browsers.
• TensorFlow.js : A JavaScript library for training and deploying ML models in the browser and Node.js.
• ml5.js : Web-friendly machine learning library.
• Synapses : Lightweight cross-platform neural network library.

browser detection

• bowser : A browser detector that is small, fast, and has a rich API.

Benchmarks

• benchmark.js : Benchmark library used by jsPerf.com.
• matcha : A simple implementation of a caffeine-driven benchmark.

animation

• velocity : Speed up JavaScript animations.
• jquery.transit : jQuery plugin with super smooth CSS3 transforms and transitions.
• impess.js : Use CSS3 transforms and transitions to create a Prezi-like presentation in HTML documents.
• bounce.js : Create fun CSS3 animations in no time.
• GreenSock-JS : High-performance HTML5 animations for all major browsers.
• TransitionEnd : TransitionEnd is a cross-browser library that uses the transitiononend event.
• Dynamics.js : CSS animation library for creating physics-compliant motion.
• the-cube : The Cube is a CSS3 transition effect experiment.
• Efeckt.css : A high-performance transition animation library.
• animate.css : A cross-browser CSS animation library as easy as possible.
• textillate : Simple plugin for CSS3 text animation.
• move.js : CSS3 based JavaScript animation framework.
• animatable : One property, two values, infinite possibilities.
• shuffle-images : Shuffle images simply and creatively. http://www.thepetedesign.com/demos/shuffle-images_demo.html
• smoothState.js : Do not disturb page transition jQuery library. http://smoothstate.com/
• Anime.js : A JavaScript animation engine. http://animejs.com
• particles.js : Lightweight JavaScript library for creating particles.
• tsParticles : The newly upgraded version of particles.js, with bug fixes and many new features added.
• particles-bg : A lightweight particle motion animation background React component.

image processing

• lena.js : Image processing library with filters and utility functions.
• pica : High quality image resizing (using fast, pure JS implementation of Lanczos filter algorithm).
• : A simple image cropping jQuery plugin.

finally

historical article

• Must-Know JavaScript Libraries - Visualization Library