A curated list of amazingly awesome frontend libraries, resources and shiny things.
This page lists names, links and short descriptions. The original list on GitHub is the source and belongs to its authors.
A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
Yeoman - a set of tools for automating development workflow
A workflow for multi-device websites.
Remove unnecessary files from node_modules
Client package management for building better web applications.
An open-source (MIT license) project supported by Getify Solutions. The core purpose of LABjs is to be an all-purpose, on-demand JavaScript loader, capable of loading any JavaScript resource, from any location, into any page, at any time.
Browserify plugin to load CSS Modules.
is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly.
Expressive, robust, feature-rich CSS language built for NodeJs.
CSS selectors complexity and performance analyzer.
(Site, cc) - Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
另一款前端模版框架，类似于 Bootstrap
Semantic is a UI component framework based around useful principles from natural language.
A set of small, responsive CSS modules that you can use in every web project.
A CSS Framework and a Set of React Components that Implement Google's Material Design.
Materialize, a CSS Framework based on Material Design.
最接近原生APP体验的高性能框架
Lightweight framework for building mobile web apps with HTML5.
Build modern apps using web components.
一个有手绘效果的网页组件库
一个简洁、好看的 CSS 框架，压缩后只有5.28KB
一款基于 Taro 框架开发的多端 UI 组件库
飞冰是一套基于 React 的中后台应用解决方案
(label: good first issue) A declarative, efficient, and flexible JavaScript library for building user interfaces.
A UI Design Language
A configurable Mobile UI
An out-of-box UI solution for enterprise applications
Angular is a development platform for building mobile and desktop web applications using Typescript/JavaScript and other languages.
数据驱动的组件化MVVM库(用于创建web交互界面和数据双向绑定)
An enterprise-class UI components based on Ant Design and Vue.
Resources for Vue.js JavaScript UI library.
A Vue.js 2.0 UI Toolkit for Web.
🗃️ Centralized State Management for Vue.js.
vuetify - vue2.0组件库
globe_with_meridians: Internationalization plugin for Vue.js (archived)
React 的 3kb 轻量化方案，拥有同样的 ES6 API
Fast and feature-rich JavaScript library. [Website]
Give your JS App some Backbone with Models, Views, Collections, and Events.
(label: Good-for-New-Contributors) A JavaScript framework for creating ambitious web applications.
Next-generation DOM manipulation.
用于现代浏览器的兼容 jQuery 的库
An elegant efficient express mvvm framework.
2012 UI framework (I was 20 years old, React didn't exist, inspired by Knockout)
Scriptable Headless WebKit. No longer maintained since 2 June 2018.
FRP (functional reactive programming) library for JavaScript.
使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用
使用JavaScript和React构建原生手机APP
Electron应用程序样板(基于React、Redux、React Router、Webpack、React Transform HMR用于应用程序快速开发)
Weex 是使用流行的 Web 开发体验来开发高性能原生应用的框架
Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面
WeUI for 小程序 为微信小程序量身设计
小程序组件化开发框架
轻量、可靠的小程序 UI 组件库 https://youzan.github.io/vant-weapp
基于 Vue.js 的小程序开发框架，从底层支持 Vue.js 语法和构建工具体系
基于规范的小程序 UI 组件库，自定义标签组件，简洁、易用、工具化
多端统一开发框架，支持用 React 的开发方式编写一次代码，生成能运行在微信小程序、H5、React Native 等的应用
使用 Vue.js 开发跨平台应用的前端框架 http://uniapp.dcloud.io
一套代码运行多端，一端所见即多端所见 https://CML.JS.org
小程序代码库，封装一些常用的功能模块和ui组件。
JavaScript's utility _ belt.
String manipulation extensions for Underscore.js JavaScript library.
An instance of Lodash with its methods wrapped to produce immutable, auto-curried, iteratee-first, data-last methods. +TS.
A utility library with a lazy engine under the hood that strives to do as little work as possible while being as flexible as possible.
Simple, lightweight, persistent two-way databinding.
A JavaScript library for binding keyboard combos without the pain of key codes and key combo conflicts.
Simple library for handling keyboard shortcuts in Javascript
jQuery Hotkeys lets you watch for keyboard events anywhere in your code supporting almost any key combination.
Cocos2d for Web Browsers. Built using JavaScript.
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.
Lightweight and fast 2D HTML5 rendering engine for cross-platform game development.
Desktop and Mobile HTML5 game framework. A fast, free and fun open source framework for Canvas and WebGL powered browser games.
Primer 是 Github 工具包，用于 Github 前端设计。
A professional front-end template for building fast, robust, and adaptable web apps or sites.
Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
A set of CSS rules that provide better cross-browser consistency in the default styling of HTML elements.
This script is the defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer.
自动为 CSS 添加 Vender Prefix，把你从不停添加浏览器前缀的噩梦中解放出来
Opt-in polyfill. A strict-spec subset of rsvp.js.
Awesome Media Queries in JavaScript
可伸缩布局方案
响应式布局指南
Grid based on CSS3 flexbox.
History.js gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. Including continued support for data, titles, replaceState. Supports jQuery, MooTools and Prototype. For HTML5 browsers this means that you can modify the URL directly, without…
Add page transitions with support for multiple containers / content slots (requires jQuery).
Micro client-side router inspired by the Express router (~1200 bytes).
JavaScript Routes.
Simple, lightweight routing for web browsers.
A tiny and isomorphic URL router for JavaScript.
Generate a slug from a string with transliteration.
A querystring parser and serializer with nesting support
Parse and stringify URL query strings
UAParser.js - The Essential Web Development Tool for User-Agent Detection. Detect Browsers, OS, Devices, Bots, Apps, AI Crawlers, and more. Run in Browser (client-side) or Node.js (server-side).
A platform detection library that works on nearly all JavaScript platforms.
Validate your forms, frontend, without writing a single line of JavaScript.
jQuery Validation Plugin.
Validate user input while keeping your HTML markup clean from JavaScript code.
Reduce misspelled email addresses in your web apps.
(👨💻 79 · 🔀 1.6K · 📦 18K · 📋 550 - 40% open · ⏱️ 25.11.2023):
一款漂亮的 Checkbox 插件
IOS 7 上 Switch 的 JS 实现, 支持 IE8 及以上浏览器
File Upload widget with multiple file selection, drag&drop support, progress bar, validation and preview images, audio and video for jQuery.
A JavaScript API for dealing with file uploads it supports features like multiple file selection, file type filtering, request chunking, client side image scaling and it uses different runtimes to achieve this such as HTML 5, Silverlight and Flash.
Dropzone is an easy to use drag'n'drop library. It supports image previews and shows nice progress bars.
A JavaScript library providing multiple simultaneous, stable, fault-tolerant and resumable/restartable file uploads via the HTML5 File API.
A JavaScript calendar that everything you need.
A refreshing JavaScript Datepicker — lightweight, no dependencies, modular CSS.
Airbnb 的日期选择器
Magically convert a simple text input into a cool tag list with this jQuery plugin.
自动补全插件
Add GitHub like mentions autocomplete to your application.
typeahead.js is a fast and fully-featured autocomplete library
百度开源可视化库
阿里巴巴桌面端商业统计图表解决方案
蚂蚁金服移动端可视化解决方案
Highcharts JS, the JavaScript charting framework
Simple HTML5 Charts using Canvas
another open source HTML5 Charts visualization.
A JavaScript visualization library for HTML and SVG.
a D3.js tutorial
一个功能强大的JavaScript图形库
数据图表可视化
一个轻量级的Canvas类库，MVC封装，数据驱动，提供类Dom事件模型，让canvas绘图大不同！
Interactive and Modern SVG Charts
MapboxGL 基于 WebGL 使用矢量切片和 Mapbox 样式渲染交互式地图
小程序生成图片库
Javascript SVG parser and renderer on Canvas
日期处理
日期处理
显示相对时间
Simple library (less then 2kb) used to format date with *** time ago statement.
Date Pollyfills for Node.js and Browser
The last carousel you'll ever need.
demo - docs - The most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
iScroll is a high performance, small footprint, dependency free, multi-platform JavaScript scroller.
JavaScript image gallery for mobile and desktop, modular, framework independent.
inspired by iscroll, and it supports more features and has a better scroll perfermance
camera: JavaScript is all like "You images done yet or what?"
Lazy-loading images with data-* attributes.
High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.
Defer images, iframes, and widgets with a standalone JavaScript lazyloader (~1kb).
An awesome, fully responsive jQuery slider plugin.
(👨💻 160 · 🔀 2.1K · 📦 410K · 📋 1.8K - 26% open · ⏱️ 11.04.2024):
图片裁切
Jcrop - The Javascript Image Cropping Engine
Content aware image cropping
Erasing image with mouse or touch movements.
Vue.js 的图片剪裁插件
React 的图片剪裁插件
React 的图片剪裁插件
HTML转图片(网页截图)
HTML转图片(实现纯JS网页截图)
HTML转图片
HTML转图片
多张图片合成一张图片的浏览器 JS 库，使用了 Canvas
Create and manage progress bar for every objects on the page.
Pace 是一个页面加载进度条工具
Very lightweight progress bars.
很漂亮的loading效果
A spinning activity indicator.
fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulate the page preloading effect.
一个为性能优化的实现加载动画效果的 CSS 框架
A collection of loading spinners animated with CSS.
跟踪滚动条并记录当前阅读所处节点
一个 Loading 图标的网站
Standalone and lightweight navigation menu for your mobile web apps.
Adds usability enhancements to existing multi-level drop-down menus.
Waypoints is a library that makes it easy to execute a function whenever you scroll to an element.
The JavaScript library for magical scroll interactions.
在页面上以一个元素为起始以动画的方式移动(ScrollTo)到另一个元素， 支持回退等
A lightweight script to animate scrolling to anchor links. (archived)
Finally, a "back to top" button that behaves like a real elevator.
pagePiling plugin by Alvaro Trigo. Create a scrolling pile of sections. http://alvarotrigo.com/pagePiling/
A simple and easy to use plugin to create fullscreen scrolling websites (also known as single page websites).
Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin.
the JavaScript Fullscreen API, which lets you bring the page or any element into fullscreen. Smoothens out the browser implementation differences, so you don't have to.
A simple and easy jQuery plugin for CSS animated page transitions.
Sticks an element to the top of the browser window while scrolling past it, always keeping it in view.
A javascript library for multi-touch gestures :// You can touch this
Framework agnostic drag and drop library, supports jQuery integration.
React 拖拽组件
A lightweight jQuery plugin for collapsing and expanding long blocks of text with "Read more" and "Close" links.
自定义的滚动条，让所有浏览器都显示一样的滚动条
Parallax Engine that reacts to the orientation of a smart device.
jQuery plugin for creating interactive parallax effect.
Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop. No jQuery.
A syntax highlighter written in JavaScript supporting more than 130 languages (including AutoHotkey).
Ace (Ajax.org Cloud9 Editor).
In-browser code editor.
Lightweight, robust, elegant syntax highlighting.
IconPark gives access to more than 1,400 high-quality icons, and introduces an interface for customizing your icons. (Website)
提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用 CSS 的样式
PNG and SVG icons for popular brands
所有国家国旗的 icon 库
全新的动画格式, 是一种同时兼容 iOS / Android / Flutter / Web 多个平台的动画格式
A cross-browser library of CSS animations. As easy to use as an easy thing.
Super-smooth CSS3 transformations and transitions for jQuery.
JavaScript animation engine.
Reveal CSS animation as you scroll down a page.
CSS3 backed JavaScript animation framework.
A Performant Transitions and Animations Library.
CSS classes to shake your DOM.
CSS3 Animations with special effects.
A collection of loading indicators animated with CSS.
Accelerated JavaScript animation.
Create beautiful CSS3 powered animations in no time.
使元素以非常酷帅的方式进入画布 (Viewpoint)，看 Demo
A collection of CSS List scroll effects bind to dom through javascript.
A collection of CSS3 animation snippets.
Smoothly transitions numbers with ease.
A collection of CSS3 powered hover effects.
Pure CSS Image Hover Effect Library
Pan, swipe, tap, doubletap, longpress, and pinch / rotate. My personal favorite. .
Cross domain local storage, with permissions.
Offline storage, improved. Wraps IndexedDB, WebSQL, or localStorage using a simple but powerful API.
Javascript db inspired by Apache CouchDB to run well within the browser.
The missing JavaScript smart persistent layer.
javascript embeddable / in-memory database
Add page transitions with event hooks and cache support. Has adapters to bind to native navigation controls on iOS and Android.
The fastest + concise javascript template engine for nodejs and browsers. Partials, custom delimiters and more.
Minimal templating with {{mustaches}} in JavaScript.
轻巧，功能强大且高度可扩展的模板引擎。
Node.js 的前端模板引擎, 使用 <%= %> 直接在 HTML中嵌入，简单易学
轻量级 JavaScript 模板引擎。
Tempo 是一个简单，直观的 JavaScript 渲染引擎，使您能够以纯 HTML 格式制作数据模板。
A compiler for the Mustache templating language.
Asynchronous Javascript templating for the browser and server
JavaScript Alert/Notification System
A beautiful replacement for JavaScript's alert.
Growl-style alerts and messages for your app.
JavaScript notifications for Bootstrap, jQuery UI, and the Web Notifications Draft.
A modern dialog library which is highly configurable and easy to style.
A tooltip library in CSS for your lovely websites.
Pretty powerful tooltips.
A jQuery tooltip plugin.
A better way for new feature introduction and step-by-step users guide for your website and project.
A tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages.
A light-weight, customizable lightbox plugin for jQuery.
JavaScript Data Grid / Data Table with a Spreadsheet Look & Feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡
A grid control especially designed for bootstrap.
PDF Reader in JavaScript.
JavaScript PDF generation.
simple but powerful library for building data applications in pure Javascript and HTML.
A funner, semantic, HTML5+JSON, interactive table plugin. (jQuery)
Tiny vanilla JS plugin to display large data sets easily.
生成Excel文件并下载
JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkboxes, drag'n'drop, and lazy loading
browser asynchronous http requests
更 NB 的 Ajax 请求库，号称比 jQuery 更好用，前后端通用
基于 Promise 的 HTTP 客户端（也可以在浏览器中工作）。
A simple JSONP implementation
Isomorphic WHATWG Fetch API, for Node & Browserify
HTML5 & Flash video player
HLS, DASH, and future HTTP streaming protocols library for video.js
JavaScript HLS client using Media Source Extension
奇舞团开源的 h5 播放器，它支持 mp4、m3u8、flv 等多种格式 http://chimee.org/
PayPal 开源的 HTML5 视频播放器
开源的Web视频播放器
A simple HTML5, YouTube and Vimeo player
Winamp 2 reimplemented for the browser
HTML5 <video> and <audio> player
适用于 Vue 的 video.js 播放器组件
HTML5 Audio & Video for jQuery
A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
The jQuery Plugin for Big Background Video
A simple library for using the JavaScript Full Screen API
视频背景组件
A Javascript HTML5 Audio library
HTML5 or player with Flash and Silverlight shims that mimics the HTML5 MediaElement API, enabling a consistent UI in all browsers. http://www.mediaelementjs.com/
CSS button library built using Sass and Compass.
一个 React 组件，按钮点击后会像粒子状消解
基于mobiledoc数据格式开发所见即所得的 (WYSIWYG) 编辑器
简单快速的富文本编辑器
一个有情怀的编辑器
A JavaScript library for platform independent 'WYSIWYG' or rich text editing.
The open source embeddable online markdown editor (component).
In-browser Markdown editor
Advanced, clean and smooth, Redactor Rich Text Editor offers an excellent immersive user experience
富文本编辑器
一个完全可定制的富文本编辑器
基于 ueditor的更现代化的富文本编辑器，支持HTTPS
In-browser semantic rich text editing
Facebook开源的可扩展的文本编辑器框架
List of colour names in CSS.
A simple jQuery plugin to extract the dominant color of an image and apply it to the background of its parent element.
主题色提取
Tabs for todays web
The ZeroClipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie and a JavaScript interface. (archived)
scissors: Modern copy to clipboard. No Flash. Just 3kb gzipped :clipboard:
Web typography at its finest: font-size and line-height based on element width.
A jQuery plugin for inflating web type.
A JavaScript Typing Animation Library.
文件保存的 JavaScript 库
A framework for easily creating beautiful presentations using HTML.
DIY Presentation Micro-Framework
markdown based presentation on your browser
(👨💻 240 · 🔀 620 · 📦 280K · 📋 1.4K - 1% open · ⏱️ 20.05.2024):
Give your JavaScript the ability to speak many languages.
Removing of 300ms delay in old browsers.
high speed zlib port to javascript, works in browser & node.js
JavaScript library of crypto standards.
生成UUID类库
用RSA加密实现Web数据加密传输
一个简单的人类可读的随机 ID 生成库
评估密码强度的 JS 库，强度越强，密码越不容易破解
A tiny JavaScript debugging utility modelled after Node.js core's debugging technique. Works in Node.js and web browsers
A simple, lightweight jQuery plugin for reading, writing and deleting cookies.
A simple, lightweight JavaScript API for handling cookies, client-side.
Preloads pages on hover so in-site links feel instant.
Async utilities for node and the browser.
JQ二维码独立生成（不依赖于外部服务）
Cross-browser QRCode generator for javascript
Chinese Interface
MixItUp - A Filter & Sort Plugin.
Guide your users through a tour of your app.
Monkey testing library for web apps and Node.js
Make use of your favicon with badges, images or videos
A javascript text differencing implementation.
类 Github 的贡献日历网格
根据白名单过滤 HTML(防止 XSS 攻击)
HTML过滤 防止 XSS 攻击
校验json-schema数据格式
将babel引入到Gulp, Grunt, npm run等构建过程
Traceur is a JavaScript.next-to-JavaScript-of-today compiler
阮一峰老师的开源的JavaScript语言教程
Bullet point overview including in-depth articles.
(MIT) - ECMAScript 6, also known as ECMAScript 2015, is the latest version of the ECMAScript standard
JavaScript Patterns
A variety of jQuery plugin patterns for jump starting your plugin development.
Classical and JavaScript specific design patterns.
JS Bin is a webapp specifically designed to help JavaScript and CSS folk test snippets of code.
Collaborative JavaScript Debugging App
Embeddable front-end code examples.
JavaScript unpacking and deobfuscation.
Resumes generated using GitHub.
is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux. It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and…
(Free,Cross-platform,Plugins): electron based editor with numerous plugins and easy modifications. Cross-platform with settings and plugins synchronized through the sync-settings plugin.
is a cross-platform text and source code editor, with a Python application programming interface. Its functionality is extendable with plugins. Most of the extending packages have free-software licenses and are community-built and maintained. — Wikipedia
用于检查css代码冗余
基于 Node.js 的前端代码检查工具
模拟 API
基于REST的API测试/文档
curl for GraphQL with autocomplete, subscriptions and GraphiQL.
Free online REST service that you can use whenever you need some fake data.
模拟 API
Flat file database built on lodash API. (Javascript)
一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试
YApi 是一个可本地部署的、打通前后端及QA的、可视化的接口管理平台
Web接口管理工具，开源免费，接口自动化，MOCK数据自动生成，自动化测试，企业级管理
Optimize your images and will be available for download for 12 hours.
The SVG Font Machine
矢量图 svg 图标下载
Node.js 最佳实践
Some HTML, CSS and JS best practices.
Frontend development resources I collected over time.
A learning guide for JavaScript programmers. http://wwsun.github.io 中文
Resources for Vue.js JavaScript UI library.
(MIT) - A mostly reasonable approach to JavaScript
Opinionated, no-configuration style guide, style checker, and formatter
Software engineering principles, from Robert C. Martin's book Clean Code, adapted for JavaScript.
百度前端团队代码规范
The perfect Front-End Checklist for modern websites and meticulous developers http://frontendchecklist.com
Useful ES6 snippets that you can understand in 30 seconds or less.
JavaScript工程项目的一系列最佳实践策略
React 模式
Progressive Web Apps (PWA) 中文版
JavaScript 算法与数据结构
Vue技术内幕
CSS 专业技巧
前端性能优化清单
每个 JavaScript 工程师都应懂的33个概念 「翻译」
Airbnb 前端开源项目
各大公司的 UI 组件库的 Storybook 展示 https://storybook.js.org/examples/
正则表达式学习
包括前端开发实践、学习前端开发、前端开发工具
可视化引擎 D3 的教程
HTML5 Canvas 教程
Node.js 最佳实践
vuejs/awesome-vue
🎉 A curated list of awesome things related to Vue.js
VoltAgent/awesome-design-md
A collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI.
PatrickJS/awesome-angular
:page_facing_up: A curated list of awesome Angular resources
AdrienTorris/awesome-blazor
Resources for Blazor, a .NET web framework using C#/Razor and HTML that runs in the browser with WebAssembly.
AllThingsSmitty/must-watch-css
CSS talks you have to see covering CSS Grid, flexbox, custom variables, performance, frameworks, tooling, and more! 📺
jondot/awesome-react-native
Awesome React Native components, news, tools, and learning material!