Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nepaul/awesome-web-development
🧡 A curated list of awesome web development resources.
https://github.com/nepaul/awesome-web-development
List: awesome-web-development
awesome awesome-list css frontend html javascript nodejs webcomponents
Last synced: about 1 month ago
JSON representation
🧡 A curated list of awesome web development resources.
- Host: GitHub
- URL: https://github.com/nepaul/awesome-web-development
- Owner: nepaul
- License: cc0-1.0
- Created: 2016-11-25T03:55:12.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-02-15T15:16:11.000Z (9 months ago)
- Last Synced: 2024-04-14T05:31:14.283Z (7 months ago)
- Topics: awesome, awesome-list, css, frontend, html, javascript, nodejs, webcomponents
- Homepage:
- Size: 198 KB
- Stars: 126
- Watchers: 6
- Forks: 11
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- ultimate-awesome - awesome-web-development - 🧡 A curated list of awesome web development resources. (Other Lists / PowerShell Lists)
README
# Awesome Web Development
[](https://github.com/sindresorhus/awesome)
[](https://github.com/nepaul/awesome-web-components/commits/master)
[](https://github.com/nepaul/awesome-web-components/pulls)
[](https://github.com/nepaul/awesome-web-components)
A collection of **awesome** web development resources.
**Show some ❤️ and star the repo to support the project.**
# Table of Contents
- [Awesome Web Development](#awesome-web-development)
- [Table of Contents](#table-of-contents)
- [Guidelines](#guidelines)
- [Some Reading List](#some-reading-list)
- [WEB Security](#web-security)
- [JavaScript](#javascript)
- [API](#api)
- [Framework](#framework)
- [Reactive](#reactive)
- [Prototypes sites](#prototypes-sites)
- [Web Workers](#web-workers)
- [Utilities](#utilities)
- [CSS](#css)
- [Neumorphism](#neumorphism)
- [JavaScript](#javascript-1)
- [Designer](#designer)
- [Machine Learning \& AI](#machine-learning--ai)
- [Chart \& Data Visualization](#chart--data-visualization)
- [File](#file)
- [Upload](#upload)
- [Save](#save)
- [Loader](#loader)
- [Icon](#icon)
- [Notification](#notification)
- [Alert](#alert)
- [Authentication](#authentication)
- [Animations](#animations)
- [Images](#images)
- [Tools](#tools)
- [Sprite](#sprite)
- [Compression](#compression)
- [Lazyload](#lazyload)
- [Filters](#filters)
- [Lightbox gallery](#lightbox-gallery)
- [Static Code Checking(Lint)](#static-code-checkinglint)
- [Font](#font)
- [Datetime \& Step](#datetime--step)
- [UI Kits](#ui-kits)
- [Vue](#vue)
- [React](#react)
- [Out-of-box UI solution](#out-of-box-ui-solution)
- [WeChat](#wechat)
- [Others](#others)
- [Input](#input)
- [Modal](#modal)
- [Popper](#popper)
- [Drag and Drop](#drag-and-drop)
- [Flip](#flip)
- [Menus](#menus)
- [Editor](#editor)
- [Notion-Like Editor](#notion-like-editor)
- [Code Highlight](#code-highlight)
- [Markdown](#markdown)
- [Highlight](#highlight)
- [Clipboard](#clipboard)
- [Respond page](#respond-page)
- [Touch](#touch)
- [3D](#3d)
- [Scroll \& Parallax](#scroll--parallax)
- [Search](#search)
- [Slider|Swiper](#sliderswiper)
- [Color](#color)
- [Conversational](#conversational)
- [Tweening Engine](#tweening-engine)
- [QRCode](#qrcode)
- [Emoji](#emoji)
- [New Feature Introduction](#new-feature-introduction)
- [Typography Stylesheet](#typography-stylesheet)
- [Compatibility](#compatibility)
- [Print](#print)
- [PDF](#pdf)
- [Sheet](#sheet)
- [Fingerprinting](#fingerprinting)
- [Math](#math)
- [Tools](#tools-1)
- [Models \& serializers](#models--serializers)
- [TypeScript](#typescript)
- [Debug](#debug)
- [APIs \& Mock](#apis--mock)
- [Deploy](#deploy)
- [Monitor](#monitor)
- [Docs](#docs)
- [Images](#images-1)
- [Icons](#icons)
- [Project Manage](#project-manage)
- [IDE](#ide)
- [Mock](#mock)
- [Test](#test)
- [CDN](#cdn)
- [HTTP Client/Request](#http-clientrequest)
- [Compile \& Pack](#compile--pack)
- [Webpack](#webpack)
- [Desktop Apps](#desktop-apps)
- [Static Sites](#static-sites)
- [Audio \& Video](#audio--video)
- [Video Player](#video-player)
- [Push Notifications](#push-notifications)
- [Universal](#universal)
- [Store](#store)
- [Web DB](#web-db)
- [Polyfill](#polyfill)
- [Gestures](#gestures)
- [Screenshots](#screenshots)
- [AR \& VR](#ar--vr)
- [Regex](#regex)
- [Figerprint](#figerprint)
- [Validation](#validation)
- [Boilerplate](#boilerplate)
- [Dropload](#dropload)
- [Game \&\& Engine](#game--engine)
- [Functional](#functional)
- [Record and replay](#record-and-replay)
- [Router](#router)
- [Math](#math-1)
- [WebAssembly](#webassembly)
- [Admin](#admin)
- [No/Low Code](#nolow-code)
- [CMS](#cms)
- [Node](#node)
- [Framework](#framework-1)
- [Midddleware](#midddleware)
- [CLI](#cli)
- [Open Source Apps](#open-source-apps)
- [Landing page templates](#landing-page-templates)
- [Commerce Apps](#commerce-apps)
- [Contribution](#contribution)
- [License](#license)
## Guidelines
- [👍 A set of best practices for JavaScript projects](https://github.com/elsewhencode/project-guidelines) 
- [**mdo code guide** Standards for developing flexible, durable, and sustainable HTML and CSS.](https://github.com/mdo/code-guide) 
- [Auto Lab @JingDong: Front-End Coding Guidelines, HTML, CSS, JavaScript, Images, Names](https://guide.aotu.io/index.html)
## Some Reading List
-  [developer-roadmap](https://github.com/kamranahmedse/developer-roadmap)
-  [browser-2020](https://github.com/luruke/browser-2020) - This repo contains a non-exhaustive list of less-known features implemented in browsers today.
This list isn't intended for a technical audience; instead it wants to be a "I didn't know we could do that in a browser!" list.
In many cases, listed features aren't yet part of the standard, and may only be available on certain browsers or configurations.
### WEB Security
-  [OWASP Cheat Sheet Series](https://github.com/OWASP/CheatSheetSeries): the official repository for the Open Web Application Security Project® (OWASP) Cheat Sheet Series project. The project focuses on providing good security practices for builders in order to secure their applications.
In order to read the cheat sheets and reference them, use the project official website. The project details can be viewed on the OWASP main website without the cheat sheets.
### JavaScript
-  [The JavaScript Way: A modern introduction to an essential language.](https://github.com/thejsway/thejsway)
-  [What the f\*ck JavaScript? A list of funny and tricky JavaScript examples. JavaScript is a great language. It has a simple syntax, large ecosystem and, what is most important, a great community. At the same time, we all know that JavaScript is quite a funny language with tricky parts. Some of them can quickly turn our everyday job into hell, and some of them can make us laugh out loud.](https://github.com/denysdovhan/wtfjs)
### API
-  [httpbin](http://httpbin.org/): A tool to feeling RESTFul API.
## Framework
-  [sveltejs: a new way to build web applications. It's a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM.](https://github.com/sveltejs/svelte)
- [sveltejs/kit](https://github.com/sveltejs/kit) - The Fastest Way to Build Svelte Apps
- 💨 Blazing-Fast Production Sites
- 🛠️ SSR, SPA, SSG, and In-Between
- ⚡️ Instantly Visible Code Changes
- 🔩 Existing Universe of Plugins
- 🔑 Fully Typed APIs
-  [blitz - The Fullstack React Framework](https://github.com/blitz-js/blitz): "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails
“Zero-API” data layer lets you import server code directly into your React components instead of having to manually add API endpoints and do client-side fetching and caching.
New Blitz apps come with all the boring stuff already set up for you! Like ESLint, Prettier, Jest, user sign up, log in, and password reset.
Provides helpful defaults and conventions for things like routing, file structure, and authentication while also being extremely flexible.
- [mitt](https://github.com/developit/mitt) - Tiny 200b functional event emitter / pubsub.
- Microscopic: weighs less than 200 bytes gzipped
- Useful: a wildcard "*" event type listens to all events
- Familiar: same names & ideas as Node's EventEmitter
- Functional: methods don't rely on this
- Great Name: somehow mitt wasn't taken
Mitt was made for the browser, but works in any JavaScript runtime. It has no dependencies and supports IE9+.
### Reactive
- [**ReactiveX** - An API for asynchronous programmingwith observable streams](http://reactivex.io/)
- 
[**Cycle.js** - A functional and reactive JavaScript framework for predictable code](https://cycle.js.org/)
## Prototypes sites
- [Foundation: The most advanced responsive front-end framework in the world.](https://get.foundation/)
## Web Workers
-  [Partytown is a lazy-loaded 6kb library to help relocate resource intensive scripts into a web worker, and off of the main thread. Its goal is to help speed up sites by dedicating the main thread to your code, and offloading third-party scripts to a web worker.](https://github.com/Builderio/partytown)
-  [Miniflare is a simulator for developing and testing Cloudflare Workers.](https://github.com/cloudflare/miniflare)
- 🎉 Fun: develop workers easily with detailed logging, file watching and pretty error pages supporting source maps.
- 🔋 Full-featured: supports most Workers features, including KV, Durable Objects, WebSockets, modules and more.
- ⚡ Fully-local: test and develop Workers without an internet connection. Reload code on change quickly.
It's an alternative to wrangler dev, written in TypeScript, that runs your workers in a sandbox implementing Workers' runtime APIs.
See for more detailed documentation.
## Utilities
### CSS
-  [tailwindcss: Rapidly build modern websites without ever leaving your HTML. A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.](https://tailwindcss.com/)
-  [daisyui](https://github.com/saadeghi/daisyui) - Tailwind CSS Components: Adds component classes like btn, card and more to Tailwind CSS
-  [Normalize.css - A modern, HTML5-ready alternative to CSS resets. Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.](http://necolas.github.io/normalize.css/)
-  [CSSFX: Beautifully simple click-to-copy CSS effects](https://github.com/jolaleye/cssfx)
-  [sanitize.css is a CSS library that provides consistent, cross-browser default styling of HTML elements alongside useful defaults. It is developed alongside normalize.css, which means every normalization is included, and every normalization and opinion are clearly marked and documented.](https://github.com/csstools/sanitize.css)
-  [Windi CSS: Next generation utility-first CSS framework. If you are already familiar with Tailwind CSS, think about Windi CSS as an on-demanded alternative to Tailwind, which provides faster load times, fully compatible with Tailwind v2.0 and with a bunch of additional cool features.](https://github.com/windicss/windicss)
-  💗❤️[clay.css](https://github.com/codeAdrian/clay.css) - Micro CSS util class for applying inflated fluffy 3D claymorphism styles to elements. Fully customizable and extensible with CSS variables. SASS mixin is also included for even more styling options.
#### Neumorphism
-  [neumorphism.io](https://github.com/adamgiebl/neumorphism): CSS code generator for a new popular design trend called Neumorphism/Soft UI. I hope this will help designers and developers experiment with it and possibly adapt it. Built with React.js
-  [ui-neumorphism](https://github.com/AKAspanion/ui-neumorphism) - 📕 React component library designed on the "new skeuomorphism" or "neumorphism" UI/UX trend.
-  [tailwindcss-neumorphism](https://github.com/sambeevors/tailwindcss-neumorphism) - Generate soft UI CSS code using tailwindcss
**CSS-in-JS:**
-  [emotion - The Next Generation of CSS-in-JS](https://github.com/emotion-js/emotion): Emotion is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues with CSS. With source maps and labels, Emotion has a great developer experience and great performance with heavy caching in production.
### JavaScript
-  [vueuse](https://github.com/vueuse/vueuse) - Collection of essential Vue Composition Utilities.
- [createjs: A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5.](https://createjs.com/)
-  [SoundJS: A Javascript library for working with Audio. It provides a consistent API for loading and playing audio on different browsers and devices. Currently supports WebAudio, HTML5 Audio, Cordova / PhoneGap, and a Flash fallback.](https://github.com/CreateJS/SoundJS)
- [EaselJS: The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with the HTML5 Canvas element much easier.](https://github.com/CreateJS/EaselJS)
- [PreloadJS: PreloadJS makes preloading assets & getting aggregate progress events easier in JavaScript. It uses XHR2 when available, and falls back to tag-based loading when not.](https://github.com/CreateJS/PreloadJS)
- [TweenJS: A simple but powerful tweening / animation library for Javascript. Part of the CreateJS suite of libraries.](https://github.com/CreateJS/TweenJS)
- [pico.js & lploc.js](https://github.com/nenadmarkus/picojs)
- pico.js: A face-detection library in 200 lines of JavaScript. approximately 200 lines of pure JavaScript;real-time detection demo available at
- lploc.js: A tiny JavaScript library for real-time localization of eye pupils.
-  [radash](https://github.com/rayepps/radash) - unctional utility library - modern, simple, typed, powerful
## Designer
- [web-component-designer](https://github.com/node-projects/web-component-designer) - A Design Framework Webcomponent, to Design HTML using Webcomponents
## Machine Learning & AI
- [Neuro.js is machine learning framework for building AI assistants and chat-bots.](https://github.com/intelligo-systems/neuro) 
- 
[cube.js: Cube.js is an open-source analytical API platform. It is primarily used to build internal business intelligence tools or add customer-facing analytics to existing applications.](https://github.com/cube-js/cube.js)
Cube.js was designed to work with Serverless Query Engines like AWS Athena and Google BigQuery. Multi-stage querying approach makes it suitable for handling trillions of data points. Most modern RDBMS work with Cube.js as well and can be tuned for adequate performance.
Unlike others, it is not a monolith application, but a set of modules, which does one thing well. Cube.js provides modules to run transformations and modeling in data warehouse, querying and caching, managing API gateway and building UI on top of that.
## Chart & Data Visualization
- [antv: AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单
方便、专业可靠、无限可能的数据可视化最佳实践。G2 G6 F2 L7...](https://antv.alipay.com/zh-cn/index.html)
- 
[**Highcharts** - Interactive JavaScript charts for your web pages](http://www.highcharts.com/)
- 👍[mermaid](https://github.com/mermaid-js/mermaid) - Mermaid lets you create diagrams and visualizations using text and code.
It is a Javascript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
- 
[**echarts** - An easy of adding intuitive, interactive, and highly customizable charts](https://github.com/ecomfe/echarts)
- 
[**chartist-js** - Simple responsive charts](https://gionkunz.github.io/chartist-js/)
- 
[**D3.js** - A JavaScript library for manipulating documents based on data using HTML, SVG and CSS](https://d3js.org/)
- 
[d3-flame-graph: A D3.js plugin that produces flame graphs from hierarchical data.](https://github.com/spiermar/d3-flame-graph)
- 
**[NVD3 - Re-usable charts for d3.js](http://nvd3.org/)**
- 
[**c3.js** - D3-based reusable chart library](http://c3js.org/)
- [**plotly.js** - A high-level, declarative charting library whitch is build on top of d3.js and stack.gl](https://plot.ly/javascript/)
- 
[**vega** - A *visualization grammar*, a declarative format for creating, saving, and sharing interactive visualization designs. Describe data visualizations in a JSON format, and generate interactive views using either HTML5 Canvas or SVG.](https://vega.github.io/vega/)
- 
[**Leaflet** - An open-source JavaScript libraryfor mobile-friendly interactive maps](http://leafletjs.com/)
- 
[**deck.gl** - A WebGL-powered framework for visual exploratory data analysis of large datasets.](https://uber.github.io/deck.gl/#/)
- 
[goiojs: A Declarative **3D** Globe Data Visualization Library built with Three.js](https://giojs.org/)
- 
[flowchartjs: Draws simple SVG flow chart diagrams from textual representation of the diagram](https://github.com/adrai/flowchart.js)
- 
😋 [rough: Create graphics with a hand-drawn, sketchy, appearance](https://github.com/pshihn/rough)
- 
[revogrid: Powerful data grid component built with StencilJS. Support Millions of cells and thousands columns easy and efficiently for fast data rendering. Easy to use.](https://github.com/revolist/revogrid)
- 
[mapbox-gl-js: Mapbox GL JS is a JavaScript library for interactive, customizable vector maps on the web. It takes map styles that conform to the Mapbox Style Specification, applies them to vector tiles that conform to the Mapbox Vector Tile Specification, and renders them using WebGL.Mapbox GL JS is part of the cross-platform Mapbox GL ecosystem, which also includes compatible native SDKs for applications on Android, iOS, macOS, Qt, and React Native. Mapbox provides building blocks to add location features like maps, search, and navigation into any experience you create. To get started with GL JS or any of our other building blocks, sign up for a Mapbox account.](https://github.com/mapbox/mapbox-gl-js)
- 
[textures.js: Textures.js is a JavaScript library for creating SVG patterns. Made on top of d3.js, it is designed for data visualization.](https://github.com/riccardoscalco/textures)
## File
### Upload
- 
[react-dropzone](https://github.com/react-dropzone/react-dropzone) - Simple React hook to create a HTML5-compliant drag'n'drop zone for files.
- [**dropzonejs** - an open source library that provides drag’n’drop file uploads with image previews](http://www.dropzonejs.com/)
- [**jQuery File Upload Plugin**](https://github.com/blueimp/jQuery-File-Upload)
- [Web Uploader - 一个以 HTML5 为主 FLASH 为辅, 各种老旧浏览器兼容性好(IE6+ Andorid 4+ IOS 6+)](https://github.com/fex-team/webuploader)
### Save
- [👍👍 FileSaver.js: An HTML5 saveAs() FileSaver implementation](https://github.com/eligrey/FileSaver.js)
## Loader
- [**css loader** - Simple loaders for your web applications using only one div and pure CSS](http://www.raphaelfabeni.com.br/css-loader/)
- [**Single Element CSS Spinners** - Each spinner consists of a single `div` with a class of `loader` and content text of "Loading...". The text is for screen readers and can be used as a fallback state for older browsers](https://github.com/lukehaas/css-loaders)
- [👍👍 nprogress - For slim progress bars like on YouTube, Medium](https://github.com/rstacruz/nprogress/)
- [https://loading.io/](https://loading.io/)
- [SpinKit: A collection of loading indicators animated with CSS](https://github.com/tobiasahlin/SpinKit) 
## Icon
- [icones.js](https://icones.js.org/)
- [iconify: Unified icons framework. One library, over 100,000 vector icons. Modern replacement for icon fonts. Fast, easy to use.](https://github.com/iconify)
- [**Font Awesome** - The iconic font and CSS toolkit](http://fontawesome.io/)
- [:thumbsup:**cssicon** - icon set made with pure css code, no dependencies, "grab and go" icons](http://cssicon.space/#/)
- [**ionicons** - The premium icon font for Ionic Framework](http://ionicons.com/)
- [**featcher** - a collection of **simply beautiful open source icons**. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability](https://github.com/colebemis/feather)
- [**Titanic** - A collection of animated icons + javascript library.](https://github.com/icons8/titanic)
## Notification
- [**toastr** - A Javascript library fo non-blocking notifications](https://github.com/CodeSeven/toastr)
- [Angular Toastr](https://github.com/Foxandxss/angular-toastr)
## Alert
- [**sweetalert** - A beautiful replacement for JavaScript's "alert"](https://github.com/t4t5/sweetalert)
## Authentication
- [**satellizer** - A token-based AngularJS Authentication](https://github.com/sahat/satellizer)
## Animations
- 👍💗 [motion - Tiny size. Huge performance.](https://motion.dev/): A new animation library, built on the Web Animations API for the smallest filesize and the fastest performance.
- [❗️ lottie for web: Render After Effects animations natively on Web, Android and iOS, and React Native](https://github.com/airbnb/lottie-web)
- [❗️ **Velocity.js** - Velocity is an animation engine with the same API as jQuery's *\$.animate()*. It works with and without jQuery. It's incredibly fast, and it features **color animation**, **transforms**, **loops**, **easings**, **SVG support**, and **scrolling**. It is the best of jQuery and CSS transitions combined](http://velocityjs.org/)
- [**animate.css** - A cross-browser library of CSS animations. As easy to use as an easy thing](https://github.com/daneden/animate.css)
- [:thumbsup::thumbsup::thumbsup:**AniJS** - A Library to Raise your Web Design without Coding](http://anijs.github.io/)
-  [**Hover.css** - A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.](https://github.com/IanLunn/Hover/)
-  [💗 💗 anime.js - JavaScript Animation Engine](https://github.com/juliangarnier/anime)
- [React-Motion: A spring that solves your animation problems.](https://github.com/chenglou/react-motion)
- [cssfx: A carefully crafted collection designed with a focus on fluidity, simplicity, and ease of use. Powered by **CSS with minimal markup**. Completely open source and MIT licensed.](https://cssfx.dev/)
- [countUp.js: Animates a numerical value by counting to it](https://github.com/inorganik/CountUp.js)
-  [**Odometer** - a Javascript and CSS library for smoothly transitioning numbers](https://github.com/HubSpot/odometer)
- [dynamics.js: Dynamics.js is a JavaScript library to create physics-based animations](https://github.com/michaelvillar/dynamics.js)
-  [**css-loaders** - A collection of loading spinners animated with CSS](https://github.com/lukehaas/css-loaders)
- [elevator.js: Finally, a **"back to top"** button that behaves like a real elevator, by adding elevator music to quietly soothe the awkwardness that can ensue when being smoothly scrolled to the top of the screen.](https://github.com/tholman/elevator.js)
-  [theatre](https://github.com/theatre-js/theatre) - heatre.js is an animation library for high-fidelity motion graphics. It is designed to help you express detailed animation, enabling you to create intricate movement, and convey nuance.
Theatre can be used both programmatically and visually.You can use Theatre.js to:
- Animate 3D objects made with THREE.js or other 3D libraries
- Animate HTML/SVG via React or other libraries
- Design micro-interactions
- Choreograph generative interactive art
- Or animate any other JS variable
-  [:thumbsup:**snabbt.js** - Fast animations with Javascript and CSS transforms](https://github.com/daniel-lundin/snabbt.js)
-  [SpriteJS is a cross-platform lightweight 2D render object model. Draw graphics on a canvas through simple object-oriented dom-like API. Vue & React/Preact supported.](https://github.com/spritejs/spritejs)
## Images
- [watermarkjs: Watermarking for the browser](https://github.com/brianium/watermarkjs)
- [**fancyBox** - A tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages](http://fancyapps.com/fancybox/)
- [mo · js is a javascript motion graphics library that is a fast, retina ready, modular and open source. In comparison to other libraries, it have a different syntax and code animation structure approach. The declarative API provides you a complete control over the animation, making it customizable with ease. The library provides built-in components to start animating from scratch like html, shape, swirl, burst and stagger, but also bring you tools to help craft your animation in a most natural way. Using mojs on your site will enhance the user experience, enrich your content visually and create delightful animations precisely.](https://github.com/mojs/mojs)
- [**Anime.js** (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API.It works with CSS properties, SVG, DOM attributes and JavaScript Objects.](https://animejs.com/)
- [**BigScreen** - A simple library for using the JavaScript Fullscreen API](https://brad.is/coding/BigScreen/)
- [:thumber **imagemagick** - Use ImageMagick to create, edit, compose, or convert bitmap images](https://www.imagemagick.org/script/index.php)
- [👏 **graphicsmagick** - is the swiss army knife of image processing. Comprised of 267K physical lines of source code in the base package (or 1,225K including 3rd party libraries) it provides a robust and efficient collection of tools and libraries which support reading, writing, and manipulating an image in over 88 major formats including important formats like DPX, GIF, JPEG, JPEG-2000, PNG, PDF, PNM, and TIFF.](http://www.graphicsmagick.org/)
- [**PhotoSwipe** - JavaScript image gallery for mobile and desktop](https://github.com/dimsemenov/photoswipe)
### Tools
- 
[webp2jpg-online: Online image format converter, jpeg, jpg, PNG, Gif, webp, svg, ICO, bmp files into Jpeg, PNG, webp, ICO, gif files. The conversion can be done locally without uploading the file Online picture format converter, can convert jpeg, jpg, png, gif, webp, svg, ico, bmp files into jpeg, png, webp, ico, gif files. No need to upload files, conversion can be done locally](https://github.com/renzhezhilu/webp2jpg-online)
- 
[plaiceholder](https://github.com/joe-bell/plaiceholder): "Plaiceholder" is a collection of Node.js helpers for creating low quality image placeholders, with several approaches to choose from: 1. CSS (recommended); 2. SVG; 3. Base64; 4. Blurehash; 5. Blurehash to CSS(Experimental 🧪)
### Sprite
- [sprintf-js is a complete open source JavaScript sprintf implementation for the browser and Node.js.](https://github.com/alexei/sprintf.js)
### Compression
- [**image-compressor** - A simple JavaScript image compressor. Uses the Browser's native canvas.toBlobhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob API to do the compression work. General use this to precompress a client image file before upload it.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob)
- [google-guetzli: Guetzli is a JPEG encoder that aims for excellent compression density at high visual quality. Guetzli-generated images are typically 20-30% smaller than images of equivalent quality generated by libjpeg. Guetzli generates only sequential (nonprogressive) JPEGs due to faster decompression speeds they offer.](https://github.com/google/guetzli)
### Lazyload
- [jquery_lazyload: Vanilla JavaScript plugin for lazyloading images](https://github.com/tuupola/jquery_lazyload)
- [verlok/lazyload: LazyLoad is a fast, lightweight and flexible script that speeds up your web application by loading images as they enter the viewport. It's written in plain "vanilla" JavaScript, uses IntersectionObserver, and supports responsive images. It's also SEO-friendly and it has some other notable features.](https://github.com/verlok/lazyload)
### Filters
- 👍👍 [Instagram.css - **Pure CSS Instagram filters**. You can add all these Instagram-like filters to your photos with using CSS only. Thanks to the CSSgram for inspiration.](https://github.com/picturepan2/instagram.css)
### Lightbox gallery
- [spotlight: Web's most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies.](https://github.com/nextapps-de/spotlight)
### Static Code Checking(Lint)
-  [commitlint](https://github.com/conventional-changelog/commitlint) - Lint commit messages:
🚓 Be a good commitizen
📦 Share configuration via npm
🤖 Tap into conventional-changelog
## Font
-  [LXGW WenKai / 霞鹜文楷](https://github.com/lxgw/LxgwWenKai): An open-source Chinese font derived from Fontworks' Klee One. 一款基于 FONTWORKS 的 Klee One 的开源中文字体。
-  [free-font](https://github.com/wordshub/free-font): 汉字字体制作是一个庞大的工程，不同于西文字库，汉字常用字库表就有 6763 个汉字，GBK标准中共有20902 个汉字，而新出版的 GB_18064，共有六万多个字符。而且汉字的字形相对较为复杂，一套中文字体的完成需要耗费大量专业人士的精力和时间，我们倡导大家使用正版字体，为中文字体的制作创造一个良性的环境。
然而目前国内字体的授权体系还不是那么完善，不同的厂商对不同的使用场景都不同的授权，而授权协议里不那么好理解的专业术语往往也使用户望而却步。对于哪些刚起步的创业公司或者个人来讲动辄几千的授权费用也是一笔不小的开支，这里收录了一些在网上收集整理的可以免费商用的中文字体供大家使用。
-  [俐方體11號／Cubic 11](https://github.com/ACh-K/Cubic-11) - 俐方體11號是基於 M⁺ gothic 12r 衍生的開源繁體中文點陣字型，可用於像素風格的遊戲以及美術當中。
## Datetime & Step
- [react-chrono](https://github.com/prabhuignoto/react-chrono) - A Flexible timeline component for React.
- 🚥 Render timelines in three different modes (Horizontal, Vertical, Vertical-Alternating).
- 📺 Auto play the timeline with the slideshow mode.
- 🖼️ Display Images & Videos in the timeline with ease.
- ⌨ Keyboard accessible.
- 🔧 Render custom content easily.
- ⚡ Data driven API.
- 🎨 Customize colors with ease.
- 🎭 Use custom icons in the timeline.
- 💪 Built with Typescript.
- 🎨 Styled with emotion.
## UI Kits
- [**Bootstrap** - May be the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web](http://getbootstrap.com/)
- [**Flat-UI** - Based on Bootstrap, a comfortable, responsive, and functional framework that simplifies the development of websites](https://github.com/designmodo/Flat-UI)
- [**gentelella - An awesome !! Free Bootstrap 3 Admin Template**](https://github.com/puikinsh/gentelella)
- [**Material Design**](https://material.google.com/)
- [**material-design-lite** - Material Design Components in HTML/CSS/JS](https://github.com/google/material-design-lite)
- [**Materialize** - A modern responsive front-end framework based on Material Design](http://materializecss.com/)
- [**material-ui** - React Components that Implement Google's Material Design](https://github.com/callemall/material-ui)
- [**bootstrap-material-design** - Material Design for Bootstrap is a theme for Bootstrap 3 which lets you use the new [Google Material Design]in your favorite front-end framework](https://mdbootstrap.com/)
- [**bulma** A **modern** CSS framework based on **Flexbox**](http://bulma.io/)
- [**Primer CSS** - Primer is the CSS toolkit that powers GitHub's front-end design. It's purposefully limited to common components to provide our developers with the most flexibility, and to keep GitHub uniquely *GitHubby*. It's built with SCSS and available via NPM, so it's easy to include all or part of it within your own project](https://github.com/primer/primer-css)
- [**Semantic-UI** - A UI component framework based around useful principles from natural language.](https://github.com/semantic-org/semantic-ui/)
### Vue
- [Muse-UI: Material Design UI library for Vuejs 2.0](https://muse-ui.org)
- [buefy: Lightweight UI components for Vue.js based on Bulma](https://github.com/buefy/buefy)
- [vux: Mobile UI Components based on Vue & WeUI](https://github.com/airyland/vux)
- [vuesax: New Framework Components for Vue.js 2](https://github.com/lusaxweb/vuesax)
- [mint-ui: Mobile UI elements for Vue.js by Eleme](https://github.com/ElemeFE/mint-ui)
- [AT-UI: A fresh and flat UI-Kit specially for desktop application, made with ♥ by Vue.js 2.0](https://github.com/at-ui/at-ui)
- [NutUI 2(JingDong): A light mobile Toolkit based on Vue](https://github.com/jdf2e/nutui)
- [element-plus: Vue 3.0 Composition API; Written in TypeScript](https://github.com/element-plus/element-plus) 
### React
-  [chakra-ui](https://github.com/chakra-ui/chakra-ui): Chakra UI provides a set of accessible, reusable, and composable React components that make it super easy to create websites and apps.
-  [office-ui-fabric-react: React components for building experiences for Office and Office 365.](https://github.com/OfficeDev/office-ui-fabric-react)
-  [evergreen: Evergreen React UI Framework by Segment](https://github.com/segmentio/evergreen)
### Out-of-box UI solution
- [ANT DESIGN PRO: An out-of-box UI solution for enterprise applications as a React boilerplate.](https://pro.ant.design/)
### WeChat
- [MinUI: MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库，适用场景广，覆盖小程序原生框架，各种小程序组件主流框架等，并且提供了专门的命令行工具](https://github.com/meili/minui)
- [wxapp-market: 小程序营销组件 大转盘 刮刮乐 老虎机 水果机 九宫格翻纸牌 摇一摇 手势解锁](https://github.com/o2team/wxapp-market)
### Others
- [SUI Mobile 是阿里巴巴国际 UED 前端团队出品的移动端 UI 库](https://github.com/sdc-alibaba/SUI-Mobile)
## Input
- [Cleave.js has a simple purpose: to help you format input text content automatically.](https://github.com/nosir/cleave.js/)
## Modal
- [**animatedModal.js** :strong:Beautiful! - A jQuery plugin to create a fullscreen modal with CSS3 transitions](http://joaopereirawd.github.io/animatedModal.js/)
- [**vex** - A modern dialog library which is highly configurable and easy to style](https://github.com/hubspot/vex)
## Popper
- [**webui-popover** - A lightWeight popover plugin with jquery, enchance the popover plugin of bootstrap with some awesome new features. It works well with bootstrap, but bootstrap is not necessary!](https://github.com/sandywalker/webui-popover)
- [**popper.js** - A kickass library to manage your poppers](https://github.com/FezVrasta/popper.js)
## Drag and Drop
-  [swapy](https://github.com/TahaSh/swapy) - A framework-agnostic tool that converts any layout into a drag-to-swap one with just a few lines of code
-  [vue-draggable-plus](https://github.com/Alfred-Skyblue/vue-draggable-plus) - Drag and drop sorting module, support Vue>=v3 or Vue>=2.7
- [**Dragula** - Browser support includes every sane browser and **IE7+**. Framework support includes vanilla JavaScript, Angular, and React](https://github.com/bevacqua/dragula)
- [Vue.Draggable: Vue component allowing drag-and-drop sorting in sync with View-Model. Based on Sortable.js](https://github.com/SortableJS/Vue.Draggable)
- [Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery required. Supports Meteor, AngularJS, React, Polymer, Vue, Knockout and any CSS library, e.g. Bootstrap.](https://github.com/SortableJS/Sortable)
- [✨🌟 react-beautiful-dnd: Beautiful and accessible drag and drop for lists with React](https://github.com/atlassian/react-beautiful-dnd)
- [VvvebJs: Drag and drop website builder javascript library. http://www.vvveb.com/vvvebjs/editor.html](https://github.com/givanz/VvvebJs)
### Flip
- [react-flip-move: Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.](https://github.com/joshwcomeau/react-flip-move) 
## Menus
- [**Snap.js** - A Library for creating beautiful mobile shelfs in Javascript (Facebook and Path style side menus)](https://github.com/jakiestfu/Snap.js/)
## Editor
- [Backlight](https://backlight.dev/) — with collaboration between developers and designers at heart, Backlight is a very complete coding platform where teams build, document, publish, scale and maintain Design Systems.
- [WebComponents.dev](https://webcomponents.dev/) — in-browser IDE to code web components in isolation with 58 templates available, supporting stories and tests.
-  [CodeMirror](https://github.com/codemirror/codemirror): CodeMirror is a versatile text editor implemented in JavaScript for the browser. It is specialized for editing code, and comes with over 100 language modes and various addons that implement more advanced editing functionality. Every language comes with fully-featured code and syntax highlighting to help with reading and editing complex code. (语雀早期方案)
- 👍👍👍👍👍 [Editor.js Next generation block styled editor. Free. Use for pleasure.](https://editorjs.io/)
- [**Ace** - A standalone code editor written in JavaScript](https://github.com/ajaxorg/ace)
- [**draft.js** - A framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences](https://facebook.github.io/draft-js/)
- [**pell** - pell is the simplest and smallest WYSIWYG text editor for web, with no dependencies](https://github.com/jaredreich/pell)
- [tinymce: The world's most popular JavaScript library for rich text editing. Available for React, Vue and Angular](https://github.com/tinymce/tinymce)
- 👍✨🌟💗[Microsoft/monaco-editor: A browser based code editor which powers **VS Code**](https://github.com/Microsoft/monaco-editor)
- [ckeditor: Smart **WYSIWYG** HTML editor](https://ckeditor.com/)
- [Quill: Your powerful rich text editor.](https://quilljs.com/)
- [react-quill](https://www.npmjs.com/package/react-quill)
-  [PrismJS](https://github.com/PrismJS/prism/) - Prism is a lightweight, robust, and elegant syntax highlighting library. It's a spin-off project from Dabblet.
-  [Rete.js: JavaScript(TypeScript) framework for visual programming. Rete is a modular framework for visual programming. Rete allows you to create node-based editor directly in the browser. You can define nodes and workers that allow users to create instructions for processing data in your editor without a single line of code.](https://github.com/retejs/rete)
### Notion-Like Editor
-  [Yoopta-Editor](https://github.com/Darginec05/Yoopta-Editor) - Open-source rich-text editor that's truly rich. Install and use it in your project. Easy to to use and fully customizable. Just relax, we're here to solve all your challenges with rich-text editors.
### Code Highlight
- [shiki](https://github.com/shikijs/shiki): a beautiful Syntax Highlighter. [Demo](https://shiki.matsu.io/).
### Markdown
-  ✨✨✨✨✨❤️ [stackedit: In-browser **Markdown** editor](https://github.com/benweet/stackedit)
- 💗  [markdown-it](https://github.com/markdown-it/markdown-it) - Markdown parser done right. Fast and easy to extend.
-  [SimpleMDE - Markdown Editor](https://github.com/sparksuite/simplemde-markdown-editor): A drop-in JavaScript textarea replacement for writing beautiful and understandable Markdown. The WYSIWYG-esque editor allows users who may be less experienced with Markdown to use familiar toolbar buttons and shortcuts. In addition, the syntax is rendered while editing to clearly show the expected result. Headings are larger, emphasized words are italicized, links are underlined, etc. SimpleMDE is one of the first editors to feature both built-in autosaving and spell checking.
-  [Vditor: Vditor 是一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染（类似 Typora）和分屏预览模式。它使用 TypeScript 实现，支持原生 JavaScript、Vue、React、Angular，提供桌面版。](https://github.com/Vanessa219/vditor)
## Highlight
- [**Highlight.js** - Highlight.js is a syntax highlighter written in JavaScript. It works in the browser as well as on the server. It works with pretty much any markup, doesn’t depend on any framework and has automatic language detection.](https://github.com/isagalaev/highlight.js)
- [**HR.js** - Tiny JavaScript plugin for highlighting and replacing text in the DOM](https://github.com/mburakerman/hrjs/)
## Clipboard
- [**clipboard.js** - A modern approach to copy text to clipboard. No Flash. No frameworks. Just 3kb gzipped](https://github.com/zenorocha/clipboard.js)
## Respond page
- [**Respond.js** - A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)](https://github.com/scottjehl/Respond)
## Touch
- [**AlloyFinger** - super tiny size multi-touch gestures library for the web](https://github.com/AlloyTeam/AlloyFinger)
## 3D
- [stack.gl](http://stack.gl/) is an open software ecosystem for WebGL, built on top of browserify and npm. Inspired by the Unix philosophy, stackgl modules "do one thing, and do it well". It is easy to use parts of stackgl à la carte, and because it is written from the bottom up, you can always drill down a layer. Unlike many 3D engines, stackgl emphasizes writing shader code, and provides powerful tools like glslify which bring the modularity and productivity of npm to GLSL!
-  [**three.js** - A JavaScript 3D Library which makes WebGL simpler.](https://threejs.org/)
-  [CesiumJS is a JavaScript library for creating 3D globes and 2D maps in a web browser without a plugin. It uses WebGL for hardware-accelerated graphics, and is cross-platform, cross-browser, and tuned for dynamic-data visualization.](https://github.com/CesiumGS/cesium):
-  [whs.js: Super-fast 3D framework for Web Applications 🥇 & Games 🎮. Based on Three.js](https://github.com/WhitestormJS/whs.js)
## Scroll & Parallax
- [**iScrolljs** - iScroll is a high performance, small footprint, dependency free, multi-platform javascript scroller](https://github.com/cubiq/iscroll/)
- [👍👍
ScrollReveal is a JavaScript library for easily animating elements as they enter/leave the viewport. It was designed to be robust and flexible, but hopefully you’ll be surprised below at how easy it is to pick up.](https://github.com/scrollreveal/scrollreveal)
-  [Parallax.js: Simple parallax scrolling effect inspired by Spotify.com implemented as a jQuery plugin](https://github.com/pixelcog/parallax.js)
- [rellax: Lightweight, vanilla javascript parallax library](https://github.com/dixonandmoe/rellax) 
## Search
- [:thumbsup::thumbsup::thumbsup:**List.js** - Tiny, invisible and simple, yet powerful and incredibly fast vanilla JavaScript that adds *search*, *sort*, *filters* and *flexibility* to plain HTML *lists*, *tables*, or anything.](http://listjs.com/)
## Slider|Swiper
- [iSlider: Smooth mobile touch slider for Mobile WebApp, HTML5 App, Hybrid App](https://github.com/BE-FE/iSlider)
## Color
-  [react-color](https://github.com/casesandberg/react-color): 1. 13 Different Pickers - Sketch, Photoshop, Chrome and many more; 2.Make Your Own - Use the building block components to make your own
-  [TinyColor](https://github.com/bgrins/TinyColor) - TinyColor is a small, fast library for color manipulation and conversion in JavaScript. It allows many forms of input, while providing color conversions and other color utility functions. It has no dependencies.
## Conversational
-  [ChatUI: The UI design language and React library for Conversational UI](https://github.com/alibaba/ChatUI)
## Tweening Engine
- [**tween.js** - JavaScript tweening engine for easy animations, incorporating optimised Robert Penner's equations](https://github.com/tweenjs/tween.js)
## QRCode
- [**qrcodejs** - just for making QRCode and no other depedencies. It supports Cross-browser with HTML5 Canvas and table tag in DOM](https://github.com/davidshimjs/qrcodejs)
- [**qrious** - Pure JavaScript library for QR code generation using canvas](https://github.com/neocotic/qrious)
## Emoji
- [**twemoji** - Twitter Emoji for Everyone](https://github.com/twitter/twemoji)
## New Feature Introduction
- [**intro.js** - A better way for new feature introduction and step-by-step users guide for your website and project](https://github.com/usablica/intro.js)
## Typography Stylesheet
- [**typo.css** - 一致化浏览器排版效果，构建最适合中文阅读的网页排版，包括桌面和移动平台](https://github.com/sofish/typo.css)
- [**中文文案排版指北**](https://github.com/sparanoid/chinese-copywriting-guidelines)
- [**yue.css** - A typography stylesheet for readable content](https://github.com/lepture/yue.css)
## Compatibility
- [**html5shiv** - This script is the defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer](https://github.com/aFarkas/html5shiv)
- [**es6 promise** - A polyfill for ES6-style Promises](https://github.com/stefanpenner/es6-promise)
## Print
- [**Gutenber** - Modern framework to print correctly](https://github.com/BafS/Gutenberg)
## PDF
- [React-PDF: Create PDF files using React](https://github.com/diegomura/react-pdf)
## Sheet
-  [LuckySheet: 🚀Luckysheet is an online spreadsheet like excel that is powerful, simple to configure, and completely open source.](https://github.com/mengshukeji/luckysheet)
## Fingerprinting
- [supercookie](https://github.com/jonasstrehle/supercookie) - Supercookie uses favicons to assign a unique identifier to website visitors.
Unlike traditional tracking methods, this ID can be stored almost persistently and cannot be easily cleared by the user.
The tracking method works even in the browser's incognito mode and is not cleared by flushing the cache, closing the browser or restarting the operating system, using a VPN or installing AdBlockers. 🍿 Live [demo](https://supercookie.me/).
## Math
-  [KaTeX](https://github.com/KaTeX/KaTeX) - KaTeX is a fast, easy-to-use JavaScript library for TeX math rendering on the web.
- Fast: KaTeX renders its math synchronously and doesn't need to reflow the page. See how it compares to a competitor in this speed test.
- Print quality: KaTeX's layout is based on Donald Knuth's TeX, the gold standard for math typesetting.
- Self contained: KaTeX has no dependencies and can easily be bundled with your website resources.
- Server side rendering: KaTeX produces the same output regardless of browser or environment, so you can pre-render expressions using Node.js and send them as plain HTML.
KaTeX is compatible with all major browsers, including Chrome, Safari, Firefox, Opera, Edge, and IE 11.
KaTeX supports much (but not all) of LaTeX and many LaTeX packages.
## Tools
-  [wmr](https://github.com/preactjs/wmr) - The tiny all-in-one development tool for modern web apps, in a single 2mb file with no dependencies.
All the features you'd expect and more, from development to production:
🔨 No entry points or pages to configure - just HTML files with ``
🦦 Safely import "packages" from npm without installation
📦 Smart bundling and caching for npm dependencies
↻ Hot reloading for modules, Preact components and CSS
⚡️ Lightning-fast JSX support that you can debug in the browser
💄 Import CSS files and CSS Modules (*.module.css)
🔩 Out-of-the-box support for TypeScript
📂 Static file serving with hot reloading of CSS and images
🗜 Highly optimized Rollup-based production output (wmr build)
📑 Crawls and pre-renders your app's pages to static HTML at build time
🏎 Built-in HTTP2 in dev and prod (wmr serve --http2)
🔧 Supports Rollup plugins, even in development where Rollup isn't used
- [**fountainjs** - One Yeoman generator for all your frontend projects](http://fountainjs.io/)
- [**Sizzy** - A tool for developing responsive websites crazy-fast](https://github.com/kitze/sizzy)
- [:pencil2:**jsfiddle** - online web developemnt editor](https://jsfiddle.net/)
- [:pencil2:**codepen.io** - CodePen is a **social development environment**for front-end designers and developers. 👋](http://codepen.io)
- [**nodemon** - Monitor for any changes in your node.js application and automatically restart the server - perfect for development](https://github.com/remy/nodemon)
- [:+1:**json-server** Mock Get a full fake REST API with zero coding in less than 30 seconds (seriously)](https://github.com/typicode/json-server)
- [:+1::+1::+1:**Emmet** - the essential toolkit for web-developers](https://emmet.io/)
- [**BrowserStack** - Instant access to all real mobile and desktop browsers. Say goodbye to your lab of devices and virtual machines.](https://www.browserstack.com/)
- [**LogRocket** - Records everything users do on your site, helping you reproduce bugs and fix issues faster.](https://logrocket.com/)
### Models & serializers
-  [quicktype](https://github.com/quicktype/quicktype): generates strongly-typed models and serializers from JSON, JSON Schema, TypeScript, and GraphQL queries, making it a breeze to work with JSON type-safely in many programming languages.
### TypeScript
-  [ts-migrate is a tool for helping migrate code to TypeScript. It takes a JavaScript, or a partial TypeScript, project in and gives a compiling TypeScript project out.](https://github.com/airbnb/ts-migrate)
### Debug
-  [vConsole: A lightweight, extendable front-end developer tool for mobile web page.](https://github.com/Tencent/vConsole)
### APIs & Mock
- 👍👍 ✨ [API Blueprint is simple and accessible to everybody involved in the API lifecycle. Its syntax is concise yet expressive. With API Blueprint you can quickly design and prototype APIs to be created or document and test already deployed mission-critical APIs.](https://apiblueprint.org/)
-  [SLATE: Slate helps you create beautiful, intelligent, responsive API documentation.(语雀 部分功能基于此开发)](https://github.com/slatedocs/slate)
### Deploy
- [Now — Global Serverless Deployments. Now makes serverless application deployment easy. Don’t spend time configuring the cloud. Just push your code.](https://zeit.co/now)
- [Vercel - Develop, Preview, Ship](https://vercel.com/): Vercel combines the best developer experience with an obsessive focus on end-user performance.
Our platform enables frontend teams to do their best work.
- [Heroku](https://www.heroku.com/): Heroku is a cloud platform as a service (PaaS) supporting several programming languages. One of the first cloud platforms, Heroku has been in development since June 2007, when it supported only the Ruby programming language, but now supports Java, Node.js, Scala, Clojure, Python, PHP, and Go. For this reason, Heroku is said to be a polyglot platform as it has features for a developer to build, run and scale applications in a similar manner across most languages. Heroku was acquired by Salesforce.com in 2010 for $212 million
### Monitor
- [signoz](https://github.com/SigNoz/signoz) - SigNoz is an open-source APM. It helps developers monitor their applications & troubleshoot problems, an open-source alternative to DataDog, NewRelic, etc. 🔥 🖥. 👉 Open source Application Performance Monitoring (**APM**) & Observability tool.
-  [openreplay - Session replay for developers](https://github.com/openreplay/openreplay): The most advanced open-source session replay to build delightful web apps.
### Docs
-  [facebook/docusaurus](https://github.com/facebook/docusaurus) - Docusaurus is a project for building, deploying, and maintaining open source project websites easily.
-  [docsify: A magical documentation site generator.](https://docsify.js.org)
-  [documentation.js The documentation system for modern JavaScript](https://github.com/documentationjs/documentation)
-  [Docute: Effortless documentation, done right.](https://github.com/leptosia/docute)
-  [ESDoc - Good Documentation for JavaScript](https://github.com/esdoc/esdoc)
### Images
- 👍👍 [Make images smaller using best-in-class codecs, right in the browser. by GoogleChormeLabs](https://squoosh.app/)
- [TinyPNG client for Mac](https://github.com/kyleduo/TinyPNG4Mac)
### Icons
- [iconmonstr: Discover 4486+ free icons in 310 collections](https://iconmonstr.com/)
-  [IconPark:IconPark gives access to more than 2000 high-quality icons, and introduces an interface for customizing your icons. Instead of using various SVG source files to achieve different themes, We implement a technology transforming attributes of a single SVG source file into multiple themes. Besides, we provide cross-platform components, including react-icons, vue-icons and svg-icons. So whether you are a designer or a developer, you can use them in your designs or your projects for free.](https://github.com/bytedance/IconPark)
-  [Tabler Icons: A set of over 1250 free MIT-licensed high-quality SVG icons for you to use in your web projects. Each icon is designed on a 24x24 grid and a 2px stroke.](https://github.com/tabler/tabler-icons)
### Project Manage
- <img src="https://img.shields.io/github/stars/lerna/lerna?style=social" height="16"> [Lerna: A tool for managing JavaScript projects with multiple packages.](https://github.com/lerna/lerna)
Splitting up large codebases into separate independently versioned packages is extremely useful for code sharing. However, making changes across many repositories is messy and difficult to track, and testing across repositories becomes complicated very quickly.
To solve these (and many other) problems, some projects will organize their codebases into multi-package repositories (sometimes called monorepos). Projects like Babel, React, Angular, Ember, Meteor, Jest, and many others develop all of their packages within a single repository.
Lerna is a tool that optimizes the workflow around managing multi-package repositories with git and npm.
Lerna can also reduce the time and space requirements for numerous copies of packages in development and build environments - normally a downside of dividing a project into many separate NPM packages. See the hoist documentation for details.
- <img src="https://img.shields.io/github/stars/pnpm/pnpm?style=social" height="16"> [pnpm: Fast, disk space efficient package manager](https://github.com/pnpm/pnpm)
- Fast. Up to 2x faster than the alternatives (see benchmark).
- Efficient. Files inside node_modules are linked from a single content-addressable storage.
- Great for monorepos.
- Strict. A package can access only dependencies that are specified in its package.json.
- Deterministic. Has a lockfile called pnpm-lock.yaml.
- Works everywhere. Supports Windows, Linux, and macOS.
- Battle-tested. Used in production by teams of all sizes since 2016.
**Source Control**:
- [simple-git-hooks](https://github.com/toplenboren/simple-git-hooks) - A tool that lets you easily manage git hooks
- Zero dependency
- Small configuration (1 object in package.json)
- Lightweight:
| Package | Unpacked size | With deps |
| ---------------------------- | ------------- | --------- |
| husky v4 `4.3.8` | `53.5 kB` | `~1 mB` |
| husky v6 `6.0.0` | `6.86 kB` | `6.86 kB` |
| pre-commit `1.2.2` | `~80 kB` | `~850 kB` |
| **simple-git-hooks** `2.2.0` | `10.1 kB` | `10.1 kB` |
### IDE
-  [CodeTour 🗺️](https://github.com/microsoft/codetour) - CodeTour is a Visual Studio Code extension, which allows you to record and play back guided walkthroughs of your codebases. It's like a table of contents, that can make it easier to onboard (or re-board!) to a new project/feature area, visualize bug reports, or understand the context of a code review/PR change. A "code tour" is simply a series of interactive steps, each of which are associated with a specific directory, or file/line, and include a description of the respective code. This allows developers to clone a repo, and then immediately start learning it, without needing to refer to a CONTRIBUTING.md file and/or rely on help from others. Tours can either be checked into a repo, to enable sharing with other contributors, or exported to a "tour file", which allows anyone to replay the same tour, without having to clone any code to do it!
## Mock
- [**Easy-Mock** - 一个可视化，并且能快速生成 **模拟数据** 的持久化服务。](https://www.easy-mock.com)
- [**Mock** - A simulation data generator](https://github.com/nuysoft/Mock)
-  [faker.js: generate massive amounts of fake data in the browser and node.js](https://github.com/Marak/faker.js)
## Test
- [**Macaca** - Solution for Automation Test with Ease](https://macacajs.com/)
- [**ava** - 🚀 Futuristic JavaScript test runner: Even though JavaScript is single-threaded, IO in Node.js can happen in parallel due to its async nature. AVA takes advantage of this and runs your tests concurrently, which is especially beneficial for IO heavy tests. In addition, test files are run in parallel as separate processes, giving you even better performance and an isolated environment for each test file. from Mocha to AVA in Pageres brought the test time down from 31 to 11 seconds. Having tests run concurrently forces you to write atomic tests, meaning tests don't depend on global state or the state of other tests, which is a great thing!](https://github.com/avajs/ava)
- [👍 **jest** - facebook Delightful JavaScript Testing](https://facebook.github.io/jest/)
- <img src="https://img.shields.io/github/stars/cucumber/cucumber-js?style=social" height="16"> [Cucumber.js(BBD): Cucumber is a tool for running automated tests written in plain language. Because they're written in plain language, they can be read by anyone on your team. Because they can be read by anyone, you can use them to help improve communication, collaboration and trust on your team.](https://github.com/cucumber/cucumber-js)
Cucumber.js is the JavaScript implementation of Cucumber and runs on the maintained Node.js versions.
-  [gremlins.js](https://github.com/marmelab/gremlins.js): A monkey testing library written in JavaScript, for Node.js and the browser. Use it to check the robustness of web applications by unleashing a horde of undisciplined gremlins.
-  [k6](https://github.com/grafana/k6): **A modern load testing tool for developers and testers in the DevOps era.** k6is **a modern load testing tool**, building on our years of experience in the load and performance testing industry. It provides a clean, approachable scripting API, local and cloud execution, and flexible configuration.
- 💗 [WebPageTest](https://www.webpagetest.org/): “WebPage Test measures web performance metrics in real browsers, is highly programmable, and could scale to test millions of sites per day.”
## CDN
- [**JSDELIVR** - A free super-fast CDNfor developers and webmasters](http://www.jsdelivr.com/)
## HTTP Client/Request
- [**axios** - Promise based HTTP client for the browser and node.js](https://github.com/mzabriskie/axios)
- [reqwest: All over again. Includes support for xmlHttpRequest, JSONP, CORS, and CommonJS Promises A. It is also isomorphic allowing you to require('reqwest') in Node.js through the peer dependency xhr2, albeit the original intent of this library is for the browser. For a more thorough solution for Node.js, see mikeal/request.](https://github.com/ded/reqwest)
## Compile & Pack
- [FLOW IS A STATIC TYPE CHECKER FOR JAVASCRIPT.](https://flow.org/)
- 👍 [Parcel: Blazing fast, zero configuration web application bundler](https://parceljs.org/)
- [Prettier is an opinionated code formatter](https://github.com/prettier/prettier)
- [Prepack: A tool for making JavaScript code run faster.](https://prepack.io/)
- <img src="https://img.shields.io/github/stars/evanw/esbuild?style=social" height="16"> [esbuild: An extremely fast JavaScript bundle](https://github.com/evanw/esbuild)
<img src="https://github.com/evanw/esbuild/blob/master/images/benchmark.svg">
-  [swc](https://github.com/swc-project/swc): is a super-fast typescript / javascript compiler written in rust. It's a library for rust and javascript at the same time. If you are using swc from rust, see rustdoc and for most users, your entrypoint for using library will be parser.
### Webpack
- [Happypack: Happiness in the form of faster webpack build times.](https://github.com/amireh/happypack)
- [webpack-bundle-analyzer: Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap](https://github.com/webpack-contrib/webpack-bundle-analyzer)
### Desktop Apps
-  [tauri](https://github.com/tauri-apps/tauri): Tauri is a framework for building tiny, blazing fast binaries for all major desktop platforms. Developers can integrate any front-end framework that compiles to HTML, JS and CSS for building their user interface. The backend of the application is a **rust-sourced** binary with an API that the front-end can interact with.
The user interface in Tauri apps currently leverages Cocoa/WebKit on macOS, gtk-webkit2 on Linux and MSHTML (IE10/11) or Webkit via Edge on Windows. Tauri uses (and contributes to) the MIT licensed project that you can find at webview and the related webview organization.
## Static Sites
- [Gatsby: Blazing fast modern site generator for React Go beyond static sites: build blogs, e-commerce sites, full-blown apps, and more with Gatsby.](https://github.com/gatsbyjs/gatsby)
- [react-static: A progressive static site generator for React.](https://github.com/nozzle/react-static)
## Audio & Video
-  [ffmpeg.wasm](https://github.com/ffmpegwasm/ffmpeg.wasm): is a pure Webassembly / Javascript port of FFmpeg. It enables video & audio record, convert and stream right inside browsers.
-  [JSMpeg – MPEG1 Video & MP2 Audio Decoder in JavaScript](https://github.com/phoboslab/jsmpeg): JSMpeg is a Video Player written in JavaScript. It consists of an MPEG-TS demuxer, MPEG1 video & MP2 audio decoders, WebGL & Canvas2D renderers and WebAudio sound output. JSMpeg can load static videos via Ajax and allows low latency streaming (~50ms) via WebSockets.
JSMpeg can decode 720p Video at 30fps on an iPhone 5S, works in any modern browser (Chrome, Firefox, Safari, Edge) and comes in at just 20kb gzipped.
- [RecordRTC](https://github.com/muaz-khan/RecordRTC/): WebRTC JavaScript Library for Audio+Video+Screen+Canvas (2D+3D animation) Recording
-  [SoundManager2:A JavaScript Sound API supporting MP3, MPEG4 and HTML5 audio + RTMP, providing reliable cross-browser/platform audio control in as little as 12 KB. BSD licensed.](https://github.com/scottschiller/soundmanager2/)
### Video Player
-  [**video.js** - An HTML5 & Flash video player](https://github.com/videojs/video.js)
-  [DPlayer is a lovely HTML5 danmaku video player to help people build video and danmaku easily.](https://github.com/DIYgod/DPlayer)
-  [**APlayer** - A beautiful html5 music player](https://github.com/DIYgod/APlayer)
-  [xgplayer](https://github.com/bytedance/xgplayer) is a web video and audio player library, designed with separate, detachable UI components. Since everything is componentized. the UI layer is very flexable.
xgplayer is bold in its functionality: it gets rid of video loading, buffering, and format support for video dependence. For mp4 that does not support streaming, you can use staged loading. This means load control, seamless switching without artifacts, and video bandwidth savings. It also integrates on-demand and live support for FLV, HLS, and dash.
-  [**Broadway** - A JavaScript H.264 decoder](https://github.com/mbebenita/Broadway)
-  [**jwplayer** - May be the world's most popular embeddable media player](https://github.com/jwplayer/jwplayer)
-  [**flowplayer** - The HTML5 video player for the web](https://github.com/flowplayer/flowplayer)
## Push Notifications
-  [Push](https://github.com/Nickersoft/push.js): is the fastest way to get up and running with Javascript desktop notifications. A fairly new addition to the official specification, the Notification API allows modern browsers such as Chrome, Safari, Firefox, and IE 9+ to push notifications to a user's desktop. Push acts as a cross-browser solution to this API, falling back to use older implementations if the user's browser does not support the new API.
## Universal
- [Nuxt: Universal Vue.js Applications](https://nuxtjs.org/)
## Store
- [localForage](https://github.com/localForage/localForage): localForage is a fast and simple storage library for JavaScript. localForage improves the offline experience of your web app by using asynchronous storage (IndexedDB or WebSQL) with a simple, localStorage-like API.
localForage uses localStorage in browsers with no IndexedDB or WebSQL support. See the wiki for detailed compatibility info.
- 👍👍👍 [Store.js: Cross-browser storage for all use cases, used across the web.](https://github.com/marcuswestin/store.js)
### Web DB
- [PouchDB is an open-source JavaScript database inspired by Apache CouchDB that is designed to run well within the browser.](https://pouchdb.com/)
- 👍👍 [rxdb: A **realtime** Database for the Web](https://github.com/pubkey/rxdb)
## Polyfill
- [FastClick is a simple, easy-to-use library for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers. The aim is to make your application feel less laggy and more responsive while avoiding any interference with your current logic.(Note: As of late 2015 most mobile browsers - notably Chrome and Safari - no longer have a 300ms touch delay, so fastclick offers no benefit on newer browsers, and risks introducing bugs into your application. Consider carefully whether you really need to use it.)](https://github.com/ftlabs/fastclick)
## Gestures
- [hammer.js: A javascript library for multi-touch gestures](https://github.com/hammerjs/hammer.js/)
## Screenshots
- 👍✨💗 [html2canvas: Screenshots with JavaScript](https://github.com/niklasvh/html2canvas/)
## AR & VR
-  [AR.js: Efficient Augmented Reality for the Web - 60fps on mobile!](https://github.com/jeromeetienne/AR.js/)
-  [MindAR](https://github.com/hiukim/mind-ar-js) - For location-based AR and marker-based AR, checkout AR.js <https://github.com/AR-js-org/AR.js>
MindAR is a lightweight library for web augmented reality. Highlighted features include:
⭐ Support Image tracking and Face tracking
⭐ Written in pure javascript, end-to-end from the underlying computer vision engine to frontend
⭐ Utilize gpu (through webgl) and web worker for performance
⭐ Developer friendly. Easy to setup. With AFRAME extension, you can get your app starts with only 10 lines of codes
## Regex
- [XRegExp provides augmented (and extensible) JavaScript regular expressions. You get modern syntax and flags beyond what browsers support natively. XRegExp is also a regex utility belt with tools to make your grepping and parsing easier, while freeing you from regex cross-browser inconsistencies and other annoyances.XRegExp supports all native ES6 regular expression syntax. It supports ES5+ browsers, and you can use it with Node.js or as a RequireJS module.](https://github.com/slevithan/xregexp)
## Figerprint
- [Fingerprintjs2: odern & flexible browser fingerprinting library](http://valve.github.io/fingerprintjs2/)
## Validation
- [v8n: JavaScript fluent validation library](https://github.com/imbrn/v8n)
## Boilerplate
- [react-firebase-starter: Boilerplate (seed) project for creating web apps with React.js, GraphQL.js and Relay](https://github.com/kriasoft/react-firebase-starter)
## Dropload
- [ximan/dropload: a javascript implementation of pull to refresh and up to loadmore](https://github.com/ximan/dropload)
## Game && Engine
- 👍👍👍 [phaser: Phaser is a fun, free and fast **2D** game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.](https://phaser.io/)
## Functional
- [ramda: Practical functional Javascript](https://github.com/ramda/ramda)
## Record and replay
- 🤔[rrweb is an open source web session replay library, which provides easy-to-use APIs to record user's interactions and replay it remotely.(Powerd by TypeScript)](https://www.rrweb.io/)
## Router
- [director: a tiny and isomorphic URL router for JavaScript](https://github.com/flatiron/director)
## Math
-  [mathjs](https://mathjs.org/): An extensive math library for JavaScript and Node.js
## WebAssembly
-  [emscripten: Emscripten compiles C and C++ to WebAssembly using LLVM and Binaryen. Emscripten output can run on the Web, in Node.js, and in wasm runtimes.](https://github.com/emscripten-core/emscripten)
Emscripten provides Web support for popular portable APIs such as OpenGL and SDL2, allowing complex graphical native applications to be ported, such as the Unity game engine and Google Earth. It can probably port your codebase, too!
While Emscripten mostly focuses on compiling C and C++ using Clang, it can be integrated with other LLVM-using compilers (for example, Rust has Emscripten integration, with the wasm32-unknown-emscripten and asmjs-unknown-emscripten targets).
-  [Wasmer: Wasmer enables super lightweight containers based on WebAssembly that can run anywhere: from Desktop to the Cloud and IoT devices, and also embedded in any programming language.](https://github.com/wasmerio/wasmer)
-  [WasmEdge](https://github.com/WasmEdge/WasmEdge) - WasmEdge (previously known as SSVM) is a lightweight, high-performance, and extensible WebAssembly runtime for ❗️**cloud native, edge, and decentralized applications**❗️. It is the fastest Wasm VM today. WasmEdge is an official sandbox project hosted by the CNCF. Its use cases include serverless apps, embedded functions, microservices, smart contracts, and IoT devices.
## Admin
-  [vue element admin: vue-element-admin is a production-ready front-end solution for admin interfaces. It is based on vue and uses the UI Toolkit element-ui.](https://github.com/PanJiaChen/vue-element-admin)
## No/Low Code
-  [grapesjs](https://github.com/artf/grapesjs): is a free and open source Web Builder Framework which helps building HTML templates, faster and easily, to be delivered in sites, newsletters or mobile apps. Mainly, GrapesJS was designed to be used inside a CMS to speed up the creation of dynamic templates.
-  [luban-h5](https://github.com/ly525/luban-h5): Mobile Page Builder&Generator with Drag&Drop
### CMS
-  [strapi](https://github.com/strapi/strapi): Strapi is a free and open-source headless CMS. It’s 100% JavaScript, fully customizable, and developer-first.
## Node
### Framework
-  [nest: A progressive Node.js framework for building efficient and scalable server-side applications.](https://github.com/nestjs/nest)
### Midddleware
-  [Prisma](https://www.prisma.io/): Next generation ORM for Node.js & TypeScript
-  [http-proxy-middleware: Node.js proxying made simple. Configure proxy middleware with ease for connect, express, browser-sync and many more.](https://github.com/chimurai/http-proxy-middleware)
Powered by the popular Nodejitsu [http-proxy](https://github.com/http-party/node-http-proxy)
### CLI
-  [pkg](https://github.com/vercel/pkg) - This command line interface enables you to package your Node.js project into an executable that can be run even on devices without Node.js installed.
-  [ncc](https://github.com/vercel/ncc) - Simple CLI for compiling a Node.js module into a single file, together with all its dependencies, gcc-style.
**Motivation**
- Publish minimal packages to npm
- Only ship relevant app code to serverless environments
- Don't waste time configuring bundlers
- Generally faster bootup time and less I/O overhead
- Compiled language-like experience (e.g.: go)
**Design goals**
- Zero configuration
- TypeScript built-in
- Only supports Node.js programs as input / output
- Support all Node.js patterns and npm modules
-  [cfonts](https://github.com/dominikwilkowski/cfonts) - This is a silly little command line tool for sexy fonts in the console. Give your cli some love
## Open Source Apps
-  [MarkText - Next generation markdown editor](https://github.com/marktext/marktext): A simple and elegant open-source markdown editor that focused on speed and usability. Available for Linux, macOS and Windows.
-  [Slidev](https://github.com/slidevjs/slidev): Presentation slides for developers 🧑💻👩💻👨💻
-  [jsonvisio.com](https://github.com/AykutSarac/jsonvisio.com) - JSON Visio is a tool that generates graph diagrams from JSON objects. These diagrams are much easier to navigate than the textual format and to make it even more convenient, the tool also allows you to search the nodes. Additionally, the generated diagrams can also be downloaded or clipboard as image.
You can use the web version at jsonvisio.com or also run it locally as Docker container.
-  [AFFiNE](https://github.com/toeverything/AFFiNE) - The Next-Gen Knowledge Base to Replace Notion & Miro.
-  [tldraw: a tiny little drawing app](https://github.com/tldraw/tldraw): Try it 👉 [online](https://www.tldraw.com/)
-  [Lepton is a lean code snippet manager powered by GitHub Gist.](https://github.com/hackjutsu/Lepton)
-  [twenty](https://github.com/twentyhq/twenty) - The #1 Open-Source CRM.
We’ve spent thousands of hours grappling with traditional CRMs like Pipedrive and Salesforce to align them with our business needs, only to end up frustrated — customizations are complex and the closed ecosystems of these platforms can feel restrictive.
We felt the need for a CRM platform that empowers rather than constrains. We believe the next great CRM will come from the open source community. And we’ve packed Twenty with powerful features to give you full control and help you run your business efficiently.
-  [Fakeflix](https://github.com/Th3Wall/Fakeflix): a Netflix Clone built with React, Redux.
- [](https://img.shields.io/github/stars/Dashibase/lotion?style=social) [lotion](https://github.com/Dashibase/lotion) - An open-source Notion UI built with Vue 3.
- [](https://img.shields.io/github/stars/wappalyzer/wappalyzer?style=social) [wappalyzer](https://github.com/wappalyzer/wappalyzer) - Wappalyzer identifies technologies on websites, such as CMS, web frameworks, ecommerce platforms, JavaScript libraries, analytics tools and [more](https://www.wappalyzer.com/technologies).
-  [microsoft/Clarity](https://github.com/microsoft/clarity): is an open-source behavioral analytics library written in typescript, with two key goals: privacy & performance.
It helps you understand how users view and use your website across all modern devices and browsers. Understanding how users navigate, interact and browse your website can provide new insights about your users. Empathizing with your users and seeing where features fail or succeed can help improve your product, grow revenue and improve user retention.
It's the same code that powers Microsoft's hosted behavioral analytics solution: <https://clarity.microsoft.com>. If you would like to see a demo of how it works, checkout live demo.
We encourage the community to join us in building the best behavioral analytics library, that puts privacy first and prioritizes performance.
-  [chalk.ist](https://github.com/Idered/chalk.ist) - Create beautiful images of your source code
## Landing page templates
-  [Pagen AI Landing Page Template](https://github.com/all-in-aigc/pagen-ai-landing-page-template) - It is built with Next.js and Shadcn UI.
## Commerce Apps
-  [yournextstore](https://github.com/yournextstore/yournextstore) - Modern Commerce with Next.js and Stripe as the backend.
## Contribution
Your contributions and suggestions are heartily welcome.
Thanks to all the people who already contributed!
<a href="https://github.com/nepaul/awesome-web-components/graphs/contributors">
<img src="https://contrib.rocks/image?repo=nepaul/awesome-web-components" />
</a>
## License
[](http://creativecommons.org/publicdomain/zero/1.0/)