A collection of awesome web components.
- Awesome Web Components
- Table of Contents
- Guidelines
- Some Read List
- Prototypes sites
- Utils
- Machine Learning
- Reactive Framework
- Chart & Visual data analysis
- File
- Loader
- Icon
- Video Player
- Notification
- Alert
- Authentication
- Animations
- Images
- UI Kits
- Input
- Modal
- Popper
- Drag
- Menus
- Editor
- Highlight
- Clipboard
- Respond page
- Touch
- 3D
- Scroll & Parallax
- Search
- Slider|Swiper
- Tweening Engine
- QRCode
- Emoji
- New Feature Introduction
- Typography Stylesheet
- Compatibility
- Tools
- Mock
- Test
- CDN
- HTTP Client/Request
- Compile & Pack
- Static Sites
- Audio & Video
- Universal
- Store
- Polyfill
- Gestures
- Screenshots
- AR
- Regex
- Figerprint
- Validation
- Boilerplate
- Dropload
- Game && Engine
- Functional
- Record and replay
- Router
- Math
- Contribution
- License
- mdo code guide Standards for developing flexible, durable, and sustainable HTML and CSS.
- Auto Lab @JingDong: Front-End Coding Guidelines, HTML, CSS, JavaScript, Images, Names
- The JavaScript Way: A modern introduction to an essential language.
- 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.
- 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.
- 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.
- CSSFX: Beautifully simple click-to-copy CSS effects
- createjs: A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5.
- 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.
- 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.
- 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.
- TweenJS: A simple but powerful tweening / animation library for Javascript. Part of the CreateJS suite of libraries.
- 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.
- web-component-decorator - Lightweight TypeScript decorators for easier handling of attribute changes and cleaner code
- ReactiveX - An API for asynchronous programmingwith observable streams
- Cycle.js - A functional and reactive JavaScript framework for predictable code
- antv: AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单 方便、专业可靠、无限可能的数据可视化最佳实践。G2 G6 F2 L7...
- Highcharts - Interactive JavaScript charts for your web pages
- echarts - An easy of adding intuitive, interactive, and highly customizable charts
- chartist-js - Simple responsive charts
- D3.js - A JavaScript library for manipulating documents based on data using HTML, SVG and CSS
- d3-flame-graph: A D3.js plugin that produces flame graphs from hierarchical data.
- NVD3 - Re-usable charts for d3.js
- c3.js - D3-based reusable chart library
- plotly.js - A high-level, declarative charting library whitch is build on top of d3.js and stack.gl
- 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.
- d3-flame-graph: A D3.js plugin that produces flame graphs from hierarchical data.
- Leaflet - An open-source JavaScript libraryfor mobile-friendly interactive maps
- deck.gl - A WebGL-powered framework for visual exploratory data analysis of large datasets.
- goiojs: A Declarative 3D Globe Data Visualization Library built with Three.js
- flowchartjs: Draws simple SVG flow chart diagrams from textual representation of the diagram
- 😋 rough: Create graphics with a hand-drawn, sketchy, appearance
- dropzonejs - an open source library that provides drag’n’drop file uploads with image previews
- jQuery File Upload Plugin
- Web Uploader - 一个以 HTML5 为主 FLASH 为辅, 各种老旧浏览器兼容性好(IE6+ Andorid 4+ IOS 6+)
- css loader - Simple loaders for your web applications using only one div and pure CSS
- Single Element CSS Spinners - Each spinner consists of a single
divwith a class ofloaderand content text of "Loading...". The text is for screen readers and can be used as a fallback state for older browsers - 👍👍 nprogress - For slim progress bars like on YouTube, Medium
- https://loading.io/
- SpinKit: A collection of loading indicators animated with CSS
- Font Awesome - The iconic font and CSS toolkit
- 👍cssicon - icon set made with pure css code, no dependencies, "grab and go" icons
- ionicons - The premium icon font for Ionic Framework
- 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
- Titanic - A collection of animated icons + javascript library.
- video.js - An HTML5 & Flash video player
- jwplayer - May be the world's most popular embeddable media player
- APlayer - A beautiful html5 music player
- Broadway - A JavaScript H.264 decoder
- flowplayer - The HTML5 video player for the web
- ❗️ lottie for web: Render After Effects animations natively on Web, Android and iOS, and React Native
- ❗️ 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
- animate.css - A cross-browser library of CSS animations. As easy to use as an easy thing
- 👍👍👍AniJS - A Library to Raise your Web Design without Coding
- 👍snabbt.js - Fast animations with Javascript and CSS transforms
- css-loaders - A collection of loading spinners animated with CSS
- 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.
- Odometer - a Javascript and CSS library for smoothly transitioning numbers
- 💓💓anime.js - JavaScript Animation Engine
- 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.
- 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.
- countUp.js: Animates a numerical value by counting to it
- dynamics.js: Dynamics.js is a JavaScript library to create physics-based animations
- React-Motion: A spring that solves your animation problems.
- watermarkjs: Watermarking for the browser
- fancyBox - A tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages
- 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.
- 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.
- BigScreen - A simple library for using the JavaScript Fullscreen API
- :thumber imagemagick - Use ImageMagick to create, edit, compose, or convert bitmap images
- 👏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.
- PhotoSwipe - JavaScript image gallery for mobile and desktop
- 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.
- 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.
- jquery_lazyload: Vanilla JavaScript plugin for lazyloading images
- 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.
- Bootstrap - May be the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web
- Material Design
- 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
- bulma A modern CSS framework based on Flexbox
- 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
- Semantic-UI - A UI component framework based around useful principles from natural language.
- Muse-UI: Material Design UI library for Vuejs 2.0
- buefy: Lightweight UI components for Vue.js based on Bulma
- vux: Mobile UI Components based on Vue & WeUI
- vuesax: New Framework Components for Vue.js 2
- mint-ui: Mobile UI elements for Vue.js by Eleme
- AT-UI: A fresh and flat UI-Kit specially for desktop application, made with ♥ by Vue.js 2.0
- NutUI 2(JingDong): A light mobile Toolkit based on Vue
- evergreen: Evergreen React UI Framework by Segment
- office-ui-fabric-react: React components for building experiences for Office and Office 365.
- MinUI: MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁、易用、高效的组件库，适用场景广，覆盖小程序原生框架，各种小程序组件主流框架等，并且提供了专门的命令行工具
- wxapp-market: 小程序营销组件 大转盘 刮刮乐 老虎机 水果机 九宫格翻纸牌 摇一摇 手势解锁
- animatedModal.js :strong:Beautiful! - A jQuery plugin to create a fullscreen modal with CSS3 transitions
- vex - A modern dialog library which is highly configurable and easy to style
- 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!
- popper.js - A kickass library to manage your poppers
- Dragula - Browser support includes every sane browser and IE7+. Framework support includes vanilla JavaScript, Angular, and React
- Vue.Draggable: Vue component allowing drag-and-drop sorting in sync with View-Model. Based on Sortable.js
- 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.
- ✨🌟 react-beautiful-dnd: Beautiful and accessible drag and drop for lists with React
- VvvebJs: Drag and drop website builder javascript library. http://www.vvveb.com/vvvebjs/editor.html
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.
- Ace - A standalone code editor written in JavaScript
- draft.js - A framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences
- pell - pell is the simplest and smallest WYSIWYG text editor for web, with no dependencies
- tinymce: The world's most popular JavaScript library for rich text editing. Available for React, Vue and Angular
- 👍✨🌟💗Microsoft/monaco-editor: A browser based code editor which powers VS Code
- ckeditor: Smart WYSIWYG HTML editor
- ✨✨✨✨✨❤️ stackedit: In-browser Markdown editor
- Quill: Your powerful rich text editor.
- 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.
- 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.
- HR.js - Tiny JavaScript plugin for highlighting and replacing text in the DOM
- stack.gl
- three.js - A JavaScript 3D Library which makes WebGL simpler.
- whs.js: Super-fast 3D framework for Web Applications 🥇 & Games 🎮. Based on Three.js
- iScrolljs - iScroll is a high performance, small footprint, dependency free, multi-platform javascript scroller
- 👍👍 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.
- Parallax.js: Simple parallax scrolling effect inspired by Spotify.com implemented as a jQuery plugin
- rellax: Lightweight, vanilla javascript parallax library
- qrcodejs - just for making QRCode and no other depedencies. It supports Cross-browser with HTML5 Canvas and table tag in DOM
- qrious - Pure JavaScript library for QR code generation using canvas
- typo.css - 一致化浏览器排版效果，构建最适合中文阅读的网页排版，包括桌面和移动平台
- 中文文案排版指北
- yue.css - A typography stylesheet for readable content
- html5shiv - This script is the defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer
- es6 promise - A polyfill for ES6-style Promises
- fountainjs - One Yeoman generator for all your frontend projects
- Sizzy - A tool for developing responsive websites crazy-fast
- ✏️jsfiddle - online web developemnt editor
- ✏️codepen.io - CodePen is a social development environmentfor front-end designers and developers. 👋
- nodemon - Monitor for any changes in your node.js application and automatically restart the server - perfect for development
- 👍json-server Mock Get a full fake REST API with zero coding in less than 30 seconds (seriously)
- 👍👍👍Emmet - the essential toolkit for web-developers
- BrowserStack - Instant access to all real mobile and desktop browsers. Say goodbye to your lab of devices and virtual machines.
- LogRocket - Records everything users do on your site, helping you reproduce bugs and fix issues faster.
- ESDoc - Good Documentation for JavaScript
- docsify: A magical documentation site generator.
- Docute: Effortless documentation, done right.
- documentation.js The documentation system for modern JavaScript
- 👍👍 Make images smaller using best-in-class codecs, right in the browser. by GoogleChormeLabs
- TinyPNG client for Mac
- Macaca - Solution for Automation Test with Ease
- 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!
- 👍 jest - facebook Delightful JavaScript Testing
- axios - Promise based HTTP client for the browser and node.js
- 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.
- FLOW IS A STATIC TYPE CHECKER FOR JAVASCRIPT.
- 👍 Parcel: Blazing fast, zero configuration web application bundler
- Prettier is an opinionated code formatter
- Prepack: A tool for making JavaScript code run faster.
- Happypack: Happiness in the form of faster webpack build times.
- webpack-bundle-analyzer: Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap
- Gatsby: Blazing fast modern site generator for React Go beyond static sites: build blogs, e-commerce sites, full-blown apps, and more with Gatsby.
- react-static: A progressive static site generator for React.
- PouchDB is an open-source JavaScript database inspired by Apache CouchDB that is designed to run well within the browser.
- 👍👍 rxdb: A realtime Database for the Web
mathjs: An extensive math library for JavaScript and Node.js
Your contributions and suggestions are heartily welcome.
