Web OpenSource List

  • finder #Project#: CSS Selector Generator, Generates shortest selectors.

  • CSS Blocks #Project#: CSS Blocks is an ergonomic, component-oriented CSS authoring system that compiles to high-performance stylesheets.


Dev Tools


  • Rekit: IDE and toolkit for building scalable web applications with React, Redux and React-router

  • Keretes #Project#: A Programming Environment for TypeScript & Node.js built on top of VS Code.




  • Webpack #Project#: Webpack is a static module bundler for modern JavaScript applications.

  • 2017-Parcel #Project#: Blazing fast, zero configuration web application bundler.

  • browserify #Project#: browserify will recursively analyze all the require() calls in your app in order to build a bundle you can serve up to the browser in a single tag.

  • 2017-Backpack #Project#: Backpack is minimalistic build system for Node.js. Inspired by Facebook's create-react-app, Zeit's Next.js, and Remy's Nodemon, Backpack lets you create modern Node.js apps and services with zero configuration.

  • 2017-Microbundle #Project#: A zero-configuration bundler for tiny modules, powered by Rollup.

  • FuseBox #Project: FuseBox is a bundler/module loader that combines the power of webpack, JSPM and SystemJS.

  • 2019-Snowpack #Project#: Build web applications with less tooling and 10x faster iteration. No bundler required.

  • 2020-Rome #Project#: Rome is an experimental JavaScript toolchain. It includes a compiler, linter, formatter, bundler, testing framework and more. It aims to be a comprehensive tool for anything related to the processing of JavaScript source code.


  • Svelte #Project#: Svelte is 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.

  • Stimulus #Project#: A modest JavaScript framework for the HTML you already have.

  • 2019-Neo #Project#: This is a new paradigm. If you want to enter a new era of making better Web Based User Interfaces, the following concepts will be addictive.

State Management

  • Recoil #Project#: Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

Mini Program

  • wepy #Project#: 让小程序支持组件化开发的框架,一个最受欢迎的小程序框架。

  • 2018-mpx #Project#: A enhanced miniprogram framework with data reactivity and deep optimizition.

  • Taro #Project#: 多端统一开发框架,支持用 React 的开发方式编写一次代码,生成能运行在微信小程序/百度智能小程序/支付宝小程序、H5、React Native 等的应用。

  • Remax #Project#: Remax 将 React 运行在小程序环境中,让你可以使用完整的 React 进行开发。


Pattern Libraries


  • 2019-D2Admin #Project#: D2Admin is a fully open source and free enterprise back-end product front-end integration solution, using the latest front-end technology stack, has prepared most of the project preparations, and with a lot of sample code to help the management system agile development.

Web APIs

  • Pressure.js #Project#: Pressure is a JavaScript library for handling Force Touch, 3D Touch, and Pointer Pressure on the web.

Virtual DOM

  • Snabbdom #Project#: A virtual DOM library with focus on simplicity, modularity, powerful features and performance.

  • asm-dom #Project#: A minimal WebAssembly virtual DOM to build C++ SPA (Single page applications)

Web Worker

  • Workly #Project#: A really simple way to move a stand-alone function/class to a worker thread.

  • workerize #Project#: Moves a module into a Web Worker, automatically reflecting exported functions as asynchronous proxies.

  • workerize-loader #Project#: Automatically move a module into a Web Worker (Webpack loader).

  • greenlet #Project#: Move an async function into its own thread, a simplified single-function version of workerize.

  • 2017-Comlink #Project#: Comlink’s goal is to make WebWorkers enjoyable. Comlink removes the mental barrier of thinking about postMessage and hides the fact that you are working with workers.


  • 2014-axios #Project#: Promise based HTTP client for the browser and node.js.

  • 2014-request #Project: Request is designed to be the simplest way possible to make http calls. It supports HTTPS and follows redirects by default.



  • 2013-localForage #Project#: Offline storage, improved. Wraps IndexedDB, WebSQL, or localStorage using a simple but powerful API.

  • cookies.js #Project#: Tastier cookies, local, session, and db storage in a tiny package. Includes subscribe() events for changes.


  • 2013-Pouchdb #Project#: PouchDB was created to help web developers build applications that work as well offline as they do online.

  • 2014-Lovefield #Project#: Relational Database With Schema

  • LokiJS #Project#: LokiJS is a document oriented database written in javascript, Its purpose is to store javascript objects as documents in a nosql fashion and retrieve them with a similar mechanism.

  • 2017-Lowdb #Project#: Small JSON database for Node, Electron and the browser. Powered by Lodash.

  • 2017-RxDB #Project#: The reactive, serverless, client-side, offline-first database for your next javascript-application.

  • 2017-Dexie.js #Project#: Dexie.js is a wrapper library for indexedDB - the standard database in the browser.

  • 2018-turtleDB #Project#: turtleDB is a JavaScript framework and in-browser database for developers to build offline-first, collaborative web applications. It provides a developer-friendly API to access an in-browser database built on top of IndexedDB.

Media | 媒介资源

  • 2015-annyang #Project#: A tiny javascript SpeechRecognition library that lets your users control your site with voice commands.

  • 2015-SpeechKITT: A flexible GUI for Speech Recognition

Animation | 动画库

Animation Effect

  • Woah.css #Project#: Animations for eccentric developers.

  • Hover.css #Project#: A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on.

  • iHover #Project#: iHover is an impressive hover effects collection, powered by pure CSS3, no dependency, work well with Bootstrap 3!

  • cssfx #Project#: 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.

  • CssCo: Photographic filters made with CSS, inspired by VSCO and CSSgram.

Tween Animation | 补间动画

  • react-motion #Project#: A spring that solves your animation problems.

  • 2017-Popmotion #Project#: A functional JavaScript motion library.

  • react-move #Project#: React Move 🌀 Beautiful, data-driven animations for React.

  • popmotion #Project#: Simple animation libraries for delightful user interfaces.

  • 2017-animateplus #Project#: Animate Plus is a JavaScript animation library focusing on performance and authoring flexibility. It aims to deliver a steady 60 FPS and weighs less than 3 KB (minified and compressed), making it particularly well-suited for mobile

  • 2017-Ant Motion #Project#: 使用 Ant Motion 能够快速在 React 框架中使用动画;我们提供了单项,组合动画,以及整套解决方案。

Graphic Animation


  • Turn.js #Project#: Turn.js is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5.


  • ola #Project#: Smooth animation library for interpolating numbers.

Tuning | 性能调优



  • Lozad #Project#: lozad.js is a light-weight library to lazy load elements using JavaScript.

  • 2018-whatcss #Project#: WhatCSS.info: CSS StyleSheet Pageload Analyser/Optimizer 🤷

  • 2018-instant.page #Project#: Make your site’s pages instant in 1 minute and improve your conversion rate by 1%.

  • 2018-lazysizes #Project#: lazysizes is a fast (jank-free), SEO-friendly and self-initializing lazyloader for images (including responsive images picture/srcset), iframes, scripts/widgets and much more.


  • Jpegio #Project#: Convert any major image format into a highly optimized JPEG.



  • Manifoldjs: PWA Builder #Project#: PWA Builder will give you an easy way to provide the missing pieces of your PWA, and not weigh down your site with data you don’t need or use.

  • Offline-plugin for webpack #Project#: This plugin is intended to provide an offline experience for webpack projects. It uses ServiceWorker, and AppCache as a fallback under the hood. Simply include this plugin in your webpack.config, and the accompanying runtime in your client script, and your project will become offline ready by caching all (or some) of the webpack output assets. you can also turn to Easy Offline First Apps With Webpack's Offline Plugin for further information.

  • react-progressive-web-app #Project#: An opinionated React based repository which is optimized for Progressive Web App development.

  • RealFaviconGenerator: A great way to generate all the images, favicons, and associated files needed to display your app icon across different browsers.

  • Android Asset Studio - Launcher Icon Generator: Generate Android style icons.

  • pwmetrics #Project#: Progressive web metrics at your fingertipz

  • Workbox #Project#:Workbox 是来自 Google Chrome 团队的快速将现有应用转化为 Progressive Web Apps 的 JavaScript 库;Workbox 允许我们通过 Webpack 插件、Gulp 插件以及 npm 脚本的方式快速地为当前应用的资源创建对应加载 ServiceWorker。

Experience Tuning


  • dialog-polyfill.js #Project#: Polyfill for the HTML dialog element.

  • Polyfill.io #Project#: Get a bundle of polyfills which have been minified ready for production website use. This endpoint responds with a JavaScript file containing the polyfills which should be served to the requesting browser.


  • browsh #Project#: A fully interactive, realtime, and modern text-based browser rendered to TTYs and browsers


  • fex-ua-device #Project#: 由于在国内生产 PC 的厂家有限,大众用户使用的浏览器也主要是当前的一些主流浏览器。因此目前的 UA 解析库在对 OS、浏览器外壳、浏览器内核等的识别率都相当高。但是由于国内的移动设备的五花八门,对于移动设备的硬件信息是很难用一套通用的方法进行识别,因此 ua-device 诞生。


  • Remote Browser #Project#: A low-level browser automation framework built on top of the Web Extensions API standard.

  • Rendertron #Project#: Rendertron is a dockerized, headless Chrome rendering solution designed to render & serialise web pages on the fly.

  • Rendora #Project#: Rendora is a dynamic renderer to provide zero-configuration server-side rendering mainly to web crawlers in order to effortlessly improve SEO for websites.

  • headless-devtools #Project#: Lets you perform Chrome DevTools actions from code by leveraging Headless Chrome+Puppeteer.

  • 2020-Kasaya #Project#: A "WYSIWYG" scripting language and runtime for browser automation.

  • 2019-Playwright #Project#: Playwright is a Node library to automate the Chromium, WebKit and Firefox browsers with a single API. It enables cross-browser web automation that is ever-green, capable, reliable and fast.


Test Runner: 测试驱动器

  • Majestic #Project#: Majestic is an electron app that provides a UI for running tests with Jest.

E2E Test | 端到端测试

Acceptance Test | 接受度测试

  • CodeceptJS #Project#: CodeceptJS is a new testing framework for end-to-end testing with WebDriver (or others). It abstracts browser interaction to simple steps which is written from a user perspective.

  • Capybara #Project#: Capybara helps you test web applications by simulating how a real user would interact with your app. It is agnostic about the driver running your tests and comes with Rack::Test and Selenium support built in. WebKit is supported through an external gem.

Page Comparison | 界面比较

Test Utils: 测试工具

Cross Browser Test | 跨浏览器测试

  • Airtap #Project#: Airtap is an easy way to test your JavaScript in browsers, using a TAP-producing harness like tap or tape.