Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

awesome-frontend

前端开发资源大全中文版。An awesome front end develop packages and resources
https://github.com/huaize2020/awesome-frontend

Last synced: 4 days ago
JSON representation

  • Official

  • Repository

    • CSS

      • tailwindcss - A utility-first CSS framework for rapid UI development. ![](https://img.shields.io/github/stars/tailwindlabs/tailwindcss.svg?style=social&label=Star)
      • bulma - Modern CSS framework based on Flexbox. ![](https://img.shields.io/github/stars/jgthms/bulma.svg?style=social&label=Star)
      • animate.css - A cross-browser library of CSS animations. As easy to use as an easy thing. ![](https://img.shields.io/github/stars/animate-css/animate.css.svg?style=social&label=Star)
      • Hover.css - A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Available in CSS, Sass, and LESS. ![](https://img.shields.io/github/stars/IanLunn/Hover.svg?style=social&label=Star)
      • Loaders.css - Delightful, performance-focused pure css loading animations. ![](https://img.shields.io/github/stars/ConnorAtherton/loaders.css.svg?style=social&label=Star)
      • csshake - CSS classes to move your DOM! ![](https://img.shields.io/github/stars/ConnorAtherton/loaders.css.svg?style=social&label=Star)
    • Number

      • Numeral.js - A javascript library for formatting and manipulating numbers. ![](https://img.shields.io/github/stars/adamwdraper/Numeral-js.svg?style=social&label=Star)
      • bignumber.js - A JavaScript library for arbitrary-precision decimal and non-decimal arithmetic. ![](https://img.shields.io/github/stars/MikeMcl/bignumber.js.svg?style=social&label=Star)
      • decimal.js - An arbitrary-precision Decimal type for JavaScript. ![](https://img.shields.io/github/stars/MikeMcl/decimal.js.svg?style=social&label=Star)
      • big.js - A small, fast JavaScript library for arbitrary-precision decimal arithmetic. ![](https://img.shields.io/github/stars/MikeMcl/big.js.svg?style=social&label=Star)
      • round-to - Round a number to a specific number of decimal places: `1.234` → `1.2`. ![](https://img.shields.io/github/stars/sindresorhus/round-to.svg?style=social&label=Star)
      • unique-random - Generate random numbers that are consecutively unique. ![](https://img.shields.io/github/stars/sindresorhus/unique-random.svg?style=social&label=Star)
      • random-int - Generate a random integer. ![](https://img.shields.io/github/stars/sindresorhus/random-int.svg?style=social&label=Star)
      • random-float - Generate a random float. ![](https://img.shields.io/github/stars/sindresorhus/random-float.svg?style=social&label=Star)
    • Math

      • mathjs - An extensive math library. ![](https://img.shields.io/github/stars/josdejong/mathjs.svg?style=social&label=Star)
      • ndarray - Multidimensional arrays. ![](https://img.shields.io/github/stars/scijs/ndarray.svg?style=social&label=Star)
      • algebra - Algebraic structures. ![](https://img.shields.io/github/stars/fibo/algebra.svg?style=social&label=Star)
      • multimath - Core to create fast image math in WebAssembly and JS. ![](https://img.shields.io/github/stars/nodeca/multimath.svg?style=social&label=Star)
    • Date & Time

      • moment - Parse, validate, manipulate, and display dates in javascript. ![](https://img.shields.io/github/stars/moment/moment.svg?style=social&label=Star)
      • dayjs - Day.js 2KB immutable date-time library alternative to Moment.js with the same modern API. ![](https://img.shields.io/github/stars/iamkun/dayjs.svg?style=social&label=Star)
      • date-fns - Modern JavaScript date utility library. ![](https://img.shields.io/github/stars/date-fns/date-fns.svg?style=social&label=Star)
      • luxon - Library for working with dates and times. ![](https://img.shields.io/github/stars/moment/luxon.svg?style=social&label=Star)
      • timeago.js - 🕗 ⌛ timeago.js is a tiny(2.0 kb) library used to format date with `*** time ago` statement. ![](https://img.shields.io/github/stars/hustcc/timeago.js.svg?style=social&label=Star)
      • timeago-react - Simple and efficient react component to format date with `*** time ago` statement. eg: '3 hours ago'. ![](https://img.shields.io/github/stars/hustcc/timeago-react.svg?style=social&label=Star)
      • ms - Tiny millisecond conversion utility. ![](https://img.shields.io/github/stars/vercel/ms.svg?style=social&label=Star)
      • dateformat - A node.js package for Steven Levithan's excellent dateFormat() function. ![](https://img.shields.io/github/stars/felixge/node-dateformat.svg?style=social&label=Star)
      • pretty-ms - Convert milliseconds to a human readable string: `1337000000` → `15d 11h 23m 20s` ![](https://img.shields.io/github/stars/sindresorhus/pretty-ms.svg?style=social&label=Star)
      • strftime - Strftime for JavaScript. ![](https://img.shields.io/github/stars/samsonjs/strftime.svg?style=social&label=Star)
      • date-utils - Date Pollyfills for Node.js and Browser. ![](https://img.shields.io/github/stars/JerrySievert/date-utils.svg?style=social&label=Star)
    • JavaScript Framework

      • vue - Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. ![](https://img.shields.io/github/stars/vuejs/vue.svg?style=social&label=Star)
      • react - A declarative, efficient, and flexible JavaScript library for building user interfaces. ![](https://img.shields.io/github/stars/facebook/react.svg?style=social&label=Star) *(You might like [awesome-react](https://github.com/huaize2020/awesome-react))*
      • angular - The modern web developer’s platform. ![](https://img.shields.io/github/stars/angular/angular.svg?style=social&label=Star)
      • svelte - Svelte is a new way to build web applications, Cybernetically enhanced web apps. ![](https://img.shields.io/github/stars/sveltejs/svelte.svg?style=social&label=Star)
      • preact - Fast 3kB React alternative with the same modern API. Components & Virtual DOM. ![](https://img.shields.io/github/stars/preactjs/preact.svg?style=social&label=Star)
      • petite-vue - 5kb subset of Vue optimized for progressive enhancement. ![](https://img.shields.io/github/stars/vuejs/petite-vue.svg?style=social&label=Star)
    • Cross Platform/Multiple Platform

      • uni-app - uni-app is a unified front-end framework that uses Vue.js to develop small programs, H5, and App. ![](https://img.shields.io/github/stars/dcloudio/uni-app.svg?style=social&label=Star)
      • Taro - Taro is a cross-platform/cross-framework solution that supports users to develop WeChat/JD/Baidu/Alipay/ByteDance/QQ mini-programs and H5 applications with React/Vue/Nerv and other frameworks. ![](https://img.shields.io/github/stars/NervJS/taro.svg?style=social&label=Star)
      • rax - Rax is a progressive React framework for building universal application. ![](https://img.shields.io/github/stars/alibaba/rax.svg?style=social&label=Star)
    • Form

      • uppy - Uppy is a sleek, modular JavaScript file uploader that integrates seamlessly with any application. It’s fast, easy to use and lets you worry about more important problems than building a file uploader. ![](https://img.shields.io/github/stars/transloadit/uppy.svg?style=social&label=Star)
      • dropzone - Dropzone is an easy to use drag'n'drop library. It supports image previews and shows nice progress bars. ![](https://img.shields.io/github/stars/dropzone/dropzone.svg?style=social&label=Star)
      • webuploader - It's a new file uploader solution! ![](https://img.shields.io/github/stars/fex-team/webuploader.svg?style=social&label=Star)
      • plupload - Plupload is JavaScript API for building file uploaders. It supports multiple file selection, file filtering, chunked upload, client side image downsizing and when necessary can fallback to alternative runtimes, like Flash and Silverlight. ![](https://img.shields.io/github/stars/moxiecode/plupload.svg?style=social&label=Star)
    • Interaction

      • mousetrap - Simple library for handling keyboard shortcuts in Javascript. ![](https://img.shields.io/github/stars/ccampbell/mousetrap.svg?style=social&label=Star)
      • keymaster - A simple micro-library for defining and dispatching keyboard shortcuts. It has no dependencies. ![](https://img.shields.io/github/stars/madrobby/keymaster.svg?style=social&label=Star)
    • Micro Frontend

      • qiankun - Blazing fast, simple and completed solution for micro frontends. ![](https://img.shields.io/github/stars/umijs/qiankun.svg?style=social&label=Star)
      • single-spa - The router for easy microfrontends. ![](https://img.shields.io/github/stars/single-spa/single-spa.svg?style=social&label=Star)
      • emp - EMP Micro FE Base on webpack 5 & module federation. ![](https://img.shields.io/github/stars/efoxTeam/emp.svg?style=social&label=Star)
      • piral - Framework for next generation web apps using microfrontends. ![](https://img.shields.io/github/stars/smapiot/piral.svg?style=social&label=Star)
      • garfish - A powerful micro front-end framework 🚚. ![](https://img.shields.io/github/stars/modern-js-dev/garfish.svg?style=social&label=Star)
      • garfish - A powerful micro front-end framework 🚚. ![](https://img.shields.io/github/stars/modern-js-dev/garfish.svg?style=social&label=Star)
      • emp - EMP Micro FE Base on webpack 5 & module federation. ![](https://img.shields.io/github/stars/efoxTeam/emp.svg?style=social&label=Star)
    • Canvas/SVG

      • fabric.js - Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser. ![](https://img.shields.io/github/stars/fabricjs/fabric.js.svg?style=social&label=Star)
      • rough - Create graphics with a hand-drawn, sketchy, appearance. ![](https://img.shields.io/github/stars/rough-stuff/rough.svg?style=social&label=Star)
      • konva - Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications. ![](https://img.shields.io/github/stars/konvajs/konva.svg?style=social&label=Star)
      • concrete - A lightweight Html5 Canvas framework that enables hit detection, layer support, pixel ratio management, exports, and downloads.![](https://img.shields.io/github/stars/ericdrowell/concrete.svg?style=social&label=Star)
    • WebGL

      • three.js - JavaScript 3D Library. ![](https://img.shields.io/github/stars/mrdoob/three.js.svg?style=social&label=Star)
      • pixijs - The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer. ![](https://img.shields.io/github/stars/pixijs/pixijs.svg?style=social&label=Star)
      • gl-matrix - Javascript Matrix and Vector library for High Performance WebGL apps. ![](https://img.shields.io/github/stars/toji/gl-matrix.svg?style=social&label=Star)
      • Oasis Engine - Oasis Engine is a web-first and mobile-first high-performance real-time development platform. ![](https://img.shields.io/github/stars/oasis-engine/engine.svg?style=social&label=Star)
    • FullScreen

      • screenfull - Simple wrapper for cross-browser usage of the JavaScript Fullscreen API. ![](https://img.shields.io/github/stars/sindresorhus/screenfull.svg?style=social&label=Star)
    • Storage

      • localForage - 💾 Offline storage, improved. Wraps IndexedDB, WebSQL, or localStorage using a simple but powerful API. ![](https://img.shields.io/github/stars/localForage/localForage.svg?style=social&label=Star)
    • Animation

      • anime.js - JavaScript animation engine. ![](https://img.shields.io/github/stars/juliangarnier/anime.svg?style=social&label=Star)
      • lottie-web - Render After Effects animations natively on Web, Android and iOS, and React Native. ![](https://img.shields.io/github/stars/airbnb/lottie-web.svg?style=social&label=Star)
      • mojs - The motion graphics toolbelt for the web. ![](https://img.shields.io/github/stars/mojs/mojs.svg?style=social&label=Star)
      • velocity - Accelerated JavaScript animation. ![](https://img.shields.io/github/stars/julianshapiro/velocity.svg?style=social&label=Star)
      • svg.js - The lightweight library for manipulating and animating SVG. ![](https://img.shields.io/github/stars/svgdotjs/svg.js.svg?style=social&label=Star)
      • dynamics.js - Javascript library to create physics-based animations. ![](https://img.shields.io/github/stars/michaelvillar/dynamics.js.svg?style=social&label=Star)
      • animsition - A simple and easy jQuery plugin for CSS animated page transitions. ![](https://img.shields.io/github/stars/blivesta/animsition.svg?style=social&label=Star)
      • TweenJS - A simple but powerful tweening / animation library for Javascript. Part of the CreateJS suite of libraries. ![](https://img.shields.io/github/stars/CreateJS/TweenJS.svg?style=social&label=Star)
      • parallax - Parallax Engine that reacts to the orientation of a smart device. ![](https://img.shields.io/github/stars/wagerfield/parallax.svg?style=social&label=Star)
      • rellax - Lightweight, vanilla javascript parallax library. ![](https://img.shields.io/github/stars/dixonandmoe/rellax.svg?style=social&label=Star)
      • wavesurfer.js - Navigable waveform built on Web Audio and Canvas. ![](https://img.shields.io/github/stars/katspaugh/wavesurfer.js?style=social)
      • wavedrom - 🌊 Digital timing diagram rendering engine. ![](https://img.shields.io/github/stars/wavedrom/wavedrom?style=social)
      • waveforms - An interactive, explorable explanation about the peculiar magic of sound waves. ![](https://img.shields.io/github/stars/joshwcomeau/waveforms?style=social)
      • siriwave - Apple® Siri wave-form. ![](https://img.shields.io/github/stars/kopiro/siriwave?style=social)
      • waveform-playlist - Multitrack Web Audio editor and player with canvas waveform preview. Set cues, fades and shift multiple tracks in time. Record audio tracks or provide audio annotations. Export your mix to AudioBuffer or WAV!. ![](https://img.shields.io/github/stars/naomiaro/waveform-playlist?style=social)
      • waves - Ocean Wave Simulation. ![](https://img.shields.io/github/stars/dli/waves?style=social)
      • Proton - Javascript particle animation library. ![](https://img.shields.io/github/stars/drawcall/Proton?style=social)
      • bubbly-bg - Beautiful bubbly backgrounds in less than 1kB (750 bytes gzipped). ![](https://img.shields.io/github/stars/tipsy/bubbly-bg?style=social)
      • react-particle-effect-button - Bursting particle effect buttons for React 🎉. ![](https://img.shields.io/github/stars/transitive-bullshit/react-particle-effect-button?style=social)
      • pasition - Path Transition with little JS code, render to anywhere. ![](https://img.shields.io/github/stars/dntzhang/pasition?style=social)
      • three.proton - three.proton is a magical 3d particle engine using three.js library. It is based on the Proton engine library. ![](https://img.shields.io/github/stars/drawcall/three.proton?style=social)
      • emoji-mart - Emoji Mart is a customizable emoji picker HTML component for the web. ![](https://img.shields.io/github/stars/missive/emoji-mart.svg?style=social)
    • Data Visualization

      • awesome-react
      • D3.js - A JavaScript library for manipulating documents based on data. *(You might like [awesome-d3](https://github.com/wbkd/awesome-d3))* ![](https://img.shields.io/github/stars/d3/d3.svg?style=social&label=Star)
      • visx - 🐯 visx | visualization components ![](https://img.shields.io/github/stars/airbnb/visx.svg?style=social&label=Star)
      • zrender - A lightweight graphic library providing 2d draw for Apache ECharts. ![](https://img.shields.io/github/stars/ecomfe/zrender.svg?style=social&label=Star)
      • g - A powerful rendering engine which providing Canvas and SVG draw for G2 & G6. ![](https://img.shields.io/github/stars/antvis/g.svg?style=social&label=Star)
      • ECharts - A powerful charts library from Baidu. ![](https://img.shields.io/github/stars/apache/echarts.svg?style=social&label=Star)
      • v-charts - Chart components based on Vue2.x and Echarts. ![](https://img.shields.io/github/stars/ElemeFE/v-charts.svg?style=social&label=Star)
      • vue-echarts - Uses Apache ECharts 5 and works for both Vue.js 2/3. ![](https://img.shields.io/github/stars/ecomfe/vue-echarts.svg?style=social&label=Star)
      • echarts-for-weixin - Apache ECharts (incubating) for wechat. ![](https://img.shields.io/github/stars/ecomfe/echarts-for-weixin.svg?style=social)
      • plotly.js - The open source JavaScript graphing library that powers Plotly. ![](https://img.shields.io/github/stars/plotly/plotly.js.svg?style=social&label=Star)
      • HighCharts - Create interactive charts easily for your web projects. ![](https://img.shields.io/github/stars/highcharts/highcharts.svg?style=social&label=Star)
      • Chart.js - Simple HTML5 Charts using the `<canvas>` tag. ![](https://img.shields.io/github/stars/chartjs/Chart.js.svg?style=social&label=Star)
      • charts - Simple, responsive, modern SVG Charts with zero dependencies. ![](https://img.shields.io/github/stars/frappe/charts.svg?style=social&label=Star)
      • G2 - The Grammar of Graphics in JavaScript. ![](https://img.shields.io/github/stars/antvis/g2.svg?style=social&label=Star)
      • g2plot - An interactive and responsive charting library. ![](https://img.shields.io/github/stars/antvis/g2plot.svg?style=social&label=Star)
      • viser - Viser is a toolkit fit for data vis engineer. ![](https://img.shields.io/github/stars/viserjs/viser.svg?style=social&label=Star)
      • ApexCharts - Interactive JavaScript Charts built on SVG. ![](https://img.shields.io/github/stars/apexcharts/apexcharts.js.svg?style=social&label=Star)
      • F2 - An elegant, interactive and flexible charting library for mobile. ![](https://img.shields.io/github/stars/antvis/f2.svg?style=social&label=Star)
      • uPlot - A small, fast chart for time series, lines, areas, ohlc & bars. ![](https://img.shields.io/github/stars/leeoniya/uPlot.svg?style=social&label=Star)
      • Raphaël - Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web.
    • Audio/Video

      • accessible-html5-video-player - Accessible HTML5 Video Player. ![](https://img.shields.io/github/stars/paypal/accessible-html5-video-player.svg?style=social&label=Star)