ECMAScript 6 Tools

Transpilers

Babel - Turn ES6+ code into vanilla ES5 with no runtime
Traceur compiler - ES6 features > ES5. Includes classes, generators, promises, destructuring patterns, default parameters & more.
es6ify - Traceur compiler wrapped as a Browserify v2 transform
babelify - Babel transpiler wrapped as a Browserify transform
es6-transpiler - ES6 > ES5. Includes classes, destructuring, default parameters, spread
Square's es6-module-transpiler - ES6 modules to AMD or CJS
Facebook's regenerator - transform ES6 yield/generator functions to ES5
Facebook's jstransform - A simple utility for pluggable JS syntax transforms. Comes with a small set of ES6 -> ES5 transforms
defs - ES6 block-scoped const and let variables to ES3 vars
es6_module_transpiler-rails - ES6 Modules in the Rails Asset Pipeline
Some Sweet.js macros that compile from ES6 to ES5
Bitovi's transpile - Converts ES6 to AMD, CJS, and StealJS.
regexpu — Transform Unicode-aware ES6 regular expressions to ES5
Lebab - Transformations for ES5 code to ES6 (approximates)

Build-time transpilation

Gulp Plugins

Babel: gulp-babel
Traceur: gulp-traceur
Regenerator: gulp-regenerator
ES6 Module Transpiler: gulp-es6-module-transpiler
es6-transpiler: gulp-es6-transpiler - ES6 → ES5
es6-jstransform: gulp-jstransform - ES6 → ES5 using FB's jstransform
regexpu: gulp-regexpu
TypeScript: gulp-typescript

Grunt Tasks

Babel: grunt-babel - Turn ES6+ code into vanilla ES5 with no runtime
Traceur: grunt-traceur ES6 > ES5 transpilation, grunt-traceur-build
ES6 Module Transpiler: grunt-es6-module-transpiler
Regenerator: grunt-regenerator - ES6 generator functions to ES5
grunt-microlib - tools for libs using ES6 module transpiler (sample Gruntfile)
grunt-defs - ES6 block scoped const and let variables, to ES3
es6-transpiler: grunt-es6-transpiler - ES6 → ES5
TypeScript: grunt-ts - ES6+ > ES5/ES3 transpilation

Broccoli Plugins

Babel: broccoli-babel-transpiler
Traceur: broccoli-traceur
Regenerator: broccoli-regenerator
ES6 Transpiler: broccoli-transpiler
ES6 Module Transpiler: broccoli-es6-module-transpiler
ES6 fat arrow transpiler: broccoli-es6-arrow
TypeScript: broccoli-tsc

Brunch Plugins

Babel: babel-brunch
ES6 Module Transpiler: es6-module-transpiler-brunch
TypeScript: typescript-brunch

Webpack plugins

Duo plugins

Babel: duo-babel
TypeScript: duo-typescript

Connect plugins

Babel: babel-connect
TypeScript: typescript-middleware

Gobble plugins

Babel: gobble-babel
Traceur: gobble-es6-transpiler

Jade plugins

Babel: jade-babel
Traceur: jade-traceur

Jest plugins

Babel: babel-jest

Karma plugins

Babel: karma-babel-preprocessor
Traceur: karma-traceur-preprocessor
TypeScript: karma-typescript-preprocessor

Sprockets plugins

Babel: sprockets-es6
Traceur: sprockets-traceur
TypeScript: typescript-rails

Browser plugins

Scratch JS - A Chrome/Opera DevTools extension to run ES6 on a page with either Babel or Traceur
generator-typescript - Yeoman generator for TypeScript apps

Mocha plugins

Mocha Traceur - A simple plugin for Mocha to pass JS files through the Traceur compiler

Module Loaders

ES6 Module Loader polyfill (compat with latest spec and Traceur)
js-loaders - Mozilla's spec-compliant loader prototype
JSPM - ES6, AMD, CJS module loading/package management
Babel Module Loader
beck.js - toolkit for ES6 Module Loader pipelines, shim for legacy environments

Boilerplates

es6-boilerplate - Tooling to allow the community to use es6 now via traceur in conjunction with amd and browser global modules, with source maps, concatenation, minification, compression, and unit testing in real browsers.
es6-jspm-gulp-boilerplate - Tooling to allow the community to use es6 now via babel in conjunction jspm, with source maps, concatenation, minification, compression, and unit testing in real browsers using es6.

Code generation

generator-node-esnext - Yeoman generator for Traceur apps
generator-es6-babel - Yeoman generator for Babel apps
generator-gulp-babelify - Yeoman generator for Babel, Browserify and Gulp
grunt-init-es6 - scaffold node modules with unit tests, authored in ES6
Loom generators with ES6 ember modules
Brunch plugin for ES6 module transpilation

Polyfills

core-js - Modular and compact polyfills for ES6 including Symbols, Map, Set, Iterators, Promises, setImmediate, Array generics, etc. The standard library used by Babel.
es6-shim - almost all new ES6 methods — from Map, Set, String, Array, Object, Object.is and more.
WeakMap, Map, Set, HashMap - ES6 Collections
Polymer's WeakMap shim
String.prototype.startsWith
String.prototype.endsWith
String.prototype.at
String.prototype.repeat
String.prototype.includes
String.prototype.codePointAt
String.fromCodePoint
Array.prototype.find
Array.prototype.findIndex
Array.from
Array.of
Object.assign
Number.isFinite
Math.sign
RegExp.prototype.match
RegExp.prototype.search
es6-promise - polyfill for Promises matching the ES6 API
ES6 Map Shim - destructive shim that follows the latest specification as closely as possible.
Function.create
ES6 shim
ES6 Symbol polyfill
ES6 Map, Set, WeakMap
harmony-reflect - ES6 reflection module (contains the Proxy API)
ES5 based shims in pure CJS style - Array, Object, Number, Math and String functions/methods, plus Map, Set, Symbol and WeakMap objects

Editors

ES6 syntax highlighting for Sublime Text and TextMate
ES6 syntax support in WebStorm and PhpStorm, compilation to ES5 with file watchers or task runners
DocPad plugin for Traceur
Grammar and transpilation package for Atom
Learn ES6 transpilation options in Webstorm Read Blog Post

Parsers

Esprima - JavaScript parser supporting ES6, parses to ESTree AST format
Acorn - A small, fast, JavaScript-based JavaScript parser with ES6 support, parses to SpiderMonkey AST format.
esparse - ES6 parser written in ES6.
Traceur compiler also has built-in parser available under traceur.syntax.Parser.

Other

ES.next showcase - real-world usage examples of ES6 features
looper - static analysis tools for ES6
es6-module-packager
es-dependency-graph and grunt-es-dependency-graph - Generate a list of imports and exports from ES6 module files, useful for preloading, bundling, etc.
es6-import-validate and grunt-es6-import-validate - validate matching named/default import statements in ES6 modules.
let-er - transpiles let-block block-scoping (not accepted into ES6) into either ES3 or ES6
Recast - Esprima-based JavaScript syntax tree transformer, conservative pretty-printer, and automatic source map generator. Used by several of the transpilers listed above, including regenerator and es6-arrow-function.
Paws on ES6 - Minimalist examples of ES6 functionalities.
ES6 on node - How to use ES6 features in node.js.
es6-translate - Uses the ES6 loader hooks to load (node flavored) commonjs packages in ES6.
Isparta
babel-node - Run node cli with ES6 transpiling using Babel.
ES6 Lab setup - A simple setup for transpiling ES6 to ES5 using Babel or traceur with gulp and jasmine support.
TypeScript - A superset of ECMAScript with strict typing that aims to align with ES6
Rollup - Rollup is a next-generation JavaScript module bundler. Author your app or library using ES2015 modules, then efficiently bundle them up into a single file for use in browsers and Node.js

Awesome WPO

A curated list of Web Performance Optimization. Everyone can contribute here!

Articles

Go to ARTICLES.md.

Blogs

Go to BLOGS.

Books

Best books about WPO

HTTP/2 in Action by Barry Pollard - Barry Pollard
Web Performance in Action by Jeremy Wagner - Jeremy L. Wagner
Book of Speed - Stoyan Stefanov
Designing for Performance: Weighing Aesthetics and Speed - Lara Callender Hogan
Even Faster Web Sites: Performance Best Practices for Web Developers - Steve Souders
High Performance Browser Networking: What every web developer should know about networking and web performance - Ilya Grigorik
High Performance JavaScript - Nicholas C. Zakas
High Performance Web Sites: Essential Knowledge for frontend Engineers - Steve Souders
High Performance Responsive Design: Building Faster Sites Across Devices – Tom Barker
Lean sites – Barbara Bermes
Time Is Money: The Business Value of Web Performance – Tammy Everts
Using WebPagetest - Rick Viscomi, Andy Davies, Marcel Duran
Web Page Size, Speed, and Performance - Terrence Dorsey
Web Performance Daybook Volume 2 - Stoyan Stefanov
Web Performance Tuning - Patrick Killelea
You Don't Know JS: Async & Performance - Kyle Simpson
Linux, Apache, MySQL, PHP Performance end-to-end - Colin McKinnon
Web Components in Action - Ben Farrell
Image Optimization - Addy Osmani

Case studies

WPOStats - Case studies and experiments demonstrating the impact of web performance optimization (WPO) on user experience and business metrics.
Google Developers Case Studies - Learn why and how other developers have used the web to create amazing web experiences for their users.

Documentation

Browser Diet - A collaborative guide about frontend performance.
PageSpeed Insights Rules - A guide created by PageSpeed Team. Deprecated. This is deprecated and will be shut down in May 2019. Version 5 is the latest and provides both real-world data from the Chrome User Experience Report and lab data from Lighthouse.
Best Practices for Speeding Up Your site - The list includes 35 best practices divided into 7 categories, created by Yahoo! Exceptional Performance team.

People

Go to content/PEOPLE.md.

Events

Because community matters!

Conferences

PWA Summit – A free, online, single-track conference focused on helping everyone succeed with Progressive Web Apps.
Velocity – At Velocity, web operations, performance, and DevOps professionals learn to build fast, resilient, and highly available sites and apps.
performance.now() – The performance.now() conference will return to Amsterdam! We're a single track conference with fourteen world-class speakers, covering today’s most important web performance insights.
#PerfMatters – #PerfMatters Conference is the ONLINE web performance conference by internationally renowned performance developers.

Meetups

They are categorized into content/MEETUPS.md.

Talks

They are categorized into content/TALKS.md.

Tools

Analyzers

Web.dev - Get the web's modern capabilities on your own sites and apps with useful guidance and analysis from web.dev.
Confess - Uses PhantomJS to headlessly analyze web pages and generate manifests.
DebugBear - DebugBear is a site monitoring tool based on Lighthouse. See how your scores and metrics changed over time, with a focus on understanding what caused each change. DebugBear is a paid product with a free 30-day trial.
Page Speed - The PageSpeed family of tools is designed to help you optimize the performance of your site. PageSpeed Insights products will help you identify performance best practices that can be applied to your site, and PageSpeed optimization tools can help you automate the process.
Lighthouse - Auditing and performance metrics tool for Progressive Web Applications.
Screpy - AI-Based SEO Analysis & Monitoring Tool
YSlow - YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages.
YSlow for PhantomJS - YSlow for PhantomJS also introduces new output formats for automated test frameworks: TAP (Test Anything Protocol) and JUnit.
Grunt-WebPageTest - Grunt plugin for continuously measurement of WebPageTest. (Demo)
Grunt-yslow - Grunt task for testing page performance using PhantomJS, a headless WebKit browser.
Grunt-perfbudget - A Grunt.js task for enforcing a performance budget (more on performance budgets).
Web Tracing Framework - Web Tracing Framework is a set of libraries, tools, and visualizers for the tracing and investigation of complex web applications
Yandex.Tank - An extensible open source load testing tool for advanced linux users which is especially good as a part of an automated load testing suite.
Yellow Lab Tools - Online quick and easy tool that audits frontend bad practices, reveals performance issues and profiles JavaScript.
Pagelocity - A web performance optimization and analysis tool.
Varvy - Test your site to see if it follows the Google guidelines for speed.
Web Bloat Score Calculator - Compare size of a page to a compressed image of the same page
Speed Racer - Collect performance metrics for your library/application using Chrome headless.
Speedrank - Speedrank monitors the performance of your site in the background. It displays Lighthouse reports over time and delivers recommendations for improvement. Speedrank is a paid product with 14-day-trial.

Analyzers - API

Node-yslowjs - YSlow.js on Node.js is a simple Node.js wrapper for programmatically running phantomjs yslow.js.
PSI - PageSpeed Insights for Node.js - with reporting.

Application Performance Monitoring

Datadog APM - End-to-end distributed tracing and APM at scale, correlated to all telemetry.
BetterUptime - A good website monitoring tool (bundling status page, incident notification)
Nodown - Also, a monitoring tool, but that focuses on feature testing
Pingdom - A tool to get the uptime of your website (with probes from different locations)
UptimeRobot - Another uptime monitoring tool (with a generous free plan)

Bundle Analyzer

Bundlesize - Keep your bundle size in check.
source-map-explorer - Analyze and debug bundle space usage through source maps.
Bundlephobia - Helps you find the performance impact of adding an npm package to your frontend bundle.
Webpack bundle analyzer - webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap.
Disc - Visualise the module tree of browserify project bundles and track down bloat.
Lasso-analyzer - analyze and Visualise project bundles created by Lasso.
Packtracker.io - Check your webpack bundle stats on every pull request, and track them over time.
Compression webpack plugin - Prepare compressed versions of assets to serve them with Content-Encoding.
BundleStats - Generate bundle report(bundle size, assets, modules, packages) and compare the results between different builds

Benchmark - CSS

CSS-perf - Completely unscientific way of testing CSS performance. Most of these tests will revolve around methodologies and techniques for determining effective CSS architecture. Put another way, I want to know what works best given a particular comparison of CSS strategies.

Benchmark - JavaScript

A set of tools for creating test cases and compare different implementations in JavaScript.

JSPerf - jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks. Temporarily out, follow this issue for updates: https://github.com/jsperf/jsperf.com/issues/537
Benchmark.js - A robust benchmarking library that works on nearly all JavaScript platforms, supports high-resolution timers, and returns statistically significant results.
JSlitmus - JSLitmus is a lightweight tool for creating ad-hoc JavaScript benchmark tests.
Matcha - Matcha allow you to design experiments that will measure the performance of your code. It is recommended that each bench focus on a specific point of impact in your application.
Timing.js - Timing.js is a small set of helpers for working with the Navigation Timing API to identify where your application is spending its time. Useful as a standalone script, DevTools Snippet or bookmarklet.
Stats.js - This class provides a simple info box that will help you monitor your code performance.
PerfTests - Performance tests of JavaScript inheritance models.
Memory-stats.js - minimal monitor for JS Heap Size via performance memory.

Benchmark - PHP

PHPench - PHPench creates a graphical output for a PHP benchmark. Plot the runtime of any function in realtime with GnuPlot and create an image out of the result.
php-bench - Benchmark and profile PHP code blocks whilst measuring the performance footprint.

Bookmarklets

Yahoo YSlow for Mobile/Bookmarklet - YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages.
PerfMap - A bookmarklet to create a frontend performance heatmap of resources loaded in the browser using the Resource Timing API.
DOM Monster - A cross-platform, cross-browser bookmarklet that will analyze the DOM & other features of the page you're on, and give you its bill of health.
CSS Stress - CSS Stress is a Testing and Performance Profiling.
Performance-Bookmarklet - Analyze the current page through the Resource Timing API, Navigation Timing API and User-Timing - Sort of a light live WebPageTest. As Chrome Extension and Firefox Add-on under the name Performance-Analyser.

CDN

A content delivery network or content distribution network (CDN) is a large distributed system of servers deployed in multiple data centers across the Internet. The goal of a CDN is to serve content to end-users with high availability and high performance. See a large list of CDN in Wikipedia.

Cloudflare CDN - A content delivery network that uses next-gen tech to deliver a fast, reliable, CDN services
PageCDN - A state of the art opensource CDN with aggressive content optimization using brotli-11 compression, HTTP/2 server push, better HTTP/2 multiplexing, and more. Supports 100s of libraries and 2000+ WordPress themes already. Easy to use, easy to link and very fast.
jsDelivr - Similar to Google Hosted Libraries, jsDelivr is an open source CDN that allows developers to host their own projects and anyone to link to our hosted files on their sites.
Google Hosted Libraries - Google Hosted Libraries is a content distribution network for the most popular, open-source JavaScript libraries.
CDNjs - An open source CDN for JavaScript and CSS sponsored by CloudFlare that hosts everything from jQuery and Modernizr to Bootstrap.
Amazon CloudFront - A content delivery network by Amazon that integrates nicely with other Amazon services or can be used standalone.
jQuery - jQuery CDN – Latest Stable Versions, powered by MaxCDN.
:cn: UpYun CDN - CDN provided by upyun.
:cn: Bootstrap 中文网开放 CDN 服务 - Bootstrap Chinese net open CDN service (only HTTP).
:ru: Yandex CDN - Yandex Content Delivery Network hosts popular third party JavaScript and CSS libraries (best for use in Russia).

To find useful more information for you make the right choice between paid CDNs, please visit CDNPlanet.

CDN - Monitor

CDNperf - finds you fast and reliable JavaScript CDNs that make your sites snappy and happy.

CDN - Utilities

Gulp-google-cdn - Replaces script references with Google CDN ones.

Extensions

Browser Calories - The easiest way to measure your performance budget.

Image Optimizers

How to remove all this unnecessary data and give you a file without degrading quality.

Grunt-smushit - Grunt plugin to remove unnecessary bytes of PNG and JPG using Yahoo Smushit.
Gulp-smushit - Gulp plugin to optimize PNG and JPG using Yahoo Smushit. Made on top of smosh.
Smush it - Smush it uses optimization techniques specific to image format to remove unnecessary bytes from image files. It is a "lossless" tool, which means it optimizes the images without changing their look or visual quality.
Imagemin - Minify images seamlessly with Node.js.
Sharp - The typical use case for this high speed Node.js module is to convert large images of many formats to smaller, web-friendly JPEG, PNG and WebP images of varying dimensions.
Gm - GraphicsMagick and ImageMagick for Node.js.
Exexif - Pure elixir library to extract tiff and exif metadata from JPEG files.
ExifCleaner - GUI app to remove exif metadata from images and video files with drag and drop. Free and open source.
OptiPNG - OptiPNG is a PNG optimizer that recompresses image files to a smaller size, without losing any information.
Grunt-contrib-imagemin - Minify PNG and JPEG images for Grunt.
Gulp-imagemin - Minify PNG, JPEG, GIF and SVG images with imagemin for Gulp.
Grunt-WebP - Convert your images to WebP format.
Gulp-WebP - Convert images to WebP for Gulp.
Imageoptim - Free app that makes images take up less disk space and load faster, without sacrificing quality. It optimizes compression parameters, removes junk metadata and unnecessary color profiles.
Grunt-imageoptim - Make ImageOptim, ImageAlpha and JPEGmini part of your automated build process.
ImageOptim-CLI - Automates ImageOptim, ImageAlpha, and JPEGmini for Mac to make batch optimization of images part of your automated build process.
Tapnesh-CLI - Tapnesh is a CLI tool that will optimize all your images in parallel easily and efficiently!
Tinypng - Advanced lossy compression for PNG images that preserves full alpha transparency.
Kraken Web-interface - Optimize your images and will be available for download for 12 hours.
Compressor - Online image compressor for JPG, PNG, SVG and GIF.
Shrinkray - One-click optimization for images in your GitHub repos
mozjpeg - Improved JPEG encoder.
Jpegoptim - Utility to optimize/compress JPEG files.
ZopfliPNG - A command-line program to optimize PNG images.
AdvPNG - Recompress PNG files to get the smallest possible size.
Leanify - Lightweight lossless file minifier/optimizer.
Trimage - A cross-platform tool for losslessly optimizing PNG and JPG files.
ImageEngine - Cloud service for optimizing, resizing and caching images on the fly with great mobile support.
ImageKit.io - Intelligent real-time image optimizations, image transformations with a global delivery network and storage.
Optimizt - CLI image optimization tool. It can compress PNG, JPEG, GIF and SVG lossy and lossless and create WebP versions for raster images.

Lazyloaders

lazyload - Lazyload images, iframes, widgets with a standalone JavaScript lazyloader ~1kb
lozad.js - Highly performant, light ~0.9kb and configurable lazy loader in pure JS with no dependencies for responsive images, iframes and more

Loaders

HeadJS- The only script in your HEAD. for Responsive Design, Feature Detections, and Resource Loading.
RequireJS - RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node.js.
Labjs - is 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.
Defer.js - Async Everything: Make the meat of your pages load faster with this JS morsel.
InstantClick - InstantClick makes following links in your site instant.
JIT - A JIT (Just In Time) plugin loader for Grunt. Load time of Grunt does not slow down even if there are many plugins.

Metrics Monitor

Phantomas - PhantomJS-based web performance metrics collector and monitoring tool.
Showslow - open source tool that helps monitor various site performance metrics over time. It captures the results of YSlow, Page Speed Insights, WebPageTest and dynaTrace Ajax Edition.
Bench - Using Phantomas (a PhantomJS backed client performance metrics scrapper). Benchmark a page, store results in MongoDB and display result via the built-in server.
Keepfast - Tool to monitor indicators related to performance of a web page.
GTmetrix - GTmetrix uses Google Page Speed and Yahoo! YSlow to grade your site's performance and provides actionable recommendations to fix these issues.
Pingbreak.com - Free site and SSL Monitoring with response time alerting (on Slack, Twitter, Mattermost, Discord or custom Webhook).
Pingdom site Speed Test - Test the load time of that page, analyze it and find bottlenecks.
Dotcom-tools - analyze your website's speed in real browsers from 20 locations worldwide.
WebPageTest - Run a free site speed test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds. You can run simple tests or perform advanced testing including multi-step transactions, video capture, content blocking and much more. Your results will provide rich diagnostic information including resource loading waterfall charts, Page Speed optimization checks and suggestions for improvements.
Sitespeed.io - Sitespeed.io is an open source tool that will check your site against web performance best practice rules and use the Navigation Timing API to collect metrics. It will create XML & HTML output of the result.
Grunt-phantomas - Grunt plugin wrapping phantomas to measure frontend performance.
Perfjankie - Runtime Browser Performance regression suite (Demo).
BrowserView Monitoring - Continually checks web page load times in Internet Explorer, Chrome and Firefox from multiple points around the world.
New Relic Browser Monitoring - Monitor your browser-side applications in real time, with a focus on real end users’ experiences.
DareBoost - Real Browser Monitoring. Offers complete reports about web performance and quality using YSlow, Page Speed and numerous custom tips.
Bytes Matter Real User Monitoring - Full featured Real User Monitoring solution. Free tier for smaller sites. Includes monitoring for Google's Core Web Vitals.

Metrics Monitor - API

WebPageTest API Wrapper for Node.js - WebPageTest API Wrapper is an npm package that wraps WebPageTest API for Node.js as a module and a command-line tool.

Metrics Monitor - EMAIL

WebPerformance Report - Web performance report every week in your inbox. Get a Personalized Report on the Status of the Ecommerce or Website that you want to monitor in terms of Web performance and Web optimization, Core Web Vitals are included.

Minifiers - HTML

HTMLCompressor - HtmlCompressor is a small, fast and very easy to use Java library that minifies given HTML or XML source by removing extra whitespaces, comments and other unneeded characters without breaking the content structure. As a result page become smaller in size and load faster. A command-line version of the compressor is also available.
Django-htmlmin - django-html in an HTML minifier for Python with full support for HTML 5. It supports Django, Flask and any other Python web framework. It also provides a command-line tool that can be used for static sites or deployment scripts.
HTMLMinifier - HTMLMinifier is a highly configurable, well-tested, Javascript-based HTML minifier, with lint-like capabilities.
Grunt-contrib-htmlmin - A grunt plugin to minify HTML that uses HTMLMinifier.
Gulp-htmlmin - A gulp plugin to minify HTML that uses HTMLMinifier.
Grunt-htmlcompressor - Grunt plugin for HTML compression, using htmlcompressor.
HTML_minifier - Ruby wrapper for kangax html-minifier.
HTML_press - Ruby gem for compressing html, that removes all whitespace junk, and leaves only HTML.
Koa HTML Minifier - Middleware that minifies your HTML responses using html-minifier. It uses html-minifier's default options which are all turned off by default, so you have to set the options otherwise it's not going to do anything.
HTML Minifier Online - A HTML min tool by kangax (HTMLMinifier Creator).
Minimize - Minimize is a HTML minifier based on the node-htmlparser,currently, HTML minifier is only usable server-side. Client-side minification will be added in a future release.
Html-minifier - A simple Windows command-line tool to minify your HTML, Razor views & Web Forms views

Minifiers - JS & CSS

YUI Compressor - JavaScript compressor which, in addition to removing comments and white-spaces, obfuscates local variables using the smallest possible variable name. This obfuscation is safe, even when using constructs such as 'eval' or 'with' (although the compression is not optimal is those cases) Compared to jsmin, the average savings is around 20%.
UglifyJS2 - UglifyJS is a JavaScript parser, minifier, compressor or beautifier toolkit, written in JavaScript.
CSSO - CSS minimizer unlike others. In addition to usual minification techniques it can perform structural optimization of CSS files, resulting in smaller file size compared to other minifiers.
CSSmin.js - cssmin.js is a JavaScript port of YUICompressor's CSS minifier.
Grunt-contrib-concat - A Grunt plugin to concatenate files.
Grunt-contrib-uglify - A Grunt plugin to concatenate and minify JavaScript files.
Clean-css - A fast, efficient, and well tested CSS minifier for node.js.
Django-compressor - Compresses linked and inline JavaScript or CSS into a single cached file.
Django-pipeline - Pipeline is an asset packaging library for Django, providing both CSS and JavaScript concatenation and compression, built-in JavaScript template support, and optional data-URI image and font embedding.
JShrink - JShrink is a PHP class that minifies JavaScript so that it can be delivered to the client quicker.
JSCompress - The most minimalistic online JS Compress tool.
CSSshrink - Because CSS is ospon the critical path to rendering pages. It must be small! Or else!
Grunt-cssshrink - This is just a grunt wrapper for CSS Shrink.
Gulp-cssshrink - Shrinks CSS files using cssshrink for Gulp.
Prettyugly - Uglify (strip spaces) or prettify (add consistent spaces) CSS code.
Grunt-contrib-cssmin - CSS Minifier for Grunt.
Grunt-uncss - A grunt task for removing unused CSS from your projects.
Gulp-uncss - A gulp task for removing unused CSS from your projects.

Miscellaneous

Socialite.js - Socialite provides a very easy way to implement and activate a plethora of social sharing buttons — any time you wish. On document load, on article hover, on any event.
uCSS - uCSS is made for crawling (large) sites to find unused CSS selectors, but not remove unused CSS.
HTTPinvoke- A no-dependencies HTTP client library for browsers and Node.js with a promise-based or Node.js-style callback-based API to progress events, text and binary file upload and download, partial response body, request and response headers, status code.
Critical - Extract & Inline Critical-path CSS in HTML pages (alpha).
Csscolormin - Utility that minifies CSS colors, example: min("white"); // minifies to "#fff".
Lazysizes - High performance lazy loader for images (responsive and normal), iframes and scripts, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.
Perf-Tooling - Perf Tooling is a shared resource to keep track of new and existent performance tools.
TMI - TMI (Too Many Images) - discover your image weight on the web.

Generators

AtBuild - JavaScript code generation tool that lets you write JavaScript that outputs JavaScript. Good for unrolling loops and writing libraries that compile away the runtime
Glue - Glue is a simple command-line tool to generate sprites:
Pitomba-spriter - Spriter is a simple and flexible dynamic sprite generator for CSS, using Python. It can process CSS both synchronous and asynchronous as it provides classes to be used in your python code and also a watcher that listens to your filesystem and changes CSS and sprite as soon as a static is changed.
Grunt-spritesmith - Grunt task for converting a set of images into a spritesheet and corresponding CSS variables.
Grunt-sprite-css-replace - Grunt task that generates a sprite from images referenced in a style sheet and then updates the references with the new sprite image and positions.
Grunt-svg-sprite - SVG sprites & stacks galore — Grunt plugin wrapping around svg-sprite that reads in a bunch of SVG files, optimizes them and creates SVG sprites and CSS resources in various flavours.
Gulp-sprite - gulp task for creating an image sprite and the corresponding style sheets for Gulp.
Gulp-svg-sprites - gulp task for creating svg sprites.
SvgToCSS - Optimizes and renders SVG files in CSS / Sass sprites.
Assetgraph-sprite - Assetgraph transform for auto generating sprites based on the CSS dependency graph.
Sprite Cow - Sprite Cow helps you get the background-position, width and height of sprites within a spritesheet as a nice bit of copyable CSS.
ZeroSprites - ZeroSprites is a CSS sprites generator aimed at area minimization using algorithms used in the field of VLSI floorplanning.
CSS Sprite Generator - CSS sprites allow you to combine multiple images into a single file.
Sprity - A modular image sprite generator with a lot of features: supports retina sprites, supports different output formats, generates sprites and proper style files out of a directory of images, etc...
Sprite Factory - The sprite factory is a ruby library that can be used to generate CSS sprites. It combines individual image files from a directory into a single unified sprite image and creates an appropriate CSS style sheet for use in your web application.

SVG

SVGO - SVGO is a Nodejs-based tool for optimizing SVG vector graphics files.
SVG OMG - SVGOMG is SVGO's Missing GUI, aiming to expose the majority, if not all the configuration options of SVGO.
Grunt-svgmin - Minify SVG using SVGO for Grunt.
Gulp-svgmin - Minify SVG with SVGO for Gulp.
Scour - Scour is an open-source Python script that aggressively cleans SVG files, removing a lot of 'cruft' that certain tools or authors embed into their documents.
SVG Cleaner - SVG Cleaner could help you to clean up your SVG files from unnecessary data. It has a lot of options for cleanup and optimization, works in batch mode, provides threaded processing on the multicore processors.

Web Components

Polymer Bundler - Polymer-bundler is a library for packaging project assets for production to minimize network round-trips.
Gulp-vulcanize - Concatenate a set of Web Components into one file that use Vulcanize.

Web server Benchmarks

HTTPerf - httperf is a tool for measuring web server performance. It provides a flexible facility for generating various HTTP workloads and for measuring server performance.
Apache JMeter - Open source load testing tool: It is a Java platform application.
Locust - An open source load testing tool. Define user behaviour with Python code, and swarm your system with millions of simultaneous users.
Autoperf - Autoperf is a ruby driver for httperf, designed to help you automate load and performance testing of any web application - for a single end point, or through log replay.
HTTPerf.rb - Simple Ruby interface for httperf, written in Ruby.
PHP-httperf - PHP Port of HTTPerf.rb.
HTTPerf.js - JS Port of HTTPerf.rb.
HTTPerf.py - Python Port of HTTPerf.rb.
Gohttperf - Go Port of HTTPerf.rb.
wrk - A HTTP benchmarking tool (with optional Lua scripting for request generation, response processing, and custom reporting)
beeswithmachineguns - A utility for arming (creating) many bees (micro EC2 instances) to attack (load test) targets (web applications).
k6 - An open source load testing tool built for developers. Easy to integrate into CI pipelines. Tests are written in ES6 JS and you can test APIs, microservices and sites using HTTP/1.1, HTTP/2 and WebSocket.

Web server Modules

PageSpeed Module - PageSpeed speeds up your site and reduces page load time. This open-source web server module automatically applies web performance best practices to pages and associated assets (CSS, JavaScript, images) without requiring that you modify your existing content or workflow. PageSpeed is available as a module for Apache 2.x and Nginx 1.x.
WebP-detect - WebP with Accept negotiation.

Specs

Web Performance Working Group - The mission of the Web Performance Working Group, part of the Rich Web Client Activity, is to provide methods to measure aspects of application performance of user agent features and APIs.
Page Visibility - This specification defines a means for site developers to programmatically determine the current visibility state of the page in order to develop power and CPU efficient web applications.
Navigation Timing - This specification defines a unified interface to store and retrieve high resolution performance metric data related to the navigation of a document.
Resource Timing - This specification defines an interface for web applications to access the complete timing information for resources in a document.
User Timing - This specification defines an interface to help web developers measure the performance of their applications by giving them access to high precision timestamps.
Performance Timeline - This specification defines a unified interface to store and retrieve performance metric data. This specification does not cover individual performance metric interfaces.
CSS will-change - This specification defines the will-change CSS property which allows an author to declare ahead-of-time what properties are likely to change in the future, so the UA can set up the appropriate optimizations some time before they’re needed. This way, when the actual change happens, the page updates in a snappy manner.
Resource Hints - This specification defines the dns-prefetch, preconnect, prefetch, and prerender relationships of the HTML Link Element (<link>). These primitives enable the developer, and the server generating or delivering the resources, to assist the user agent in the decision process of which origins it should connect to, and which resources it should fetch and preprocess to improve page performance.

Stats

HTTP Archive - It's a permanent repository of web performance information such as size of pages, failed requests, and technologies utilized. This performance information allows us to see trends in how the Web is built and provides a common data set from which to conduct web performance research.

Other Awesome Lists

iamakulov/awesome-webpack-perf - A curated list of webpack tools for web performance
bayandin/awesome-awesomeness.
sindresorhus/awesome.

Contributing

For contributing, open an issue and/or a pull request.

Web Tools

An awesome list of hosted tools for web development.

Response

Placeholder

Favicon

CDN

CSS

Image compression

JavaScript

Pagespeed

Color

Font

API Debugging

API Doc

Git Host

webpack

Visual webpack config tool

Code Playgrounds

CheetSheet

Bootstrap CheatSheet

Awesome CSS

/ A curated list of awesome frameworks, style guides, and other cool nuggets for writing amazing CSS. /

Introduction

Motivation

This document is a curated list of frameworks, style guides, and cool nuggets of information for writing awesome CSS. It does not contain resources to learn CSS.

Complementary Resources

If you're struggling with something CSS-related, look for answers within the following resources:

CSS Working Group
Editor's Draft :black_nib:
Parsers :mag:
Preprocessors :pill:
Frameworks :art:
Toolkits :wrench:
Reset and Normalize
CSS Development at Large-Scale Websites
Code Style Guidelines :book:
Style Guide
Style Guide Generators :slot_machine:
Naming conventions & Methodologies :bulb:
CSS in JS
CSS Polyfills
Miscellaneous
Podcasts :radio:
Twitter :satellite:
Videos :tv:
2019
2016
2015
Books :books:
Tutorials :clapper:
Maintainers
Contribute

CSS Working Group

The CSS Working Group creates and defines CSS specifications. These specifications are assigned maturity levels as they move through the design process. If you would like to learn more, visit CSS Working Group Page.

Editor's Draft :black_nib:

Editor's drafts of CSS specifications

W3c/csswg-drafts - Mirror of CSS WG Editor Draft repository.
W3c/css-houdini-drafts - Mirror of Houdini WG Editor repository.

Parsers :mag:

CSSOM - CSS Object Model implemented in pure JavaScript.
CSSTree - Detailed CSS parser with syntax validator.
Gonzales PE - CSS parser with support for preprocessors.
Mensch - A decent CSS parser.
ParserLib - CSSLint/parser-lib.
PostCSS - Transforming styles with JS plugins.
Rework - Plugin framework for CSS preprocessing in Node.js.
Stylecow - Modern CSS for all browsers.

_{⇧ back to top}

Preprocessors :pill:

Write CSS faster

LESS - Backwards compatible with CSS, and the extra features it adds use existing CSS syntax.
PostCSS - Transforming CSS with JS plugins.
Sass - Mature, stable, and powerful professional-grade CSS extension language.
STYLIS - Light-weight CSS preprocessor.
Stylus - Expressive, robust, feature-rich CSS language built for NodeJs.

_{⇧ back to top}

Frameworks :art:

AgnosticUI - Accessible CSS component primitives that also work with React, Vue 3, Svelte, and Angular.
Awsm.css - Simple CSS library for semantic HTML markup.
Bonsai - A complete Utility First CSS Framework for less than 50kb.
Bootstrap - The most popular HTML, CSS, and JS framework.
Bulma - A modern CSS framework based on Flexbox. Also has Sass import for modification.
Butter Cake - A Modern Lightweight Front End CSS framework for faster and easier web development.
Charts.css - CSS data visualization framework.
Chota - A responsive, customizable micro-framework (3kb) with helpful utilities and a grid system.
Cirrus - A fully responsive and comprehensive CSS framework with beautiful controls and simplistic structure.
Foundation - advanced responsive front-end framework.
Gralig - A modest, grayish CSS library.
Halfmoon - A responsive front-end framework with a built-in dark mode.
Hasser CSS - A lightweight (12k, not minified) but useful CSS framework with flexible Grid, Hero and more.
Inuit.css - Powerful, scalable, Sass-based, BEM, OOCSS framework.
Material-components-web - Modular and customizable Material Design UI components for the web.
Materialize - A modern responsive front-end framework based on Material Design.
Milligram - A minimalist CSS framework.
Numl - An HTML-based language and design system that lets you create responsive and accessible high-quality web interfaces with any look.
Pure.css - A set of small, responsive CSS modules that you can use in every web project.
Semantic UI - Powerful framework that uses human-friendly HTML.
Shorthand Framework - Feature rich CSS framework for the new decade.
Spectre.css - A lightweight, responsive and modern CSS framework.
Strawberry - A set of common flexbox utilities focused on making your life easier and faster with nested flexboxes.
Tachyons - Functional CSS for humans.
Tacit - CSS framework for dummies with zero skills in graphic design.
Tailwindcss - A utility-first CSS framework for rapid UI development.
Tronic247 Material - A responsive framework based on CSS and some JS while following Material Design guidelines.
UIkit - A lightweight and modular front-end framework.
Unsemantic - Fluid grid for mobile, tablet, and desktop.
Wing - A Minimal, Lightweight, Responsive framework.

You can find more frameworks at "awesome-css-frameworks"

_{⇧ back to top}

Toolkits :wrench:

Bourbon - A simple and lightweight mixin library for Sass.
Susy - Responsive layout toolkit for Sass.

_{⇧ back to top}

Reset and Normalize

CSS Checker - Find and Reduce Similar & Duplicated CSS Scripts.
MiniReset.css - A tiny modern CSS reset.
Normalize-OpenType - Adds OpenType features—ligatures, kerning, and more—to Normalize.css.
Normalize - A set of CSS rules that provide better cross-browser consistency in the default styling of HTML elements.
Reset.css - CSS Tools: Reset CSS.
Reseter.css - A Futuristic CSS Reset/Normalizer. That Redifines Instead Of Preserving.
Sanitize.css - A set of CSS rules that style with today’s best practices out-of-the-box.
Unstyle.css - Specialised stylesheet for removing user agent styles, style the web with your baseline.

_{⇧ back to top}

CSS Development at Large-Scale Websites

Bugsnag's CSS Architecture by Max Luster
CSS at BBC Sport by Shaun Bent
CSS AT HOOTSUITE by Steve Mynett
GitHub's CSS by Mark Otto
How we do CSS at Ghost by Paul Davis
Lonely Planet by Ian Feather
Medium’s CSS is actually pretty good. by Jacob Thornton
Refining The Way We Structure Our CSS At Trello by Bobby Grace
Scalable-css-reading-list

_{⇧ back to top}

Code Style Guidelines :book:

Code Guide by Mark Otto
CSS Guidelines by Harry Roberts
CSS Styleguide by Guilherme Rv Coelho
Dropbox (S)CSS Style Guide by Dropbox
Google HTML/CSS Style Guide by Google
Idiomatic CSS by Nicolas Gallagher
Official Trello CSS Guide by Bobby Grace
Sass Guidelines by Kitty Giraudel
SASS Style Guide by Sass team
ThinkUp CSS Style Guide by ThinkUp
WordPress CSS Coding Standards by WorldPress

_{⇧ back to top}

Style Guide

AUI by Atlassian Design
Design Elements by lonely planet
Fluent UI by Microsoft
GitHub CSS Style Guide by Github
Lighting Design System by Salesforce
Patterns by MailChimp
Solid by BuzzFeed
Style Guide by Starbucks
Website Style Guide Resources by Awesome people

View more style guides at Website Style Guide Resources

_{⇧ back to top}

Style Guide Generators :slot_machine:

_{⇧ back to top}

Naming conventions & Methodologies :bulb:

_{⇧ back to top}

CSS in JS

Here is a CSS in JS techniques comparison

_{⇧ back to top}

CSS Polyfills

Polyfill.js - A library to make creating CSS polyfills much easier.
Prefixfree - Break free from CSS prefix hell.
Fixed-sticky - A CSS position:sticky polyfill.
Selectivizr - A JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8.
PIE - Allows Internet Explorer to recognize and render various CSS3 box decoration properties.

_{⇧ back to top}

Miscellaneous

Can I use - Browser support for CSS, HTML5 and other front-end web technologies.
Flexbox Patterns by cjcenizal
Glassmorphism CSS Generator - Generate CSS for glassmorphism.
GradientArt - An advanced CSS gradient editor with layering, design tools and free cloud storage.
Live editor for CSS and LESS - Magic CSS extension for Chrome, Firefox and Edge.
RevengeCSS - A CSS bookmarklet that uses selectors to find bad markup, displaying ugly pink error messages in comic sans serif wherever you write bad HTML
Single Div Project - One <div>. Many possibilities.
You Might Not Need JS - CSS alternatives for common JS UI components.
Xpath-to-selector - Convert xpath to css selector.

_{⇧ back to top}

Podcasts :radio:

Something to listen to while programming.

CSS Podcast - Una Kravets and Adam Argyle,and development.
Non Breaking Space Show - Seeking out the best,and smartest creative people on digital art,and the accompanying blog,and UX.
Shop Talk Show - A live podcast with Chris Coyier and Dave Rupert about front-end web design,hosted by Anna Debenham and Brad Frost.
Style Guide Podcast - A small batch series of interviews on style guides,art direction,brightest,content strategy,design,Developer Advocates from Google,development,gleefully breakdown complex aspects of CSS into digestible episodes covering everything from accessibility to z-index.
Syntax - A Tasty Treats Podcast for Web Developers.,typography,web technology
The Big Web Show - Topics like web publishing,is all about keeping you updated with the latest in Open Source Technology.
The Changelog - The tagline for the Changelog says it all: “Open Source moves fast. Keep up.” This podcast,and more. It's everything web that matters.
The Web Ahead - Conversations with world experts on changing technologies and future of the web.

_{⇧ back to top}

Twitter :satellite:

Active accounts to follow.

Adam Morse - Advocate for users and open-source.
Andrey Sitnik - Author of @Autoprefixer, http://easings.net and @PostCSS.
Ben Briggs - Final year web technologies student. node.js, javascript, open source modules, client side optimisation, web performance.
Brad Frost - Web designer, speaker, writer, consultant, musician.
Chris Coyier - Designer @CodePen. Writer @Real_CSS_Tricks.
Connor Sears - Designer at GitHub.
CSS Animation
CSS Commits - Latest commits to @CSSWG’s public Mercurial repository.
Daniel Glazman - W3C CSS Working Group Co-chairman, entrepreneur, software engineer, geek, father of two, polyglot, duck lover. Nah. Tweets are strictly mine.
Dave McFarland - Web developer, author of CSS: The Missing Manual, JavaScript & jQuery.
Donovan Hutchinson - Designer, developer, writer. Occasionally blogs at http://Hop.ie, and currently building @cssanimation.
Dudley Storey - Web development writer, teacher, and speaker.
Eric Bidelman - Engineer at Google working on Chrome, web components, and Polymer.
Evangelina Ferreira - Web Designer. Professor at @multimedial_utn HTML5 & CSS Freak. Ocassional Translator.
Guy Routledge - Front-end dev, Teacher @GA_London, Screencaster at http://www.atozcss.com, property snob, Foodie.
Harry Roberts- Consultant Front-end Architect: @google, @Etsy, @kickstarter, @BBC, @Deloitte, @FT, more.
Heydon Pickering - Moderate consumer of rice. Also a UX designer, author, @smashingmag editor and programmer.
Jonathan Snook - Designer, Developer, Writer, Speaker. I make stuff on the web. I wrote SMACSS.
Kitty Giraudel - Non-binary accessibility & diversity advocate, frontend developer, author.
L. David Baron - Mozilla developer, CSS and W3C standards diplomat.
Lea Verou - Research Assistant @MIT_CSAIL, @CSSWG IE, @OReillyMedia author, Ex @W3C staff.
Manoela Ilic - ...aka Mary Lou @codrops ༶ CSS & HTML are my crayons ༶ Interested in Cognitive Science, AI, HCI, UI Design & Astrophysics ༶ Digital nomad.
Mark Otto - GitHub and Bootstrap. Formerly at Twitter. Huge nerd.
Maxime Thirouin - Freelance front-end vigilante, UI/UX developer.
Natalie Weizenbaum - Trans coder lady. Lead designer/developer of @SassCSS, working for @google on @dart_lang.
Nicolas Gallagher - Software Engineer at @twitter.
Nicole Sullivan - GEEK.
Patrick Hamann - Lover of mountains, craft beers and discovering new food.
Paul Lewis - Googler who noodles with code and design.
Phil Walton - Engineer at Google • Open Source Advocate • Developer • Designer • Writer.
Rachel Andrew - Web Developer, half of @grabaperch CMS, CSS Working Group Invited Expert.
Remy Sharp - All about CSS sizing units.
Sara Soueidan - Author of the @Codrops CSS Reference & Co-author of the Smashing Book #5.
Scott Jehl - Author of @responsiblerwd, now on sale from @abookapart.
Simon - UI designer, CSS doodler.
The Chris Eppstein - Loves love. Hates hate. Has a kick-ass family. Writes code. Leads stylesheet tech @LinkedIn.
Una Kravets - Front-end @IBMDesign. Sassvocate, community builder, & handcrafter. STEMinist :) Open source all the things.
Zoe M. Gillenwater - Web designer/developer specializing in CSS, RWD, UX, & accessibility.
Zoltán Szőgyényi - Web developer, Co-founder at Themesberg. I'm building Glass UI.
앗킨스 탭 - Literally Jenn Schiffer's Mom.

_{⇧ back to top}

Videos :tv:

*Good study videos from CSS Must Watch Videos. Some items are quoted from AllThingsSmitty/must-watch-css.

I told him on Twitter. I appreciate his valuable efforts.*

2019

Next-Generation Web Styling - Una Kravets & Adam Argyle @ Chrome Dev Summit 2019.

2016

Component-Based Style Reuse :page_facing_up: transcript :watch: 37:24 - Pete Hunt @ CSS conf 2016.
CSS4 Grid: True Layout Finally Arrives :page_facing_up: transcript :watch: 29:27 - Jen Kramer @ CSS conf 2016.
Houdini: Demystifying the Future of CSS :watch: 36:58 @ Google I/O 2016.

2015

Mdo-ular CSS :watch: 30:06 - Mark Otto @ jQuery UK.
CSS Architecture with SMACSS :watch: 30:15 - Caleb Meredith @ DevTips channel.
CSS Workflow from the Ground Up :watch: 46:06 - Jonathan Snook @ Generate conf 2015.

_{⇧ back to top}

Books :books:

CSS: The Definitive Guide, 4th Edition - Visual Presentation for the Web
CSS: The Missing Manual – Really Helpful in Advancing your Design Skills to a whole new Level
CSS Secrets – Better Solutions to Everyday Web Design Problems
Every Layout: Relearn CSS Layout – Solving responsive layout problems using algorithmic design.

_{⇧ back to top}

Tutorials :clapper:

30 Seconds of CSS - A curated collection of useful CSS snippets you can understand in 30 seconds or less.
Community Curated CSS Resources - Top Recommended Resources.
CSS Diner – Interactive gamified tutorial for learning selection with CSS.
CSS Grid PlayGround - Simple tutorial to learn CSS Grid from Mozilla.
CSS Grids videos tutorial - Free video course by Wes Bos to learn CSS Grids.
Flexbox video tutorial - Free video course by Wes Bos to learn flexbox.
Organize CSS with a Modular Architecture: OOCSS, BEM, SMACSS - In-depth intro to OOCSS, BEM, SMACSS, with examples.
Work With Animations - Inspecting animations.

_{⇧ back to top}

Maintainers

@sotayamashita, @Rishabh04-02 and You!

Contribute

Feel free to dive in! Open an issue or submit PRs.

Awesome CSS follows the Contributor Covenant Code of Conduct.

Critical-path (Above-the-fold) CSS Tools

Tools to help prioritize above-the-fold CSS

Prioritize above-the-fold content first.

For best performance, PageSpeed Insights recommends inlining the critical (above-the-fold) CSS of your page directly into your HTML. This eliminates additional roundtrips and allows the browser to paint the above-fold experience to your user's screen sooner. The main idea is:

Determine the above-the-fold styles for a page and write them between <style> tags in the head.
Load all other stylesheets in the footer, ideally asynchronously.

The following is a list of tools to help generate, inline and report on critical-path CSS.

Node modules

Penthouse - by Jonas Ohlsson generates critical-path CSS
Critical - by Addy Osmani generates & inlines critical-path CSS (uses Penthouse, Oust and inline-styles)
CriticalCSS - by FilamentGroup finds & outputs critical CSS

Server-side modules

mod_pagespeed - Apache module for automatic PageSpeed optimization
ngx_pagespeed - Nginx module for automatic PageSpeed optimization

Grunt tasks

CasperJS

critical-css-casperjs - CasperJS script to pull critical CSS information from pages

PhantomJS

dr-css-inliner - PhantomJS script to inline above-the-fold CSS on a page.

Inline sources (styles, scripts)

inline-styles - by Max Ogden, replaces <link> tags with inline <style> tags + inlines CSS url() calls with data URIs
gulp-inline-source - by Filip Malinowski, replaces <link> tags with inline <style> tags, and replaces <script src=""> tags with their inline content
inline-critical - by Ben Zörb, inline critical path CSS and load existing stylesheets with loadCSS
isomorphic-style-loader for Webpack - allows to extract critical CSS for any given page/screen in React apps and inline it into HTML during server-side rendering (SSR). See React Starter Kit as an example.

Async load CSS

Async loading should be used to fetch the rest of your site-wide styles after you've inlined your critical-path CSS.

loadCSS - loads CSS asynchronously using JS. Research that led to this is also available.
async & conditional loading - POC script for loading CSS files asynchronously and conditionally based on body tag classes
asyncLoader - async script/stylesheet loader
basket.js - async script/resource loader with support for localStorage caching. Can be extended to load stylesheets.

Note: The Guardian currently also cache their global styles into localStorage for subsequent page loads. More info in this comment.

Online tools

Penthouse online

Bookmarklets/Extensions

Snippet by Paul Kinlan. Patrick Hamann has an exercise using the snippet you can try out.
Snippet by Scott Jehl
CSSVacuum by ndreckshage

Render-blocking issues detection

PageSpeed Insights - Online tool that measures the performance of a page for mobile devices and desktop devices. It fetches the url twice, once with a mobile user-agent, and once with a desktop-user agent.
PSI - Node module for PageSpeed Insights reporting as part of your build process. Use directly with Gulp or use grunt-pagespeed if a Grunt user. For local testing, a write-up using this task and ngrok is available.
PageSpeed Insights DevTools extension - Chrome extension for running PageSpeed tests from inside the browser.
PageSpeed Insights Checker for mobile extension - checks Mobile PageSpeed score for every page and gives you a handy preview.

Supplementary tools

UnCSS removes unused CSS from pages, allowing you to reduce the global CSS you may need to load in for your site. Tasks are available for Grunt, Gulp and other build tools.

A Scalable CSS Reading List

A list of things to read or watch that address these two questions: What is scalable CSS? and How do we create scalable CSS?

By scalable CSS, I mean CSS that is - capable of remaining effective, coherent, extendable, and maintainable as projects grow over time - capable of being understood and worked on by any number of different people in a consistent, systematic way

Included are resources that articulate key principles and practices. The list is restricted to the articles that I consider the most important to read -- that is, the best explanations (of which I'm aware) for different approaches to the problems.

If you know of a resource that should be added, please share! File an issue or a pull request.

(There are plenty of other problems related to CSS: understanding how it works, using specific properties, accomplishing specific styles, achieving responsive design, boosting performance, etc. This list is strictly focused on the problem of creating scalable CSS.)

None of the sections present any kind of "ranking" or "suggested reading order." Just read them all.

Articles

Newest on top, oldest on bottom. (A note for you outside the US: my dates are month/day/year format.)

8 rules for a robust, scalable CSS architecture, by Jarno Rantanen (10/16/2016)
More Meaningful CSS, by Jonathan Snook (5/17/16)
CSS and Scalability, by Adam Morse (3/24/16)
Can CSS Be Too Modular?, by Harry Roberts (3/8/15)
Side Effects in CSS, by Philip Walton (3/3/15)
Used and Abused -- CSS Inheritance and Our Misuse of the Cascade, by Micah Godbolt (8/25/14)
Enduring CSS: writing style sheets for rapidly changing, long-lived projects, by Ben Frain (8/7/14)
Challenging CSS Best Practices -- suggesting a unique approach (all utility classes) the author calls Atomic CSS -- by Thierry Koblentz (10/21/13)
Atomic Design, by Brad Frost (6/10/13) -- which isn't really about CSS code, exactly; but so many people have found it a valuable way to think about frontend component architecture that it fits in well with this list.
MindBEMding - getting your head around BEM syntax, by Harry Roberts (1/25/13)
CSS Architecture, by Philip Walton (11/16/12)
SOLID CSS, by Miller Medeiros (9/10/12)
Shoot to kill: CSS selector intent, by Harry Roberts (7/17/12)
The open/closed principle applied to CSS, by Harry Roberts (6/21/12)
Keep your CSS selectors short, by Harry Roberts (5/15/12)
The single responsibility principle applied to CSS, by Harry Roberts (4/28/12)
About HTML semantics and frontend architecture, by Nicolas Gallagher (3/15/12)
An Introduction to Object Oriented CSS (OOCSS), by Louis Lazaris (12/12/11)

Authoring Frameworks & Longer Readings

Atomic CSS, Yahoo! Inc.
CSS Modules, by Glen Maddern
CSS Guidelines, by Harry Roberts
Scalable and Modular Architecture for CSS, by Jonathan Snook
SUIT CSS Documentation, by Nicolas Gallagher
Multilayer CSS, by Robert Haritonov
Object Oriented CSS Wiki by Nicole Sullivan

CSS Styleguides

These styleguides articulate conventions and guidelines for authoring scalable CSS.

(I'm distinguishing styleguides from what I would call pattern libraries, which are references created to document and exemplify existing styles rather than guidelines for the authoring of the styles. Other people often use the term styleguide to refer to both or either of these reference types. I think pattern libraries are less specifically about scalable CSS, and more about a scalable frontend design and development workflow; so I'm not including resources related to pattern libraries.)

Workflow Overviews

How we do CSS at [blank] ...

Articles providing overviews of real-life CSS methodologies for production sites and apps of significant scale. Although these articles generally don't include principles that are not better explained in the articles and longer reads above, they are so pragmatic and concrete that they are important reads in their own right. Newest first.

Refining the Way We Structure Our CSS at Trello, by Bobby Grace (11/11/14)
How we do CSS at Ghost, by Paul Davis (11/4/14)
Medium's CSS is actually pretty f***ing good, by Jacob Thornton (8/28/14)
Codepen's CSS, by Chris Coyier (7/30/14)
CSS at Lonely Planet, by Ian Feather (7/24/14)
Github's CSS, by Mark Otto (7/23/14)

Talks

Newest first, I think.

Atomic CSS (Slides), Thierry Koblentz (2015)
Managing CSS Projects with ITCSS, Harry Roberts (2014)
React: CSS in JS, Christopher Chedeau, a.k.a. Vjeux (2014)
Thinking Beyond "Scalable CSS", Nicolas Gallagher (2014)
Adaptation and Components (slides), Nicolas Gallagher (2014)
CSS is a Mess, Jonathan Snook (2013)
Architecting Scalable CSS (slides), Harry Roberts (2013)
CSS for Grownups (slides), Andy Hume (2013)
CSS module system in Google+ (slides), Shubhie Panicker (2013)
Object-Oriented CSS (slides), Nicole Sullivan (2009)

Must-Watch CSS

This is a collection of well-received talks about CSS, covering topics such as CSS Grid, flexbox, frameworks, variables, Sass, SVG, performance, tooling, and more.

Like JavaScript? Check out Must-Watch JavaScript! For other great lists check out @sindresorhus's curated list of awesome lists.

Contribution Guidelines

2020

10 Modern Layouts in 1 Line of CSS: Una Kravets, (Google Chrome Developers YouTube Channel) 21:38

2019

CSS Algorithms: Lara Schenck, Strange Loop Conference 36:18
Build a Classic Layout FAST in CSS Grid: Miriam Suzanne, (Mozilla Developer YouTube Channel) 8:29
CSS Animation - Beyond Transitions: Steven Roberts, CSSConf Budapest 28:01
Using Devtools to Understand Modern CSS Layouts: Chen Hui Jing, CSSConf EU 32:39
Hello Subgrid!: Rachel Andrew, CSSConf EU 32:56

2018

Resilient CSS: How to Write CSS That Works in Every Browser, Even the Old Ones: Jen Simmons (Layout Land playlist) 55:04
Creative Text Effects with CSS: Mandy Michael, Talk.CSS 40:46
Learn CSS Grid: Wes Bos, Laracon 44:59

2017

CSS [Variable] Secrets: Lea Verou, SmashingConf Barcelona 49:57
CSS Grid Layout: Rachel Andrew, Frontend NE 59:14
The Power of CSS: Una Kravets, Front-Trends 30:57
CSS and the First Meaningful Paint: Patrick Hamann, CSSConf EU 37:56
CSS Grid in Production: Benjamin De Cock, dotCSS 16:05

2016

CSS in 2016 and Beyond: Christian Vuerings, SFHTML5 17:15
CSS Variables: var(--subtitle): Lea Verou, CSSConf US 56:57
Laying out the Future with Grid and Flexbox: Rachel Andrew, View Source Conference 25:45
Reactive Animations with CSS Variables: David Khourshid, JSConf Iceland 31:02
Practical Blend Modes in CSS: Una Kravets, SmashingConf Freiburg 47:04
Real Art Direction on the Web: Jen Simmons, View Source Conference 31:41
You Might Not Need a CSS Framework: Belen Albeza, View Source Conference 22:46
The Dark Side of Polyfilling CSS: Philip Walton, dotCSS 22:57

2015

mdo-ular CSS: Mark Otto, jQuery UK 30:06
PostCSS: The Future After Sass and LESS: Andrey Sitnik, CSSConf US 29:09
Your Very Own Component Library: Alex Sexton, JSConf AR 20:03
Let's Move: Benjamin De Cock, CSSConf AU 24:52
Motion Design with CSS: Val Head, OpenVis Conf 29:39
Cascading Shit Show: Jacob Thornton, Code Genius 42:07
Inline Styles Are About to Kill CSS: Colin Megill, CSSConf US 36:11
Let's Talk About Our CSS: Michelle Bu, TXJS 18:11
CSS for Software Engineers for CSS Developers: Harry Roberts, SmashingConf Freiburg 51:14
Photoshop Is Dead!: Editing Images in CSS: Una Kravets, CSSConf EU 28:42
Enhancing Responsiveness With Flexbox: Zoe M. Gillenwater, CSSConf EU 37:13
Move Slow and Fix Things: Daniel Eden, dotCSS 15:06

2014

What Is a CSS Framework Anyway?: Harry Roberts, Industry Conf 48:48
CSS Is a Mess: Jonathan Snook, Beyond Tellerand 53:49
10 Commandments for Efficient CSS Architecture: Kushagra Gour, CSSConf Asia 35:55
Slaying the Dragon: How to Refactor CSS for Maintainability: Alicia Liu, Front-Trends 33:21
CSS in Your Pocket - Mobile CSS Tips from the Trenches: Angelina Fabbro, CSSConf US 34:19
Styling and Animating Scalable Vector Graphics with CSS: Sara Soueidan, CSSConf EU 29:16
Play Nice With CSS Tools and Methodologies: Brad Westfall, HTML5DevConf 42:47
Build Scalable, Automated CSS: Christian Lilley, CSSConf Asia 48:47
CSS and the Critical Path: Patrick Hamann, CSSConf EU 33:42
All the Right Moves: How to Put Your UI in Motion: Val Head, Multi-Mania 45:49
Present and Future of CSS Layout: Tab Atkins, CSS Day 49:31
Thinking Beyond "Scalable CSS": Nicolas Gallagher, dotCSS 28:46
Web Components & the Future of CSS: Philip Walton, SFHTML5 40:02
CSS Performance Tooling: Addy Osmani, CSSConf EU 46:27
3.14 Things I Didn’t Know About CSS: Mathias Bynens, CSS Day 45:35
Effortless Style: Heydon Pickering, CSS Day 49:51

2013

When Bootstrap Attacks: Pamela Fox, CSSConf US 28:48
CSS in the 4th Dimension: Lea Verou, JSConf Asia 44:49
Automated CSS Testing: Jakob Mattsson, JSConf Asia 42:07
CSSConf EU Keynote: Nicole Sullivan, CSSConf EU 20:57
CSS Application Architecture: Nicolas Gallagher, SmashingConf Freiburg 38:36
Realigning & Refactoring UI: Jina Bolton, SassConf 48:08
Normalizing Designs for Better Quality CSS: Harry Roberts, CSSConf EU 43:40
Automating the Removal of Unused CSS: Addy Osmani, Velocity Europe Conference 5:57
The Humble Border-Radius: Lea Verou, Future of Web Design 37:07
Sass and OOCSS Sitting in a Tree K-I-S-S-I-N-G: Nicole Sullivan, TXJS 27:50
Architecting Scalable CSS: Harry Roberts, Beyond Tellerand 41:57
More CSS Secrets: Another 10 Things You May Not Know about CSS: Lea Verou, W3Conf 60:39

2012

Open Source Tools and Libraries for Designers: Julie Ann Horvath, HTML5DevConf 29:39
GitHub's CSS Performance: Jon Rohan, CSS Dev Conf 40:50

2010

Handcrafted CSS: Dan Cederholm, Build Conference 44:29
The Top 5 Mistakes of Massive CSS: Nicole Sullivan, Build Conference 37:53

CSS Protips

A collection of tips to help take your CSS skills pro.

For other great lists check out @sindresorhus's curated list of awesome lists.

Protips

Use a CSS Reset
Inherit box-sizing
Use unset Instead of Resetting All Properties
Use :not() to Apply/Unapply Borders on Navigation
Check If Font Is Installed Locally
Add line-height to body
Set :focus for Form Elements
Vertically-Center Anything
Comma-Separated Lists
Select Items Using Negative nth-child
Use SVG for Icons
Use the "Lobotomized Owl" Selector
Use max-height for Pure CSS Sliders
Equal-Width Table Cells
Get Rid of Margin Hacks With Flexbox
Use Attribute Selectors with Empty Links
Style "Default" Links
Intrinsic Ratio Boxes
Style Broken Images
Use rem for Global Sizing; Use em for Local Sizing
Hide Autoplay Videos That Aren't Muted
Use :root for Flexible Type
Set font-size on Form Elements for a Better Mobile Experience
Use Pointer Events to Control Mouse Events
Set display: none on Line Breaks Used as Spacing

Use a CSS Reset

CSS resets help enforce style consistency across different browsers with a clean slate for styling elements. You can use a CSS reset library like Normalize, et al., or you can use a more simplified reset approach:

css *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

Now elements will be stripped of margins and padding, and box-sizing lets you manage layouts with the CSS box model.

Demo

Note: If you follow the Inherit box-sizing tip below you might opt to not include the box-sizing property in your CSS reset.

^{back to table of contents}

Inherit `box-sizing`

Let box-sizing be inherited from html:

```css html { box-sizing: border-box; }

, ::before, *::after { box-sizing: inherit; } ```

This makes it easier to change box-sizing in plugins or other components that leverage other behavior.

Demo

^{back to table of contents}

Use `unset` Instead of Resetting All Properties

When resetting an element's properties, it's not necessary to reset each individual property:

css button { background: none; border: none; color: inherit; font: inherit; outline: none; padding: 0; }

You can specify all of an element's properties using the all shorthand. Setting the value to unset changes an element's properties to their initial values:

css button { all: unset; }

Note: the all and unset shorthand isn't supported in IE11.

^{back to table of contents}

Use `:not()` to Apply/Unapply Borders on Navigation

Instead of putting on the border...

css /* add border */ .nav li { border-right: 1px solid #666; }

...and then taking it off the last element...

css /* remove border */ .nav li:last-child { border-right: none; }

...use the :not() pseudo-class to only apply to the elements you want:

css .nav li:not(:last-child) { border-right: 1px solid #666; }

Here, the CSS selector is read as a human would describe it.

Demo

^{back to table of contents}

Check If Font Is Installed Locally

You can check if a font is installed locally before fetching it remotely, which is a good performance tip, too.

```css @font-face { font-family: "Dank Mono"; src: / Full name / local("Dank Mono"), / Postscript name / local("Dank Mono"), / Otherwise, download it! / url("//...a.server/fonts/DankMono.woff"); }

code { font-family: "Dank Mono", system-ui-monospace; } ```

H/T to Adam Argyle for sharing this protip and demo.

^{back to table of contents}

Add `line-height` to `body`

You don't need to add line-height to each <p>, <h*>, et al. separately. Instead, add it to body:

css body { line-height: 1.5; }

This way textual elements can inherit from body easily.

Demo

^{back to table of contents}

Set `:focus` for Form Elements

Sighted keyboard users rely on focus to determine where keyboard events go in the page. Make focus for form elements stand out and consistent then a browser's default implementation:

css a:focus, button:focus, input:focus, select:focus, textarea:focus { box-shadow: none; outline: #000 dotted 2px; outline-offset: .05em; }

Demo

^{back to table of contents}

Vertically-Center Anything

No, it's not black magic, you really can center elements vertically. You can do this with flexbox...

```css html, body { height: 100%; margin: 0; }

body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; } ```

...and also with CSS Grid:

css body { display: grid; height: 100vh; margin: 0; place-items: center center; }

Want to center something else? Vertically, horizontally...anything, anytime, anywhere? CSS-Tricks has a nice write-up on doing all of that.

Note: Watch for some buggy behavior with flexbox in IE11.

Demo

^{back to table of contents}

Comma-Separated Lists

Make list items look like a real, comma-separated list:

css ul > li:not(:last-child)::after { content: ","; }

Use the :not() pseudo-class and no comma will be added to the last item.

Note: This tip may not be ideal for accessibility, specifically screen readers. And copy/paste from the browser doesn't work with CSS-generated content. Proceed with caution.

^{back to table of contents}

Select Items Using Negative `nth-child`

Use negative nth-child in CSS to select items 1 through n.

```css li { display: none; }

/ select items 1 through 3 and display them / li:nth-child(-n+3) { display: block; } ```

Or, since you've already learned a little about using :not(), try:

css /* select all items except the first 3 and display them */ li:not(:nth-child(-n+3)) { display: block; }

Demo

^{back to table of contents}

Use SVG for Icons

There's no reason not to use SVG for icons:

css .logo { background: url("logo.svg"); }

SVG scales well for all resolution types and is supported in all browsers back to IE9. Ditch your .png, .jpg, or .gif-jif-whatev files.

Note: If you have SVG icon-only buttons for sighted users and the SVG fails to load, this will help maintain accessibility:

css .no-svg .icon-only::after { content: attr(aria-label); }

^{back to table of contents}

Use the "Lobotomized Owl" Selector

It may have a strange name but using the universal selector (*) with the adjacent sibling selector (+) can provide a powerful CSS capability:

css * + * { margin-top: 1.5em; }

In this example, all elements in the flow of the document that follow other elements will receive margin-top: 1.5em.

For more on the "lobotomized owl" selector, read Heydon Pickering's post on A List Apart.

Demo

^{back to table of contents}

Use `max-height` for Pure CSS Sliders

Implement CSS-only sliders using max-height with overflow hidden:

```css .slider { max-height: 200px; overflow-y: hidden; width: 300px; }

.slider:hover { max-height: 600px; overflow-y: scroll; } ```

The element expands to the max-height value on hover and the slider displays as a result of the overflow.

^{back to table of contents}

Equal-Width Table Cells

Tables can be a pain to work with. Try using table-layout: fixed to keep cells at equal width:

css .calendar { table-layout: fixed; }

Pain-free table layouts.

Demo

^{back to table of contents}

Get Rid of Margin Hacks With Flexbox

When working with column gutters you can get rid of nth-, first-, and last-child hacks by using flexbox's space-between property:

```css .list { display: flex; justify-content: space-between; }

.list .person { flex-basis: 23%; } ```

Now column gutters always appear evenly-spaced.

^{back to table of contents}

Use Attribute Selectors with Empty Links

Display links when the <a> element has no text value but the href attribute has a link:

css a[href^="http"]:empty::before { content: attr(href); }

That's pretty convenient.

Demo

^{back to table of contents}

Style "Default" Links

Add a style for "default" links:

css a[href]:not([class]) { color: #008000; text-decoration: underline; }

Now links that are inserted via a CMS, which don't usually have a class attribute, will have a distinction without generically affecting the cascade.

^{back to table of contents}

Intrinsic Ratio Boxes

To create a box with an intrinsic ratio, all you need to do is apply top or bottom padding to a div:

```css .container { height: 0; padding-bottom: 20%; position: relative; }

.container div { border: 2px dashed #ddd; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } ```

Using 20% for padding makes the height of the box equal to 20% of its width. No matter the width of the viewport, the child div will keep its aspect ratio (100% / 20% = 5:1).

Demo

^{back to table of contents}

Style Broken Images

Make broken images more aesthetically-pleasing with a little bit of CSS:

css img { display: block; font-family: sans-serif; font-weight: 300; height: auto; line-height: 2; position: relative; text-align: center; width: 100%; }

Now add pseudo-elements rules to display a user message and URL reference of the broken image:

```css img::before { content: "We're sorry, the image below is broken :("; display: block; margin-bottom: 10px; }

img::after { content: "(url: " attr(src) ")"; display: block; font-size: 12px; } ```

Learn more about styling for this pattern in Ire Aderinokun's original post.

^{back to table of contents}

Use `rem` for Global Sizing; Use `em` for Local Sizing

After setting the base font size at the root (html { font-size: 100%; }), set the font size for textual elements to em:

```css h2 { font-size: 2em; }

p { font-size: 1em; } ```

Then set the font-size for modules to rem:

```css article { font-size: 1.25rem; }

aside .module { font-size: .9rem; } ```

Now each module becomes compartmentalized and easier to style, more maintainable, and flexible.

^{back to table of contents}

Hide Autoplay Videos That Aren't Muted

This is a great trick for a custom user stylesheet. Avoid overloading a user with sound from a video that autoplays when the page is loaded. If the sound isn't muted, don't show the video:

css video[autoplay]:not([muted]) { display: none; }

Once again, we're taking advantage of using the :not() pseudo-class.

^{back to table of contents}

Use `:root` for Flexible Type

The type font size in a responsive layout should be able to adjust with each viewport. You can calculate the font size based on the viewport height and width using :root:

css :root { font-size: calc(1vw + 1vh + .5vmin); }

Now you can utilize the root em unit based on the value calculated by :root:

css body { font: 1rem/1.6 sans-serif; }

Demo

^{back to table of contents}

Set `font-size` on Form Elements for a Better Mobile Experience

To avoid mobile browsers (iOS Safari, et al.) from zooming in on HTML form elements when a <select> drop-down is tapped, add font-size to the selector rule:

css input[type="text"], input[type="number"], select, textarea { font-size: 16px; }

:dancer:

^{back to table of contents}

Use Pointer Events to Control Mouse Events

Pointer events allow you to specify how the mouse interacts with the element it's touching. To disable the default pointer event on a button, for instance:

css .button-disabled { opacity: .5; pointer-events: none; }

It's that simple.

^{back to table of contents}

Set `display: none` on Line Breaks Used as Spacing

As Harry Roberts pointed out, this can help prevent CMS users from using extra line breaks for spacing:

css br + br { display: none; }

^{back to table of contents}

Support

Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11.

^{back to table of contents}

Translations

^{back to table of contents}

Awesome CSS Frameworks

List of awesome CSS frameworks.
Feel free to contribute.

Supported by FrontAid CMS:

Base / Reset / Normalize
Class-less
Very Lightweight
General Purpose
Material Design
Utility-based
Specialized
Toolkits
Stalled Development

Base / Reset / Normalize

normalize.css - Modern, HTML5-ready alternative to CSS resets.
Repo | #CSS
sanitize.css - The best-practices CSS foundation.
Repo | #CSS
minireset.css - Tiny modern CSS reset.
Repo | #Sass
modern-css-reset - Tiny little reset that you can use as the basis of your CSS projects.
Repo | #CSS
inuitcss - Extensible, scalable, Sass-based, OOCSS framework for large and long-lasting UI projects.
Repo | #SCSS
ress - Modern CSS reset.
Repo | #CSS
modern-normalize - Normalize for Chrome, Firefox, and Safari only (no support for Edge or Internet Explorer).
Repo | #CSS
Natural Selection - Collection of best-practice CSS selectors.
| #CSS

Class-less

Frameworks that use semantic HTML and do not rely on classes.

Water.css - Just-add-CSS collection of styles to make simple websites just a little nicer.
Repo | #CSS
MVP.css - Minimalist stylesheet for HTML elements.
Docs, Repo | #CSS
sakura - Minimal classless CSS framework/theme.
Demo, Repo | #SCSS
Tacit - CSS framework for dummies, without classes.
Repo | #SCSS
awsm.css - CSS library for semantic HTML markup without classes, attributes, etc.
Demo, Repo | #SCSS

Very Lightweight

Frameworks that are smaller than ~5KB.

Pure - Set of small, responsive CSS modules that you can use in every web project.
Demo, Docs, Repo | #CSS
Milligram - Minimalist CSS framework.
Demo, Docs, Repo | #Sass
Picnic CSS - Lightweight and beautiful library.
Demo, Docs, Repo | #SCSS
Chota - Really small CSS framework.
Demo, Docs, Repo | #CSS

General Purpose

Bootstrap - The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
Demo, Docs, Repo | #SCSS
Bulma - Modern CSS framework based on Flexbox.
Demo, Docs, Repo | #Sass
Foundation - The most advanced responsive front-end framework in the world.
Docs, Repo | #SCSS
UIkit - Lightweight and modular front-end framework for developing fast and powerful web interfaces.
Demo, Docs, Repo | #LESS #SCSS
Primer - CSS framework that powers GitHub's front-end design.
Docs, Repo | #SCSS
Carbon Components - Component library behind IBM's Carbon Design System.
Docs, Repo | #SCSS
Fomantic-UI - Build beautiful websites fast, with concise HTML, intuitive javascript, and simplified debugging.
Docs, Repo | #LESS
Pico.css - Elegant styles for all native HTML elements, dark mode automatically enabled.
Demo, Docs, Repo | #SCSS
Blaze UI - Open source modular toolkit providing great structure for building websites quickly with a scalable and maintainable foundation.
Demo, Docs, Repo | #SCSS
Base - Rock solid, responsive HTML/CSS framework.
Docs, Repo | #SCSS #LESS
Cirrus - Component and utility centric SCSS framework designed for rapid prototyping.
Demo, Docs, Repo | #CSS
turretcss - Responsive front-end framework for accessible and semantic websites.
Demo, Docs, Repo | #CSS
Vanilla Framework - Simple, extensible CSS framework. Written by the Canonical Web Team.
Demo, Docs, Repo | #SCSS
PatternFly - UI framework for enterprise web applications.
Demo, Docs, Repo | #SCSS #LESS
HiQ - Simple CSS foundation with responsive typography and input styling.
Docs, Repo | #PostCSS

Material Design

Material Components Web - Modular and customizable Material Design UI components for the web.
Demo, Docs, Repo | #SCSS
MUI - Lightweight CSS framework that follows Google's Material Design guidelines.
Docs, Repo | #SCSS

Utility-based

Tailwind CSS - Utility-first CSS framework for rapid UI development.
Docs, Repo | #CSS
Tachyons - Quickly build and design new UI without writing CSS.
Demo, Docs, Repo | #CSS
Open Props - CSS custom properties to help accelerate adaptive and consistent design.
Demo, Docs, Repo | #CSS #PostCSS

Specialized

NES.css - NES-style CSS Framework.
Demo, Docs, Repo | #SCSS
98.css - CSS library for building interfaces that look like Windows 98.
Repo | #CSS
Tufte CSS - Style your webpage like Edward Tufte’s handouts.
Repo | #CSS
Gutenberg - Modern framework to print the web correctly.
Demo, Docs | #SCSS
Bojler - Email framework for developing responsive and lightweight email templates.
Docs, Repo | #SCSS
TuiCss - Library to create MS-DOS interfaces.
Demo, Docs | #SCSS

Toolkits

Toolkits are closer to a library than to a framework. They do not provide actual styling but utilities (e.g. mixins) that you can use in your CSS preprocessor.

Bourbon - Lightweight Sass tool set.
Docs, Repo, Scaffold | #SCSS

Stalled Development

Frameworks that have not seen any real development for more than about one year or officially have been deprecated. We are keeping them here for reference/inspiration and hope for a revival.

Show Section

- [**Semantic UI**](https://semantic-ui.com) - User interface is the language of the web. ![](https://img.shields.io/github/stars/semantic-org/semantic-ui.svg?style=social&label=Star) [Docs](https://semantic-ui.com/introduction/getting-started.html), [Repo](https://github.com/semantic-org/semantic-ui) | #LESS - [**Materialize**](https://materializecss.com) - CSS framework based on material design. ![](https://img.shields.io/github/stars/Dogfalo/materialize.svg?style=social&label=Star) [Demo](https://materializecss.com/showcase.html), [Docs](https://materializecss.com/getting-started.html), [Repo](https://github.com/Dogfalo/materialize) | #SCSS - [**Spectre.css**](https://picturepan2.github.io/spectre/) - Lightweight, responsive and modern CSS framework. ![](https://img.shields.io/github/stars/picturepan2/spectre.svg?style=social&label=Star) [Docs](https://picturepan2.github.io/spectre/getting-started.html), [Repo](https://github.com/picturepan2/spectre) | #SCSS - [**Flexbox Grid**](https://flexboxgrid.com) - Grid based on CSS3 flexbox. ![](https://img.shields.io/github/stars/kristoferjoseph/flexboxgrid.svg?style=social&label=Star) [Repo](https://github.com/kristoferjoseph/flexboxgrid) - [**Basscss**](https://basscss.com) - Low-level CSS toolkit. ![](https://img.shields.io/github/stars/basscss/basscss.svg?style=social&label=Star) [Repo](https://github.com/basscss/basscss/) - [**Neat**](https://neat.bourbon.io/) - Lightweight and flexible Sass grid. ![](https://img.shields.io/github/stars/thoughtbot/neat.svg?style=social&label=Star) [Demo](https://neat.bourbon.io/examples/), [Docs](https://neat.bourbon.io/docs/latest/), [Repo](https://github.com/thoughtbot/neat) | #SCSS - [**mini.css**](https://minicss.org) - Minimal, responsive, style-agnostic CSS framework. ![](https://img.shields.io/github/stars/Chalarangelo/mini.css.svg?style=social&label=Star) [Docs](https://minicss.org/docs), [Repo](https://github.com/Chalarangelo/mini.css) | #SCSS - [**Mobi.css**](https://getmobicss.com) - Lightweight, scalable, mobile-first CSS framework. ![](https://img.shields.io/github/stars/mobi-css/mobi.css.svg?style=social&label=Star) [Docs](https://getmobicss.com/docs/introduction.html), [Repo](https://github.com/mobi-css/mobi.css) | #CSS - [**Wing**](https://kbrsh.github.io/wing/) - Beautiful CSS framework designed for minimalists. ![](https://img.shields.io/github/stars/kbrsh/wing.svg?style=social&label=Star) [Docs](https://kbrsh.github.io/wing/#installation), [Repo](https://github.com/kbrsh/wing) | #Stylus - [**Cutestrap**](https://www.cutestrap.com) - Sassy, opinionated CSS framework, a tiny alternative to Bootstrap. ![](https://img.shields.io/github/stars/tylerchilds/cutestrap.svg?style=social&label=Star) [Repo](https://github.com/tylerchilds/cutestrap) - [**unsemantic**](https://unsemantic.com) - Fluid grid for mobile, tablet, and desktop. ![](https://img.shields.io/github/stars/nathansmith/unsemantic.svg?style=social&label=Star) [Demo](https://unsemantic.com/demo-responsive), [Docs](https://unsemantic.com/css-documentation), [Repo](https://github.com/nathansmith/unsemantic) - [**Propeller**](https://propeller.in) - Front-end responsive framework based on Google's Material Design standards & Bootstrap. ![](https://img.shields.io/github/stars/digicorp/propeller.svg?style=social&label=Star) [Docs](https://propeller.in/frameworks/open-source/get-started/), [Repo](https://github.com/digicorp/propeller) | #SCSS - [**Concise CSS**](https://concisecss.com) - Give up the bloat. Stop tripping over your classes. Be concise. ![](https://img.shields.io/github/stars/ConciseCSS/concise.css.svg?style=social&label=Star) [Docs](https://concisecss.com/documentation/), [Repo](https://github.com/ConciseCSS/concise.css) | #SCSS - [**Responsive Boilerplate**](https://responsivebp.com) - Powerful, accessible, developer friendly framework for building responsive websites. ![](https://img.shields.io/github/stars/responsivebp/responsive.svg?style=social&label=Star) [Docs](https://responsivebp.com/getting-started/), [Repo](https://github.com/responsivebp/responsive) | #SCSS - [**Centurion**](https://www.centurionframework.com) - Web-based framework for rapid prototyping and building larger web projects. ![](https://img.shields.io/github/stars/justinhough/Centurion.svg?style=social&label=Star) [Docs](https://github.com/justinhough/Centurion/blob/master/DOCUMENTATION.md), [Repo](https://github.com/justinhough/Centurion)

License

License CC0 1.0:

You can copy, modify, distribute and perform the work, even for commercial purposes, all without asking permission.

Images of GitHub stars are provided by Shields.

Awesome React

A collection of awesome things regarding the React ecosystem.

React
React General Resources
React Community
React Online Playgrounds
React Tutorials
- React General Tutorials
- React Hooks
- React and TypeScript
- React Performance
- React Internals
- React Interview Questions
React Tools
- React Development Tools
- React Frameworks
- React Styling
- React Routing
- React Component Libraries
- React Awesome Components
- React Testing
- React Libraries
- React Integration
- React State Management
- React AR and VR
- React Renderers
- Forms
- Autocomplete
- Graphics
- Data Managing
- Maps
- Charts
React Native
React Native General Resources
React Native Tutorials
React Native Development Tools
React Native Sample Apps
React Native Boilerplates
React Native Awesome Components
React Native Libraries
Redux
Redux General Resources
Redux Tools
Redux Tutorials
GraphQL
GraphQL General Resources
GraphQL Tools
GraphQL Tutorials
GraphQL Implementations
Database Integration
Relay
Relay General Resources
Relay Tutorials
Relay Tools
Videos
Important Talks
React.js Conf 2015 Playlist
ReactEurope Conf 2015 Day 1 Playlist
ReactEurope Conf 2015 Day 2 Playlist
ReactRally Conf 2015 Playlist
React.js Conf 2016 Playlist
ReactRally Conf 2016 Playlist
React.js Amsterdam 2018 Playlist
Video Tutorials
Demo React Apps
Real React Apps
Contribution

React

JavaScript Library for building User Interfaces

React General Resources

React Community

React Online Playgrounds

Another Awesome Lists

React/Redux Links

React Tutorials

React General Tutorials

React Hooks

React and TypeScript

React Performance

React Internals

React Interview Questions

React Tools

React Development Tools

react-devtools - Inspection of React component hierarchy in the Chrome and Firefox Developer Tools
react-hot-loader - Tweak React components in real time
react-loadable - A higher order component for loading components with promises
loadable-components - React code splitting made easy
reactotron - A desktop app for inspecting your React and React Native projects
storybook - UI component dev & test
docz - Zero Config, live-reloading documentation with Markdown + JSX
react-styleguidist - Isolated React component development environment with a living style guide
react-cosmos - Dev tool for creating reusable React components
eslint-plugin-react - React specific linting rules for ESLint
eslint-plugin-jsx-a11y - Static AST checker for a11y rules on JSX elements
@axe-core/react - Accessibility auditing for React applications
DataFormsJS JSX Loader - Small JavaScript Compiler for quickly converting JSX to JS directly on a web page
Why Did You Render - Monkey patches React to notify you about avoidable re-renders.
Divjoy - React codebase and UI generator to speed up development (paid)
Plasmic - Powerful design tool for building your React components visually.
jsx-ast-utils - AST utility module for statically analyzing JSX
react-scanner - Extract React components and props usage from code

React Starter Kits and Toolchains

create-react-app - Set up a modern Web app by running one command
Razzle - Build production ready React applications. Razzle is toolchain for modern static and dynamic websites and web applications
Neutrino React Preset - @neutrinojs/react is a Neutrino preset that supports building React web applications
react-starter-kit - Isomorphic Web app boilerplate
create-react-library - CLI for creating reusable, modern React libraries using Rollup and create-react-app.
tsdx - Zero-config CLI for TypeScript package development

React Frameworks

next.js - The React Framework
gatsby.js - Free and open source framework based on React
react-admin - Frontend Framework for building B2B applications on top of REST/GraphQL APIs
remix - Finally, a killer React framework from the creators of React Router
Blitz - The Fullstack React Framework
aleph.js - The React Framework in Deno
refine - A React-based framework for building data-intensive applications in no time.

React Styling

styled-components - Visual primitives for the component age
emotion - Library designed for writing CSS styles with JavaScript
radium - A toolchain for React component styling
jss - Authoring tool for CSS
aphrodite - Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation
linaria - Zero-Runtime CSS in JS
stitches - CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience
vanilla-extract - Zero-runtime Stylesheets-in-TypeScript

React Routing

react-location - Enterprise Client-Side Routing for React
react-router - Declarative routing for React
navi - Declarative, asynchronous routing for React
curi - JavaScript router for single-page applications
reach - Next Generation Routing for React
universal-router - A simple middleware-style router for isomorphic JavaScript web apps
wouter - A minimalist-friendly ~1.3KB routing library

React Component Libraries

material-ui - React components for faster and easier web development
blueprint - A React-based UI toolkit for the webs
Fluent UI - A set of React components for building Microsoft web experiences
react-bootstrap - Bootstrap components built with React
reactstrap - Simple React Bootstrap 4 components
ant-design - A design system with values of Nature and Determinacy
chakra-ui - Simple, Modular & Accessible UI Components for your React Applications
semantic-ui-react - The official Semantic-UI-React integration
evergreen - Evergreen React UI Framework by Segment
grommet - A react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package
rebass - React primitive UI components built with styled-system
reakit - Accessible, Composable and Customizable components for React
rsuite - A suite of React components
atlaskit - Atlassian's official UI library, built according to the Atlassian Design Guidelines.
baseweb - Base Web is a foundation for initiating, evolving, and unifying web products.
primereact - A complete UI Framework for React with 50+ components featuring material, bootstrap and custom themes.
eui - Elastic UI Framework
react-spectrum - Adobe's collection of libraries and tools that help you build adaptive, accessible, and robust user experiences
ring-ui - JetBrains Web UI components
react-bulma-components - React components for Bulma framework
react-bulma - React.js components for Modern CSS framework based on Flexbox
trunx - Super Saiyan React components, son of awesome Bulma, implemented in TypeScript
bumbag-ui - Build accessible & themeable React applications with your Bumbag
Mantine – A fully featured React library with 100+ hooks and components with native dark theme support
radix - An open-source UI component library for building high-quality, accessible design systems and web apps

React Awesome Components

Awesome React Components list
react-select - The Select Component for React
react-beautiful-dnd - Beautiful and accessible drag and drop for lists with React
react-dnd - Drag and Drop for React
react-grid-layout - A draggable and resizable grid layout with responsive breakpoints
react-table - A lightweight, fast and extendable datagrid for React
react-data-grid - Excel-like grid component built with React
react-draggable - React draggable component
react-resizable-and-movable - A resizable and draggable component for React
react-resizable - A simple React component that is resizable with a handle
react-resizable-box - A resizable component for React
react-searchbox-awesome - Minimalistic searchbox
react-sortable-pane - A sortable and resizable pane component for React
react-spaces - Nestable resizable, anchored, scrollable components
react-dates - An easily internationalizable, mobile-friendly datepicker library for the web
react-big-calendar - Calendar component
react-datepicker - ReactJS Datepicker
react-list - A versatile infinite scroll React component
react-intl - Internationalize React apps
react-i18next - Internationalization for React done right
react-aria-modal - A fully accessible React modal
react-hotkeys - Declarative hotkey and focus area management for React
react-keydown - Lightweight keydown wrapper for React components
react-joyride - Create guided tours for your apps
react-virtualized - React components for efficiently rendering large lists and tabular data
react-window - React components for efficiently rendering large lists and tabular data
data-source - Library to power streaming data visualisations as used in Facebook's Flipper
react-text-mask - Input mask for React
react-loading-skeleton - Create skeleton screens that automatically adapt to your app
react-spinkit - A collection of loading indicators animated with CSS for React
rheostat - Accessible slider component built with React
qrcode.react - QR component for use with React
react-archer - Draw arrows between React elements
react-pdf-viewer - A PDF viewer made for React
react-parallax-tilt - Easily apply tilt hover effect on React components
react-popper - Position tooltips and popovers in an elegant, performant manner
react-tsparticles - Easily create highly customizable particles animations
react-spring - Spring-physics based animation library for React applications
framer-motion - A React library to power production-ready animations
react-accessible-accordion - React Component for creating an 'Accordion' that adheres to the WAI ARIA spec for accessibility.
react-truncate-markup - React component for truncating JSX markup.
react-cookie - Universal cookies for React
react-slick - Carousel component built with React
react-gtm-module - Google Tag Manager Module for React
react-device-detect - Detect device for React
react-colorful - A tiny (2,5 KB), dependency-free, fast and accessible color picker component
react-modal - Accessible modal dialog component for React
cleave.js - Format input text content when you are typing
react-fontawesome - Font Awesome 5 React component
react-advanced-cropper - An advanced React component for image cropping
swiper - modern mobile touch slider

React Testing

jest - Delightful JavaScript Testing Framework
enzyme - JavaScript Testing utilities for React
react-testing-library - Simple and complete React DOM testing utilities
react-hooks-testing-library - React hooks testing utilities that encourage good testing practices
majestic - Zero config GUI for Jest

React Libraries

react-border-wrapper - A wrapper for placing elements along div borders in React.
react-magic - Automatically AJAXify plain HTML with the power of React
react-toolbox - A set of React components implementing Google's Material Design specification
tcomb-react - Library allowing you to check all the props of your React components
react-responsive - Media queries in react for responsive design
preact - Fast 3kb React alternative with the same ES6 API.
riotjs - A React-like, 3.5KB user interface library
Maple.js - Bringing the concept of web-components to React
react-i13n - A performant, scalable and pluggable approach to instrumenting your React application
react-icons - svg react icons of popular icon packs
react-open-doodles - Awesome free illustrations as react components.
Keo - Plain functions for a more functional Deku approach to creating React components, with functional goodies such as pipe, memoize, etc...
Bit - A virtual repository for managing and using react and other web components across applications
AtlasKit - Atlassian's React UI library
ReactiveSearch - UI components library for Elasticsearch
Slate - A completely customizable framework for building rich text editors.
react-json-schema - Construct React elements from JSON by mapping JSON definitions to React components that you expose.
react-lodash - Lodash as React components
react-helmet - A document head manager for React
react-snap - Zero-configuration framework-agnostic static prerendering for SPAs
Draft.js - A React framework for building text editors
refract - Harness the power of reactive programming to supercharge your components
react-desktop - OS X and Windows UI components built with React
reapop - A simple and customizable React notifications system
react-extras - Useful components and utilities for working with React
react-instantsearch - Lightning-fast search for React and React Native applications, by Algolia
uppy - The next open source file uploader for web browsers
react-motion - A spring that solves your animation problems
react-esi - React Edge Side Includes
react-aria - Adobe's library of React Hooks that provides accessible UI primitives for your design system
react-uploady - Modern file-upload components & hooks for React.

React Integration

ReasonReact
React Rails
ReactJS.NET
om - ClojureScript interface
Reagent - A minimalistic ClojureScript interface to React.js
Express React views
React Page Middleware
ngReact - React Components in Angular
coffee-react-transform - Provides React JSX support for Coffeescript
sprockets-coffee-react - Sprockets preprocessor for CJSX
react-kup - A simple, non-intrusive alternative to jsx for coffeescript
turbo-react - Combine Turbolinks and React to apply DOM diffs
react-bacon - A little module for using React with Bacon.js
msx - React's JSX Transformer, tweaked to output calls to Mithril
react-backbone - Backbone-aware mixins for react
NestedReact - transparent integration with Backbone Views and NestedTypes models
backbone-reaction - React, Backbone and then some
react.backbone - Plugin for React to make Backbone migration easier
reactbone - React extensions for Backbone
backbone-react-ui - React components for use with backbone and backbone paginator
react-events - Declarative managed event bindings for react components
react-mixin-manager - React mixin registration manager
react-topcoat by @plaxdan - Topcoat CSS components built with the React library
react-topcoat by @arnemart - A collection of React components for Topcoat
reactdown - Write React components using markdown syntax
react-jade - Compile Jade to React JavaScript
jade-react - Compile Jade templates to React.DOM expressions
gulp-jade-react - Compile Jade templates into React de-sugared JSX with Gulp
sbt-reactjs - React SBT Plugin using npm
scalajs-react - A guilty affair between Scala.js and Facebook's React
react-xtags - Using React to implement xtags
jreact - React on server-side Java (with Rhino or Nashorn)
React.hiccup - A complete replacement for JSX written in sweet.js
react-play - Rendering React components in the Play Framework with JDK8's Nashorn
rx-react - Utilities to works with React in a RxJS
react-with-di - A hacked prototype of React.js with DI
reactfire - ReactJS mixin for easy Firebase integration
react-clickdrag-mixin - ClickDrag mixin for React component
react-masonry-mixin - Standalone mixin for Masonry (@desandro)
react-packery-mixin - Standalone mixin for Packery (Metafizzy)
react-dropzone - Simple HTML5 drag-drop zone with React.js.
aframe-react - A-Frame VR + React
react-three-fiber - A react reconciler for threejs (web and react-native)
react-three - React bindings to create and control a 3D scene using three.js
react-three-renderer - Render into a three.js canvas using React
react-threejs - Simplest bindings between React & Three.js
react-masonry-css - Fast Masonry layout powered by CSS, dependency free
react-captcha - A react.js reCAPTCHA for Google
reaptcha - Clean, modern and simple React wrapper for Google reCAPTCHA
react-recaptcha-that-works - A reCAPTCHA bridge for React that works

React State Management

redux - Predictable State Container for JavaScript Apps
mobx - Simple, scalable state management
react-query - Hooks for fetching, caching and updating asynchronous data in React
flux - Application architecture for building user interfaces
recoil - Experimental state management library for React apps
xstate-react - State machines and statecharts for the modern web
zustand - Bear necessities for state management in React
easy-peasy - Vegetarian friendly state for React
hookstate - The simple but very powerful and incredibly fast state management for React that is based on hooks
effector - Fast and powerful reactive state manager
reactn - React, but with built-in global state management
react-facet - Observable-based state management for performant game UIs built in React

React AR and VR

Viro React - Platform for rapidly building AR/VR applications using React Native

React Renderers

react-three-fiber - A React renderer for Three.js
react-pdf - Create PDF files using React
ink - React for interactive command-line apps
react-blessed - A React renderer for blessed terminal interface library
react-sketchapp - Render React components to Sketch
react-figma - A React renderer for Figma
react-nil - A react null renderer
remotion - Create videos programmatically in React

Forms

formik - Build forms in React, without the tears
react-hook-form - React Hooks for forms validation
react-jsonschema-form - A React component for building Web forms from JSON Schema
react-final-form - High performance subscription-based form state management for React
unform - Performance-focused API for React forms
formily - Alibaba Group Unified Form Solution
uniforms - A React library for building forms from any schema
formsy-react - A form input builder and validator for React
react-formal - Sophisticated HTML form management for React
vest - Declarative form validation framework inspired by unit testing syntax.

Autocomplete

react-autocomplete by @rackt - WAI-ARIA compliant React autocomplete (Archived, read-only)
react-autosuggest by @moroshko - WAI-ARIA compliant React autosuggest component
react-autocomplete by @eliseumds - Just tasting some ReactJS + RxJS
react-autocomplete by @prometheusresearch - Autocomplete widget based on React
instatype by @gragland - Simple react autocomplete component
downshift - 🏎 Primitives to build simple, flexible, WAI-ARIA compliant enhanced input React components
React Bootstrap Typeahead - A React-based typeahead that relies on Bootstrap for styling and was originally inspired by Twitter's typeahead.js.

Graphics

react-art - React Bridge to the ART Drawing Library
react-canvas - High performance <canvas> rendering for React components
react-famous - Complex 3D animations UI at 60 FPS with Famo.us
react-kinetic - HTML5 Canvas via KineticJS using React
react-svg-morph - morph your svg components one into another
react-hooks-svgdrawing - SVG Drawing with React hooks
react-svg-pan-zoom - A React component that adds pan and zoom features to SVG.

Data Managing

immer - Create the next immutable state by mutating the current one
ReSub - A library for writing better React components and data stores
immutable-js - Immutable Data Collections for Javascript
baobab - JavaScript & TypeScript persistent and optionally immutable data tree with cursors
WatermelonDB - 🍉 Reactive & asynchronous database for powerful React and React Native apps ⚡️
RxDB - A realtime Database for JavaScript Applications

Maps

react-googlemaps - React interface to Google maps
react-maps - A map component for React
react-google-maps - React.js Google Maps integration component
react-gmaps - A Google Maps component for React.js
react-map-gl - A React wrapper for MapboxGL-js plus overlay API
google-map-react - Isomorphic google map React component
react-mapbox-gl - A mapbox-gl-js wrapper to make the API react friendly
google-maps-react - A declarative Google Map React component using React, lazy-loading dependencies, current-location finder and a test-driven approach by the Fullstack React team.
react-leaflet - React components for Leaflet maps
react-geo - A set of geo-related components using react, antd, and ol
pigeon-maps - ReactJS maps without external dependencies

Charts

vx - Visualization components
victory - A collection of composable React components for building interactive data visualizations
react-vis - Data Visualization Components
recharts - Redefined chart library built with React and D3
nivo - Provides a rich set of data visualization components, built on top of the D3 and React libraries
echarts-for-react - Apache ECharts components for React wrapper
react-apexcharts - React Component for ApexCharts
chartify - React plugin for building charts using CSS

React Native

Framework for building native apps using React

React Native General Resources

React Native Tutorials

React Native Development Tools

react-native-code-push - React Native module for CodePush

React Native Sample Apps

React Native Boilerplates

Create React Native App - Create React Native apps that run on iOS, Android, and web
Ignite - The hottest CLI for React Native, boilerplates, plugins, generators, and more!

React Native Awesome Components

Expo - The Expo platform for making cross-platform mobile apps
react-navigation - Routing and navigation for your React Native apps
react-native-social-share - Use the iOS and Android native Twitter and Facebook share popup with React Native
react-native-fbsdk - A wrapper around the iOS Facebook SDK
react-native-side-menu - Simple customizable component to create side menu
react-native-mapbox-gl - A Mapbox GL react native module
react-native-icons - Quick and easy icons in React Native
react-native-vector-icons - 3000 Customizable Icons for React Native with support for NavBar/TabBar
react-native-google-signin - Google Signin for React Native
react-native-picker-modal-view
react-native-gifted-chat - The most complete chat UI for React Native
react-native-fast-image - FastImage, performant React Native image component
recyclerlistview - High performance listview for React Native and web!
react-native-largelist - The best large list component for React Native
react-native-gesture-handler - Declarative API exposing platform native touch and gesture system to React Native
rn-placeholder - Display some placeholder stuff before rendering your text or media content in React Native

React Native Libraries

sentry-react-native - Real-time crash reporting for your web apps, mobile apps, and games.
realm-js - Realm is a mobile database: an alternative to SQLite & key-value stores
react-native-device-info - Device Information for React Native iOS and Android
react-native-react-bridge - A toolset to run React web app in React Native and handle communication between them.
uncompress-react-native - Simple library to decompress files .zip, .rar, .cbz, .cbr in React Native.

Redux

Predictable State Container for JavaScript Apps

Redux General Resources

Redux Tools

react-redux - Official React bindings for Redux
redux-toolkit - The official, opinionated, batteries-included toolset for efficient Redux development
redux-devtools - DevTools for Redux with hot reloading, action replay, and customizable UI
reselect - Selector library for Redux
redux-thunk - Thunk middleware for redux
redux-saga - An alternative side effect model for Redux apps
connected-react-router - A Redux binding for React Router
redux-form - A Higher Order Component using react-redux to keep form state
normalizr - Normalizes nested JSON according to a schema
redux-observable - RxJS middleware for Redux
redux-undo - Higher order reducer to add undo/redo functionality to redux state containers
redux-persist - Persist and rehydrate a redux store
Rematch - Redux made easy

Redux Tutorials

GraphQL

A query language for your API

GraphQL General Resources

GraphQL Tools

graphql-js - A reference implementation of GraphQL for JavaScript
express-graphql - Create a GraphQL HTTP server with Express
Apollo - Industry-standard GraphQL implementation
GraphQL Playground - GraphQL IDE for better development workflows

GraphQL Tutorials

GraphQL Implementations

graphql-ruby - Ruby implementation of GraphQL
graphql-java - GraphQL Java implementation
sangria - Scala GraphQL client and server library
graphql-php - A PHP port of GraphQL reference implementation
graphene - GraphQL framework for Python
graphql-dotnet - GraphQL for .NET
graphql-go - GraphQL for Go
juniper - GraphQL server library for Rust

Database Integration

Hasura - Instant GraphQL for all your data
Prisma - Next-generation ORM for Node.js and TypeScript
graphql-sequelize - GraphQL & Relay for MySQL & Postgres via Sequelize

Relay

Data-Driven React Applications

Relay General Resources

Relay Tutorials

Relay Tools

graphql-relay-js - A library to help construct a graphql-js server supporting react-relay
react-router-relay - Relay integration for React Router
relay-local-schema - Use Relay without a GraphQL server
relay-codemod - Codemod scripts based for on jsodeshift to update Relay APIs

Videos

reactjsvideos.com

Important Talks

React.js Conf 2015 Playlist

ReactEurope Conf 2015 Day 1 Playlist

ReactEurope Conf 2015 Day 2 Playlist

ReactRally Conf 2015 Playlist

React.js Conf 2016 Playlist

React Amsterdam 2016 Playlist

ReactEurope Conf 2016 Day 1 Playlist

ReactEurope Conf 2016 Day 2 Playlist

ReactRally Conf 2016 Playlist

React Conf 2017 Playlist

React.js Amsterdam 2018 Playlist

React Amsterdam 2019 Playlist

Video Tutorials

Trying React Hooks for the first time with Dan Abramov

Demo React Apps

hackernews-react-graphql - Hacker News clone rewritten with universal JavaScript, using React and GraphQL
react-reduction - Free Admin Template Built with React and Bootstrap4
reactjs-tmdb-app - Responsive React The Movie Database App
react-shopping-cart - Simple ecommerce cart application built with React Redux

Real React Apps

kibana - Your window into the Elastic Stack
firefox debugger - The Firefox debugger that works anywhere
spectrum – Simple, powerful online communities
mattermost - Open source Slack alternative
overreacted - Personal blog by Dan Abramov
winamp2-js - Winamp 2 reimplemented for the browser
dnote - A command line notebook with multi-device sync and web interface

Contribution

This list started as personal collection of interesting things about React. At the time it started React was in beta, there was special script to transform JSX to JS and even Flux was not yet published. React is mainstream now, lots of things happened. Please, do not try to use this list as advertisement board or place for public push of your experiments. Only fully free resources here, please. Do not hesitate to suggest cleaning PRs for outdated projects and articles along with new contributions. Your contributions and suggestions are heartily♡ welcome, though. (✿◠‿◠)

Awesome Relay

Awesome resources for Relay, based on the Awesome project

Learning Resources
Documentation
FAQs
Tutorials
Overviews
Example Implementations
Lists of Lists
Ecosystem
Libraries & Packages
Tooling
Starter Kits
Relay-Specific Server Support
Go
JavaScript
Python
Ruby
- Rails
Scala
Testing

Learning Resources

Documentation

Official Docs - Official Relay documentation.

FAQs

Unofficial Relay FAQ - Common questions answered! Relay resources are scarce at the moment, so this is very helpful if you get stuck.

Tutorials

Getting Started with Relay - One of the few detailed walk throughs of hand-on Relay.
Relay 101: Building A Hacker News Client - A complete workable example.
Relay 102: Mutations - A follow up to "Relay 101" concentrating on mutations.
Facebook Relay talk - Lunch and Learn session - Walkthrough of building a simple app, and demonstration of GraphiQL.
A Beginner's Guide to Relay Mutations - Mutations in depth.
Learn Relay - Shows you how to make a Pokemon-themed CRUD app, providing a personal, cloud-based GraphQL backend so you can focus on the client-side code.

Overviews

React Data Fetching with Relay - Clear conceptual overview of Relay's moving parts and magic.
Joseph Savona - Relay: An Application Framework For React - Conceptual overview of Relay from the Facebook team.
F8 2015 - React Native & Relay: Bringing Modern Web Techniques to Mobile - Overview of Relay, some about the philosophy.
Relay - Daniel Dembach - Hamburg React.js Meetup - A good general overview of Relay, some discussion of alternatives. Common questions are covered in Q&A at the end.
Facebook Relay talk - Lunch and Learn session - Walkthrough of building a simple app, and demonstration of GraphiQL.
React with Relay and GraphQL with Andrew Smith - High level overview of Relay and GraphQL, with some useful discussion from the audience. Some discussion of other front-end frameworks, as well.
Relay for Visual Learners - Very clear set of diagrams laying out how the different parts of Relay relate to each other.
Relay: Seamless Syncing For React - An overview of what Relay is, and some discussion of experience using it in production.
Cartoon Intro to Facebook's Relay - An overview of how Relay works, complete with illustrations.
Part 1: Saying what data you need with GraphQL
Part 2: Fetching data from the server
Part 3: Syncing changes back up to the server
Part 4: How it all fits together

Example Implementations

Relay TODO MVC - The classic TODO example app, written with Relay.
relay-chat - Relay with routing and pagination.
koa-graphql-relay-example - "TODO" app with koa-graphql and relay.
todomvc-relay-go - Relay TodoMVC app, driven by a Golang GraphQL backend.

Lists of Lists

Relay and GraphQL Introduction Materials

Ecosystem

Libraries & Packages

graphql-relay-js - Simplifies creating a JS GraphQL server for react-relay.
Babel Relay Plugin - Use Relay the latest ES6+ syntax.
react-router-relay - react-router bindings for Relay. Greatly simplifies many local state UI uses cases.
Relay and Routing - A well-articulated walk through of react-router-relay, and the problems that it solves.
relay-nested-routes - Generate nested routes that reflect nested data. Helpful for managing deep data.
isomorphic-relay-router - Server side rendering support for react-router-relay.
relay-decorator - Simply syntax for Relay containers with ES7 decorators (@ syntax)
recompose-relay - Ease composition of Relay containers by currying and providing the component after the container.
relay-local-schema - Use a local schema; no need for a remote GraphQL server.
react-native-relay - Use Relay with React Native.
May be supported out of the box in the future.
relay-sink - Use Relay to fetch and store data outside of a React component.
babel-plugin-flow-relay-query - Convert Flow types into Relay fragments.
sequelize-relay - Make Relay compatible with sequelize.
relay-mongodb-connection - Create Relay connections from MongoDB cursors.
relay-composite-network-layer - Compose your Relay Network Layer of many different Network Layers each with their own schema.
react-relay-network-layer - A Network Layer that adds support for query-batching and middlewares. It additionally provides some useful middlewares such as for auth, for logging, etc.

Tooling

GraphiQL - A library to introspect GraphQL, test queries and mutations.
GraphiQL App - A standalone app for viewing GraphQL, introspection docs, and testing queries/mutations. Invaluable for debugging your Relay app.
relay-local-schema - Use a local schema; no need for a remote GraphQL server.
Babel Relay Plugin - Use Relay the latest ES6+ syntax.

Starter Kits

Relay Skeleton - Relay project skeleton.
Relay Starter Kit - An app that it already set up with a basic setup. Just clone and tweak to suit your needs!
Node.js API Starter Kit - Boilerplate and tooling for building data APIs with Node.js, GraphQL and Relay
Simple Relay Starter - A Browserify version of the Relay Starter Kit.
UniversalRelayBoilerplate Boilerplate + examples for React Native (iOS, Android), React (isomorphic, Material-UI), Relay, GraphQL, JWT, Node.js, Apache Cassandra.
Relay on Rails Starter Kit - A barebones starter kit for Relay application on Rails server. Just clone and tweak!
Relay Fullstack - Relay Starter Kit integrated with Relay, Express, Webpack, Babel, Material Design Lite, and PostCSS.

Relay-Specific Server Support

Go

Go Relay - A Go/Golang library to help construct a graphql-go server supporting react-relay.
todomvc-relay-go - React/Relay TodoMVC app, driven by a Golang GraphQL backend.

JavaScript

graphql-relay-js - Simplifies creating a JS GraphQL server for react-relay.

Python

graphql-relay-py - A library to help construct a graphql-py server supporting react-relay.

Ruby

graphql-relay-ruby - Relay helpers for GraphQL & Ruby.

Rails

GraphQL and Relay on Rails — First relay powered react component - Full walk through of a simple Relay setup, including clonable code.
Relay/GraphQL On Rails - A brief example of Relay with Rails, complete with several diagrams to aid in comprehension.
Relay on Rails Starter Kit - A barebones starter kit for Relay application on Rails server. Just clone and tweak!

Scala

sangria-relay - Relay support for Sangria.

Testing

Writing Simple Unit Tests with Relay - An early first look at testing Relay.

Awesome React Hooks

A curated list about React Hooks.

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

Hooks
Tutorials/Articles/Workshops
Discussions
Examples
Extensions/Libraries

Hooks

Tutorials/Articles/Workshops

React Today and Tomorrow and 90% Cleaner React - Dan Abramov and Sophie Alpert.
Making Sense of React Hooks - Dan Abramov.
React Hooks and Suspense - Kent C. Dodds.
React Hooks & testing: Stepping through React code - Kent C. Dodds.
My Thoughts on React Hooks - Ben Awad.
Fetching Data from an API with React Hooks useEffect - Ben Awad.
Are React Hooks Slower than Class Components? - Ben Awad.
Building a Todo List with React Hooks useState - Ben Awad.
Using React Hooks vs. Class Components - Ben Awad.
Using Immer with Reducers and React Hooks - Ben Awad.
React Hooks useContext - Ben Awad.
Everything you need to know about React Hooks - Carl Vitullo.
Hooks in react-spring, a tutorial - Paul Henschel.
React Hooks: Notes Taken - Tomáš Konrády.
Getting Started with React Hooks - Chris Sevilleja.
React hooks: not magic, just arrays - Rudi Yardley.
Why React’s new Hooks API is a game changer - Rudi Yardley.
Writing Custom React Hooks for GraphQL - Nader Dabit.
Manage global state with React Hooks - Charles Stover.
React Hooks: Managing Web Sockets with useEffect and useState - Ross Bulat.
Primer on React Hooks - Austin Johnston.
React Hooks - A deeper dive featuring useContext and useReducer - Austin Johnston.
Advanced React Hooks Workshop - Kent C. Dodds.

Discussions

v6 Candidate Preview: Use React Hooks for connect - Mark Erikson.
RFC: React Hooks - Sebastian Markbåge.
Using Hooks in React Native - Héctor Ramos.

Examples

Color Match - Color Match Game.
React Hooks counter - Counter using useState of React Hooks.
Toggle component - Toggle component made with React Hooks.
Hooks test - Somewhat complicated use case solved relatively nicely with React Hooks.
React Hanger - React Hanger example.
React Navigation Hooks - React hooks for convenient react-navigation use.
Haunted - React's Hooks API implemented for web components.
useHooks - Easy to understand React Hook recipes by Gabe Ragland.
Collection of React Hooks - Collection of React Hooks.
React Spring demo - Demo of how react-spring could use React Hooks as a new API.
React Hooks - React Hooks useState() and useEffect().
Hooks Todo App - App made with React Hooks.
react-thanos - React hooks implementation of Google's Thanos easter egg.

Extensions/Libraries

redux-react-hook - React Hook for accessing state and dispatch from a Redux store.
react-use - Collection of essential React Hooks.
The Platform - Browser API's turned into React Hooks and Suspense-friendly React elements for common situations.
eslint-plugin-react-hooks - This plugin enforce rule of hooks to avoid common mistakes.
react-hooks-lib - A set of reusable React Hooks.
use-immer - A hook to use immer as a React hook to manipulate state.
react-hanger - A small collection of useful hooks for React 16.7.
react-firebase-hooks - A set of reusable React Hooks for Firebase.
react-intersection-visible-hook - React hook to track the visibility of a functional component based on IntersectionVisible Observer.
use-timer - Simple React hook to handle timer.
react-native-hooks - React Native APIs turned into React Hooks for use in stateless React components.
react-with-hooks - Ponyfill for the proposed React Hooks API.
react-hooks-screen-type - Determining screen size type for Bootstrap 4 grid.
use-http - React hooks for making isomorphic HTTP requests.
react-fetch-hook - React hook for conveniently use Fetch API.
storeon - hook-based state manager in 173 bytes.
react-hook-form - Performance, flexible and extensible forms with easy to use for validation.

License

Awesome React hooks is CC0 licensed.

Web Components the Right Way

A curated list of awesome Web Components resources.

Web Components — a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.

Introduction
Standards
Custom Elements
Shadow DOM
HTML Templates
CSS Shadow Parts
Polyfills
Custom Elements polyfills
Customized Built-in Elements polyfills
Shadow DOM shims
HTML Templates polyfills
Guides
Accessibility
Best Practices
Codelabs
Examples
Articles
Architecture
Interoperability
Limitations
Styling
Real World
Case Studies
Components
Component Libraries
Design Systems
Use Cases
Libraries
Class Based
Functional
Integrations
Benchmarks
Frameworks
Angular
React
Vue
Svelte
Ecosystem
Starter Kits
Tools
Books
Tutorials
Insights
Podcasts
Presentations
Talks
Usage Metrics
Proposals
Form-associated Custom Elements
Constructable Stylesheet Objects
Custom State Pseudo Class
Miscellaneous
History
Who to follow
License

Web Components the Right Way was made with love by Mateus Ortiz and maintained by Serhii Kulykov

Introduction

Standards

Custom Elements

Custom Elements provide a way for authors to build their own fully-featured DOM elements.

Shadow DOM

Shadow DOM describes a method of combining multiple DOM trees into one hierarchy and how these trees interact with each other within a document, thus enabling better composition of the DOM.

HTML Templates

<template> element is used to declare fragments of HTML that can be cloned and inserted in the document by script.

CSS Shadow Parts

CSS Shadow Parts allow developers to expose certain elements inside Shadow DOM for styling purposes.

Polyfills

Custom Elements polyfills

@webcomponents/custom-elements - Custom Elements polyfill by Polymer team.
document-register-element - Custom Elements polyfill by Andrea Giammarchi.

Customized Built-in Elements polyfills

@corpuscule/custom-builtin-elements - Customized built-in elements polyfill by CorpusculeJS.
@ungap/custom-elements-builtin - Customized built-in elements polyfill by ungap project.

Shadow DOM shims

@webcomponents/shadydom - ShadowDOM v1 shim.
@webcomponents/shadycss - ShadowDOM style encapsulation shim.
@lwc/synthetic-shadow - Shadow DOM polyfill by LWC.

HTML Templates polyfills

@webcomponents/template - Minimal polyfill for <template>.
@ungap/import-node - An importNode polyfill for IE11 by ungap project.

Guides

Accessibility

Best Practices

Codelabs

Examples

generic-components - Collection of generic web components with a focus on accessibility, and ease of use.
howto-components - Collection of web components that implement common web UI patterns.
open-wc code examples - Collection of best practices and design patterns for developing web components.
vanilla-retro-js - Vanilla JS UI component library of HTML deprecated tags.
web-components-examples - Series of web components examples, related to the MDN web components documentation.

Articles

Architecture

Interoperability

Limitations

Styling

Real World

Case Studies

Components

<api-viewer> - API documentation and live playground for Web Components.
<chess-board> - Standalone chess board web component.
<css-doodle> - Web component for drawing patterns with CSS.
<dark-mode-toggle> - Custom element that allows to create a dark mode toggle or switch.
<emoji-picker> - Lightweight emoji picker, distributed as a web component.
<fg-modal> - Accessible modal dialog web component.
<file-viewer> - Web component built with Svelte to view files.
<json-viewer> - Web component to visualize JSON data in a tree view.
<lite-youtube> - Lite YouTube embed with a focus on visual performance.
<midi-player> - MIDI file player and visualizer web components.
<model-viewer> - Web component for rendering interactive 3D models.
<player-x> - Media player web component.
<progressive-image> - Custom element to progressively enhance image placeholders.
<range-slider> - Accessible range slider custom element with keyboard support.
<rapi-doc> - Web component for creating documentation from OpenAPI Specification.
<shader-doodle> - Web component for writing and rendering shaders.
<trix-editor> - Rich text editor custom element for everyday writing.
<vime-player> - Customizable, extensible, accessible and framework agnostic media player.
<web-vitals> - Bring web vitals quickly into your page using custom elements.

Component Libraries

AMP - Web component framework for easily creating user-first websites, stories, ads, emails and more.
Apollo Elements - Custom elements for using Apollo GraphQL with various web components libraries.
AXA Pattern Library - AXA CH UI components library built with Web Components.
Blackstone UI - Web components for creating interfaces by Blackstone Publishing.
Blaze UI Atoms - Set of web components powered by Blaze CSS.
Brightspace UI core - Collection of web components for building Brightspace applications.
Clever components - Collection of Web Components made by Clever Cloud.
DataFormsJS - Standalone Components for SPA routing, displaying data from web services, and more.
elements-sk - Collection of custom elements for "a la carte" web development.
github-elements - GitHub's Web Component collection.
Elix - High-quality, customizable web components for common user interface patterns.
Immersive Custom Elements - Set of web components for embedding immersive (VR & AR) content.
Iooxa - Web components for interactive scientific writing, reactive documents and explorable explanations.
Joomla UI custom elements - Compilation of Joomla 4 Custom Elements.
Ketch.UP - Web components library for Sme.UP.
Lion Web Components - Set of highly performant, accessible and flexible Web Components.
LRNWebComponents - ELMS:LN produced web components for any project.
Lume - Custom elements for defining 2D or 3D scenes rendered with CSS3D or WebGL.
Microsoft Graph Toolkit - Collection of web components for the Microsoft Graph.
Nightingale - Data visualisation web components for the life sciences.
Nuxeo Elements - Components for building web applications with Nuxeo using Web Components.
Open Business Application Platform Web Components - Collection of web components designed for business applications.
Pixano Elements - Re-usable web components dedicated to data annotation tasks.
Shoelace - A forward-thinking library of web components.
Smart Web Components - Web components for business applications.
TEI Publisher Components - Collection of web components used by TEI Publisher and apps generated by it.
Tradeshift Elements - Reusable Tradeshift UI Components as Web Components.
Vaadin components - Evolving set of high-quality web components for building business web applications.
Warp View - Collection of charting web components for Warp 10.
Wired Elements - Set of common UI elements with a hand-drawn, sketchy look.
Wokwi Elements - Web Components for Arduino and various electronic parts.
XWeather - Collection of web components implementing portions of the OpenWeatherMap API.

Design Systems

Amber Components - Web Components implementation of the Amber Design System.
Bolt Design System - Twig and Web Component-powered UI components, reusable visual styles and tooling.
Calcite Components - Shared Web Components for Esri's Calcite design framework.
Carbon Custom Elements - Carbon Design System variant on top of Web Components.
Chameleon Web Components - Collection of framework-agnostic elements based on the Chameleon Design System.
Clarity Core Web Components - Suite of web components from the Clarity Design System.
Crayons - Collection of web components that adheres to the Freshworks Design System.
FAST Components - Library of Web Components based on the FAST design language.
Fluent UI Web Components - Library of Web Components that supports Microsoft's Fluent design language.
GOV.UK Web Components - Set of encapsulated web components consuming the GOV.UK Design System.
Helix UI - Web Component library for the Helix Design System.
Lyne Components - Building blocks of the Lyne Design System are based on Web Components.
Material Web Components - Material Design implemented as Web Components.
NuML | NUDE Elements - HTML Framework and Design System based on Web Components and runtime CSS generation.
PatternFly Elements - Collection of flexible and lightweight Web Components based on the Unified Design Kit.
Pearson Web Components - Pearson's shareable component library implementing Gravity design system.
Spectrum Web Components - Adobe Spectrum design language implementation built with Web Components.
UI5 Web Components - Set of reusable UI elements implementing SAP Fiori Design Guidelines.
U-M Library Design System - University of Michigan Library Design System.
Zooplus web components - Set of web components that implement Z+ shop style guide.

Use Cases

Libraries

Class Based

Corpuscule - Small Web Components framework based on decorators.
DNA - Progressive Web Components library.
FAST Element - Lightweight library for building performant, memory-efficient, standards-compliant Web Components.
LitElement - Simple base class for creating fast, lightweight web components. Part of the Polymer Project.
Lightning Web Components - blazing fast, enterprise-grade Web Components foundation.
Omi - Next generation web framework in 4kb JavaScript (Web Components + JSX + Proxy + Store + Path Updating).
Panel - Web Components + Virtual DOM: web standards for powerful UIs.
Polymer - Original web component library by the Polymer Project authors.
Skate - Web component library focusing on a functional rendering pipeline and a small footprint.
slim.js - Fast & Robust Front-End Micro-framework based on modern standards.
Stencil - Compiler for generating Web Components.
Tonic - Minimalist, stable, audit friendly component framework.

Functional

atomico - Small library for the creation of interfaces based on web components using functions and hooks.
fuco - Functional component like React, but for Web Components.
haunted - React's Hooks API implemented for web components.
hybrids - UI library for creating Web Components with simple and functional API.
Solid - Declarative JavaScript library for creating user interfaces.

Integrations

ember-custom-elements - Render Ember and Glimmer components using custom elements.
preact-custom-element - Generate/register a custom element from a preact component.
@adobe/react-webcomponent - Automate the wrapping of a React component in a custom element.
react-shadow - Utilise Shadow DOM in React with all the benefits of style encapsulation.
reactify-wc - Use web components with React properties and functions.
remount - Mount React components to the DOM using custom elements.
@riotjs/custom-elements - Simple API to create vanilla custom elements with Riot.js.

Benchmarks

All the Ways to Make a Web Component
web-components-benchmark - Benchmark Web Components technologies with various examples.
web-components-todo - The same todo application built in different Web Components libraries for benchmark purpose.

Frameworks

Angular

React

Vue

Svelte

Ecosystem

Starter Kits

Create Open Web Components - Web component project scaffolding.
custom-element-boilerplate - Boilerplate for creating a custom element.
hello-web-components - Simple starter hello world web component written in TypeScript.
nutmeg - Build, test, and publish vanilla Web Components with a little spice.

Tools

Backlight — 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.
Custom Elements Locator - Chrome extension to find custom elements on a page.
query-selector-shadow-dom - querySelector that can pierce Shadow DOM roots, useful for automated testing.
shadow-automation-selenium - Shadow DOM automation using Selenium.
shadow-dom-utils - Set of useful utilities for dealing with shadow DOM, primarily for test environment.
@storybook/web-components - UI development environment for plain web-component snippets.
webcomponents.dev - Component IDE for web platform developers.
web-component-analyzer - CLI that analyzes web components and emits documentation / diagnostics.
Web Components Codemods - Codemods for Web Components.

Books

Web Components in Action - Book by Ben Farrell, available at Manning early release program.
Web Component Essentials - Book by Cory Rylan, early preview edition available at Leanpub.

Tutorials

"Let's Build Web Components!" by Benny Powers
Part 1: The Standards
Part 2: The Polyfills
Part 3: Vanilla Components
Part 4: Polymer Library
Part 5: LitElement
Part 6: Gluon
Part 7: Hybrids
"Web components: from zero to hero" by Pascal Schilp
Part 1: An introduction to writing raw Web Components
Part 2: Supercharging Web Components with lit-html
Part 3: Web Components hero with LitElement
"The Modern JavaScript Tutorial" by Ilya Kantor
Part 1: From the orbital height
Part 2: Custom Elements
Part 3: Shadow DOM
Part 4: Template element
Part 5: Shadow DOM slots, composition
Part 6: Shadow DOM styling
Part 7: Shadow DOM and events
"HowTo: Components" by Web Fundamentals
Overview
<howto-checkbox>
<howto-tabs>
<howto-tooltip>
CSS tricks article series by Caleb Williams
Part 1: An Introduction to Web Components
Part 2: Crafting Reusable HTML Templates
Part 3: Creating a Custom Element from Scratch
Part 4: Encapsulating Style and Structure with Shadow DOM
Part 5: Advanced Tooling for Web Components
Angular Elements article series by Manfred Steyer
Part I: A Dynamic Dashboard In Four Steps With Web Components
Part II: Lazy and External Web Components
Part III: Angular Elements Without Zone.Js
Part IV: Content Projection with Slots in Angular Elements (>=7)
Part V: Your Options for Building Angular Elements with the CLI

Insights

Podcasts

Presentations

Talks

Usage Metrics

Proposals

Form-associated Custom Elements

Form Participation API Explained - Document by Google Chrome team.
Form-associated custom elements - Feature in Chrome platform status.
web-platform-tests

Custom State Pseudo class

Constructable Stylesheet Objects

Specification Draft
web-platform-tests
Explainer
Constructable Stylesheets - Feature in Chrome platform status.

Miscellaneous

bruck - Prototyping system built with web components and the Houdini Paint API.
Vaadin Directory - Publish, discuss and rate web components
webcomponents.org - Discuss & share web components.

History

The articles below represent a long story of the Web Components specifications on the way towards the standardization. Some of them refer to earlier, so-called "v0" Shadow DOM and Custom Elements specs, and abandoned HTML Imports spec. These materials are here for historical reasons only, they are grouped by years and listed in chronological order.

2019

2018

2017

2016

2015

2014

2013

2012

2011

Who To Follow

Polymer	Stencil	open-wc.org	webcomponents.dev
Justin Fagnani	Viljami Salminen	Jan Miksovsky	Serhii Kulykov

License

Code licensed under the: MIT license

@author Mateus Ortiz mteusortiz@gmail.com

Awesome Polymer

A collection of awesome Polymer resources

General resources

Official Site
Blog
Google+ Profile
Github
Project All things related to the Polymer project - Roadmap, Code of Conduct, How to Contribute, and more.

Polymer Communities

Tutorials/Guides

Articles

Videos

Boilerplates

Polymer boilerplate
Starter kit Build tools & boilerplate for creating production-quality web apps.
Seed element
Polymer Admin Responsive admin dashboard created using Polymer 1.0 and Polymer Starter Kit
Meteor-Polymer Starter Kit Kickstart a Meteor - Polymer project with MWC packages
Meteor-Polymer Starter Kit Including Auth

Generators

Generator Polymer Yeoman generator for Polymer projects, based on the official Starter kit.
Generator element Yeoman generator to create Custom Elements using Polymer, X-Tag or VanillaJS.

Official Elements

Elements Catalog
Iron Iron elements are a set of visual and non-visual utility elements.
Paper Paper elements are a set of visual elements that implement Google's Material Design.
Google web components
Gold The gold elements are built for e-commerce use-cases like checkout flows.
Platinum Elements to turn your web page into a true webapp, with push, offline, and more.
Molecules Elements that wrap other javascript libraries.
App Elements that enable building full web apps out of modular custom elements.
Data A collection of data/storage related elements.
Layout A collection of layout related elements.
[Obsolete] Neon Neon elements implement special effects.

Directories

Built with Polymer
Webcomponents.org
Components Kitchen
open-elements Open for all elements working with polymer ^1.1

Tools

App Toolbox App Toolbox.
Polyserve A simple web server for using bower components locally.
Polybuild An all-in-one build tool for Polymer apps.
Polyup A helpful assistant for migrating from Polymer v0.5 to 1.0.
Polylint Detect errors in your code.
Polygit The Magic Server serves files directly from github (via cdn.rawgit.com) in a manner that is compatible with HTML Imports natural deduplication feature.
Polydev DevTool extension.
Polymer Ready Show an icon in the address bar when it detects some Polymer and Custom components.
Vulcanize Build tool for HTMLimports and web components.
Crisper Split inline scripts from an HTML file for CSP compliance.
Snippets for Atom editor
Snippets for Sublime Text editor
Synthesis Use Polymer as the view Layer of Meteor.js
MWC-Layout Control rendering of polymer components.
WC-Loader. Webcomponents webpack loader
Polymer Webpack Loader. Polymer webpack loader.
Polymer CDN. Unofficial CDN for polymer components.
lit-html HTML templates, via JavaScript template literals.

Testing

Web components tester Makes testing your web components a breeze!
Web components tester istambul Istanbul coverage plugin for web-component-tester.
test-fixture Element that can simplify the exercise of consistently resetting a test suite's DOM.
iron-test-helpers Utility classes to make testing easier.

Behaviors

Polymer-Apollo Polymer Apollo GraphQL Integration.
MWC-Mixin Reactive meteor data source for polymer elements
MWC-Router Two way bind polymer with Meteor Flowrouter.
Polymer-Redux Polymer bindings for Redux.

Theming/Styling

Polymer Themes Free Polymer themes and templates
Material Palette Palette generator based on Material Design
Polystyle Wrap existing stylesheets with Polymer's style module system.

Notable projects

Polymer Projects A list of websites and apps built with Polymer

Other awesome resources

If you want more awesome resources, check the awesome list!

License

Awesome Angular

Awesome list of Angular seed repos, starters, boilerplates, examples, tutorials, components, modules, videos, and anything else in the Angular ecosystem. View as github page.

If you're looking for AngularJS (version 1.x.x) please visit https://github.com/gianarb/awesome-angularjs

Current Angular version:

Table of contents:

Angular
Official Resources
Community
Experts on Twitter
Server-Side Rendering
Material Design
Cheatsheet
Angular CLI
Webpack
Series
Video Tutorials
Style Guides
Angular Connect
Books
On-Site Training
Approach and Explanation
Integrations
Site Templates
Generators
Documentation tools
Developer tools
TodoMVC
Schematics
Third Party Components
Animations
Auth Components
Backend Components
Calendars
Charts
Drag/Drop
Editor Components
File Upload
Form Controls
Icons
Keyboard Mouse
Layout Components
Loaders
Maps
Notifications
State Management
Tables
UI Libraries
UX Components
Viewers
Misc Components
JAM Stack
Universal
Courses & Tutorials
Universal General Resources
Seed Projects
TypeScript
TypeScript General Resources
Seed Projects
Dart
Seed Projects
Traceur
Traceur General Resources
Seed Projects
Babel
Babel General Resources
Online Playground
Seed Projects
Babel Plugins
ES5
Seed Projects
Ionic 2
Ionic 2 General Resources
Meteor
Meteor General Resources
Seed Projects
NativeScript
NativeScript General Resources
Seed Projects
React Native
React Native General Resources
React Native Projects
Haxe
Seed Projects
Scala
Seed Projects
Bit
Security
NgRx

Angular

Angular is a development platform for building mobile and desktop web applications.

Official Resources

Community

#angular2 channel on Freenode IRC Server
#angular hashtag on Twitter
Gitter Channel
Angular StackOverflow
@Angular on Twitter
/r/Angular2 Subreddit
Angular Group on Facebook
AngularJS on Google+
AngularAir podcast and live broadcast
Adventures in Angular podcast
Angular Expo showcase
#ng-2 Slack Channel on AngularBuddies
#angular2 Slack Channel on dartlang.slack.com (Sign up)
Programming Community Curated Resources for Learning Angular
[Top rated Angular stackoverflow questions Dashboard] (https://dashboard.nbshare.io/apps/stackoverflow/top-angular-questions/)

Angular Team on twitter

Experts on Twitter

List of Angular experts you should follow on Twitter (in no particular order). This list is by no means complete.

Google Developer Experts

Server-Side Rendering

Material Design

Official Angular Material Design (GitHub)
md2 Angular2 based Material Design components, directives and services are Accordion, Autocomplete, Collapse, Colorpicker, Datepicker, Dialog(Modal), Menu, Multiselect, Select, Switch, Tabs, Tags(Chips), Toast and Tooltip.
ng2-material set of material2 examples and extra components (data table, dialog, ...) built on top of @angular2-material/core
angular2-mdl Angular 2 components, directives and styles based on Material Design Lite
mdl-ext Material Design Lite Ext (carusel, grid, lightbox, selectfield, sticky header, ...)
ng2-materialize An Angular 2 wrap around Materialize library
Material Light Light, fast and easy to use Material Design components for Angular 2+ (Especially for mobile UI). There are several alternatives but this one has added value and advantages in my opinion (Take a loot at the Readme.md for details). There is also an online demo to see it in action. (API documentation is still lacking but in process).
Blox Material A lightweight Material Design library for Angular, based upon Google's Material Components for the Web.
Material Web Components Material Web Components for Angular. A faithful and accurate representation of Material Design as envisioned on the web.
MDBootstrap Built with Angular 7, Bootstrap 4 and TypeScript powerful UI KIT providing a set of slick, responsive page templates, layouts, components and widgets to rapidly build responsive, mobile-first websites and apps.

Cheatsheet

Features

Directives

Directives allow you to attach behavior to elements in the DOM.

Components

A component is a directive which uses shadow DOM to create encapsulate visual behavior. Components are typically used to create UI widgets or to break up the application into smaller components.

View

A View is a core primitive used by angular to render the DOM tree.

Templates

Templates are markup which is added to HTML to declaratively describe how the application model should be projected to DOM as well as which DOM events should invoke which methods on the controller.

Change detection

Every component gets a change detector responsible for checking the bindings defined in its template.

Dependency Injection

Angular 1.x has two APIs for injecting dependencies into a directive. Angular 2 unifies the two APIs, making the code easier to understand and test.

Pipes

Pipes can be appended on the end of the expressions to translate the value to a different format.

Web Workers

WebWorker support in Angular is designed to make it easy to leverage parallelization in your web application. When you choose to run your application in a WebWorker angular runs both your application's logic and the majority of the core angular framework in a WebWorker.

HTTP

The HttpClient offers a simplified client HTTP API for Angular applications that rests on the XMLHttpRequest interface exposed by browsers. Additional benefits of HttpClient include testability features, typed request and response objects, request and response interception, Observable apis, and streamlined error handling.

Official HttpClient

Router

Official Routing & Navigation

Test

Ahead-of-Time Compilation

Angular CLI

Official web page
Official repository
ng-cli-hooks - Hooks for the Angular CLI to customize the build

Webpack

Official web page
Angular Webpack Starter from PatrickJS
Angular Webpack from preboot
Angular Nightly Webpack Starter
Angular Webpack with Visual Studio ASP.NET Core from Damien Bowden
Angular Typescript Webpack from schempy
Angular Webpack Tour of Heroes from michaelbazos - Tour of Heroes official typescript tutorial built with webpack
Angular Webpack + rxjs + modules

Series

Ionic
Angular
- Introduction
- Components
Auth0
Angular
thoughtram
Angular Template Syntax Demystified
- Part 1
letsboot.com
Test Driven Development
- Part 1 Angular TDD, Karma, Jasmine, PhantomJS, Gitlab-CI
Angular and Firebase
- Part 1 Let’s learn how to install and setup AngularFire2 4.0

Video Tutorials

Style Guides

Angular Connect

Books

ng-book 2 fullstack.io
Become a ninja with Angular 2 Ninja Squad
Angular Development with TypeScript Manning Publications
Angular in Action Manning Publications
Practical Angular 2 Leanpub
Switching to Angular 2 Packt Publishing
Rangle's Angular 2 training Rangle.io
Testing Angular Applications Manning Publications
Angular-Buch (German) dpunkt.verlag
Angular Institute angular.institute
Build a Full-Stack Web Application Using Angular & Firebase Ankit Sharma

On-Site Training

Approach and Explanation

Integrations

FalcorJS + Angular2 (Video)
Angular2-Meteor
nativescript-angular
react-native-renderer
ng-sapphiredb - Client implementation of SapphireDb, a framework for easy development of applications with realtime data synchronization and a self hosted alternative to firebase realtime database/firestore for asp.net core and ef core. Check out the documentation for more details: Documentation
GraphQL + Angular
ckeditor5-angular - An official CKEditor 5 rich text editor component for Angular 2+
ckeditor4-angular - An official CKEditor 4 rich text editor component for Angular 2+

Decorators

segal-decorators Bunch of useful decorators for the web!
ng-portal Component property connection in Angular application.
ng-lock Angular decorator for lock a function and user interface while a task running.

Site Templates

NG-Dashboard - Dashboard for Angular 4+. UI Components based on Material Light. Chart Component based on MetricsGraficsJS. Map Directive based on LeafletJS. DEMO ONLINE
HowToKeepAngularDeploymentSizeSmall - A sample included Homepage and Dashboard for Angular 7 and a demonestration of How To Keep Angular Deployment Size Small

Pipes

fuel-ui OrderBy and Range pipes ported from Angular 1.x to Angular 2
ngx-filter-pipe Pipe for filtering arrays
ngx-pipes Bunch of useful pipes for Angular and beyond!
ngx-order-pipe OrderBy pipe for Angular4+ - sort collection by a field
angular2-camelcase Angular2 pipe to convert camelCase strings to human readable strings Edit
ng-generic-pipe Generic pipe for Angular application.

Generators

Node.js
Slush
- TheVelourFog/slush-angular2
Yeoman
- swirlycheetah/generator-angular2
ngX-Rocket: Extensible Angular 4+ enterprise-grade generator and tools
Dart
Stagehand
- dart-lang/stagehand
Scaffold
ScaffoldHub.io: Generate full Angular Material applications with MongoDB, SQL or Firebase Firestore databases.

Documentation tools

Storybook : "The UI development environment you'll love to use"
Compodoc : "The missing documentation tool for your Angular 2 application", integrate well with npm scripts
NgModule-Viz : Visualize the dependencies between the NgModules in your Angular 2+ application.
ng-app-counter : Count the number of Modules, Lazy Modules, Pipes, Providers, Directives, Components used in an Angular application.

Developer tools

Angular State Inspector - Helps you debug Angular component state. Supports Angular 1/2+/Ivy.
Augury - Browser extension for debugging and profiling Angular applications.
CodeSandbox - An online IDE and prototyping tool for rapid Angular development.
Bugfender - A cloud service to collect logs and Angular errors in Real-Time.
Angular Dev Tools - Angular DevTools is a Chrome extension that provides debugging and profiling capabilities for Angular applications.

TodoMVC

Official Angular 2.0

Schematics

Cypress: Add Cypress to an Angular CLI application
Jest: Configure Angular to execute unit tests with Jest instead of Karma + Jasmine
Prettier: Add Prettier and a pre-commit hook for formatting staged files in an Angular application
Tailwind CSS: Add Tailwind CSS to an Angular application
Threejs: New three.js starter app

Third Party Components

Animations

lottie-angular2 - Render After Effects animations on Angular2 based on Bodymovin.
ng-animate - 🌙 A collection of cool, reusable and flexible animations for Angular
ngx-interactive-paycard - Interactive payment card library with smooth animations
ng-particles - A component to easily add Particles animations to your Angular application

Auth Components

casl-angular - Module which integrates isomorphic permissions management library CASL with Angular2+
ng2-permission - Fully featured permission based access control for your angular 4+ applications. This module inspired from angular-permission.
ngx-auth-firebaseui - Angular Material UI component for firebase authentication
ngx-auth -Authentication utility for Angular by @fulls1z3
ngx-permissions - Permission and roles based access control for your angular(angular 2, angular 4,5+) applications(AOT, lazy modules compatible)

Backend Components

Cloudinary - Angular2 SDK for image and video management in the cloud
ng-s-resource - Simplify RESTful http resource generator for Angular 4+.
ngx-restangular - Restangular for Angular 2 and higher versions.

Calendars

angular-calendar - A flexible calendar component for angular 6.0+ that can display events on a month, week or day view.
ng-data-picker - 🏄🏼 A data picker based on Angular 4+ (like iOS native datetime picker)
ng-fullcalendar Fullcalendar module for Angular

Charts

@ctrl/ngx-chartjs - Functional Chart.js wrapper for Angular
dl-chart - Simple and lightweight Chart library without extern Dependencies
ng2-charts Beautiful charts for Angular2 based on Chart.js
ngx-charts - Declarative Charting Framework for Angular2 and beyond!
ngx-f2 - Angular2+ wrapper for antv f2 mobile oriented charts
ngx-trend - 📈 Simple, elegant spark lines for Angular

Drag/Drop

angular2-grid A drag/drop/resize grid-based plugin directive for angular2.
ng2-dragula Drag and Drop so simple it hurts!

Editor Components

@ctrl/ngx-codemirror - Codemirror Wrapper for Angular
@instechnologies/ng-rooster - Angular wrapper of roosterjs, a rich text editor
angular2-froala-wysiwyg Angular 2 wrapper for Froala WYSIWYG HTML Editor
ng2-ace Ace editor directive made for Angular 2
ng2-quill-editor - Quill editor component for Angular2

File Upload

@ctrl/ngx-droppable - Give file dropping ability to any element or component
file-droppa Simple files drop and upload component with files list
ng2-file-upload Easy to use file upload directives
ngx-awesome-uploader Angular Library for uploading files. It supports: File Upload and Preview (additionally preview images with lightbox), validation, image cropper , drag and drop with multi language support.
ngx-dropzone - Highly customizable component to handle file drops and selection.
ngx-flow - Angular7+ wrapper for flow.js for file upload

Form Controls

@ctrl/ngx-emoji-mart - Customizable Slack-like emoji picker for Angular
angular-imask Angular 4+ input mask
angular2-multiselect-dropdown Angular 2 multiselect dropdown component for web applications
angular2-text-mask Angular 2 input mask directive
ng-fveh - Form Validations Errors Helper - Some helpers to help you with form validation :)
ng-select Angular ng-select - All in One UI Select, Multiselect and Autocomplete
ng2-dropdown Dropdown menu for angular2 and bootstrap 3
ng2-radio-group Angular2 directives for radio and checkbox inputs and radio input groups
ng2-select Angular2 based replacement for select boxes
ngx-color - 🎨 Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter & more
ngx-credit-cards - A Credit Card Directives and Form Validators package for Angular X (4+).
ngx-flag-picker - 😻 Customizable Angular component which containing a dropdown with country flags
ngx-flexible-select - The most flexible and customized select
ngx-recursive-form - Angular recursive form at any level based on your json input.

Icons

angular2-fontawesome Angular2 Components and Directives for Fontawesome
ng2-fontawesome A small directive making font awesome even easier to use.
ngx-icon-blur An Angular component that can be used to create frosted glass effect of icons.

Keyboard Mouse

@ctrl/ngx-rightclick - Context Menu Service for Angular
angular-clickable-click - Sets pointer cursor on elements using standard (click) output and allows to disable such events
angular-esc - Adds (esc) output fired by the Escape key
ngx-konami - Simple directive to add easter eggs in Angular 2+ applications

Layout Components

angular-fullpage Official component for fullPage.js, a fullscreen scrolling library.
angular-split Angular split component
angular2-infinite-scroll - An Infinite Scroll Directive for Angular2 (based on Observables)
egjs-infinitegrid - Arrange infinite card elements according to various layout types like masonry for Angular.
ng2-card - Card view component for Angular2
ng2-fullpage Fullpage scrolling for Angular2 based on fullPage.js
ng2-sheet Angular2 Components to add yours components inside a sheet window and repeatedly
ng2-swipeable-card - Swipeable card component for Angular2
ngx-scrolltop - Lightweight, Material Design inspired button for scroll-to-top of the page. 🔼 No dependencies. Pure Angular! (Compatibility: Angular 9, Ivy, Universal, ng add)
od-virtualscroll Observable-based virtual scroll implementation in Angular

Loaders

@kken94/ngx-progress The most powerful and customizable progress bar for Angular ✨
angular-epic-spinners Reusable spinner components for angular
angular2-busy Show busy/loading indicators on any promise, or on any Observable's subscription
angular2-promise-buttons - Loading buttons for Angular 2 by @johannesjo
isLoading? service - A simple and flexible loading indicator service for Angular apps.
ng-spinners - Amazing collection of pure CSS angular spinners components.
ng2-progress-bar Simple progress bar for angular2 and bootstrap 3
ngx-config - Configuration utility for Angular (incl. Angular Universal loader) by @fulls1z3
ngx-img-fallback Load placeholder image on image error
ngx-progressbar - Nanoscopic progress bar, featuring realistic trickle animations.

Maps

angular-cesium Creating map based web apps using Cesium and Angular
angular2-google-maps Angular2 directives for Google Maps
ngx-mapbox-gl - Angular binding of mapbox-gl-js

Notifications

ng-snotify - Angular 4 Notification Center
ng2-sweetalert2 A wrapper for sweetalert2 for use with Angular 2.
ngx-popper - Tooltip managment, wrapper for popper.js(https://popper.js.org/)
ngx-toastr - Notifications/Toastr

State Management

angular2-query-builder Modernized query builder based on jquery QueryBuilder
angular2-jwt Library for sending authenticated HTTP requests and decoding JWTs
angular2-cookie Library that implements Angular 1.x $cookies service in Angular 2
angular-safeguard Wrapper around cookies/sessionStorage/localStorage for angular2. If all are unavailable will use an in memory storage.
ng2-storage A localStorage and sessionStorage wrapper written using ES6 Proxies for Angular 2
ngx-store - Complex library for managing localStorage, sessionStorage and cookies, allows to watch data changes, provides decorators and API based on builder pattern
ngx-liquid-cache - A powerful, automatic and optimized Angular 2 cache system that fits everywhere!
ng-http-cache - Speed up your remote requests by automatically caching them on client.
ngx-cache - Cache utility for Angular (incl. browser & server platform implementations) by @fulls1z3
universal-model-angular - Store and state management for Angular
ng-http-caching - Cache for HTTP requests in Angular application.
ng-simple-state - Simple state management in Angular with only Services and RxJS.

Tables

ag-grid Advanced Datagrid for Pure Javascript / AngularJS 1.x / AngularJS 2 / Web Components
ng2-handsontable Excel-like data grid / spreadsheet
ng2-smart-table Smart data table library with sorting, filtering, pagination & add/edit/delete functions.
ng2-table Simple table extension with sorting, filtering, paging... for Angular2 apps
ngfb-sortable-table - Angular Firebase Sortable Table. Ability to filter and sort data with own firebase quering tools.
ngx-datatable A feature-rich yet lightweight data-table crafted for Angular2 and beyond!
ignite-ui-angular's grid - The data grid, tree grid, hierarchical grid in Ignite UI for Angular provide excel-style filtering, live-data, sorting, draggable row and other toolbar.

UI Libraries

General

@ngx-kit/sula - Set of themed components for Angular.
Axponents: of Accessible Web Components (Dylan Barrell)
Element Angular - Element Design components built on top of Angular 2
Essential JS 2 for Angular by Syncfusion - Over 60 high-performance, lightweight, modular, and responsive UI components for Angular.
Nebular - set of essential (Theme, UI Kit, Auth, Security) modules for complex Angular applications
NG ZORRO MOBILE - An enterprise-class mobile UI components based on Ant Design Mobile and Angular.
NG ZORRO - An enterprise-class UI components based on Ant Design and Angular.
ng-lightning Native Angular 2 components & directives for Lightning Design System
ng-metro4 - Angular implementation of UI framework Metro4
ng-sq-ui - Simple Quality UI kit for Angular. Build by developers for developers!
ngSemantic - UI components based on Semantic UI
ngx-qrcode2 - An Angular 4+ Component library for Generating QR (Quick Response ) Codes
ngx-ui - Style and Component Library for Angular2 and beyond!
prime-ng Collection of rich UI components for Angular 2
vmware clarity - Mostly a CSS only framework but some components are ported to Angular 2
Wijmo 5 - Set of UI components for Angular2

Material Based

@angular-material-extensions/contacts - Angular Library to manage contacts and users with a material design
@angular-material-extensions/faq - Angular Library built with material design in order to provide a reusable faq (frequently asked questions) component for every project. Ask, Answer and List
@angular-material-extensions/google-maps-autocomplete - Autocomplete input component and directive for google-maps built with angular material design
@angular-material-extensions/link-preview - Angular open source UI library to preview web links
@angular-material-extensions/pages - Open source library for angular apps to illustrate custom material pages content with steps (ideal for tutorials and explanations purposes)
@angular-material-extensions/password-strength - Angular UI library to illustrate and validate a password's strength with material design
angular-jqwidgets Advanced Angular Components with Material Design.
Covalent - a UI platform built on Angular 2.0 + Material Design
Material 2 - Angular team's Material Design components built on top of Angular 2
Teradata covalent - UI Platform built on @angular/material 2.0

Bootstrap Based

@firebaseui/ng-bootstrap - Angular Bootstrap UI library for firebase authentication powered by @ng-bootstrap
angular-bootstrap-md Material Design for Bootstrap 4 (Angular)
fuel-ui Bootstrap 4 components and directives for use in Angular 2
ng-bootstrap - Angular 4 directives for Bootstrap 4 by the ui-bootstrap team
ng2-bootstrap Native Angular2 Bootstrap 3&4 components
ng2-bs Experiments with Angular 2 directives for Bootstrap.
ng2-modal Modal window for angular2 and bootstrap 3
ng2-paginator Pagination control for angular2 and bootstrap 3
ng2-tabs Tabs control for angular2 and bootstrap 3

UX Components

angular-shepherd - Angular 7 Service wrapping the site tour library Shepherd
ng2-archwizard - Wizard component for Angular 2
ngx-app-tour - Angular2+ plugin for building a tour, showcase or a walkthrough for your app

Viewers

egjs-flicking - It's reliable, flexible and extendable carousel for Angular.
ng2-pdf-viewer PDF viewer component
ng2-safe-img Very tiny and safe img for Angular 2
ngu-carousel - Angular Universal carousel.
ngx-siema - Lightweight and simple carousel with no dependencies.

Misc Components

@ngx-context - Angular Context: Easy property binding for router outlet and nested component trees..
Angular SizeObserver - style DOM elements based on their display size (rather than browser screen size).
angular2-simple-countdown - a simple countdown angular2 directive with multiple language
ng-chat - A simple facebook/linkedin lookalike chat module for Angular applications
ng-google-sheets-db :rocket: Use Google Sheets as your (read-only) backend!
ng-katex Angular module to write beautiful math expressions with TeX syntax boosted by KaTeX library
ng-wormhole - Render components somewhere else in the DOM
ng2-adsense - Easy AdSense for Angular Applications
ngx-avatar - Avatar component that makes it possible to genearte / fetch avatar based on the information you have about the user.
ngx-cdmon - Library for monitoring Angular change detection performance.
ngx-countdown - Simple, easy and performance countdown for angular
@ngneat/transloco - 🚀 😍 The internationalization (i18n) library for Angular
ngx-i18n-router - Route internationalization utility for Angular by @fulls1z3
ngx-linkifyjs - Angular V6 wrapper for linkifyjs - library for finding links in plain text and converting them to HTML tags via linkifyjs
ngx-meta - Dynamic page title & meta tags utility for Angular (w/server-side rendering) by @fulls1z3
ngx-wheel - Angular prize winning wheel component!
@tolgee/ngx - Web-based localization tool enabling users to translate directly in the Angular app they develop.
xng-breadcrumb - Zero config breadcrumb solutuon. A lightweight, configurable and reactive breadcrumbs for Angular 6 and beyond.
ng-let - Structural directive for sharing data as local variable into html component template.
ng-for-track-by-property - Angular global trackBy property directive with strict type checking.

JAM Stack

scully - Scully is a static site generator for Angular projects looking to embrace the Jamstack.

Universal Angular 2

Universal (isomorphic) javascript support for Angular 2

Universal Courses And Tutorials

Guide to Angular Universal - a comprehensive guide how to sharpen your Universal Skills

Universal General Resources

Universal Angular 2 Repository (GitHub)

Universal Seed Projects

universal-starter - Angular 2 Universal starter kit by @Angular-Class
ng-seed/universal - Seed project for Angular Universal apps featuring Server-Side Rendering (SSR), Webpack, dev/prod modes, DLLs, AoT compilation, HMR, SCSS compilation, lazy loading, config, cache, i18n, SEO, and TSLint/codelyzer by @fulls1z3
angular-universal - Fast, Unopinionated, Minimalist starter kit for Angular Universal 100% powered by Angular CLI
angular-universal-heroku-starter - Angular 7 Universal Starter Kit with Server-Side Rendering (SSR) and easy deployment to Heroku

Angular 2 in TypeScript

TypeScript lets you write JavaScript the way you really want to. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

TypeScript General Resources

TypeScript Official Website for TypeScript
REPL Official TypeScript REPL that runs entirely in your browser
TypeScript Repository (GitHub) Official GitHub Repo for TypeScript
DefinitelyTyped Repository (GitHub) The repository for high quality TypeScript type definitions.

TypeScript Seed Projects

Angular Seed Seed project for Angular apps
ng2-play A minimal Angular2 playground using TypeScript and SystemJS loader
Angular Lab A simple Angular 2+ setup using Angular CLI, TypeScript, Angular Flex Layout, Material 2, AOT, and unit and e2e tests on Travis CI and Saucelabs.
Angular 2 Samples Angular 2.0 sample components
Todo app with Firebase, OAuth, and Immutable
Spring Boot and Angular2 tutorial Angular2 practical example based on Rails tutorial.
Angular 2 Goldilocks seed - A seed project for Angular 2 and TypeScript that is not too simple, yet not too complex. In fact it's just right!
Angular 2 Starter - Simple Angular 2 Starter with Gulp workflow and Travis CI
Angular 2 Leaflet Starter - A map application starter based on Angular 2 and Leaflet
Angular 2 MapboxGL Starter - Another map application starter based on Angular 2 and MapboxGL JS
Angular 2 reconnecting websockets quickstart - Simple counter using 2-way or 1-way reconnecting websockets communication
ng2-start - Minimal setup to start creating an angular2 application
ng-kitchen-sink - The ultimate Angular 2 bootstrap single page app - touches on all key and advanced aspects of Angular
ng-skeleton - The ultimate Angular seed with ngrx, bootstrap and two factor auth
angular2-demo Minimal Angular2 Demo using TypeScript / Sass / Npm Tasks
Angular 2 Dashboard Starter - Ready to use dashboard control panel seed project based on Angular 2 and AdminLTE bootstrap theme.
ngx-admin - Admin template based on Nebular framework (Angular 4+, Bootstrap 4+)
Angular 2 full code coverage - Solid tested SystemJS and gulp workflow ready for your code using Angular2 final release (2.1.0) .. Demonstrates unit and full code coverage
Angular 2 webpack - Tour of Heroes official typescript tutorial built with webpack
ng2-boiler - A bare-bones simple starter with Angular2, TypeScript and Webpack configured.
Angular Webpack Starter - Angular Webpack Starter with AoT compilation, Lazy-loading, and Tree-shaking
Reaper - Angular 2 Webpack Starter Boilerplate w/o 2269 dependencies
famn - Angular 2 + FeathersJS application framework for both client and server side
Angular NPM Module Seed - Starting point for developing Angular modules and publishing them on NPM.
Angular2 D3v4 Seed - Angular2 D3v4 implementation of charts, graphs, area and view porting seed project
ng-seed/spa - Seed project for Angular apps featuring Webpack, dev/prod modes, DLLs, AoT compilation, HMR, SCSS compilation, lazy loading, config, cache, i18n, SEO, and TSLint/codelyzer by @fulls1z3
Reboard - Angular 4 + Material 2 starter dashboard with ngx-charts, based on generator-ngx-rocket (Typescript, SASS, Webpack, Jasmine+Karma, Protractor, TSLint, Codelyzer, Stylelint, ngx-translate, Lodash, Angular Flex-Layout)
Angular5 + Redux + Graphql + MySQL quickstart - Simple Fullstack GraphQL Application with Angular CLI + Redux + Express + GraphQL + Sequelize (supports MySQL, Postgres, Sqlite and MSSQL).
Angular5 + Firebase + Structure - Angular 5 + Firebase + a very good router/module structure to make it your own so easy
angular-app-example - Angular latest + material + sass themes + more beautiful features, a dashboard app example
NG-MATERO - This Ng-Matero is an Angular admin templete made with Material componnets.
TinkoffCreditSystems/angular-open-source-starter - a starter project for creating open-source libraries for Angular
truonghungit/angular-starter - 😍 A complete Angular 10, NgRx, Angular CLI & Angular Material starter project
{{ add_your_repo }}

Ionic 2 in Angular 2

Ionic is the beautiful, open source front-end SDK for developing hybrid mobile apps with web technologies.

Ionic Framework Official Website for Ionic Framework
Ionic Documentation Official for Ionic Framework

Ionic 2 General Resources

Angular 2 in Cordova

Apache Cordova is a popular mobile application development framework using CSS3, HTML5, and JavaScript instead of relying on platform-specific APIs.

Cordova Framework Official Website for Apache Cordova
Cordova Documentation Official Documentation for Apache Cordova

Cordova Seed Projects

Angular 2 Seed CLI Admin (Template) Multi-platform Angular 2 project (Web/PWA, Mobile and Desktop) with Ionic 2 (and optionally Bootstrap).

Angular 2 in Dart

Dart is an open-source, scalable programming language, with robust libraries and runtimes, for building web, server, and mobile apps.

Dart General Resources

Dart Official Website for Dart
Dartpad Dartpad lets play with Dart on-line, in a zero-install, zero configuration environment.
Dart Organization (GitHub) Official GitHub Organization for Dart
Pub Repository of packages of software for the Dart programming language.
Dartisans The Official Dart Google+ community
Dart Slack Channel The Official Dart Slack channel.

Dart Seed Projects

Angular 2 Dart Quickstart A minimal quick start project.

Dart Demo, Samples, and Examples

Hackernews App A HackerNews application made with Angular 2 for Dart
Router Demo A basic example of Angular 2 router.
{{ add_your_repo }}

Angular 2 in Traceur

Traceur is a JavaScript.next-to-JavaScript-of-today compiler

Traceur General Resources

Traceur Repository (GitHub) Official GitHub Repo for Traceur

Traceur Seed Projects

Angular 2 in Babel

The compiler for writing next generation JavaScript.

Babel General Resources

Babel Official Website for Babel
REPL Official Babel REPL that runs entirely in your browser
Babel Repository (GitHub) Official GitHub Repo for Babel

Babel Angular 2 Online Playground

Plunker: Angular 2 + Babel

Babel Seed Projects

babel-angular2-app A skeleton Angular 2 app built with Babel and Browserify.
angular2-fullstack-starter A full stack skeleton Angular 2 app built with Webpack/Babel.
angular2-es6-starter A skeleton Angular 2 ES6 application built with Babel, Webpack, Gulp.
angular-babel-seed The super simple Angular quickstarter with ES6
{{ add_your_repo }}

Babel Demo, Samples, and Examples

angular2-es6-todomvc Angular 2 TodoMVC implementation with ES6.
ng1-ng2-webpack-lazy-uirouter Hybrid lazy-loading Angular1 + Angular2 using UI-Router, Webpack2 and Babel.
{{ add_your_repo }}

Babel Plugins

babel-preset-angular2 Babel presets for Angular2
babel-plugin-type-assertion An experimental babel transformer plugin for rtts_assert

Angular 2 in ES5

An ECMAScript language that includes structured, dynamic, functional, and prototype-based features.

ES5 General Resources

{{ help_add_resources }}

ES5 Seed Projects

angular2-es5-starter-kit Angular2 ES5 Starter Kit

Meteor in Angular 2

Build Realtime Web and Mobile Apps With Angular and Meteor

Meteor General Resources

Angular Meteor Official Website for Angular Meteor
Angular 2 Meteor

Meteor Seed Projects

Angular 2 in NativeScript

Build truly native iOS, Android and Windows Phone apps with Javascript and CSS. Try NativeScript open-source framework for cross-platform development.

NativeScript General Resources

NativeScript Official Website for NativeScript
Using NativeScript

NativeScript Seed Projects

Angular 2 in React Native

React Native enables you to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript

React Native General Resources

React Native Official Website for React Native

React Native Projects

Angular 2 React Native Renderer (GitHub)

React Native Seed Projects

{{ add_your_repo }}

Angular 2 in Haxe

Haxe is an open source toolkit based on a modern, high level, strictly typed programming language, a cross-compiler, a complete cross-platform standard library and ways to access each platform's native capabilities. General purpose language, with Haxe, you can easily build cross-platform tools targeting all the mainstream platforms natively. "Write once compile anywhere", with strong easily extendable macro system and powerfull, highly optimizing compiler with DCE (and f.e. using inline constructors). Can be used for server side rendering and in isomorphic way - possible to share the same source code compiling into client side in javascript and server side in pyhton (or java/php/node - can be choosen later/changed at scaling). Haxe code can contain (inline) any target language fragments (can be used to step by step porting), the externs mechanism provides access to the native APIs and libraries in a type-safe manner. Server, client, mobile (Android and iOS at once), desktop, embedded (Raspbery, award winning TIVO set top boxes), Playstation ... all can be reached natively with much less typing, more error-proof, more stable and compile-time type checked code even for non type-safe targets (f.e. JavaScript, PHP)!

Haxe General Resources

Haxe.org
Haxe on Wikipedia
Haxe Playground
Haxe compiler targets compiler targets: C++, C#, Java, Python, PHP, ActionScript 3, and Flash or Neko bytecode
Haxe Usage Survey results
Haxe discussion group - community
Haxe and Node.js
Haxe: working with JavaScript libraries
Learn haxe in Y minutes
A success story for Haxe - about porting JavaScript to haxe targeting both JavaScript and C# "without interrupting the development of actual game by the rest of the team!", "AWESOME BONUS", "there are only benefits"
News And Information For Haxe Developers
{{ help_add_resources }}

Haxe Seed Projects

angular2haxe Haxe Language Bindings for Angular 2
{{ add_your_repo }}

Angular 2 in Scala

General purpose language; multiparadigm (object-oriented, functional, concurrent elements); statically typed, type-safe; focus: Web services.

Scala General Resources

{{ help_add_resources }}

Scala Seed Projects

Angular 2 components with Bit

Bit is an open source virtual repository (code base) built to make components easily manageable and usable across applications. You can quickly export any Angular component from any context while working on any project to a bit distributed Scope. Bit's reusbale component environment cuts the overhead of configuring build and test environments for exporting every new component. The Scope is a virtual component repository which stores, organizes, manages and tests your components. Once modeled on a Scope, your components can be easily found and used in any Angular application. Components can be organized together and still modified and used individually without pulling in entire libraries.

Bit Resources

Bit
Bit-Javascript
bitsrc - Free community hub for sharing, managing and finding open source components.

Security

Angular.io Security Guide - brief security guidance including Preventing cross-site scripting (XSS), Sanitization and Content security policy.
So you thought you were safe using AngularJS? Think again! Slides, Video - Lewis Ardern speaking at OWASP London 2017 ##### Authentication
Angular 2 with OpenID Connect Implicit Flow from Damien Bowden
Angular 2 bootstrap4 OAuth2 Webpack from Michael Oryl
Angular 2 OAuth2 OIDC from Manfred Steyer
Angular 2 authentication sample from auth0-blog

NgRx

enjoy — PatrickJS

License

Awesome Backbone.js

A list of resources for backbone.js

General

Backbone.js
Github repository
Annotated source
Backbone plugins
Backbone Index - Discover new Backbone plugins and resources
BackboneConf - Conference about building applications on the web, with a focus on the Backbone.js library
StackOverflow - Tagged questions
Yeoman generator for Backbone.js

Tutorials and articles

A pragmatic guide to Backbone.js apps by Julio Cesar Ody
Getting Started with Backbone by Koren Leslie Cohen
A Complete Guide for Learning Backbone.js by Mohit Jain
Hello Backbone.js by Artur Adib
Backbone.js Wine Cellar Tutorial by Christophe Coenraets - Part 1, Part 2 and Part 3
Backbone patterns by Rico Sta. Cruz
Complex Single Page Application Architecture with Backbone.js by Gur Dotan
Building large Backbone applications by Victor Savkin
A Guide to Writing Backbone Apps at Coursera by Pamela Fox
CloudEdit: A Backbone.js Tutorial with Rails by James Yu - Part 1, Part 2 and Part 3
Our First Node.js App: Backbone on the Client and Server by Spike Brehm
Using Backbone.js With Require.js by Greg Franko
Backbone Model Unit Testing with Jasmine by Ken Tabor
Backbone.js and Socket.io by Jason Strimpel
Presenter First in Backbone.js by Shawn Andersom
Websockets for Backbone by Christopher Keefer
Fun with CoffeeScript and Backbone.js - Part 1, Part 2 and Part 3
Components with Backbone.js and Marionette.js by Jeremy Fairbank
Boilerplate web app using Backbone.js, Express.js, Node.js, MongoDB by jkat98
Backbone.js Tips And Patterns by Philip Whisenhunt
Leveraging Deferreds in Backbone.js by Sam Breed
Backbone.js for large scale applications - UI architecture by Oren Farhi
Decorating A Backbone.Model With Features, For A UI Component by Derick Bailey
Backbone.fwd: Forward Events From One Backbone Object, Through Another by Derick Bailey
Backbone.View Patterns - Rendering A Collection by Oren Fahri
Backbone.View Patterns - How & Why Use Subviews by Oren Fahri
Backbone.View Patterns - The "Render" Method by Oren Fahri
Building progressively enhanced websites using bulletproof Backbone & CSS transforms by Adrian Zumbrunnen
Decoupling Backbone Apps From WebSockets by Derick Bailey
Backbone.js And JavaScript Garbage Collection by Derick Bailey
Getting familiar with Backbone.js by Pasha Craydon
Backbone Antipatterns by Ben Teese
Backbone.js for Absolute Beginners by Adrian Mejia - Part 1, Part 2, Part 3 and Part 4
Building an App with Express and Backbone by Jack Franklin - Part 1, Part 2, Part 3, Part 4, Part 5, Part 6, Part 7 and Part 8
Backbone with ES6 by Mike Fowler
How to share Backbone.js models with Node.js
Backbone.js tricks or treats by Tiago Garcia
Backbone.js organizational patterns by Ben Eddy - Part 1, Part 2
Backbone Cleanup by Naor Yehodaey
Lazy loading Backbone collections with Promises by Timothée Boucher
5 Ways to Level-Up Your Backbone.js Code by David Aragon
Why Backbone.js and ES6 Classes Don't Mix by Ben McCormick
Top 8 Common Backbone.js Developer Mistakes by Mahmud Ridwan
8 Great Backbone.js Interview Questions
Integrating React With Backbone by Ben Lewis
Using BackboneJS to improve your JavaScript code organization over a Ruby on Rails app by Ezequiel Rivadeneira Lichardi
JavaScript For The Impatient: BackboneJS - Part 1, Part 2 by Corey Howell
Building Backbone apps using Flux by Victor Doss
Bringing Meteor’s reactive collections to Backbone by Jeff Wear

Books

Developing Backbone.js Applications by Addy Osmani
Backbone Tutorials by Thomas Davis
Building Backbone Plugins by Derick Bailey and Jerome Gravel-Niquet
Mastering Backbone.js by Abiee Echamea
Backbone.js Testing by Ryan Roemer
Backbone.js Patterns and Best Practices by Swarnendu De
Backbone.js Cookbook by Vadim Mirgorod
Instant Backbone.js Application Development by Thomas Hunter II
Beginning Backbone.js by James Sugrue
Backbone.js Blueprints by Andrew Burgess
Recipes with Backbone by Nick Gauthier and Chris Strom
Full Stack Web Development with Backbone.js by Patrick Mulder
Developing Single Page Apps with Backbone.js by Prateek Dayal - work in progress

Videos

BackboneConf 2013 - Youtube playlist
BackboneConf 2014 - Youtube playlist
Introduction to Backbone.js - Youtube playlist by Joseph Zimmerman
Backbone App Walkthrough - Youtube playlist by Joseph Zimmerman
Backbone.js Tutorial - Youtube playlist by Mosh Hamedani
Backbone-Require-Boilerplate Explained by Greg Franko
BackboneRails Screencasts - Learn to Build Web Apps Using Backbone + Rails
Backbone.js with Derick Bailey by Derick Bailey
JavaScript Application Architecture with Backbone.js by Mathias Schäfer
An Introduction to Backbone.js by Sid Maestre
Put Some Backbone.js in your Apps by Sid Maestre
Evolving Your JavaScript with Backbone.js by K Adam White

Examples and boilerplates

Backbone Require Boilerplate - A Rad Backbone.js and Require.js Boilerplate Project
Wine Cellar Sample Application - "Backbone Cellar" is a sample application built with Backbone.js
Employee Directory - Employee Directory sample application built with Backbone.js and Twitter Bootstrap
Backbone Contact Manager - Simple Backbone.js example application
Backbone Boilerplates - Backbone.js stack boilerplates demonstrating integration with Express, Ruby, PHP, Grails and more
Backbone TodoMVC example - Simple todo app built using Backbone and Backbone.localStorage.

Courses

Libraries

Awesome HTML5

A curated list of awesome HTML5 resources. Inspired by awesome-php and awesome-python

Articles and standards
Multimedia capabilities
Audio
Media capture
Picture in Picture
Speech synthesis
Voice recognition
Virtual Reality (VR)
Web animations
Elements
Canvas
Head
Sectioning
Media Elements
Forms
Time
WebVTT
HTML Imports
Development APIs
Permissions
Geolocation
Cryptography
File
Frame timing
requestIdleCallback
requestAnimationFrame
Web payments
Semantics
Accessibility
DOM management
Shadow DOM
Data Binding
Web Components
Progressive web apps
Service Workers
Offline caching
Push Notifications
Client side storage
Performance
Mobile
Communications and interoperability
Web Sockets
WebRTC
Web Workers
WebGL
Browser compatibility
Books
Game development
Bootcamp
Videos and Keynotes
Websites and resources
Websites
Weekly news
Twitter
Contributing

Articles and standards

HTML 5.3 - Current HTML5 spec
Progressive enhancement
The extensible web manifesto
Differences between HTML5 and HTML4 from W3C

Multimedia capabilities

Audio

Media Capture

Picture in Picture

Chrome's new Picture in Picture API

Speech Synthesis

Voice Recognition

Virtual Reality

Firefox Reality now available

Web animations

Elements

Canvas

Head

A list of things that go in your pages' HEAD element

Sectioning

How to Use The HTML5 Sectioning Elements

Media Elements

Forms

Details

Development APIs

Permissions

Permissions API for the Web by Google

Geolocation

Cryptography

File

Frame timing

requestIdleCallback

On Google developers

requestAnimationFrame

Web payments

Web payments API overview

Semantics

Accessibility

DOM Management

Shadow DOM

Data Binding

Data-binding Revolutions with Object.observe()

Web Components

Progressive web apps

Service Workers

Offline caching

Push Notifications

Client side storage

Performance

Mobile

Communications and interoperability

Web Sockets

WebRTC

Web Workers

WebGL

WebGL Fundamentals

Browser compatibility

Books

Game development

Getting started with HTML5 Game Development from Mozilla Hacks
HTML 5 game development video series by Mozilla
Info, news and tutorials
Over 380 resources on HTML5 game development
Opensource JavaScript game engines
Pixi.js
Phaser
MelonJS
Kiwi.js
Crafty
PhysicsJS
Stage.js
Cocos2d

Bootcamp

Learn coding for free online Free online cources

Videos and Keynotes

Websites and resources

Websites

HTML official reference (allows collaborative modification of content like wiki)
HTML5 Rocks (news, tutorials and updates)
HTML5 Gallery (a showcase of sites using HTML5 markup and API's)
HTML5 development guide from MDN
W3C Highlights form June 2014
HTML5 Please (Know when HTML5 feature are ready to use)
Keen HTML (Free interactive lessons to learn HTML)
A Complete Guide to the Table Element

Weekly news

Twitter

Other awesome lists

Contributing

Your contributions are always welcome!

A curated list of SVG. The main idea is that everyone can contribute here, so we can center all the informations about SVG and keep up-to-date.

Awesome SVG
- Accessible SVG
- Animation
- Books
- Experiments
- Filters
- Follow on Twitter
- Gradients
- Grunt Plugins
- Gulp Plugins
- Icons
- Libraries
- Masks and Clip-Paths
- Optimizing, Fallbacks and Tools
- Patterns
- Podcasts
- Responsive
- Sites using SVG
- Slides
- Snippets
- Sprites
- SVG Software
- SVG to Download
- Text
- Tutorials
- Videos

Thanks to...

Marcus Vinicius, my friend =)
Rodrigo Machado for helping me with CC License.
Cleyson Leal for creating the awesome logo.
Chris Coyier and his Compendium of SVG Information, was a great start point for me.
and of course, all the Contributors.

Contributing

Your contributions are always welcome! Click Here to read the guidelines.

Other Awesome Lists

License

To the extent possible under law, Willian Justen has waived all copyright and related or neighboring rights to this work.

Awesome Canvas

A curated list of awesome Canvas examples, related articles and posts. Inspired by awesome-python.

Contributing

Please take a quick gander at the contribution guidelines first.

Canvas

Definition

"Added in HTML5, the HTML <canvas> element can be used to draw graphics via scripting in JavaScript. For example, it can be used to draw graphs, make photo compositions, create animations or even do real-time video processing or rendering." by Mozilla Developer Network

Examples

Some good examples about creation with canvas.

30.000 particles [show me the code] • A result of a study creating performant particles with Canvas 2D.
Canvas Colour Cycling [show me the code] • This demo is an implementation of a full 8-bit color cycling engine, rendered into an HTML5 Canvas in real-time.
Canvas Loader [show me the code] • Reference to make loaders using canvas.
Circular Rings [show me the code] • A great example about how to create circular rings using canvas.
Cloth 3D Effect (Google Chrome strongly recommended) • Thid demo renders a 3d model of Apple iPod with sphere environmental mapping technique.
Cloth Effect [show me the code] • A cloth 3D effect fork.
Colorful Particles [show me the code] • Experiment show how to generates random particles. Very simple code for assimilate.
Distance Field Waves [show me the code] • A example about GPU rendering shader experiments with procedural 3D scene generation using ray marching and distance field (also known as 'sphere tracing') rendering techniques.
Draw Table - [show me the code] • A simple example about events using canvas.
Fibrous Texture [show me the code] • Simple canvas based animation; draws random lines across the field. Makes an interesting papery pattern that becomes increasingly detailed with each iteration.
Image Nodes [show me the code] • Interactive nodes built from image data. Use the mouse to play.
Inception [show me the code] • Generates a scrawl of a city, a canvas HTML5 experiment. Based on Inception movie
JS Metaballs [show me the code] • Experiment for Chrome. Mix of webkit-filter and canvas for a metaballs effect.
Just Canvas [show me the code]• This is a JavaScript experiment to capture movements. Just Dance Idea + HTML5 Canvas Implementation.
Linjer • Amazing experiment about nodes effects in addition with cloth and animation effect.
Liquid Particles • A good example about Liquid Particles.
LucidChart • A complete tool to draw diagrams and other geometric forms, made in canvas.
L-System Turtle Fractal Renderer • A example about fractal renderer using canvas.
Motion Graphic Typeface [show me the code] • A example about typeface animation.
Neatnait Canvas Rain [show me the code] • A reference to create rain particles.
Particles [show me the code] • Reference to create astonishing particles.
Particles.js [show me the code] • Beautiful particles created using canvas.
Ping Pong Game [show me the code] • Besides being a good example, it also is a tutorial about game made with canvas.
Pirates Love Daisies • A entire game created using canvas
PixelCraft • A pixel-art editor made using canvas
Raining Day [show me the code] • Raindrops using canvas. It's Neatnait Canvas Rain fork.
Space Noodles • Amazing example about line movement and animation.
Star Time Lapse Effect [show me the code] • An example about creating a star time-lapse sky using canvas.
Tree in the Breeze [show me the code] • Demo about generating 2D trees in canvas.
Trigonoparty! [show me the code] • Simple trigonometry visualisation.
Video Destruction • Block based destruction of HTML5 video, best viewed in webkit based browsers.
Wipers [show me the code] • Wipers receiving life with canvas.
3D Lorenz Atractor [show me the code] • A simple canvas example showing a Lorenz atractor
3D Movement in HTML5 Canvas [show me the code] • Excelent example about vector postion and movement.
3D Space Craft • A Space Craft made and rotating with canvas.
Wormz • Particles experiment.

Libraries

To draw using canvas

Akihabara is HTML5 games library for making pixel based games using Javascript and the canvas tag.
ChemDoodle is an open source chemistry and chem-informatics toolkit where canvas is being used to solve common chemistry related tasks, displaying the molecules in a variety of different ways.
d3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML.
EaselJS is a JavaScript library that makes working with the HTML5 Canvas element easy. Useful for creating games, generative art, and other highly graphical experiences. EaselJS is part of CreateJS - a modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5.
fabric.js provides interactive object model on top of canvas element and also has SVG-to-canvas (and canvas-to-SVG) parser
iio.js - A javascript library that speeds the creation and deployment of HTML5 Canvas applications
Konva - Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
Origami.js - JS Lib to redesign canvas API interface
p5.js - p5.js is a JS client-side library for creating graphic and interactive experiences
Paper.js - Scriptographer ported to JavaScript and the browser, using HTML5 Canvas.
Pencil.js - Nice modular Javascript library with clear OOP syntaxe and lots of features.
Pixi.js - Super fast HTML 5 2D rendering engine that uses webGL with canvas fallback
Processingjs is a data visualization programming language.
- Overview
- 91 basic demos
Proton is a lightweight and powerful javascript particle engine. With it you can easily create countless cool effects
Pts.js - Pts is a javascript library for visualization and creative-coding.
Scrawl-canvas - easily add multiple responsive, accessible and interactive <canvas> elements to a web page
Sketch - Cross-Platform JavaScript Creative Coding Framework
Three.js is a javascript library that makes WebGL - 3D in the browser, however you can render using canvas instead of WebGL
- Introduction
- Some amazing examples
Visualize is a JQuery plugin who creates charts and graphs from tabular data using the HTML canvas element.
zDog - Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
zrender - A lightweight canvas library which providing 2d draw for Apache ECharts (incubating)

For other purposes, but still use canvas

React Canvas - High performance

Resources

Where to discover more about Canvas.

Talks

Books

HTML5 Canvas by Steve Fulton, Jeff Fulton - O'Reilly. Updated: 2nd Edition
HTML5 Canvas For Dummies by Don Cowan
Foundation HTML5 Canvas: For Games and Entertainment by Rob Hawkes
HTML5 Canvas Cookbook - by Eric Rowell
HTML Canvas Deep Dive - by Josh Marinacci

Twitter

@jeresig - Creator of Processing.js
@mrdoob - Creator of three.js
@soulwire - Creator of sketch.js and actively creating and sharing canvas/WebGL experiments
@spielzeugz - Actively creating and sharing canvas experiments
@paul_irish - Active contributor and write a reference post about requestAnimationFrame
@end3r - HTML5 game developer and EnclaveGames indie studio founder

Websites and Tutorials

Mozilla Developer Network Canvas Tutorial - This tutorial describes how to use the
HTML5 Canvas Tutorials
31 days of canvas
Dev.Opera: HTML5 Canvas — the Basics - This article takes you through the basics of implementing a 2D canvas context, and using the basic canvas functions, including lines, shape primitives, images, text, and more. You are assumed to have mastered JavaScript basics already.
Breakout - a fantastic tutorial for any canvas programming wannabes, where he runs through the steps needed to create a Breakout clone. The tutorial consists of 12 very clear and concise steps, where you can view a demo of how your project should look so far.
Canvas Demos - A good font to study canvas. You can find application, games, tools and tutorials for the canvas HTML5 element.
Procedural Drawing in Canvas - a tutorial that explains more about how procedural drawing works so that others can also learn the skill and start producing their own patterns.
The canvas element in the HTML5 draft standard
Internet Explorer 9 Guide for Developers: HTML5 canvas element
Accelerated Game Programming with HTML5 and canvas - this tutorial describes the structure of a typical game class in JavaScript, drawing to the canvas, double buffering, map/tile representation and player movement.
Physics for Lazy Game Developers - Provides examples of velocity, acceleration, collisions, rotation and particle effects.
Draw Particles using HTML5 Canvas - Shortcut tutorial shows how create simple and colorful particles.
Create a game chracter with HTML5 and JavaScript - Part 1
Create a game chracter with HTML5 and JavaScript - Part 2
Khan Academy - Hour of Drawing with Code
Making a Lunar Lander in JavaScript - A 5 lesson tutorial that explain how to make a Lunar Lander game in JavaScript.

License

The content of this project itself is licensed under the Creative Commons Attribution 3.0 license.

Awesome Knockout

A curated list of awesome plugins for Knockout framework.

Frameworks

Knockout - Knockout makes it easier to create rich, responsive UIs with JavaScript
Knockback - Knockback.js provides Knockout.js magic for Backbone.js Models and Collections
Durandal - A cross-device, cross-platform client framework written in JavaScript and designed to make building Single Page Applications
Falconjs - Adds structure to knockout.js by incorporting models, collections, and views

Integrations

JqueryUI - Rich UI components based on KnockoutJS
Kendo - A project to create a robust set of Knockout.js bindings for the Kendo UI widgets
Bootstrap - A plugin that adds custom bindings for twitter bootstrap objects such as tooltips and popovers
ASP.NET MVC - Power of Knockout.js for ASP.NET MVC
Rails - KnockoutJS for Rails
Meteor - A Knockout-to-Meteor bridge

Plugins and libraries

Mapping - Object mapping plugin for KnockoutJS
Validation - A validation library for Knockout JS
Sortable - A Knockout.js binding to connect observableArrays with jQuery UI sortable functionality
Grid - A data grid plugin for Knockout
External Template Engine - Custom Template Engine and Template Source for Knockout.js that loads external templates
Postbox - Publish/subscribe decoupled communication between separate view models and components
Deferred Updates - The plugin that modifies parts of Knockout’s observable/subscription system to use deferred updates
Delegated Events - Simple and flexible plugin to do declarative event delegation
Projections - Adds lodash FP chainability to observable arrays
Viewmodel - Flexible way to create a knockout viewmodel
Observable Dictionary - An implementation of an observable dictionary
Model - A base model for Knockout.js entities
Namespaces - Namespaces for Knockout.js
Rest - A simple library to extend Knockout.js objects with RESTful actions
Local Storage - LocalStorage persistence for Knockout.js
Router - Router for single-page apps

Custom Bindings

Punches - Collection of enhanced binding syntaxes
Switch Case - Powerful control flow bindings
Repeat - The repeat binding can replace foreach in many instances and is faster and simpler
Table - Table binding plugin for Knockout

Components

Cart - Simple browser-based shopping cart that uses local storage
Testing - Helpful utilities for TDD + Knockout.js

Examples

WebSockets - Example of real time collaborative web app using WebSockets and Knockout

Awesome Dojo

A curated list of awesome Dojo JavaScript Toolkit libraries, resources and other shiny things.

Inspired by the awesome-* trend on GitHub.

A JavaScript toolkit that saves you time and scales with your development process. Provides everything you need to build a Web app. Language utilities, UI components, and more, all in one place, designed to work together perfectly.

Index

DojoToolkit.org resources and documentation
Tutorials
Bootstraps and boilerplates
Packages, libraries and scripts
Serverside integrations
Testing
Applications
Themes
TypeScript
Community
Other Awesome Lists
Contributing and License

DojoToolkit.org resources and documentation

API - API reference for Dojo Toolkit
Roadmap Dojo Roadmap (all versions)
Blog - Dojo Toolkit Blog
Demos - Dojo Toolkit Demos
Reference guide - http://dojotoolkit.org/reference-guide/1.10/
Tutorials - authorized and updated tutorials for Dojo Toolkit
Dojo Meta - Dojo 2 contribution and coding guidelines
Dojo Website - Website for Dojo Toolkit 1.x to 2.x transition

Tutorials

Dojo and Bootstrap FAQ - how to use Bootstrap with Dijit
Dojo Toolkit 1.9 tutorial - A tutorial using Dojo Toolkit 1.9
Dojo the Good parts - ESRI Developer Summit Presentation held March 10-13th 2014 in Palm Springs.
Pluralsight's Dojo tutorial - Video tutorials for learning Dojo Toolkit

Bootstraps and boilerplates

dboostrap - Bootstrap theme for Dojo
Dojo Boilerplate - A starting boilerplate for developing with Dojo Toolkit
Dojo Twitter bootstrap - An implementation of the Twitter Bootstrap framework using Dojo
dojo.js - Minimalistic boilerplate to start your dojo with Jasmine and Gulp.
dojo-node-boilerplate - A quickstart "template" for using Dojo Toolkit on NodeJS

Packages, libraries and scripts

AngularJS Dojo - AngularJS directives for dojo widgets
delite - HTML Custom Element / Widget infrastructure
deliteful - Multichannel (desktop/mobile) UI Custom Elements Library
Dojo Foundation packages - Packages available on Dojo Foundation
dojo-smore - package with Dojo/Store implementation
generator-dojo - A yeoman generator for Dojo projects
Grids
- dgrid - next-generation grid component that takes full advantage of modern browsers and object stores.
- gridx - A fast rendering, well modularized and plugin architecture based Grid.
- xgrid - dgrid extensions.
grunt-dojo - Build Dojo inside a Grunt task
grunt-dojo2 - Build Dojo2 inside a Grunt task
karma-dojo - A Karma plugin. Adapter for Dojo Toolkit.
Leadfoot - A JavaScript client library that brings cross-platform consistency to the Selenium WebDriver API
Sitepen dstore - Data infrastructure framework, providing the tools for modelling and interacting with data collections and objects.
xaction - Component providing UI and logic for user actions.

Dojo 2

Dojo core - Dojo 2 package containing TypeScript and JavaScript core utilities
DOM Utilities - Dojo2 DOM Utilities
Dojo Command Line Tooling - Command Line Tooling for Dojo2 Applications
Dojo loader - AMD loader for Dojo2.
Dojo routing - Dojo2 Routing
Dojo compose - Dojo2 Composition Library
Dojo widgets - A core UI component library for Dojo 2
Dojo has - A feature detection library
Dojo shim - Modules that provide modular fills of ES6+ functionality
Dojo parse - A package for declaratively instantiating widgets.
Dojo2 App - An application framework for Dojo 2 (example)

Serverside integrations

Dojango - Dojo and Django Python framework integration
dojo-rails - Dojo and Ruby on Rails framework integration
Dojo Maven - Maven packaging of the Dojo Toolkit
ASP.NET
- Dojo & ASP.NET - DataGrid View with Sorting and Paging using Dojo EnhancedGrid, JsonRest Store, Entity Framework, SQL Server, ASP.NET MVC Web API
- Dojo.NET - .NET class library that provides WebControl bindings to ASP.NET websites (both WebForms and MVC, including Razor) using the Dojo toolkit.
- Reactive Extensions - Reactive Extensions bindings for the Dojo Toolkit
Java
- Dojofaces - project that assists JSF developers in connecting Dojo widgets with JSF backing beans
- DWR - library that enables Java on the server and JavaScript in a browser
- Grails - open source full stack web application framework that has support for Dojo with plugin
- LightStreamer - Server with Dojo integrated
- Spring - How to integrate Spring and Dojo
- Websphere - Application server has Dojo integrated
Node.js
- dojo-node - Lightwave Dojo wrapper for Node.js
- Dojos - Server side dojo on NodeJS
- Node.js integration - Tutorial how to use Dojo and Node.js
PHP
- Dojo & Composer - custom Composer installers for zoop packages including Dojo
- Dojo & Symfony PHP framework - integrating Dojo Toolkit with Symfony PHP framework
- Dojo & Zend PHP framework - integrating Dojo Toolkit with Zend Framework through DojoModule

Testing

Intern - A next-generation code testing stack for JavaScript.
Intern User guide - A quite complete manual about how to use The Intern
Intern Yeoman page objects - A Yeoman generator to create unit test and suites
Intern Yeoman generator - Yeoman generator - Intern

Applications

AuShada - Django and Dojo application for Electronic Medical Records (EMR) and Public Health Management
dapi - node.js Dojo API viewer
Dig Dug - A JavaScript library for launching WebDriver service tunnels
Dojo Demo - Dojo demo
dojorama - Single page demo application based on Dojo 1.9, Twitter Bootstrap 3 and history API
Dojox application - Dojox Application Framework for mobile, tablets, and desktops
js-doc-parse - Library for parsing dojo JavaScript files and extracting inline documentation
rstwiki - Simple reST/wiki system built with Python and Dojo Toolkit
Scripted - Scripted is a fast and lightweight code editor with an initial focus on JavaScript editing
todomvc - Helping you select an MV* framework - todo app examples
Dojo2 Example - Dojo 2 Examples
xamiro - IDE alike file manager in PHP and JavaScript with minimal dependencies.
Windows-dist - Full automation suite for IoT and prototyping.

Themes

dijit-claro-stylus - A straight conversion of Dijit's Claro theme from LESS to Stylus.
Flat Dojo Theme - Esri Flat Dijit Design
Semantic Dojo Theme - A responsive Dojo theme that harnesses the style awesomeness of Semantic UI Framework.

TypeScript

Definitive TypeScript Guide - A guide about features and functionalities of TypeScript
Dojo to Typescript Converter - A typescript script which creates typescript compatible declarations from a dojo api.json file.
Dojo-TypeScript - Using Dojo 1.9 AMD-style with Microsoft TypeScript 0.9.5
Dojo Typings - A repository of Dojo 1 TypeScript Typings (including Dijit and DojoX)

Community

Brazilian Facebook Group - Brazilian Dojo Community on Facebook
Dojo mailing list - mailing list for questions and discussions
Dojo on StackOverflow - Dojo Toolkit support on StackOverflow
Dojo on Twitter - Dojo's Twitter account
Facebook Group - Dojo community on Facebook
Google Plus Community - Dojo community on Google Plus
Linked In Dojo Ajax Toolkit Developers Group - Dojo Community on LinkedIn
Linked In Dojo Toolkit Group - Dojo Community on LinkedIn
Reddit Community - growing community discussing Dojo on Reddit (invitation-only).
SensioLabs Connect Club - Sensiolabs Connect Dojo Toolkit Club for PHP and Symfony developers
IRC - Large and active IRC support channel.
Meetup - Get involved locally and find local user groups.

Other Awesome Lists

awesome-javascript - awesome JavaScript list
awesome-javascript-books - awesome JavaScript books
awesome lists:
- awesome - awesome list
- awesome-awesome - awesome list
- GetAwesomeness - awesome lists
- lists - awesome lists
- awesome-all - awesome lists
- awesome-awesome - awesome lists

Contributing and License

You are most welcome to contribute to this awesome Dojo Toolkit list as well. Big thanks to all contributors who have helped to build this list.

To the extent possible under law, Peter Kokot has waived all copyright and related or neighboring rights to this work.

Inspire

Designing and building a modern frontend in any web project can be a long and arduous process. Here's a collection of links to help you. Enjoy!

Concept

These sites are good to get a general idea of possible layouts and style paths to take.

Awwwards - More awesome sites of various styles.
CodeMyUI - List of code snippets for fancy CSS/JS that make an awesome UI.
CodePen - Central repository of user submitted code concepts/snippets. Great for experiments.
Codrops - Web design/development blog that publishes articles/tutorials about the latest web trends.
CodyHouse - Tutorials and showcase of awesome UI elements.
CSS Winner - Reviewed list of great websites.
Designer News - The best design / development links from the 'net.
Dribbble - Snaps of icons, doodles, sites, and more from a talented group of people.
Httpster - A curated list of the best sites around the Internet.
OnePageLove - Great influence for one page and general website design.
SaaS Pages - An inspection of Netlify's page made especially to bring you inspiration.
Siiimple - Another list of sites, but on the much simpler side.
SiteInspire - Get inspired.
TheBestDesigns - General list of hand picked sites from across the web.

Creation

These sites are good for building a basic framework for the site.

Colors 🎨
ColorsWall - Place to store your color palettes.
Coolors - Super fast color scheme generator.
Kuler - Easily create or view a custom color swatch for your site.
uiGradients - Gorgous gradient generator.
Spectral - Minimal color swatch creation.
Fonts
Google Fonts - Tons of free, easy to use webfonts.
Frameworks
Bootstrap - Very popular framework for building modern websites and web apps.
- Bootswatch - A list of free themes for Bootstrap.
Icons
Icon Scout - Get high-quality Icons, Illustrations and Stock photos at one place.
Iconmonstr - A collection of free, simple icons.
Ionicons - Another great collection of free icons.
Images
AllTheFreeStock - All the Free stock mmages, videos, sounds and icons in one location.
TheStocks.im - A collection of great stock photo websites.
Unsplash - Free, high quality stock photos.
Resources
CSS3 Animation Cheat Sheet - A collection of CSS3 animation snippets.
MDN - Documentation for HTML, CSS, JS, etc
User Inter Faces - Get ipsum images for user images.
YMNNJQ - See jQuery functions in natural JS. No libraries.

Tools

Every painter needs a brush. Well... Most do.

Design Tools
Figma - Web-based vector graphics editor
Sketch [macOS only] - A professional vector graphics editor
IDEs
DevSession - Open a collaborative online IDE from a local directory.
FileZilla - For those who fear FTP in the terminal
Hyper - Beautiful, extensible command-line interface
Taskade [macOS only] - Create beautiful task lists and outlines.
Text Editors
Atom - A hackable text editor for the 21st century.
Brackets - Modern, open source editor with live preview.
Nova [macOS only] - Gorgeous, native text editor.
Sublime Text - A very popular text editor for developers.
- Themes
- Flatron - It's flat, purple, and hella sexy.
- Predawn - Gorgeous dark interface and syntax theme.
VSCode - Free text editor
WinSCP - Upload files to a MEAN stack or VPS server.

Collaborate

Working with a team? These links are for you.

Cloud9 - An awesome, zen way to work with others in the cloud.
Gist - Share code and text with others fast. Like a mini repository.
Invoice Ninja - Open source invoicing platform.
Red Pen - Share your design and get feedback seamlessly.
Scratchpad - A simple, RTC tool for coding and previewing websites.

Backends

Every awesome web app needs an awesome backend.

Auth0 - Authentication, done for you.
DigitalOcean - A cheap and quality VPS hosting company.
Firebase - A real-time front-end database for your sites.
Hasura - Platform to build and deploy app backends fast.
Heroku - Cloud application platform; very easy to scale.

Testing

Before you launch, these are good tools to make sure your site is ready for stardom.

Browserling - Cross-browser test your website.
Checkbot - Browser extension that tests your website follows 50+ SEO, speed and security best practices.
CodePen - A free web editor in your browser.
Hurl.it - Make HTTP requests in the browser.
Localtunnel - Open localhost ports to the world.
Placehold - Generate custom placeholder images of any size.
Postman - A tool to make HTTP requests, generate mock servers and make API documentation.
WooRank - A review tool for SEO elements, W3 validation, and numerous other variables. Free basic service.
Yslow - Tool for analyzing and finding fixes for multiple causes of slow site loading.

Good Reads

Need something to read in your spare time?

1stWebDesign - A good, simple blog on web development and design.
A List Apart - Guest bloggers and full books on topics from coding to business practices.
Codrops - Great collection of design techniques for modern web developmers and designers.
CSS-Tricks - Awesome blog on anything and everything related to CSS
GoodUI - It's definitely not bad.
Insert HTML - A blog covering current and upcoming techniques and technologies for web developers.
Mentor - Get random advice from other designers and developers.
Smashing Magazine - A magazine for all things digital design.

License

To the extent possible under law, Noah Buscher has waived all copyright and related or neighboring rights to this work.

:heart:

Awesome Ember.js

A curated list of delightful Ember.js packages and resources.

Ember.js Myths Readers Questions Contribute to Ember.js

_{Just type ember.cool OR https://ember-community-russia.github.io/awesome-ember/ to go here.}

Ember.js is a JavaScript framework that greatly reduces the time, effort and resources needed to build any web application. It is focused on making you, the developer, as productive as possible by doing all the common, repetitive, yet essential, tasks involved in most web development projects.

Ember.js also provides access to the most advanced features of JavaScript, HTML and the Browser giving you everything you need to create your next killer web app.

You might also like awesome-javascript. Please read the contribution guidelines before contributing.

Awesome Ember.js
Contents
Packages
License

Packages

AST

ember-ast-helpers - This library is a utility belt to make AST transforms and shield users as much as possible from the nuances of the AST, as it is still private API.
ember-template-recast - Non-destructive template transformer.
jscodeshift - A JavaScript codemod toolkit.
dyfactor - A platform for running codemods based on runtime information.

ember-accessibility - Addon to help identify accessibility violations during development.
e-a11y-modal - A simple modal for accessible Ember.js applications.
ember-a11y-landmarks - Ember.js addon to help with landmark roles for better accessibility.
ember-a11y - A collection of tools to build accessible Ember.js applications.
ember-component-focus - A mixin for adding methods to your Ember.js components that help you manage the currently focused element.
ember-gestures - Ember.js gestures provides an easy way to use gestures by making it simple to define and use HammerJS managers and recognizers throughout your app.
ember-steps - Declarative create wizards, tabbed UIs, and more.
ember-page-title - Page title management for Ember.js Apps.
ember-self-focused - Focus on route on transition.
ember-keyboard - An Ember.js addon for the painless support of keyboard events.
ember-a11y-testing - A suite of accessibility tests that can be run within the Ember.js testing framework.
a11y-announcer - An accessible ember route change announcer.
ember-a11y-refocus - Provides an unobtrusive navigation narration element for Ember applications.

Adapters

ember-cli-markdown-resolver - Ember CLI addon for resolving markdown files in custom folders and retrieving content via a service.
ember-cloud-firestore-adapter - Unofficial Ember Data Adapter and Serializer for Cloud Firestore.
ember-data-hal-9000 - An ember-data compatible ember-cli addon that provides a HAL adapter (HATEOAS).
ember-django-adapter - Ember CLI addon adapter for Django REST Framework.
ember-graphql-adapter - GraphQL adapter for Ember Data.
ember-indexeddb - Utilities & adapter to work with IndexedDB in ember & ember-data.
ember-localforage-adapter - Offline usage for Ember Data.
ember-local-storage - The addon provides a storage for computed property that returns a proxy and persists the changes to localStorage or sessionStorage.
ember-pouch - PouchDB/CouchDB adapter for Ember Data.
ember-wordpress - The bridge between Ember.js and WordPress.
emberfire - Official Ember Data adapter for Firebase.
ninjafire - An ORM for Firebase written in Typescript.

Animations

ember-animated - Web Animations with Ember js
liquid-fire - Animations & transitions for ambitious Ember.js applications.

Authentication

ember-cli-simple-auth-extensions
ember-simple-auth - A library for implementing authentication/authorization in Ember.js applications.
tori - A set of clean abstractions for authentication in Ember.js.

Automation

ember-cli-deploy - A deployment pipeline for Ember CLI apps.
ember-cli-deploy-webhooks - Ember CLI Deploy plugin for calling webhooks during deployments.
ember-cli-release - Ember CLI addon for versioned release management.
ember-cli-sri - This plugin is used to generate Subresource Integrity (SRI) hashes for ember applications.
ember-cli-dependency-lint - Lint your app's addon dependencies, making sure you only have one version of each.

Benchmarking

ember-macro-benchmark - Benchmark recording of an ember app with running with 2 versions of Ember.js.
ember-performance - A suite of tests for Ember.js to help with performance.
emberperf - Ember.js Performance (Between versions).

Blogging

empress-blog - Fully-functional, SEO friendly static site implementation of a blog system built on Ember.js.
ember-cli-blog - Tom Dale's blog example updated for the Ember CLI.
ember-tumblr - Ember.js Addon for integrating a Tumblr blog.

Babel

ember-cli-babel-plugin-helpers - Utilities for managing Babel plugins in Ember CLI apps and addons.

Boilerplating

ember-boilerplate - The stable base upon which we build our Ember.js projects at Mirego.

Broccoli

broccoli-concat-analyser - Assets profiling.
broccoli-debug - Utility for build pipeline authors to allow trivial debugging of the Broccoli pipelines they author.
broccoli-stew - Provides commonly used convenience functions for developing broccoli based build pipelines.
broccolijs-tutorial - Broccoli.js Tutorial repository.
broccoli-rollup - Broccoli Plugin For "Rollup".
broccoli-manifest - HTML5 cache-manifest compilation for broccoli.
broccoli-glow - Dynamic component creation from single file, etc.

Broccoli read

Build tools

Broccoli - Fast, reliable asset pipeline, supporting constant-time rebuilds and compact build definitions.

Charts

ember-charts - A charting library built with the Ember.js and d3.js frameworks.
ember-sparkles - Collection of composable D3 components built with ember-d3-helpers.

CI/CD

ember-cli-server-variables - An Ember CLI add-on to support adding variables to the generated index.html file's head tag.
ember-ci - Continuous integration goodies for ember.js apps.
CI with GitHub Actions for Ember Apps - Reducing CI runtimes with GitHub Actions
CI with GitHub Actions for Ember Apps: Part 2 - Migrating to v2 actions, lowering runtime cost and continuously deployment

Code Splitting

ember-engines - This Ember.js addon implements the functionality described in the Ember.js Engines RFC. Engines allow multiple logical applications to be composed together into a single application from the user's perspective.
ember-lazy-mount - Allow {{mount}} lazy loading route-less engines.
ember-cli-bundle-loader - Addon to allow for multiple bundles and do lazy loading.
ember-cli-lazy-load - Support lazily loading your Ember.js app via splitting it up into Bundles.

Codestyle

ember-cli-template-lint - Ember CLI integration for ember-template-lint.
ember-cli-alex - Alex for Ember.js apps.
ember-prop-types - Improved property management for Ember.js apps and addons.

Command-line apps

ember-cli-create - CLI wizard to create a new ember project.
@ember/optional-features - This addon allows you to easily enable/disable optional features in ember-source. To clarify what we mean by optional, these are features that will be opt-in/opt-out and optional for the foreseeable future, not features that will be enabled by default. It is intended for use with apps only not addons.
ember-cli-rename - Addon for ember-cli that provides an ember rename command.

Command-line utilities

ember-cli-update - Update Ember CLI Ember.js apps, addons and Glimmer.js apps.
ember-cli-deprecation-workflow - An addon geared towards making Ember.js upgrades easier by allowing you to work through deprecations without massive console noise.

Component addons

ember-diff-attrs
ember-compatibility-helpers - Helpers that allow you to write backwards compatible Ember.js addons.

Compression

ember-cli-deploy-brotli - Ember.js deploy plugin to support brotli compression.

Content management systems

ember-admin - Automatically discover your models and interact with all model data in a simple CRUD interface.
https://authmaker.com/ - Go from zero to fully functioning and live MVP in 3 days.

Control flow

Promises
- ember-computed-promise-monitor - Enable computed properties to be async-aware.
Observables
- ember-rx - RxJS 6 integration for Ember.js.
Generators
- ember-concurrency - Ember.js Addon that enables you to write concise, worry-free, cancelable, restartable, asynchronous tasks.
ember-master-tab - A library that provides a service which helps running a function on only one tab of an Ember application.

CSS & etc

ember-cli-stylelint - Adds styleint to your ember app, to lint all kinds of css.
ember-cli-autoprefixer - Automatically run your styles through autoprefixer.
ember-cli-sass - Use node-sass to preprocess your ember-cli app's files, with support for sourceMaps and include paths.
ember-cli-sass-pods - Enjoy styling your pods with the sass style file in the pod directory.
ember-component-css - An Ember CLI addon which allows you to specify styles for individual components.
ember-cli-postcss - A PostCSS integration for ember-cli.
ember-css-modules - CSS Modules for ambitious applications.
ember-cli-tailwind - Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.
ember-emotion - Use emotion styling in Ember.js.
css-blocks - High performance, maintainable stylesheets.
ember-cli-eyeglass - This Ember CLI Addon makes it trivial to compile your sass files with eyeglass support via node-sass.

Fonts

ember-cli-webfont - Easily generate webfonts from svg files as part of your ember-cli build process.

State management

ember-buffered-proxy
ember-changeset
ember-cerebraljs - Enhanced state management for complex Ember.js apps using Cerebral.
ember-redux - Predictable state management for ember apps.
ember-state-services
ember-time-machine

Styling kits

ember-cli-tailwind - Adds Tailwind CSS to your app or addon.

Data Management

ember-apollo-client - An ember-cli addon for Apollo Client and GraphQL.
ember-cli-sofa - CouchDB persistence library for Ember.js.
ember-orbit - Ember.js data layer built with Orbit.js.
ember-data-storefront - A collection of APIs that address common data-loading issues.
ember-m3 - This addon provides an alternative model implementation to DS.Model.
ember-cli-zuglet - Ember.js addon for effortless Firebase integration.

Data manipulation & Computed

ember-awesome-macros - A collection of Ember.js computed macros.
ember-cpm - Computed property Macros for Ember.js.
ember-macaroni - Keep your app code DRY and copypasta free with computed property macaronis (macros).

Data validation

ember-cp-validations - Ember.js computed property based validations.
ember-changeset-validations - Validations for ember-changeset.
ember-model-validator - Add validations to your Ember Data models on an explicit and easy way, without a bunch a validations files around or complicated structure.
ember-validated-form - Easily create forms with client side validations.
ember-line-graph - Zero-dependency ember-addon to draw line-charts.

Database

ember-indexeddb - Utilities & adapter to work with IndexedDB in ember & ember-data.

Date

ember-moment - Template helpers and computed property macros for moment.js and Ember.js.

Debugging / Profiling

ember-debug-logger - Exposes the visionmedia/debug library for use in your Ember.js application.
ember-devtools - A collection of useful Ember.js debugging functions.
ember-chrome-devtools - Chrome DevTools addon for Ember.js.
ember-cli-bundle-analyzer - An Ember CLI addon to analyze the size and contents of your app's bundled output, using an interactive zoomable treemap.
ember-perf-timeline - Add performance information to Chrome's Timeline for Ember.js applications.
ember-cli-route-map - Command to generate a route map of your Ember.js application.
heimdalljs-visualizer - Visualizer for heimdalljs data.
source-map-explorer - Analyze and debug space usage through source maps.
ember-dead-code - Detect dead code with confidence via real user monitoring.

Decorators

Macro Decorators - DRY your code by creating decorators that duplicated getter/setter's functionality

Documentation

ember-cli-addon-docs - Easy, beautiful docs for your Ember.js addon.
ember-cli-jsdoc - An Ember.js CLI addon to generate HTML documentation from JSDoc comments in the source code.
ember-freestyle - Ember-freestyle is an Ember.js addon that allows you to quickly create a component explorer for your Ember.js app.

Ember-inspector roadmaps & overview

End-user customization

ember-asset-loader - Asset loading support for Ember.js applications.
ember-experiments - Experimentation, A/B Split Testing addon for Ember.js.
ember-cli-hot-loader - An early look at what hot reloading might be like in the ember ecosystem.
ember-ast-hot-load - Universal hot-load addon.
ember-cli-build-notifications - Notifications when ember-cli has a build error.
ember-feature-flags - An ember-cli addon to provide feature flags.
ember-named-yields - Named Yields for Ember.js Components.
ember-islands - Render Ember.js components anywhere on a server-rendered page to create "Islands of Richness".
ember-wormhole - Render a child view somewhere else in the DOM.
ember-stargate - A modern take on using so called "portals" to render things in a different place of the DOM tree than they are logically defined in the app.

ES6

ember-concurrency-decorators - Decorator syntax for declaring/configuring ember-concurrency tasks.
ember-decorators - Useful decorators for Ember.js applications.
@ember-decorators/argument - Decorators for Component and Object arguments in Ember.js.
sparkles-decorators - Decorators for Sparkles/Glimmer.js Components.

External Components Integration

ember-glimmer-component - Glimmer.js-like components in Ember.js.
sparkles-component - Addon used to experiment with @glimmer.js/component style APIs in Ember.js apps via existing public APIs.
hooked-components - Custom components for Ember.js, inspired by React Hooks approach.
ember-functional-component - Attempting to use "pure functions" as components.
ember-lifecycle-component - A component with additional lifecycles for times when you may need need a template.
ember-vue-components - Vue.JS component API for Ember.
@alexlafroscia/ember-cli-react - Render React components in Ember.js.
@AltSchool/ember-cli-react - Use React component hierarchies in your Ember.js app.

Forms

ember-cli-crudities - Form and editable list builder that works from json config which can be either statically or dynamically loaded.
ember-form-for - This Ember.js addon will give you an easy way to build good forms.

Functional programming

Bacon.js - Functional reactive programming.
Folktale - Suite of libraries for generic functional programming in JavaScript that allows you to write elegant, modular applications with fewer bugs, and more reuse.
immutable - Immutable data collections.
Kefir.js - Reactive library with focus on high performance and low memory usage.
Lazy.js - Utility library similar to lodash/Underscore but with lazy evaluation, which can translate to superior performance in many cases.
lodash - Utility library delivering consistency, customization, performance, & extras. A better and faster Underscore.js.
mori - Library for using ClojureScript's persistent data structures and supporting API from the comfort of vanilla JavaScript.
Mout - Utility library with the biggest difference between other existing solutions is that you can choose to load only the modules/functions that you need, no extra overhead.
Ramda - Utility library with a focus on flexible functional composition enabled by automatic currying and reversed argument order. Avoids mutating data.
RxJS - Functional reactive library for transforming, composing, and querying various kinds of data.
underscore-contrib - The brass buckles on Underscore's utility belt.

HTTP

ember-ajax - Service for making AJAX requests in Ember.js 1.13+ applications.
ember-socket-guru - Addon for easy integration with Pusher.js, Action Cable, Socket.io and Phoenix Channels.

Helpers

ember-event-helpers - Complimentary event template helpers to the {{on}} modifier.
ember-render-helpers - @ember/render-modifiers as template helpers.
ember-element-helper - Dynamic element helper for Glimmer templates.
ember-composable-helpers - Composable helpers for declarative templating in Ember.js.
ember-helpers - A collection of handlebars helpers for Ember.js.
ember-d3-helpers - Collection of Ember.js helpers for building composable D3 charts.
ember-math-helpers - Ember.js HTMLBars helpers for basic arithmetic.
ember-promise-helpers - Promise-y sugar for your Ember.js templates.
ember-route-action-helper - Bubble closure actions in routes.
ember-root-url - A template helper to keep your URLs relative to the app's rootURL.
ember-store-helpers - This add-on provides helpers related to ember-data.
ember-truth-helpers - Ember.js HTMLBars Helpers for {{if}} & {{unless}}: not, and, or, eq & is-array.
ember-awesome-macros - A collection of Ember.js computed macros.
ember-macro-helpers - Ember.js macro helpers for making your own fancy macros!
ember-cli-string-helpers - Set of the String helpers extracted from DockYard's ember-composable-helpers.

Image

ember-svg-jar - The best way to embed SVG images into your Ember.js application.

Include external JS code

ember-auto-import - Zero config import from npm packages.
ember-cli-cjs-transform - CommonJS imports.
ember-cli-es6-transform - Import ES6 modules from npm, bower or anywhere else in your app.
ember-browserify - Addon for easily loading CommonJS packages from npm via browserify.

Infinite Scroll

ember-infinity - Simple, flexible Infinite Scroll for Ember CLI Apps.
vertical-collection - Infinite Scroll and Occlusion at > 60 FPS.
smoke-and-mirrors - Ambitious infinite-scroll and svelte rendering for ambitious applications.

Internalization & Localization

ember-intl - Translate complex messages string. Localized formatting for date/time, number, and relative time.
ember-intl-analyzer - Find unused translations in your Ember.js projects.

Inputs

ember-autoresize - Autoresize for Ember.js Components.

Job queues

ember-data-tasks
ember-concurrency
ember-custom-actions - Custom API actions for Ember.js applications.
ember-pipeline
ember-lifeline - An ember addon for managing the life cycle of asynchronous behavior in your objects.

Logging

console.re
ember-debug-logger - An Ember.js addon to expose the Visionmedia debug logger.
ember-logging-service - This addon provides a general and extensible logging service that can be used throughout your application.
raygun

Mad science

ember-elm - Write Elm in your Ember.js app.
javascript-algorithms - Algorithms and data structures implemented in JavaScript with explanations and links to further readings.

Math

ember-katex - Render your LaTeX formulas using KaTeX.
ember-math-helpers - Ember.js HTMLBars helpers for basic arithmetic.

Metrics

ember-user-activity - Ember.js Addon for tracking user activity & idling.
ember-metrics - Send data to multiple analytics services without re-implementing new API.

Minifiers

ember-hbs-minifier - Stripping whitespace out of your Handlebars templates.
ember-cli-template-trimmer - This addon removes newlines on compile stage.

Miscellaneous

diagonal routes - See what route structure, templates and route hooks are for a given ember route definition.
ember data model maker - Ember Data Model Maker (EDMM).

Mobile

corber - Tooling for cordova and crosswalk hybrid applications built with Ember.js.
glimmer-native - Have you ever wanted to use Ember.js/Glimmer.js to create a native mobile app? Well now you can!
ember-mobile-bar - Managed fixed (tool)bars with mobile app-like behaviour.
ember-mobile-core - Provides a pan recognizer and some utils for the ember-mobile-* addons.
ember-mobile-menu - Draggable sidebar specifically tailored to mobile devices.
ember-mobile-pane - Mobile layout ember-mobile-pane.
ember-responsive - Easy responsive layouts with Ember.js.

Modifiers

ember-css-vars - A ember modifier to apply css variables. This gives a save way to expose data from JavaScript to css.
ember-on-modifier - An implementation of the {{on}} element modifier shown in the Modifiers RFC #353.
ember-ref-modifier - An implementation of the {{ref}} element modifier.
ember-render-modifiers - Implements did-insert / did-update / will-destroy modifiers for RFC #415.
ember-functional-modifiers - Functional Modifiers for Ember.js.
ember-style-modifier - This addon provides a {{style}} element modifier to set element's style.
ember-simple-animate - Simple ember animate addon for CSS based animations.

Parcel

ember-parcel-example - Ember.js + Parcel.js Example.
todomvc-demo - Glimmer.js + Parcel.js Example.

Payments

ember-credit-card - "make your credit card form dreamy in one line of code".

Polyfills

ember-modifier-manager-polyfill - Polyfill element modifiers for Ember.js 2.12 through 3.7.
ember-angle-bracket-invocation-polyfill - This addon provides a polyfill for angle bracket invocation syntax as described in RFC 311.
ember-named-arguments-polyfill - Polyfills support for named arguments for Ember.js 2.10 through 3.0.
ember-native-class-polyfill - This addon provides a polyfill for the native class behavior that was proposed in Ember.js RFCs #240 and #337.
ember-router-service-polyfill - This addon provides a best effort polyfill for the ember-routing-router-service feature added in Ember.js 2.15.
ember-fn-helper-polyfill - This addon provides a polyfill for the {{fn}} helper as described in RFCs #470.
ember-named-blocks-polyfill - This addon provides a polyfill for the Yieldable Named Blocks feature.

PWA

ember-service-worker-asset-cache
ember-service-worker-cache-fallback
ember-service-worker-cache-first
ember-service-worker-index
ember-service-worker-prember
ember-service-worker - A pluggable approach to Service Workers for Ember.js.
ember-web-app - This Ember.js addon helps you configure and manage the manifest.json and meta tags needed to create progressive web applications.

Query Params

ember-query-params-service - Do you have controllers that only parse query params?
ember-parachute - Improved Query Params for Ember.js.
ember-href-to - A lightweight alternative to {{link-to}}.

Real-time

ember-cli-flash - Simple, highly configurable flash messages for ember-cli.

Routing addons

ember-component-routes - Render components directly from routes in Ember.js.
ember-redirect - This addon aims to be a simple and easy way to preform route based redirects with minimal effort.
ember-router-scroll - Scroll to top with preserved browser history scroll position.

Resolver customization

ember-cli-extended-resolver - This addons allows to modify default files structure to be more feature-grouped.

Security

ember-can - Simple authorisation addon for Ember.js apps.
ember-permissions - Permission management for Ember applications.

Service Workers

ember-cli-workbox - Offline caching as a progressive enhancement using service workers.
ember-service-worker - A pluggable approach to Service Workers for Ember.js.
ember-service-worker-index - An Ember.js Service Worker plugin that caches the index.html file.
ember-service-worker-asset-cache - An Ember.js Service Worker plugin that caches an Ember.js app's asset files.
ember-service-worker-cache-first - A cache first Ember.js Service Worker plugin.
ember-service-worker-cache-fallback - An Ember.js Service Worker plugin that resorts to a cached fallback version when the network request fails.
ember-service-worker-emberfire-messaging - Firebase Cloud Messaging service worker support for Emberfire apps.
ember-service-worker-unregistration - An Ember.js plugin that unregister service workers when ember-service-worker is disabled.
ember-service-worker-request-chaos - Like Netflix's Chaos Monkey but for your Ember.js SPA's API requests.
ember-service-worker-project-entagled-registration - This addon is to be used along with ember-service-worker to ensure that the service worker being used is paired properly to the project.
ember-service-worker-cache-rendered - Ember.js service worker plugin for storing rendered html in cache, really useful for fastboot.
ember-service-worker-update-notify - Update notification for service workers.
ember-service-worker-enqueue - An Ember.js Service Worker plugin that catches failed mutation requests e.g POST, PUT, DELETE and queues them for background processing.
ember-service-worker-prember - An Ember.js Service Worker plugin that caches the index.html files for each prember route.

SSR / Server Side Rendering

ember-fastboot - Server-side rendering for Ember.js apps.
glimmer-ssr-test - Making a Glimmer.js app be rendered in the server.

Static site generators & SEO

ember-meta - Setup meta for your Prember/Ember.js blog to support opengraph, microdata, Facebook, Twitter, Slack etc.
prember-rss-feed - Ship RSS feeds for your Prember site.
prember - Prerender Ember.js apps with Fastboot at build time.

Styling

ember-cli-sass - Use node-sass to preprocess your ember-cli app's files, with support for sourceMaps and include paths.

Templating

ember-template-component-import - This addon allows you to use import-style syntax to create local bindings to a component within a template file.
ember-cli-jsx-templates - TSX/JSX support for ember templates.
Emblem.js - Ember.js-friendly, indented syntax alternative for Handlebars.js.

Testing

ember-qunit-decorators - Use ES6 or TypeScript decorators for QUnit tests in your Ember.js app.
ember-cli-addon-tests - Test helpers for testing Ember CLI addons inside the context of a real Ember.js app.
ember-cli-code-coverage - Code coverage for ember apps using Istanbul.
ember-cli-mirage - Build, test and demo your app using a JSON API-compliant client-side server.
ember-cli-mocha - Mocha and Chai tests for ember-cli applications.
ember-cli-page-object - This ember-cli addon eases the construction of page objects on your acceptance and integration tests.
ember-cli-yadda - Write cucumber specs for ember-cli applications.
ember-concurrency-test-waiter - Easily enable test waiters for ember-concurrency tasks.
ember-exam - Run your tests with randomization, splitting, and parallelization for beautiful tests.
ember-percy - Ember.js addon for visual regression testing with Percy.
ember-qunit - QUnit test helpers for Ember.js.
ember-test-friendly-error-handler - Build testable error handlers that don't throw in production...
ember-test-selectors - Enabling better element selectors in Ember.js tests.
ember-test-setup - Testing shorthands to reduce duplication.
ember-window-mock - Use window global as an Ember.js service that can be mocked in tests.
mirage-glue - This program reads your API endpoint and creates or appends response to relevant mirage fixture file(s).
ember-sinon - Ember CLI addon adding support for sinon.js.

Text

ember-text-measurer - Simple Ember.js Service to measure the width of a string in a performant way.

Tree Shaking

ember-cli-tree-shaker - This is a testbed for the new tree-shaking and code splitting work from Kelly Selden and Alex Navasardyan.

TypeScript

ember-cli-typescript - Use TypeScript in your Ember.js apps!
ember-typings - Typescript type definitions for ember.js.
ember-typescript-utils - Utility functions built around Typescript and Ember.js.

UI libs

ember-bootstrap - Provides a collection of native Ember.js components that mimic the original Bootstrap plugins and components in an ember friendly way.
Frontile - Frontile aims to provide the legos (components, helpers, modifiers, and styles) necessary for building consistent and powerful Ember.js apps.
ember-cli-uniq - Default components for Ember.js that implement the Uniplaces Design System.
ember-element-ui - Provides element-ui for ember.
ember-elements - a UI toolkit in Ember
ember-ghost-casper-template - A static site version of the default personal blogging theme for Ghost.
ember-paper - The Ember.js approach to Material Design.
ember-radical - Feather light, fully accessible DDAU component library for your Ember.js apps.
Nomad UI
Semantic-UI-Ember - This is the official Ember.js library for the Semantic-UI modules.
Flexi

UI components

ember-attacher - Tooltips & popovers made easy.
ember-burger-menu - An off-canvas sidebar component with a collection of animations and styles using CSS transitions.
ember-flatpickr - An Ember.js addon that wraps the Flatpickr date picker.
ember-power-select - The extensible select component built for ember.
ember-basic-dropdown - The basic dropdown you ember app needs.
ember-drag-sort - A sortable list component with support for multiple and nested lists.
ember-perfect-scroll - Perfect scroll component as an Ember cli addon.

UX

ember-onbeforeunload - Invoke logic when transitioning between routes or closing window.

VR

ember-vr

VS Code addons

Ember Syntax - Syntax highlighting for Ember.js template files AND syntax highlighting for inline template definitions with tagged templates!
Glimmer Templates Syntax for VS Code - Glimmer syntax highlighting for Ember.js.
ember-language-server - Language Server Protocol implementation for Ember.js projects.
unstable-ember-language-server - Language Server Protocol implementation for Ember.js projects (Unstable, including experimental features).
vscode-ember-colorizer - VSCode extension that colorizes/tokeninzes Ember.js .hbs, Controllers, and Routes files.
ember-module-snippets - Snippets to make importing Ember.js modules a snap in VSCode.

Atom addons

Atom Ember Snippets

VIM

Unstable language server for neovim

Web Components

ember-cli-web-components - Use your Ember.js components in other framework as Web Components!
shadow-dom - Write templates for your components inside of a Shadow DOM root.

Webpack

glimmer-compiler-webpack-plugin

Weird

ember-dynamic-render-template - Render DOM from a template string.

Resources

Articles

Ember-Cli Articles

Why Articles

Jump-Start Articles

Articles Glimmer

Articles Engines

Articles Ember-Concurrency

Articles ES6

ES Classes in Ember.js

Articles TypeScript

Articles Modern Testing

Articles FastBoot

Articles about Data

Articles about Routing

Yarn in Ember Articles

Ember.js and Yarn Workspaces

Best-practices

Nice to know

Blogs

lost-in-technology.com
TODAY I LEARNED / Ember.js
Ember.js Daily Tips
emberway.io
yehudakatz
201-created.com
airpair.com
alexdiliberto.com
balinterdi.com - Balint Erdi blog.
codeburst.io
codementor.io
dockyard.com
emberigniter.com
blog.embermap.com
engineering.linkedin.com
hackernoon.com
lolma.us
madhatted.com
medium.com/ember-ish - Ember.js essentials for beginners and intermediate devs.
netguru.co
programwitherik.com - Ember.js tuts.
rwjblue.com
shipshape.io
simplabs.com
thejsguy.com

Books

The Shortest Ember.js Book
A deep dive into the Ember.js runloop
Developing an Ember.js Edge
Ember Data in the Wild
ember-cli 101 - By Adolfo Builes.
Ember.js for Artisans - Creating Single Page Apps backed by Laravel.
Ember.js in Action - By Joachim Haagen Skeie.
Professor Frisby's Mostly adequate guide to Functional Programming
Rock and Roll with Ember.js
Ember.js Book (RU)
Pragmatic, balanced FP in JavaScript

Cheatsheets

API
Glimmer.js
guides
Ember Component Cheat Sheet - pre Octane

Codemods

ember-es6-class-codemod - A codemod-cli project for converting Ember.js objects to es6 native classes.
ember-native-class-codemod - A codemod for transforming your ember app code to native JavaScript class syntax with decorators!
ember-cli-mirage-faker-codemod - This codemod is to help transition from importing faker through ember-cli-mirage, to instead import it directly from faker.
ember-mocha-codemods - Codemod scripts for ember-mocha.
ember-module-migrator - Automated migration for new Ember.js application layout.
ember-qunit-codemod - This codemod is intended to automatically convert your projects from the older moduleFor* syntax of ember-qunit@2 to the newer syntax.
ember-test-helpers-codemod - Codemod to transform your Ember.js tests to use @ember/test-helpers.
es5-getter-ember-codemod - This codemod is intended to automatically convert your usage of get, and getProperties to use traditional object dot notation.
qunit-dom-codemod - Basic codemod to automatically convert your assertions to qunit-dom assertions.
test-selectors-codemod - A codemode for fixing the ember-test-selectors testSelector helper deprecation.
ember-on-codemod - Replace use of Ember.on.
ember-memory-leaks-codemod - A collection of codemod's for fixing memory leaks in Ember.js applications.
ember-3x-codemods - A Codemod with a collection of transforms to address Ember.js 3.x deprecations.
ember-computed-getter-codemod - Ember.js Computed Getter Codemod.

Community

Contribution Guides

Courses

Discovery

emberobserver - Ember Observer.
emberjs.GitHub.io/rfcs/ - Ember.js RFCs.

Ember Releases

Ember 3.10 Released - May 21, 2019
Ember 3.11 - July 15, 2019
Ember 3.12 - August 16, 2019
Ember 3.13 (Octane Preview) - Sep 25, 2019
Ember 3.14 (Octane Preview Cont.) - Nov 18, 2019
Ember 3.15 "Octane" Released - Dec 20, 2019
Ember 3.16 - Feb 12, 2020
Ember 3.17 - March 16, 2020
Ember 3.18 - May 5, 2020
Ember 3.19 - June 26, 2020
Ember 3.20 - July 29, 2020
Ember 3.21 - Sep 02, 2020
Ember 3.22 - Oct 20, 2020

Examples

A list of open source Ember.js apps
Simple contact manager demo app for ember-orbit
API Docs - This application was built to display our versioned API docs.
guides-app - Replacement for emberjs/guides and the Ember.js Guides.
Builds - This is the application that the Ember.js team built to display our various release channels.
HospitalRun - Ember.js front end for HospitalRun hospitalrun.io.
Rancher - Rancher is enterprise management for Kubernetes.
Super Rentals - Super Rentals is a good starter project to get acclimated to the Ember.js way of doing things.
Travis CI - The Ember.js web client for Travis CI.
Vault - A Tool for Managing Secrets (Hashicorp).
ember-osf-web - Ember.js front-end for the Open Science Framework.
ember-graphql-examples - Examples of using GraphQL in Ember.js.
ember-rolodex - An example of what an Ember.js tutorial between the quick start and Super Rents could look like.
ember-styleguide
Ghost Admin Client
emberclear - Encrypted Chat. No History. No Logs. + MU & TS.
Ember.js nested engines example app + Fastboot.
Percy's frontend web application, built with Ember.js.
Fire Tracker - KPCC's tool for following & researching California wildfires.
skylines-project - Live tracking, flight database and competition framework.
PIX - PIX.
ember-monorepo-demo
documize.com
New York City Census Reporting Tool
Medicine Inventory - Sample application developed with Ember CLI, Corber.io, ember-element-ui.
octane-ecommerce - Ember Octane + FastBoot + Algolia + PayPal + Formspree (s, v, d).
Rust Package Registry - crates.io
Ember.js RealWorld Implementation - Ember.js codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld spec and API.
A wild tomster appears
An ember integration for building visual programming editors with blockly.
https://www.submarinecablemap.com/
https://music.apple.com/
https://creator.emojible.store/

Examples Glimmer

breethe-client - Air Quality Data for Locations around the World.
Glimmeroids - Asteroids implementation using Glimmer.js.
glimmer-hn-pwa - A Demonstration Of Hacker News Progressive Web App Powered By Glimmer.js.
the-chosen - Glimmer.js project created to learn & decide easier during our scrum dailies meeting who is the next person to share status.
glimmer_eats - A demo PWA built with Glimmer.js.
built-with-spaghetti - Built with Spaghetti aims to function as a gateway to web art.
glimmer-live-chat - A Live chat application crafted using Glimmer.js.
glimmer-synth - Synthesizer built using WebAudio and Glimmer.js.
glimmer-js-online-offline-demo - Sample Glimmer.js app: online/offline browser events.
glimmer-qrious - Glimmer.js components using QRious library to generate QR code in webpage.
glimmerjs-address-book-demo - Example Glimmer.js application - AddressBook Demo.
glimmer-dashboard - Glimmer.js dashboard example.
glimmer-redux-todo - Todo app written with Glimmer.js and Redux.
glimmer-pong - Pong game written using Glimmer.js and SVGs.
glimmer-material - A Glimmer.js wrapper for Material Components for the Web.
glimmer-of-life - An implementation of Conway's Game of Life using Glimmer.js.
vorfreude - When you can't wait but have to.
endless-hoops - It's a basketball game written in JavaScript/Canvas/Glimmer.js.
glimmer-hangman - A implementation of the well-known game 'Hangman' in Glimmer.js.

Gists

Gists Ember Data

Miscellaneous

builtwithember - Apps powered by Ember.js.
emberwatch - The community hub for Ember.js content.

Newsletters

Ember Weekly - The latest Ember.js news, tips, and code delivered directly to your inbox.
Official Ember Blog - Big announcements like new Ember.js version release notes or State of the Union information.
statusboard - STATUS BOARD.
The Ember Times - Updates from the Ember.js Learning Team.

Podcasts

Sandboxes

Ember Twiddle - An Ember.js Twiddle for multiples files which lets you save your work in GitHub.
Ember @ Glitch - Glitch.me with Ember.js.
Ember @ CodeSandbox - CodeSandbox with Ember.js.
Ember Octane @ CodeSandbox - Ember Octane CodeSandbox template.

Screencasts

BuildLab: Ember.js Screencasts for the determined.
Ember Screencasts - Weekly Screencasts for the Busy Developer.
EmberCasts - Currently on hiatus whilst the author works on the next version of Handlebars.
EmberWatch - Screencasts - A collection of Ember.js screencasts.
Community Groups App - Creating Records in Ember CLI Mirage (part 2a)
Community Groups App - Creating Records in Ember CLI Mirage (part 2b)
Community Groups App - Debugging relationships in Ember CLI Mirage (part 3)

Slides

30 Days Of Ember - Dawid Pośliński.
NaNoWriMo: How can Ember help you write a novel - @EmmaDelecolle.
Slides from Ember JS Berlin talk, Design Patterns in Ember - By @chadian.
Rainy Day Ember Data - Tony Schneider (@tonywok).
Building Realtime Apps with Ember.js and WebSockets - Ben Limmer.
Deploying a Location-Aware Ember Application - Ben Limmer.
Developing Desktop Apps with Electron & Ember.js - FITC WebU2017 - Aidan Nulman.
Developing Desktop Apps with Electron & Ember.js
Ember addons, served three ways - Mike North.
Ember At Scale - Chad Hietala, LinkedIn.
EmberConf 2015 – Ambitious UX for Ambitious Apps - Lauren Elizabeth Tan.
EmberConf 2016 – Idiomatic Ember: Finding the Sweet Spot of Performance & Productivity - Lauren Elizabeth Tan.
Fun with Ember 2.x Features - Ben Limmer.
How do I Even Web App - An introduction to web programming with Ember CLI by Lydia Guarino.
Rapid prototyping and easy testing with ember cli mirage - Krzysztof Bialek.
Start Me Up - Building an MVP with EmberJS, Firebase and Material Design - Brendan O'Hara.
Upgrading Ember.js Apps - Ben Limmer.

Styleguides

Tools

Ember Data Sails Adapter - An Ember Data adaptor for the Sails.js sockets.
Ember Data WordPress Adapter - An Ember Data adapter for the WordPress JSON API.
Ember Gist - Demo Ember CLI'eque apps using GitHub Gist.
Ember Inspector - Adds an Ember.js tab to Chrome or Firefox Developer Tools that allows you to inspect Ember.js objects in your application. - Officially maintained.
Ember Perf - Measure user-percieved performance data in your ember.js app.
ember-cli-diff - A simple tool to see differences between new ember apps.
ember-cli - The command line interface for ambitious web applications.
ember-data-model-maker - UI to make ember-data models & payload examples.
Glimmer Playground - An Glimmer.js playground.
mber - Ember CLI replacement. Currently alpha.
remote-inspector - Lets you inspect apps running on different devices/browsers over the network using websockets.
Ember Unused Components - This script searches for unused components in your Ember project

Tutorials

How to learn EmberJS in a hurry
Discover Ember 2 - Learn how to build a Twitter clone from scratch.
Ember Components: A Deep Dive - A closer look at using Ember.js Components.
Ember runloop handbook - A deep dive into the Ember.js runloop.
Ember with Phoenix (AKA The PEEP Stack) - Developing an Ember.js front-end alongside a JSON API-compliant Phoenix backend.
Getting into Ember.js - A five part introductory course to Ember.
Getting Started with Ember.js using Ember CLI - Building a Todo app with Ember CLI.
yoember.com/ - Ember.js Tutorial - From beginner to advance.
build-pacman

Twitter

Videos

Working with Ember Animated & Addon Internals: Ember Concurrency – Ember NYC, May 2019
Ember.js Tutorial: Build a painting game in 20 mins
Ember-cli In-Repo Addons with Jacob Bixby
Maintaining an Ember App at Scale, with Chris Ng
Jackie Luo: From React to Ember: A Modern Comparison
Ember San Francisco Meetup at Square, October 2018
The Future of Ember js - Summary of upcoming changes to Ember.js based on presentations from EmberConf 2018.
Ember: The Next 10 Years | Tom Dale | EmberCamp Chicago 2018
Stop Coding: You Have a Product Gap | Sam Selikoff | EmberCamp Chicago 2018
Caveats of the Default Store - Ember London - September 2018
EmberFest 2019
EmberFest 2018
EmberFest 2014
Global Ember Meetup
Ember @ Netflix
Ember Engines at Scale
Ember Test Recorder
Ember-cli In-Repo Addons with Jacob Bixby
ember-content-placeholders
Ember.JS in the Year 2020
EmberConf 2014 - Videos of the sessions from EmberConf 2014.
EmberConf 2015 - Videos of the sessions from EmberConf 2015.
EmberConf 2016 - Videos of the sessions from EmberConf 2016.
EmberConf 2017 - Videos of the sessions from EmberConf 2017.
EmberConf 2018 - Videos of the sessions from EmberConf 2018.
EmberConf 2019 - Videos of the sessions from EmberConf 2019.
EmberConf 2020 - Videos of the sessions from EmberConf 2020.
ReactiveConf 2017 - Tom Dale: Secrets of the Glimmer VM
ReactiveConf 2017
Tim Thomas - Using Ember.js to build Electron Apps
Tom Dale on Static Analysis, Upstreaming Glimmer, and Ember in 2018
Tom Dale Talks EmberJS
Using TypeScript in Ember
Web App Performance & Ember.js - Web App Performance & Ember.js.
Why Ember CLI uses Broccoli
Developing ember apps on glitch.com
Chris Krycho: TypeScript and Ember js - Why and How?
Isaac Lee: Use D3 with Ember
Open Source Live - Robert Jackson and Chris Manson pair on ember-cli
Must have add-ons in EmberJS - Dawid Pośliński
Building Modern Apps Using API Services - Ember Meetup August 21, 2018
How to improve your tests? - Paweł Kuwik
Optional & upcoming features - Michał Staśkiewicz
Hybrid Apps with Ember/Glimmer
Productive Frontend Test Driven Development That Actually Works
EmberCamp 2018 - Videos of the sessions from EmberCamp 2018
EmberCamp 2019 - Videos of the sessions from EmberCamp 2019
Ember.js: The Documentary
Ember.js: The Documentary (Русская версия) - Russian langauge version
GraphQL: The Documentary
GraphQL: The Documentary (Русская версия) - Russian language version
Ember and GraphQL: A Quick Example
Ember Octane Livestream: Build a drum machine
Tracking in the Glimmer VM - Chris Garrett discusses how tracking works in Ember
Commit Porto '19: Thriving through the hype cycle: an Ember.js story (Ricardo Mendes)
Animating Across Routes with Ember Animated - EmberMap video adding across-route tranistion animations
Creating an Ember Application - First in an upcoming series on Ember
Ember and GraphQL: A Quick Example
Stef & Rob: do we still need the built-in Input component? Stefan Penner and Robert Jackson debate the built-in Input component
Ember Octane - Great For Beginners - You can just write HTML and CSS and get pretty far with Ember Octane
Yet Another Test Runner by Kelly Sheldon @ Ember London

YouTube channels

YouTube playlists

Ember London 2018
Intercom Screencasts
Ember.js tutorial for beginners in 2020 - A 10 part series by Shawn Chen

License

CC0

List of Android UI/UX Libraries

A curated list of awesome Android UI/UX libraries.

Maintainers

Index

Jetpack Compose
Layout
Button
List / Grid
ViewPager
Label / Form
Image
SeekBar
Progress
Menu
ActionBar
Dialog
Calendar
Graph
Animation
Parallax
Effect (Blur... etc)
Other

Jetpack Compose

Name | License | Demo --- | --- | --- Landscapist | Apache License V2 | Flinger | MIT | Orchestra | Apache License V2 | compose-backstack | Apache License V2 | ComposeClock | Apache License V2 | ComposeCookBook | MIT | Compose Neumorphism UI | Apache License V2 |

Layout

Button

Name | License | Demo --- | --- | --- circular-progress-button | Apache License V2 | android-process-button | Apache License V2 | android-circlebutton | Apache License V2 | android-flat-button | Apache License V2 | MovingButton | MIT | LabelView | Apache License V2 | transition-button-android | MIT | KTLoadingButton | MIT | AwesomeSwitch | Apache License V2 | FloatingActionButton | MIT | android-floating-action-button | Apache License V2 | ReactButton | MIT |

List / Grid

ViewPager

Label / Form

Image

Name | License | Demo --- | --- | --- TouchImageView | LICENSE | NONE CircleImageView | Apache License V2 | android-shape-imageview | Apache License V2 | GifImageView | MIT | cropper | Apache License V2 | android-crop | Apache License V2 | SelectableRoundedImageView | Apache License V2 | RoundedImageView | Apache License V2 | CropImageView | Apache License V2 | BitmapMerger | MIT | Scrolling Image View | MIT | SimpleCropView | MIT | android-anyshape | MIT | PanoramaImageView | MIT | ChiliPhotoPicker | Apache License V2 | Android Ribbon | Apache License V2 |

SeekBar

Name | License | Demo --- | --- | --- DiscreteSeekBar | Apache License V2 | SeekBarCompat | Apache License V2 | PreviewSeekBar | Apache License V2 | RangeSeekBar | Apache License V2 | material-range-bar | Apache License V2 | MaterialDateRangePicker | Apache License V2 |

Progress

Name | License | Demo --- | --- | --- CircularFloatingActionMenu | MIT | AndroidResideMenu | MIT | Folder-ResideMenu | Apache License V2 | Side-Menu.Android | Apache License V2 | Context-Menu.Android | Apache License V2 | GuillotineMenu-Android | Apache License V2 | android-snake-menu | Apache License V2 | BoomMenu | Apache License V2 | ExpandableBottomBar | MIT | material-menu | Apache License V2 | MaterialSheetFab | MIT | PowerMenu | Apache License V2 | AnimatedBottomBar | MIT |

ActionBar

Name | License | Demo --- | --- | --- FadingActionBar | Apache License V2 | GlassActionBar | Apache License V2 | NotBoringActionBar | Apache License V2 |

Dialog

Name | License | Demo --- | --- | --- DialogPlus | Apache License V2 | Sweet Alert | MIT | FlycoDialog-Matser | MIT | Voice Overlay | MIT | MaterialDialog | Apache License V2 | material-dialogs | Apache License V2 | AlertDialogPro | Apache License V2 |

Calendar

Name | License | Demo --- | --- | --- Caldroid | MIT | android-times-square | Apache License V2 | Android-MonthCalendarWidget | Apache License V2 | android-betterpickers | Apache License V2 | Android-Week-View | Apache License V2 | SilkCal | MIT | SublimePicker | Apache License V2 | MaterialDateTimePicker | Apache License V2 | CompactCalendarView | MIT | material-calendarview | Apache License V2 |

Graph

Name | License | Demo --- | --- | --- Android-RatingReviews | Apache License V2 | EazeGraph | Apache License V2 | GraphView | Apache License V2 | hellocharts-android | Apache License V2 | MPAndroidChart | Apache License V2 | WilliamChart | Apache License V2 |

Animation

Parallax

Name | License | Demo --- | --- | --- ParallaxEverywhere | MIT |

Effect

Name | License | Demo --- | --- | --- EtsyBlur | Apache License V2 | BlurDialogFragment | Apache License V2 | BlurBehind | MIT | Android StackBlur | Apache License V2 | EdgeEffectOverride | Apache License V2 | ExplosionField | Apache License V2 | BrokenView | MIT | Trianglify | Apache License V2 | ExpandableLayout (by skydoves) | Apache License V2 | ShineButton | MIT | Elastic Views | MIT | Transformation Layout | Apache License V2 | IridescentView | MIT | DashedView | Apache License V2 |

Other

awesome-ios-ui

A curated list of awesome iOS UI/UX libraries. Inspired by wasabeef's excellent Android Version.

Contributing

Found a UI/UX library that you think is awesome?? Want to share it with the world? Add your repo's information to my awesome-creator, where I keep the library metadata!

Index

Animations and Transitions - file
Badges - file
Calendars - file
Effects - file
Material Design - file
Notifications and Alerts - file
Onboarding and Tutorials - file
Photo and Video - file
Progress Views - file
RefreshControls - file
Side Menu - file
Tab Bars - file
Table/Collection Views - file
User Input - file

Animations and Transitions

Repo | Demo --- | --- AnimatedTransitionGallery

Language: Obj-C
License: Unknown | RZTransitions

Language: Obj-C
License: MIT | DCAnimationKit

Language: Obj-C
License: Apache v2 | PMTween

Language: Obj-C
License: MIT | SAHistoryNavigationViewController

Language: Swift
License: MIT | WobbleView

Language: Swift
License: MIT | CBZSplashView

Language: Obj-C
License: MIT |

Badges

Repo | Demo --- | --- RKNotificationHub

Language: Obj-C
License: MIT | BBBadgeBarButtonItem

Language: Obj-C
License: MIT | JSBadgeView

Language: Obj-C
License: MIT |

Calendars

Repo | Demo --- | --- FSCalendar

Language: Obj-C
License: MIT | GLCalendarView

Language: Obj-C
License: MIT | JTCalendar

Language: Obj-C
License: MIT |

Effects

Repo | Demo --- | --- FLAnimatedImage

Language: Obj-C
License: MIT | PulsingHalo

Language: Obj-C
License: MIT | UITextField-Shake

Language: Obj-C
License: MIT |

Material Design

Repo | Demo --- | --- Material

Language: Swift
License: BSD-3 | MaterialKit

Language: Swift
License: MIT |

Notifications and Alerts

Repo | Demo --- | --- TSMessages

Language: Obj-C
License: MIT | CRToast

Language: Obj-C
License: MIT | TWMessageBarManager

Language: Obj-C
License: MIT | RKDropdownAlert

Language: Obj-C
License: MIT | SimpleAlert

Language: Swift
License: MIT | JFMinimalNotifications

Language: Obj-C
License: MIT | MGFashionMenuView

Language: Obj-C
License: MIT | KLCPopup

Language: Obj-C
License: MIT | MZFormSheetController

Language: Obj-C
License: MIT | Notie

Language: Swift
License: MIT | LNNotificationsUI

Language: Obj-C
License: MIT |

Onboarding and Tutorials

Repo | Demo --- | --- JazzHands

Language: Obj-C
License: MIT | MYBlurIntroductionView

Language: Obj-C
License: MIT | Onboard

Language: Obj-C
License: MIT |

Photo and Video

Repo | Demo --- | --- MWPhotoBrowser

Language: Obj-C
License: MIT | XCDYouTubeKit

Language: Obj-C
License: MIT | MHVideoPhotoGallery

Language: Obj-C
License: MIT | EBPhotoPages

Language: Obj-C
License: MIT | ASMediaFocusManager

Language: Obj-C
License: MIT | VideoSplashKit

Language: Swift
License: MIT |

Progress Views

Repo | Demo --- | --- MBProgressHUD

Language: Obj-C
License: MIT | MRProgress

Language: Obj-C
License: MIT | M13ProgressSuite

Language: Obj-C
License: MIT | FFCircularProgressView

Language: Obj-C
License: MIT | GaugeKit

Language: Swift
License: MIT | NVActivityIndicatorView

Language: Swift
License: MIT |

RefreshControls

Repo | Demo --- | --- CBStoreHouseRefreshControl

Language: Obj-C
License: MIT | UzysAnimatedGifPullToRefresh

Language: Obj-C
License: MIT | BOZPongRefreshControl

Language: Obj-C
License: MIT | mntpulltoreact

Language: Obj-C
License: Apache v2 | UzysCircularProgressPullToRefresh

Language: Obj-C
License: MIT | PullToRefreshCoreText

Language: Obj-C
License: MIT |

Repo | Demo --- | --- RESideMenu

Language: Obj-C
License: MIT | REFrostedViewController

Language: Obj-C
License: MIT | TWTSideMenuViewController

Language: Obj-C
License: MIT | AMSlideMenu

Language: Obj-C
License: MIT | CariocaMenu

Language: Swift
License: MIT |

Tab Bars

Repo | Demo --- | --- MinimalTabBar

Language: Obj-C
License: MIT | adaptive-tab-bar

Language: Swift
License: MIT | FoldingTabBar.iOS

Language: Obj-C
License: MIT | GGTabBar

Language: Obj-C
License: MIT | BFPaperTabBarController

Language: Obj-C
License: MIT |

Table/Collection Views

Repo | Demo --- | --- MPSkewed

Language: Obj-C
License: BSD-3 | RATreeView

Language: Obj-C
License: MIT | MosaicLayout

Language: Obj-C
License: MIT | DSDynamicScrollView

Language: Obj-C
License: MIT | CSStickyHeaderFlowLayout

Language: Obj-C
License: MIT | BLKFlexibleHeightBar

Language: Obj-C
License: MIT | SAParallaxViewControllerSwift

Language: Swift
License: MIT | MGSpotyViewController

Language: Obj-C
License: MIT | RAReorderableLayout

Language: Swift
License: MIT |

User Input

Repo | Demo --- | --- RKRichTextView

Language: Obj-C
License: MIT | ZSSRichTextEditor

Language: Obj-C
License: MIT | RichEditorView

Language: Swift
License: BSD-3 | TextFieldEffects

Language: Swift
License: MIT | SlackTextViewController

Language: Obj-C
License: Apache v2 | JVFloatLabeledTextField

Language: Obj-C
License: MIT | ActionSheetPicker-3.0

Language: Obj-C
License: BSD-3 | HTYTextField

Language: Swift
License: MIT |

Awesome Meteor

A curated list of awesome Meteor Packages, libraries and software.

The official Meteor resources page can be found here

Awesome Meteor
Getting Started
Collections
Forms and Templates
Users and Authentication
REST
Files
Routers
Debugging Tools
Editor Plugins
Search, sort and paginate
Mobile
Offline
Testing
SEO
Data Visualization
Analytics
Cron Jobs
Administration
Performance
Monitoring
Deployment
- Docker Images
Front End Frameworks
Alternative Databases
Boilerplate
Open Source Apps
Internationalization
Scaffolding
Tooling
Resources
Books
Courses
- Free
- Paid
Tutorials
Blogs
Websites
Q&A
Community Newsletters
Social
Work Opportunities
Related
Built With Meteor
Deprecated
Contributing

Getting Started

Where to start

Collections

Helpers and expensions for collections

simple-schema - A JavaScript schema validation package that supports direct validation of MongoDB update modifier objects.
aldeed:collection2 - Automatic validation of insert and update operations on the client and server.
dburles:collection-helpers – Transform your collections with helpers that you define.
matb33:collection-hooks - Extends Mongo.Collection with before/after hooks for insert/update/remove/find/findOne.
reywood:publish-composite - publish a set of related documents from various collections using a reactive join.
jagi:astronomy - The Model layer for Meteor.
cultofcoders:grapher - Grapher: Meteor Collection Joins + Reactive GraphQL like queries.
sakulstra:aggregate - Add proper aggregation support for Meteor.
quave:collections - Create collections in a standard way.

REST

REST support for Meteor

maka:rest - automatically make your Meteor app accessible over HTTP and DDP alike.
vatfree:restivus - Make REST endpoints for your Meteor app with incredible ease.

Forms and Templates

Helpers for templates

uniforms - Bunch of React components and helpers to easily generate and validate forms. Seamlessly integrate with simpl-schema.
aldeed:autoform - UI components and helpers to easily create basic forms with automatic insert and update events, and automatic reactive validation.
ostrio:templatehelpers - Utility helpers for your Blaze templates.
aldeed:template-extension - A Meteor package: Replace already defined templates, inherit helpers and events from other templates.
kadira:blaze-layout - Layout Manager for Blaze (works well with Meteor FlowRouter)

Users and Authentication

Tools for handling users and authentication

accounts-js - A suite of packages aims to provide all the tools you need to build a flexible authentication and accounts management solution for your application.
alanning:roles - Roles support for the built-in accounts packages.
meteor-user-status - Keeps track of users and their meta data.
accounts-ui - Accounts UI for React in Meteor 1.3+.

Administration

Tools for administrating your Meteor apps

Meteor Candy - Fastest and easier way to add an admin panel to your app.
yogiben:admin - A complete admin dashboard solution.
houston:admin - A zero-config, Django Admin-like admin for Meteor.
zodern:pure-admin - An isolated, customizable admin panel for Meteor.

Monitoring

Tools for monitoring your Meteor apps

kschingiz:meteor-elastic-apm - Perfomance Monitoring for Meteor based on Elastic APM
monti-apm-agent - Performance Monitoring for Meteor
lmachens:kadira - Performance Monitoring for Meteor

Performance

Tools for speeding up your Meteor apps

cultofcoders:redis-oplog - Redis Oplog implementation to fully replace MongoDB Oplog in Meteor
staringatlights:fast-render - An active fork of fast-render
epotek:method-cache - Meteor method caching using DataLoader
maestroqadev:pub-sub-lite - Transform publications to be non-reactive.
artillery-engine-meteor - Artillery load testing for MeteorJS applications.

Deployment

Tools for deploying and maintaining Meteor apps

meteor-up – Meteor Deployments.
meteor-google-cloud - Automate Meteor deployments on Google Cloud App Engine Flexible
mup-aws-beanstalk - Deploy Meteor apps to AWS Elastic Beanstalk using Meteor Up
meteor-azure - Automate Meteor deployments on Azure App Service
pm2-meteor - Simplest way to deploy, scale and run Meteor Apps with PM2.
meteor-hero - Deploy MeteorJS applications for free with one command utilizing Heroku's service.
meteor-kubernetes-guide - Deploy a Meteor app with Kubernetes.
meteorhacks:cluster - Clustering solution for Meteor with load balancing and service discovery
demeteorizer - Converts a Meteor app into a "standard" Node.js application
percolate:migrations - Simple migration system for Meteor
yamup - Deploy Meteor apps to your own Ubuntu server (EC2, ...) without dockers
waveshosting - Web application to manage meteor deployments.

Docker Images

Routers

Routers for Blaze

ostrio:flow-router-extra - Carefully extended flow-router package. Up-to-date version with support of latest Meteor's releases.
msavin:parrot - Web router specially designed for building SPAs using Meteor
meteorhacks:picker - Server Side Router for Meteor.
iron:router - A router that works on the server and the browser, designed specifically for Meteor.

Offline

Tools for Meteor offline support

ground:db - GroundDB is a thin layer providing Meteor offline database and methods.
npdev:collections - An easy way to create offline collections with SSR for Meteor
meteor-service-worker - Meteor specific service worker implementaion.
quave:pwa - A Meteor package that allows you to configure your PWA.

Testing

Testing tools

meteortesting:mocha - Mocha test driver package for Meteor.
lmieulet:meteor-coverage - Test coverage for Meteor.
hubroedu:mocha - Decaffed cultofcoders:mocha fork.
antwaremx:meteorman - Meteorman: A DDP Client with GUI to test Meteor methods and publications (like Postman).

SEO

Search Engine Optimization tools

ostrio:spiderable-middleware - Prerendering (a.k.a. Spiderable) with support of ES6 (ECMAScript2015) - Meteor app crawled perfectly by search engines.

Files

Handling files in Meteor

ostrio:files - Upload files via DDP, HTTP and WebRTC/DC. To Meteor server FS, AWS, GridFS, DropBox or Google Drive. Fast, secure and robust.
@reactioncommerce/file-collections - Reaction FileCollections is a set of NPM packages that provide the ability to support file uploads, storage, and downloads in Node and Meteor apps, and in browser JavaScript.
netanelgilad:excel - Parsing and generating excel files (xlsx, xls).
mikkelking:slingshot - Upload files directly to AWS S3, Google Cloud Storage and others in meteor.

Search, sort and paginate

Search, sort and paginate related tools

percolate:find-from-publication - Enable finding all documents that have been published by a given publication.
meteor-publish-join - A performant NPM package for publishing non-reactive or aggregated values.
tmeasday:publish-counts - Publish the count of a cursor, in real time.
meteorhacks:search-source - Reactive Data Source for Search.
matteodem:easy-search - Easy-to-use search with Blaze Components (+ Elastic Search Support)
alethes:pages - Out of the box Meteor pagination.

Mobile

Mobile Development

meteor-react-native - Meteor client for React Native matching Meteor Spec.
meteor-push - Push notifications for cordova (ios, android) browser (Chrome, Safari, Firefox).
quave:universal-links - A Meteor package that allows you to expose your native iOS settings to enable Universal Links.
meteoric:ionic - Ionic components for Meteor.
driftyco:ionic - Official Ionic support for Meteor.
martijnwalraven:meteor-ios - Integrates native iOS apps with the Meteor platform through DDP.
delight-im/Android-DDP - DDP for clients on Android.
okland:accounts-phone - A login service based on mobile phone number for Meteor.
okland:camera-ui - Meteor package for taking photos with user interface, one function call on desktop and mobile. Allows to choose between camera to photoLibrary on mobile.
percolatestudio/cordova-plugin-safe-reload - Cordova plugin to watch and recover after a broken Meteor Hot Code Push.

Data Visualization

Data Visualization in Meteor: charts, maps, tables, etc.

aldeed:tabular - Reactive datatables for large or small datasets.
aslagle:reactive-table - Reactive table for Meteor, using Blaze.
luixal:blaze-paginated-custom-list - Reactive and paginated item list.
luixal:meteor-apexcharts - Reactive ApexCharts library packaged for Meteor.

Analytics

Analytics

okgrow:analytics - Google Analytics, Mixpanel, KISSmetrics (and more) integration for meteor.
quave:analytics - A Meteor package that allows you to send your page views and more to Google Analytics.

Cron Jobs

Cron Jobs in Meteor

msavin:sjobs - A Meteor-first jobs queue / task scheduler.
percolate:synced-cron - Cron system for Meteor. It supports syncronizing jobs between multiple processes.
ostrio:cron-jobs - Package with similar API to native setTimeout and setInterval methods, but synced between all running Meteor (NodeJS) instances.

Debugging Tools

Debugging Tools

meteor-devtools-evolved - A chrome extension.
msavin:mongol - Visual Editing Tool for Meteor for MongoDB Collections.
msavin:jetsetter - Visual Get/Set Tool for Meteor Session Variables.
babrahams:constellation - An extensible dev console for Meteor.

Editor Plugins

meteor-api - Meteor addons for Atom.
meteor-zsh - Completion for the meteor command.

Scaffolding

Scaffolding

Meteor Kitchen - Code generator for Meteor.
iron-cli - A scaffolding command line tool for Meteor applications.
maka-cli - Maka-CLI is a command line tool, which organizes a web application's file structure and automates everyday package installation tasks for various application frameworks.

Tooling

ESLint-plugin-Meteor - ESLint plugin for Meteor.

Boilerplate

CaptainN - meteor-react-starter - A starter project on Meteor with React.
Pup
matteodem - meteor-boilerplate
React with Webpack + Meteor as a backend

Open source apps

Rocket.Chat - Realtime chat application built with Meteor.
Wekan - Open source Trello-like kanban.
Unchained Shop - Open source Commerce platform developed with Meteor.
VulcanJS - A toolkit to quickly build apps with React, GraphQL & Meteor.
Nosqlclient - MongoDB management tool.
radgrad2 - Meteor based education management system.
coauthor - Coauthor supercollaboration/discussion forum.

Internationalization

Meteor-Internationalization - Super-Lightweight and fast i18n isomorphic driver for Meteor with support of placeholders.
meteor-accounts-t9n - Translations for meteor account's error messages.
meteor-universe-i18n - Internationalization package for React and Meteor.

Front End Frameworks

Alternative Front End Frameworks to Blaze

React - Working with React and Meteor.
Vue - Working with Vue and Meteor (plus single-file components & apollo support).
Svelte - Build cybernetically enhanced web apps with Meteor and Svelte.
Angular 2 - Working with Angular 2 and Meteor.
Angular - Working with Angular and Meteor.
Famo.us - Famo.us and Meteor.
frozeman:build-client - A tool to bundle the client part of a Meteor app.
Asteroid - An alternative client for a Meteor backend.
ddp.js - Isomorphic JavaScript DDP client.
elm - elm as the view layer for a meteor based project.

Alternative Databases

Alternative Databases for MongoDB

vlasky:mysql - Reactive MySQL for Meteor
meteor-pg - New and improved PostgreSQL support for Meteor
ostrio:neo4jdriver - Neo4j Driver for Meteor, with support of GrapheneDB
numtel:pg - Reactive PostgreSQL for Meteor
simple:rethink - RethinkDB integration for Meteor

Resources

Where to discover new Meteor things

Books

Courses

Free
How to Create an App - Most updated.
EventedMind - It's old but goes into detail regarding how Meteor internals.
Paid
Udemy - Learn React and Meteor in 2021: Build a multiplayer game
Udemy - Realtime Applications with Meteor and Vue - Course in Spanish.
leveluptutorials - Contains some free tutorials but mostly on 1.x.

Tutorials

Phusion Passenger: Meteor tutorial
When a Meteor finally hits production - Blog post about deploying Meteor apps
Transform any Meteor App into a PWA

Blogs

Websites

Official website
Official Documentation
Official Guide
Atmosphere - The catalog of Meteor packages, resources and tools.
Packosphere - Alternative front-end for Meteor package system, built by Kelly Copley
Discover Meteor
Meteorpedia (infrequently updated)
Meetups
Reddit
YouTube videos from meetups around the world
Unofficial Meteor FAQ
The Meteor Chef

Q&A

Community Newsletters

Work Opportunities

Built With Meteor

Commercial Grade Applications Built With Meteor

Qualia - Real Estate Startup
Code Signal - Skills-based assessment platform
Pathable - Events managment suite
MaestroQA - Quality assurance software

Deprecated

This section is desginated for resources which are no longer compatible with the current version of Meteor

Contributing

Your contributions are always welcome!

Thank you @gillesfabio for creating this repo!

BEM Resources

Everyone loves a bit of BEM in their development. Here's just the starts of hopefully a large list of resources.

Articles

Resources

With Pre-processors

Generating BEM selectors with CSS preprocessors - Frontend Babel

Sass

Stylus

Stylus and BEM: a quick mixin - Frank M Taylor

PostCSS

PostCSS BEM Linter

Repos, CodePens and Things

Repos

Slides & Videos

Slides

Videos

Other Awesome Lists

A curated list of awesome lists - @sindresorhus

A curated list of CSS Flexible Box Layout Module or only Flexbox. Inspired by awesome-webcomponents and awesome-svg.

W3C Specification
Newsletter
Books
Guides
Cross Browser
Articles
Support
Preprocessors in Action
Polyfills
Other Interesting Articles
Presentations
Videos
Slides and Notes
Tools
Libraries and Frameworks
Featured Projects
Courses
Who to Follow
Contributing
Licence

W3C Specification

The specification describes a CSS box model optimized for user interface design. * CSS Flexible Box Layout Module Level 1

Books

CSS3 Layout Modules 2nd Edition - Rachel Andrew

Guides

Guides for developers or designer start their studies this wonderful technology. * A guide to flexbox:metal: * A visual guide to CSS3 flexbox properties * flexbox (pt-br) * Dive into flexbox * How Flexbox works — explained with big, colorful, animated gifs * How Flexbox works — explained with big, colorful, animated gifs (pt-br) * Learn layout - flexbox (pt-br) * Learn layout - flexbox * Reference of flexbox * Responsive design of the future with flexbox * The Flexbox Reading List: Techniques and Tools * Um guia visual para Flexbox (pt-br) * Usando caixas flexiveis CSS (pt-br) * Using CSS flexible boxes * What IS Flexbox? * Desarrollo de aplicaciones web Flexibles (es-es) * Webflow Flexbox

Cross Browser

Tips and tricks for your projects work anywhere :D

Articles

Support

Caniuse

Preprocessors in action

Polyfills

Presentations

Tired of reading? See an interactive presentation and learn flexbox now.

Videos

CSS Layout o ontem, o hoje e o depois (pt-br)
CSS FlexBox Essentials
CSS FlexBox Practical Examples (Rebuilding Dribbble.com using FlexBox)
Exploring CSS Layout Techniques While Trying To Get a Subtitle to Wrap
Enhancing Responsiveness With Flexbox
Flexbox - CSS Day
Guía Completa de Flexbox desde 0 (ESP)
HTML5. Desenvolvimento avançado
Introduction to Flexbox
Leveling up with flexbox
What the flexbox? - A simple 20 video course that will help you master
Flexbox Fundamentals

Sketching with CSS Flexbox Guide by @sfioritto

Read Materials

Access 20+ Page Guide on Flexbox

Video Materials

Slides and Notes

Tools

Have a little help to create their projects :D * Build with Flexbox * CSS flexbox please * CSS Flexbox snippets for Atom * CSS Flexbox snippets for Sublime Text 2/3 * Fibonacci * Flexbox in 5 minutes * Flexbox playground * Flexbox property manipulator * Flexplorer * Flexyboxes * Test CSS Flexbox Rules Live * Try Flexbox

Libraries and Frameworks

A list of incredible libraries based on flexbox. * Bem grid * Flexboxgrid:metal: * Flex Grid Framework:metal: * Flexbox Grid for Stylus * Fuux - Fuux is a Flexbox library that uses the same flexbox interface like classes. * Ginger Grid - A Flexbox grid framework named after a cute dog. * Bulma - A modern CSS framework based on Flexbox * Milligram - A minimalist CSS framework * RolleiFLEX - Just a responsive flexbox grid * Waffle Grid - An easy to use flexbox grid system

Featured Projects

Awesome projects about flexbox. * Cool examples of flexbox layout - A codepen a collection. * flex-box - A Custom Element to make the basics of flexbox easier to use. * Flexbugs - A community-curated list of flexbox issues and cross-browser workarounds for them. * Flexbox Froggy - A game for learning CSS flexbox. * Flexbox Patterns - Examples and source code that will teach you how to build UI components with CSS flexbox! What’s flexbox? * Flexbox Defense - Tower Defense with a twist: all towers must be positioned with CSS Flexbox. * Flexbox tester - Understand how to calculate the width of flex items. * Flexbox layout - FlexboxLayout is a library project which brings the similar capabilities of CSS Flexible Box Layout Module to Android. * FlexLayout for iOS - FlexLayout brings flexbox to iOS using Swift. Concise, intuitive & chainable syntax. * grid-styled - Flexbox based responsive ReactJS grid system built with styled-components * iron-flex-layout - Style mixins for cross-platform flex-box layouts * Post Apocalypse Flexbox * React-flexbox - Implementation of css flexbox in react with inline styles. * Reflexbox - Responsive React flexbox grid system higher order component. * Solved by flexbox - A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.:metal: * Visualizing Flexbox - A neat little CodePen Demo to play around with Flex properties. * ZEEF CSS Flexbox - The awesome flexbox on zeef.:metal: * Flexbox Zombies - A game for learning CSS flexbox.

Courses

CSS Flexbox Layout - treehouse
Learn Flexbox for free - scrimba

Who to Follow

People who talk about it. * Afonso Pacifer @afonsopacifer * Brad Frost @brad_frost * Chris Coyier @chriscoyier * Lea Verou @LeaVerou * Mickley Gillenwater @zomigi * Nicolas @necolas * Philip Walton @philwalton * Rachel Andrew @rachelandrew * Richard Herrera @doctyper * Sara Soueidan @SaraSoueidan * Sean Fioritto @sfioritto

Contributing

Want to contribute? Follow these recommendations.

License

MIT License © Afonso Pacifer

Awesome Web Typography

A curated collection of awesome web typography articles.

Articles

Web Fonts & Web Performance

Tools

Books

Font Combinations

Talks

Featured

This site was featured on the Device Wall at Google I/O 2015.

Google I/O Device Wall

License

Awesome Material Design

A curated list of Google's material design based libraries, resources and awesome things.

Icons, Fonts and Colors

material-design-icons — Material Design icons by Google.
material-design-iconic-font — Material Design Iconic Font and CSS toolkit.
material-design-fonticons — Material Design Fonticons is a font converted version of the Google Material Design Icon set.
material-colors — Colors of Google's Material Design made available to coders.
material-color — The colour palette, based on Google's Material Design, for use in your project.
LESS-Material-design-colors — A .less file with al the Google material design colors.
sass-material-colors — An easy way to use Google's Material Design colors in your Sass/Scss project.
Google-Material-Design-Font-Icon — Font Icon based on Google Material Design Icon set.
Material Design Icons — Community generated Material Design icon pack.
Android Asset Studio — A web-based set of tools for generating graphics and other assets that would eventually be in an Android application's res/ directory.

Animation

JavaScript
- Waves — Click effect inspired by Google's Material Design.
- material-design-hamburger — Android's Material Design hamburger animation built in CSS.
- Material-Preloader — A jQuery plugin that recreates the Material Design pre-loader (as seen on inbox).
- Google-material-design-ripple-effect — jQuery plugin recreates ripple and focus effect.

Components

SVG-Morpheus — JavaScript library enabling SVG icons to morph from one to the other. It implements Material Design's Delightful Details transitions.
Material-Design-ColorPicker — A Material Design Color Picker.
material-design-color-palette — Material Design Color Palette: LESS/CSS toolkit.
md-timepicker — A Polymer Timepicker element in Material Design.
md-date-time — A Date-Time picker based on Googles Material Design Spec.
ng-material-floating-button — Material design floating menu with action buttons implemented as an Angularjs directive.
DevExtreme Reactive - High-performance plugin-based React components for Material Design.

CSS

Surface — A lightweight, CSS only framework based on Material Design.
material-ui — A CSS Framework and a Set of React Components that Implement Google's Material Design.
bootstrap-material-design — Material design theme for Bootstrap 3.
materialize — Materialize, a CSS Framework based on Material Design.
materialBootstrap — Twitter Bootstrap theme for Google material design.
material-playground — Polymer material design playground.
material-framework — An easy to use material design based framework.
mui — A lightweight CSS framework that follows Material Design guidelines.
material-foundation — A Material Design version of Foundation for Sites.
Tronic247 Material - A material design framework based on jQuery and CSS

JS

AngularJS — Material design for AngularJS.
Angular — Material design for Angular.
DevExtreme — 65+ responsive and feature-complete UI components with customizable Material Design compliant themes. Available for Angular, React, Vue and jQuery.
ember-paper — The Ember approach to Material Design.
material-design-lite — Material Design Lite Components in HTML/CSS/JS.
react-material — Material design components written with React.js and React Style.

SASS

quantum-colors — Material Design color palette for your Sass projects.
quantum-shadows — Material Design drop shadows for your Sass projects.
google-material-design — Small SASS library inspired by google material design guidelines.

WordPress

MaterialPress — MaterialPress is a WordPress theme, influenced heavily by Google's Material Design philosophy.
materialwp — Material Design WordPress Theme.

WinForms

MaterialSkin — Theming .NET WinForms, C# or VB.Net, to Google's Material Design Principles.

XAML

MaterialDesignInXamlToolkit — Google's Material Design in XAML & WPF, for C# & VB.Net.

Other

material_design_zh — Material Design Collaborative Chinese translation
material-color-scheme — Sublime Text syntax theme based off the Material Design color palette.
framaterial — A Framework to create Material Design projects.
Material Design Templates — Various material design inspired themes and templates on ThemeForest.
MaterialUp — Get your daily dose of Material design inspiration!
Material Palette — Choose your favorite colors and generate your Material Design palette.
Paper Polymer Elements — Paper elements are a set of visual elements that implement Google's Material Design.
ScaffoldHub.io — Generate full Angular Material applications with an online modeling tool!

Other Awesome Lists

Other amazingly awesome lists can be found in the awesome-awesomeness list.

Contributing

Your contributions are always welcome! Please read the contribution guidelines first.

Awesome D3

This list keeps track of interesting D3js libraries, plugins and utilities.
We decided not to list tutorials, resources or concepts here, because there is already a very good list of readings out there you can check out and contribute to.

Curators: Moritz Klack and Christopher Möller of webkid.io

You can also explore the list with our interactive D3 Discovery tool.

Charts

billboard.js - Re-usable chart library [bar, line, area, donut, pie, step, spline]
britecharts - Client-side reusable charting library [bar, line, donut, sparkline, step]
chart-parts - A flexible, React-friendly, Grammar of Graphics for data visualization
cirrusjs - A multi-renderer charts library [area, line, stacked]
cubism - Time series visualization
c3 - Reusable chart library [line, spline, step, area, stacked, bar, pie, donut]
dagre-d3 - Layout directed graphs on the client-side
dc.js - For heavy amounts of data
dimple - An object-oriented API for business analytics [bubble, area, stacked]
d2b - Chart library for axis, pie, sankey, sunburst charts
d3.chart - Framework for building reusable charts
d3.chart.sankey - Reusable D3 Sankey diagram
d3-bar - Bar chart
d3-beeswarm - Plugin which computes a beeswarm arrangement
d3-boxplot - d3js box plot plugin
d3-bumps-chart - Plugin for visualizing bumps charts
d3-circle - Circle chart [donut]
d3-dag - Layout algorithms for visualizing directed acylic graphs
d3-dot - Dot chart
d3-ez - Easy Reusable D3 Charts & Components [bar, donut, pie, bubble, rose, heatmap]
d3-flame-graph - Flame graphs from hierarchical data
d3-funnel - A funnel and pyramid chart library
d3-gridding - Chart mockups using grids
d3-heatmap - Heatmap
d3-horizon-chart - Horizon charts module
d3-line - Line chart
d3-message-sequence - A dynamic/static message sequence chart
d3-timeseries - Time series charting library
d3-upset - Functions for plotting an UpSet plot [upset, bar, intersections, venn, relationships]
d3-x3d - Data Driven 3D Charts with D3 and X3D [bubble, bar, surfacearea, scatterplot, area]
d3fc - A collection of interactive chart components [line, bar, stacked, scatter, candlestick, ohlc]
d3plus - Extension library for easy creation of visualizations [scatter, stacked, line, bar, pie, network, bubble, box, map]
d3panels - Interactive charts with linked brushing [dot, scatter, line, heatmap, histogram]
d3pie - A configurable pie chart lib and generator
D3xter - Straight forward plotting [plot, timeline, bar, histogram, pie]
D4 - Re-usable charts DSL [bar, donut, line, scatter, stacked, waterfall]
dTree - Family tree library
epoch - A general purpose, real-time visualization library [area, bar, line, pie, scatter]
EventDrops - A time based/event series interactive visualization
Fancycharts.js - Library to visualize percentage values [bar, circles, donut]
firespray - Streaming charts [bar, line, stacked]
forest-d3 - A time series charting library [line, area, stacked, bar, scatter, pie ohlc]
Gantt-Chart - Gantt chart library
insights - Library to visualize and navigate graphs
kotojs - ES6 based framework
metrics-graphics - Optimized for visualizing time-series data [line, scatter, area]
micropolar - A polar chart library
mpld3 - Export matplotlib graphics to work in the Browser
neo4jd3 - Neo4j graph visualization
nvd3 - Re-usable charts and chart components [box plot, buttlet, candlestick, line, bar, pie, scatter, sparkline]
oecd-simple-charts - Simple charting library [box plot, stacked bar, pearl chart]
peek - Object-oriented chart library [scatter, line, area, bar, pie, donut]
plotly.js - High level charting library [scatter, line, bar, pie, box plot, histogram, heatmap]
plottable - Flexible, interactive charts for the web [area, bar, line, pie, scatter, stacked]
radar-chart-d3 - Radar chart module
rickshaw - Toolkit for creating interactive real-time graphs [line, scatter, bar]
taucharts - Charts with a focus on design and flexibility [line, bar, area, stacked]
techan.js - A visual, stock charting and technical analysis [candlestick, ohlc]
uvCharts - Supports lots of different chart types [bar, area, pie, stacked, line, polar, donut]
vega - A visualization grammar
vega-lite - A high-level grammar of interactive graphics
vega-lite-api - A JavaScript API for Vega-Lite.
venn.js - Area proportional Venn and Euler diagrams
visavail - Time data availability visualization
vizabi - A framework for building visual data exploration tools [bubble, map, line, bar, sankey, donut]
WebCola - Layout for graph visualization and exploration
xkcdgraphs - Xkcd style graphs [line]

Third Party

angular-nvd3 - NVd3 for AngularJS [line, stacked, bar, area, scatter, bullet, donut]
d3act - d3 with React [bar, bubble, pie]
d3-simpleCharts - A d3 wordpress plugin
ember-charts - Charts for Ember [line, bar, stacked, pie, scatter]
Layer Cake - A graphics framework built on top of Svelte.
line-chart - Line chart module for AngularJS [line, area, bar]
nivo - Dataviz components for React with isomorphic ability [bar, line, area, bubble, chord, heatmap]
ngx-charts - Chart framework for Angular [bar, pie, line, area, polar, stacked, bubble]
potion - Collection of React components for composing visualizations
react-d3 - Charts for React [area, bar, candlestick, line, pie, scatter]
react-d3-components - D3 Components [bar, stacked, scatter, line, area, pie]
react-d3-library - Library to use D3 in React [area, bar, line, pie, scatter]
react-stockcharts - Highly customizable stock charts [area, line, scatter, bubble, bar, stacked, candlestick]
react-vis - A collection of react components to render visualizations [area, bar, heatmap, line, scatter]
reaviz - Data visualization library for React based on D3
recharts - Re-designed charting library built with React
semiotic - A data visualization framework combining React & D3 [scatter, line, area]
victory - Composable React components for building visualizations [area, bar, candlestick, pie, line, scatter, voronoi]
vx - Visualization components for React [bar, line, scatter, stacked, area, pattern, heatmap, pie, radial, map, geo]
Vs - Declarative visualisation components for Vue.js [bar, line, area, pie, donut, stacked, sankey, timeline]
v-chart-plugin - Easily bind a chart to the data stored in your Vue.js components.

Maps

d3-carto-map - A mapping API that uses D3 geospatial functionality
d3-composite-projections - Projections for showing countries' distant lands together
datamaps - Customizable map visualizations in one file
d3-topogram - Continuous area cartograms based on TopoJSON
d3-exploder - Lets you easily move and resize geographic features
d3-geo-polygon - Clipping and geometric operations for spherical polygons
d3-geo-projection - Extended geographic projections
d3-geo-scale-bar - Displays automatic scale bars for projected geospatial data.
d3-geo-voronoi - Voronoi diagrams and Delaunay triangulation for the sphere
d3-geomap - Library for creating geographic maps
d3.geo2rect - Morphing geojson polygons into rectangles
d3-inertia - An extension to d3-drag that continues the mouse movement with some inertia
earthjs - Building orthographic globe with SVG, Canvas & WebGL
mapmap.js - A data-driven API for interactive thematic maps
mapsense.js - Full resolution vector maps with D3
maptable - Convert datasets to a set of visual components (Map, Filters, Table)
simple-map-d3 - Easy choropleth style maps
spam - Create maps with D3 and Canvas, easily

Third Party

leaflet-d3 - Collection of plugins for using D3 with Leaflet [map, geo]
react-d3-basic - Library For Building Composable And Declarative Maps [map, geo]
Wikimaps-D3js Atlas - CLI to generate raster, topojson and svg maps [map, geo]
react-simple-maps - An SVG mapping component library for React, built on top of d3-geo [map, geo]

Utils

crossfilter - Library for exploring large multivariate datasets
d3kit-timeline - Timeline component that labels do not overlap
d3scription - Tooltip with window edge collision detection
d3-annotation - Annotation helper with built-in annotation types
d3-area-label - A library for placing labels in areas
d3-breadcrumbs - Simplifies breadcrumbs usage
d3-component - Lightweight component abstraction
d3-extended - Extends d3 with some common jQuery functions
d3-helpers - Little utility functions
d3-history - Proper URL bar history
d3-hsluv - Human-friendly HSL (Hue, Saturation, Lightness) color space.
d3-iconarray - A plug-in for aligning elements in grids
d3-interpolate-path - Interpolates paths with different number of points
d3-jetpack - Nifty convenience wrappers that speed up your daily work
d3-Labeler - Plug-in for automatic label placement
d3-lasso - Tag elements by drawing a line over or around objects
d3-legend - Legend helper
d3-loom - Plugin to create a "loom" visualization
d3-nelson-rules - Apply nelsons rules of process control to a set of data
d3-peaks - Find peaks in a noisy signal
d3-ring-note - Plugin for placing circle and text annotations
d3-scale-cluster - Scale that clusters data into discrete groups
d3-sparql - Utility for accessing data from SPARQL Endpoints
d3-slider - jQuery UI inspired slider
d3-starterkit - Helper functions simplifying common and verbose d3 patterns
d3-template - Plugin to create and render templates using D3's data binding mechanism
d3-tip - Tooltip helper
d3-tipy - Tooltip helper
d3-tooltip - Arrow shaped tooltip with shadows and dynamic content
d3-trail - A layout for creating better path elements
d3-voronoi-treemap - Computes a treemap based on a Voronoi tesselation
d3-xray - Bookmarklet that logs results of the data joins as you mouse over
d3.svg.circularbrush - A brush for selecting cyclical data
d3.svg.ribbon - An area interpolator
d3kit - A set of tools to speed D3 related project development
iopctrl - Lib for making simple user interface controls
kodama - Tooltip Plugin
swoopyarrows - Plugin to create swoopy arrows
swoopy-drag - Artisanal label placement for d3 graphics
textures - SVG patterns for data visualization

Miscellaneous

chess-dataviz - Chess dataviz library
codeflower - Bird's eye view of the whole code
comic.js - Cartoon style drawing. Works also for canvas, Raphael & SVG.js
dragit - A toolkit to enable the manipulation of data graphics
d3moji - First class emoji support
d3-cloud - Word clouds
d3-context-menu - Helper to create context-menus
d3-force-gravity - Implement gravitational attraction (or force-field-like repulsion)
d3-force-reuse - Faster force-directed graph layouts by reusing force approximations
d3-force-sampled - Super fast, linear-time force-directed graph layouts by Random Vertex Sampling
d3-resume - Resume visualizer
d3.sketchy - Creates sketchy backgrounds, shapes and lines
d3plus-text - Smart SVG text box with line wrapping and automatic font scaling
graph-scroll - Simple scrolling events
jsdoc2diagram - Create tree diagram from jsdoc
mermaid - Generation of diagrams and flowcharts from text in a markdown style
netvis - Visualize network communication for arbitrary protocols
treeviz - Create customizable trees from json data
twitter-sentiment-visualisation - A series of D3.js charts showing realtime sentiment of Twitter data

Server side

d3-node - Static chart and map generation
Kyrix - Interactive pan/zoom Visualizations with automatic server-side scaling support.

Code Editors

d3-snippets - Snippets for Atom
d3-snippets-for-sublime-text-2 - Snippets for Sublime
d3Snippets - Snippets for VS Code

Bl.ocks.org Profiles

A collection of awesome frameworks, templates, tools, workflows and many more to build better emails.

Frameworks
Cheatsheets
Templates
Tools
Services
Self-Hosted Services
Workflows
Articles
Inspirations
Statistics
Design
Testing
Learning

Frameworks

MJML - MJML is a markup language designed to reduce the pain of coding a responsive email. :fire:
Foundation for Emails - Quickly create responsive HTML emails that work on any device & client. Even Outlook.
Email Framework - The HTML email framework developed to help you build responsive HTML email.
HEML - HEML is an open source markup language for building responsive email.
Acorn - A responsive email framework based on a golden ratio typography grid.
Pine - A 12 column grid, responsive email framework.
Maizzle - Rapidly prototype HTML emails with Tailwind CSS and advanced, email-specific post-processing.

Cheatsheets

Rico's cheatsheet - Rico's cheatsheet for HTML email

Templates

Campaign - Compose responsive email templates easily, fill them with models, and send them out.
Sendwithus - Open Source Email Templates
Mailchimp Email Blueprints - Email Blueprints is a collection of HTML email templates that can serve as a solid foundation and starting point for the design of emails.
Campaign Monitor Templates - Easily create beautiful, branded email marketing campaigns.
Responsive Transactional HTML Email Templates (Each template is responsive and each has been tested in all the popular email clients.)
Cerberus - Few responsive email patterns.
Antwort - Antwort offers responsive layouts for Email that both fits and adapts to client widths.
Responsive HTML Template - This template is designed to work on all major email platforms and it is built with media query, making it responsive for smartphones that supports media query.
HTML Email Templates - Responsive HTML email templates for Startups & SaaS.
Free Responsive template : Slate - Five pre-tested templates that work with any mailing service
Grunt Email Boilerplate - A Grunt template to create emails.
Responsive Email Patterns - A collection of patterns & modules for responsive emails.
Email boilerplate - The email boilerplate for sending out nicely formatted messages.
htmlemail - Responsive HTML email templates for startups & developers.
Postmark Transactional Email Templates - Rock-solid email templates for applications.
Stripo.email - Rich set of responsive, interactive beautiful email templates with Stripo.
Postcards - Design responsive email templates online without coding knowledge.

Tools

caniemail - Can I email… Support tables for HTML and CSS in emails.
Topol - Create stunning responsive HTML e-mails in a minute.
MJML App - MJML official desktop app.
Rollover - Generates code for a Rollover Image that displays an alternative image when the email recipient hovers the cursor over the image.
Bulletproof Email Buttons - Design gorgeous buttons using progressively enhanced VML and CSS.
Bulletproof Background Images - Create rock-solid background images for your HTML email with some help from VML and CSS.
Stripo.email - Online drag-n-drop and HTML email builder to create professional and responsive email templates fast without any HTML skills.
MySigMail Card - A free drag & drop builder helps you create email templates intuitively and very quickly.
TestSubject - Test How Your Email Subject Lines Appear On The Most Popular Mobile Devices.
mailspice analytics - Email analytics add-on for all email services that provides deep insights into all of your email campaigns (works with all ESPs).
Alter.email - A free tool to help you inline CSS, remove unused CSS, clean up your text, add extra attributes to tags, add URL tracking parameters, minify, and even prettify HTML email.
Sensitive Subjects - Never send an embarrassing subject line!
Detergent - A tool to prepare the text for pasting into HTML: removes invisible Unicode characters (like ETX which can come from PSD files), encodes special characters (like turning £ into £) and improves typography.
EmailComb - Email-friendly unused CSS removal tool which does not parse and thus accepts mixed sources, including your ESP templating tags. Extras: CSS uglification and HTML/CSS minification (powered by HTML Crush).
HTML Crush - Email-friendly HTML minifier: limits lines to 500 chars. (best practice), respects Outlook conditional tags and accepts mixed sources, including ESP templating tags. Optionally, can only remove indentations (not touching line breaks).
Tabifier - Opposite of HTML Crush - a tool to beautify the indentation in HTML files. Works with mixed input sources, including your ESP templating tags.
Email Link Builder - Make mailto links that open email drafts with prefilled Recipients, Subject, Body and more.

Services

Mailchimp - MailChimp provides email marketing for more than 15 million people globally.
Mailjet - all-in-one Email Services Provider that allows businesses to send Marketing, Transaction Email and Email Automation.
Campaign monitor - Campaign Monitor makes it easy for you to create, send, and optimize your email marketing campaigns.
Sendgrid - Delivering your transactional and marketing email through one reliable platform.
Postal - A fully featured open source mail delivery platform for incoming & outgoing e-mail.
SparkPost - Your application’s emails: Delivered on time and to the inbox.
Mautic - Mautic Marketing Automation. Build smarter campaigns – and build them faster – with marketing automation that’s quick to learn, simple to use, and easy to iterate.
Mailgun - Transactional Email API Service For Developers.
eSputnik - eSputnik is a marketing automation system trusted by more than 30 thousand loyal customers worldwide to send more than a billion emails every month.
Postmark - Lightning fast delivery for your application emails. Postmark delivers your transactional email to customers on time, every time
ImprovMX - Create free email aliases for your domain name.
Reacher - Check if an email exists without sending any email. Written in Rust, 100% open-source.

Self-Hosted Services

iRedMail - Easy to install open source mail server solution
Mail-in-a-box - Lets you become your own mail service provider in a few easy steps.
mailcow - The mailserver suite with the 'moo'. An easy to use dockerized selfhosted email solution.
Mailtrain - Self Hosted Newsletter App Built on Top of Nodemailer.
Mautic - Mautic Marketing Automation. Build smarter campaigns – and build them faster – with marketing automation that’s quick to learn, simple to use, and easy to iterate.
Modoboa - A solution to quickly deploy and manage a complete email server, compatible with latest standards and optimized for delivery and reputation protection.
Poste.io - Complete mailserver built in one docker container.
SimpleLogin - Self-hosted email alias solution.

Workflows

Lee Munroe's Grunt Email Design - A Grunt workflow for designing and testing responsive HTML email templates with SCSS.
Darylldoyle Gulp workflow - Gulp Email Creator is a gulp workflow inspired by Lee Munroe's grunt-email-design workflow.
Html Email Development Workflow - A Typical Email Development Workflow by Sitepoint.

Articles

Email Design Workflow - An email design workflow by By Lee Munroe.
Composing better emails - Tips for writing effective emails

Design

CSS Support - A complete breakdown of the CSS support for every popular mobile, web and desktop email client on the planet.
Email Template Guide - Using a modular email template system
Mail Servers Best Pratices - This guide is a brief summary of email best practices that we have learned from managing mail servers.
Stylecampaign - I looked at the navigation of 50 responsive retail emails. Here is a breakdown of the patterns I discovered.

Blogs

Litmus Blog
Stylecampaign Blog
Myemma Blog
Postmarkapp Blog
Spently Blog
Emailmonks Blog
Stripo.email Blog - Email Marketing & Email Design Blog.
HTML Email Blog
Build Better Blog - Design and content production in email marketing
Email Design Blog - Articles, tutorial, inspiration for all email geeks.

Copy

Email Copy - Email copy from great companies.

Resources

Email toolbox - Hand-picked resources for email marketers and designers.
Mailchimp - Super awesome resources from Mailchimp
Litmus Resources - Stay up to date with the latest email news and trends with Litmus resources.
Campaign Monitor Resources - Campaign Monitor resources will turn you into an expert in no time.
Campaign Monitor Dev Resources
Mailchimp - MailChimp Email Design Reference
Arstechnica - Tutorial on how to build your own email server

Inspirations

Really good emails Codepen
Really good emails - The Best Email Designs in the Universe.
Milled
The Top Email Campaigns -The most effective email marketing campaigns from Campaign Monitor.
Htmlemaildesigns - Beautiful emails to help inspire your next email design.

Statistics

Myemma Email Stats - 18 must-know stats for modern email marketers by Emma, Inc.
Mailchimp Research - MailChimp's researchers are constantly analyzing data to help you make the most of your email campaigns.
Campaign Monitor 2015 Report - 2015 Report: The new rules of email marketing
Campaign Monitor 2016 Report - 2016 Report: Campaign Monitor 2016 Year in Review

Testing

PutsMail - Free tool to test your HTML emails before sending them!
Litmus - Test and track your emails with Litmus
Campaign Monitor - Test your design in all the different email client with Campaign Monitor.
Grunt Litmus - Send email tests to Litmus with grunt
Gulp Litmus - Send email tests to Litmus with gulp
MailTrap - A Fake SMTP Server to Test, View and Share emails without spamming real customers.
testmail.app - A fake SMTP server with unlimited mailboxes and a GraphQL API for automating end-to-end tests.
MailHog A local fake SMTP server (based on Go)
MailCatcher A local fake SMTP server (based on Ruby)
Email Privacy Tester - A tool to test your email client's priacy features (loading remote content)
Mail Tester - Test the Spammyness of your Emails
Sendtest.email - Test your HTML email, ⚡4email, or text version before sending. Privacy-focused, no sign-up required!

Learning

Responsive HTML Email Design - Responsive email course by Justine Jordan and Jason Rodriguez.
HTML Email Design - MailChimp UX Designer Fabio Carneiro demonstrates how to build a full-featured, mobile-friendly email from scratch.
Mastering HTML Email - This series of tutorials will take you through the fundamentals, exploring development techniques, workflow and design approaches.
Building Responsive Email Templates with Ink - Building Responsive Email Templates with Ink.
Litmus learning - Litmus learning resources.

Contribution

Suggestions and PRs are welcome! 🤙 If you want to contribute, please read the contribution guidelines.

More Awesome

📚 Awesome JS Books - This is a curated list of all the best Javascript books.

License

Awesome jQuery

A curated list of awesome jQuery plugins, resources and other shiny things. Inspired by the awesome-* trend on GitHub.

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

awesome-jquery

Resources
Plugins
Mobile
UI
Testing
Server-side Integrations
Community
Alternatives
Looking for more lists like this?
Contributing and License

Resources

Awesome learning material to get to know jQuery and JavaScript or learn something more advanced. Some friendly advice: Before diving deep into jQuery learn JavaScript well.

API documentation - Official jQuery documentation.
Code School - Learn the basics of jQuery, a JavaScript library, to modify elements on a webpage and improve user interaction.
Codecademy jQuery track - Beginners track for learning jQuery.
Learning jQuery - Tips, techniques, and tutorials for the jQuery JavaScript library.
Style guides - jQuery's code style guides when contributing to jQuery projects.
Tuts+ - Useful and indepth articles about jQuery.
jQuery guide for teams - Tips to write consistent jQuery code, easy to use and understand by your team.

Tutorials

Awesome free tutorials and courses to learn jQuery.

jQuery patterns - A variety of jQuery plugin patterns for jump starting your plugin development.
Learning jQuery Design Patterns - jQuery Plugin Design Patterns
Learn jQuery - jQuery learning center.
Snoopcode - jQuery tutorials.
Extending jQuery - Extending jQuery’s selector capabilities.
Free jQuery Courses at Classpert - List of Free jQuery Courses at Classpert Online Course Search

Books

Recommended and not too much outdated jQuery books.

Free Books

JavaScript plus a dash of JQuery - A Sensible Introduction to Coding with JavaScript and jQuery, by Nicholas Johnson.
jQuery Succinctly, Syncfusion (PDF, mobi, epub) (Registration required).
jQuery fundamentals - Comfortable working through common problems you'll be called upon to solve using jQuery.

Paid Books

jQuery in Action, Third Edition - Fast-paced and complete guide to jQuery, by Bear Bibeault, Yehuda Katz, and Aurelio De Rosa.
jQuery: Novice to Ninja: New Kicks And Tricks - fast track to mastering jQuery, by Earle Castledine & Craig Sharkie.
Learning jQuery - Fourth Edition - Guide to jQuery, by Jonathan Chaffer and Karl Swedberg.

Blogs

Interesting jQuery related blogs and websites.

jQuery Blog - News from the official jQuery website.
jQuery UI Blog - Official jQuery UI blog.
Sitepoint - Sitepoint's jQuery category section with useful articles.
Smashing Magazine - jQuery tag, useful jQuery articles and tutorial alike blog posts.

Miscellaneous Resources

Various types of resources.

jQuery Foundation - Providing jQuery and many other projects home and support.
jQuery Source Viewer - Browser of jQuery method implementations.
Alternative jQuery Documentation Browser - Faster way to browse the jQuery documentation.
TodoMVC - Helps you select JavaScript framework. Same Todo application created in multiple popular JavaScript MV* frameworks including jQuery.
jQuery CheatSheet
Programming Community Curated Resources for Learning jQuery

Plugins

Awesome plugins from all across the jQuery universe.

Plugins - Registry of jQuery plugins, previous one is now in read-only mode.
jQuery Rain - Top & Best jQuery plugins, tutorials, cool effects, examples, demos.
jQuery Unheap - A tidy repository of jQuery plugins.

Animation

Animations, transitions.

Animsition - A simple and easy jQuery plugin for CSS animated page transitions.
fakeLoader.js - Lightweight plugin that helps you create an animated spinner with a fullscreen loading mask to simulate the page preloading effect.
Fullpage.js - Create full screen pages fast and simple.
jQuery Transit - Super-smooth CSS3 transformations and transitions for jQuery.
Material Design Preloader!s - Recreation of the Material Design preloader.
Midnight - Switches fixed headers on the fly.
Parallax.js - Scrolling effect.
Scrollify - Assists scrolling and snaps to sections. Touch optimised.
Waves - Click effect inspired by Google's Material Design.
jQuery DrawSVG - Lightweight, simple to use jQuery plugin to animate SVG paths
jQuery Particles - A plugin to easily add Particles animations to your web application

Editors

WYSIWYG editors.

Froala WYSIWYG HTML Editor - jQuery WYSIWYG Rich Text Editor based on HTML5.
Hallo - Simple rich text editor (contentEditable) for jQuery UI.
jQuery Notebook - A modern, simple and elegant WYSIWYG rich text editor.
jQuery TE - Lightweight HTML editor.
TinyMCE - Popular WYSIWYG editor with jQuery build and a jQuery integration plugin.

Forms

Plugins for Forms, AJAX, validation.

Bootstrap Multiselect - Multiselect for Bootstrap.
File Upload - File Upload widget with multiple file selection, drag&drop support, progress bar, validation and preview images, audio and video.
Ideal Forms - Framework for building and validating responsive HTML5 forms.
jQuery Form Plugin - Easy and unobtrusive HTML forms upgrade to use AJAX.
jquery-minicolors - A tiny color picker plugin.
Justified Gallery - Allows you to create a gallery with a justified grid.
Labelauty - A lightweight and beautiful plugin for radio and checkbox inputs.
Payform - A library (with jQuery plugin) for building credit card forms, validating inputs, and formatting numbers.
Pickadate - The mobile-friendly, responsive, and lightweight date & time input picker.
Select2 - Select box with support for searching, tagging, remote data sets, infinite scrolling.
selectize.js - jQuery based hybrid of a textbox and \<select> box.

Images, Maps and Charts

Plugins related to images, image manipulation, galleries, maps and charts.

AnyChart-jQuery - Plugin for easily using AnyChart JavaScript charting library with jQuery.
Arbor - Graph visualization library using web workers and jQuery.
BackStretch - jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element.
Chart.js - Simple HTML5 Charts using the \<canvas> tag.
Cropper - A simple image cropping plugin.
Dense.js - Serving retina-ready, high pixel ratio images with ease.
Flot - Attractive charts.
Gridder - Displays a thumbnail grid expanding preview similar to the effect seen on Google Images.
jquery.sparkline - Generate small sparkline charts.
jQuery.eraser - Erasing image with mouse or touch movements.
jQuery Mapael - Plugin based on raphael.js that allows you to display dynamic vector maps.
jQueryGantt - Gantt editor.
jQuery Images Compare - Plugin for comparing two images.
Nivo Slider - Beautiful and easy to use image slider.
Owl Carousel 2 - Responsive carousel slider.
Slick - The last carousel you'll ever need.
Peity - Progressive \<svg> pie, donut, bar and line charts.
Unite Gallery - Responsive jQuery image and video gallery plugin.
Viewer - A simple jQuery image viewing plugin.
JQuery-linechart - Simple and lightweight library for creating line charts

Menus

Menus animation, usability enhancements and beautification.

jQuery contextMenu - Management facility for context menus.
jPanelMenu - Creates a paneled-style menu (like the type seen in the mobile versions of Facebook, Google and native iPhone applications).
jQuery-menu-aim - Fires events when user's cursor aims at particular dropdown menu items.
mmenu - App look-alike on- and off-canvas menus with sliding submenus.
Multi-level push menu - Allows endless nesting of navigation elements.
Slidebars - jQuery framework for off-canvas menus and sidebars.
stickUp - Sticks an element to the top of the browser window while scrolling past it, always keeping it in view.
Superfish - Adds usability enhancements to existing multi-level drop-down menus.
Yamm - Yet another megamenu for Bootstrap 3.

Modals and Popups

Plugins for modals (dialog box/popups), tooltips, and similar popup windows.

animatedModal.js - Plugin for creating fullscreen modals with CSS3 transitions. You can use the transitions from animate.css or create your own.
Avgrund - Plugin for your modal boxes and popups with new concept of showing depth between popup and page.
Bootstrap Modal - Extends the default Bootstrap Modal class. Responsive, stackable and ajax.
iziModal - Elegant, responsive, flexible and lightweight modal plugin with jQuery.
jBox - Powerful and flexible plugin which takes care of all modal windows, tooltips and notices.
jQuery Modal - Simple and lightweight method of displaying modal windows.
jQuery Popup Overlay - Responsive and accessible modal windows and tooltips.
Lightbox - JavaScript library used to overlay images on top of the current page.
Magnific Popup - Fast, light and responsive lightbox plugin.
SweetAlert - A beautiful replacement for JavaScript's alert.
tipso - A Lightweight Responsive jQuery Tooltip Plugin.
vex - A modern dialog library which is highly configurable and easy to style.

Tables

Grid plugins and plugins for creating and showcasing data in form of tables.

Bootgrid - A grid control especially designed for bootstrap.
Bootstrap table - A powerful table control designed for bootstrap.
DataTables - Advanced interaction controls for HTML tables.
FancyGrid - JavaScript grid library with charts integration and server communication.
Filter Table - Live searching/filtering for HTML tables.
FloatThead - Sticky headers. Supports responsive, window and overflow scrolling.
FooTable - Make HTML tables responsive.
Isotope - Filter & sort magical layouts.
HighchartTable - Simple way to convert HTML data tables to Highcharts graphs.
jqGrid - Grid plugin.
jQuery treetable - Show a tree structure in a table.
jsGrid - Lightweight grid plugin.
Stackable.js - Stacking tables on small screens.
Stupid Table Sort - A stupidly small and simple jQuery table sorter plugin.
tableExport.jquery.plugin - Export HTML table to JSON, XML, CSV, TXT, SQL, Word, Excel, PNG or PDF.
jquery.table-shrinker - make HTML Table responsive across all devices, the right way!

Time and Date

Plugins for handling, manipulating or formating time and date.

jQuery Timer Plugin - Start/Stop/Resume/Remove pretty timer inside any HTML element.
Timeago - Easy support of automatic updating fuzzy timestamps (e.g. "4 minutes ago").

Translations

Internationalization (i18n) and localization (l10n).

i18n properties - Lightweight plugin for providing internationalization to JavaScript from .properties files
jquery.i18n - jQuery based Javascript internationalization library for easy internationalization of web application
jquery.localize.js - Easy internationalization of your static web site

Validation

Validation plugins.

FormValidation - Form fields validator, designed for Bootstrap, Foundation, Pure, Semantic UI, UIKit and other frameworks.
h5Validate - An HTML5 form validation plugin for jQuery.
jQuery Form Validator - Validate user input while keeping your HTML markup clean from JavaScript code.
jquery-validation - Drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easy.
jQuery.validationEngine - Validation of form fields in the browser.
jQuery-form-validation - Validatie html forms using Laravel syntax.

Miscellaneous Plugins

Plugins that couldn't be sorted in above categories yet.

Boilerplate - A jump-start for jQuery plugins development.
Interlink - Event interlink plugin.
Sisyphus - Gmail-like client-side drafts and bit more.
Slugify - Creates a URL slug as you type a page title (like Django slugify()).
Readmore.js - A lightweight jQuery plugin for collapsing and expanding long blocks of text with "Read more" and "Close" links.
Yahoo! Emoticons - Yahoo! Emoticons JQuery Plugin.
autoNumberic - autoNumeric is a standalone library that provides live as-you-type formatting for international numbers and currencies.

Mobile

Mobile section.

jQuery mobile - Lightweight framework for building mobile web apps with HTML5.
Interdimensional - Spatial scrolling on mobile devices for your web pages.
OhSnap!.js - A simple jQuery/Zepto notification library designed to be used in mobile apps.

UI

User Interface section.

Dragula - Framework agnostic drag and drop library, supports jQuery integration.
jQuery UI - Curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery.
jQuery Enhanced Splitter - Create draggable content splitters to emulate frames and separate content.
tabulous.js - Tabs for todays web
X-editable - In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery.

Testing

Unit tests, testing section.

Qunit - A JavaScript Unit Testing framework, used by the jQuery, jQuery UI and jQuery mobile projects.
Mockjax - Provides a simple and extremely flexible interface for mocking or simulating ajax requests and responses.

Server-side Integrations

Best practices of integrating client-side jQuery with server-side technologies.

Node.js:
- Bower - Useful package manager optimized for the front-end.
- cheerio - jQuery for server-side manipulations. It makes possible to construct jQuery instance from HTML string then query and manipulate it. Does not implement ajax and effects API.
PHP:
- PHP front end setup without Node - Tutorial how to combine BowerPHP, Mini-Asset and Robo.li into a PHP front end asset building pipeline.
- symfony-collection - jQuery Plugin that manages adding, deleting and moving elements from a Symfony2 collection.
Python:
- django-static-jquery - jQuery packaged in an handy Django app to speed up new applications and deployment.
Ruby:
- jquery-rails - A gem to automate using jQuery with Rails.
- jquery-ui-rails - jQuery UI for the Rails asset pipeline.

Community

Ask and answer questions, share and get jQuery related stuff and get in touch with the community.

Forum - Official forum.
Freenode - Support IRC channel for users of jQuery, jQuery UI, and jQuery Mobile.
Stack Overflow - Support on Stack Overflow.
Facebook - Large and active group on Facebook.
Linked.in - Large and active group on Linked.in.
Reddit - Discussion and sharing news, articles, plugins and tutorials, covering jQuery Core, jQuery UI, jQuery Mobile, and other related projects.
Quora - Ask and answer questions on Quora website.
Meetup - Get involved locally.
Twitter - Official news and updates from the jQuery team on Twitter.

Alternatives

Alternative implementations of jQuery API.

cash - small jQuery alternative for modern browsers. Includes all API with deliberate exception for ajax.
Zepto - small jQuery alternative, which includes ajax, effects and additional utilities.
jBone - jQuery implementation to use with Backbone. Supports only subset of API which is required for Backbone to work. Can be a byte-saver if you don't intend to use jQuery directly, but have Backbone in your project.

Looking for more lists like this?

Awesome lists:
- awesome - Awesome lists
- awesome-all - Awesome lists
- emijrp/awesome-awesome - Awesome lists
- erichs/awesome-awesome - Awesome lists
- GetAwesomeness - Awesome lists
- lists - Awesome lists
awesome-javascript - Awesome JavaScript list
awesome-javascript-books - Awesome JavaScript books
js-must-watch - List of must-watch videos devoted to JavaScript
Translations:
- Chinese - Chinese translation of Awesome jQuery.

Contributing and License

You are most welcome to contribute to this awesome jQuery list as well. Big thanks to all contributors who have helped to build this list.

To the extent possible under law, Peter Kokot has waived all copyright and related or neighboring rights to this work.

jQuery Tips Everyone Should Know

A collection of simple tips to help up your jQuery game.

For other great lists check out @sindresorhus's curated list of awesome lists.

Tips

Use noConflict()
Checking If jQuery Loaded
Check Whether an Element Exists
Use .on() Binding Instead of .click()
Back to Top Button
Preload Images
Checking If Images Are Loaded
Fix Broken Images Automatically
Post a Form with AJAX
Toggle Classes on Hover
Disabling Input Fields
Stop the Loading of Links
Cache jQuery Selectors
Toggle Fade/Slide
Simple Accordion
Make Two Divs the Same Height
Open External Links in New Tab/Window
Find Element By Text
Trigger on Visibility Change
AJAX Call Error Handling
Chain Plugin Calls
Sort List Items Alphabetically
Disable Right-Click

Use `noConflict()`

The $ alias used by jQuery is also used by other JavaScript libraries. To ensure that jQuery doesn't conflict with the $ object of different libraries, use the noConflict() method at the start of the document:

javascript jQuery.noConflict();

Now you'll reference the jQuery object using the jQuery variable name instead of $ (e.g., jQuery('div p').hide()). If you have multiple versions of jQuery on the same page (not recommended), you can use noConflict() to set an alias to a specific version:

javascript let $x = jQuery.noConflict();

^{back to table of contents}

Checking If jQuery Loaded

Before you can do anything with jQuery you first need to make certain it has loaded:

javascript if (typeof jQuery == 'undefined') { console.log('jQuery hasn\'t loaded'); } else { console.log('jQuery has loaded'); }

Now you're off...

^{back to table of contents}

Check Whether an Element Exists

Prior using a HTML element you need to ensure it's part of DOM.

javascript if ($("#selector").length) { //do something with element }

^{back to table of contents}

Use `.on()` Binding Instead of `.click()`

Using .on() gives you several advantages over using .click(), such as the ability to add multiple events...

javascript .on('click tap hover')

...a binding applies to dynamically created elements, as well (there's no need to manually bind every single element dynamically added to a DOM element)...

...and the possibility to set a namespace:

javascript .on('click.menuOpening')

Namespaces give you the power to unbind a specific event (e.g., .off('click.menuOpening')).

^{back to table of contents}

Back to Top Button

By using the animate and scrollTop methods in jQuery you don't need a plugin to create a simple scroll-to-top animation:

javascript // Back to top $('.container').on('click', '.back-to-top', function (e) { e.preventDefault(); $('html, body').animate({scrollTop: 0}, 800); });

```html

```

Changing the scrollTop value changes where you wants the scrollbar to land. All you're really doing is animating the body of the document throughout the course of 800 milliseconds until it scrolls to the top of the document.

Note: Watch for some buggy behavior with scrollTop.

^{back to table of contents}

Preload Images

If your web page uses a lot of images that aren't visible initially (e.g., on hover) it makes sense to preload them:

```javascript $.preloadImages = function () { for (var i = 0; i < arguments.length; i++) { $('').attr('src', arguments[i]); } };

$.preloadImages('img/hover-on.png', 'img/hover-off.png'); ```

^{back to table of contents}

Checking If Images Are Loaded

Sometimes you might need to check if your images have fully loaded in order to continue on with your scripts:

javascript $('img').on('load', function () { console.log('image load successful'); });

You can also check if one particular image has loaded by replacing the <img> tag with an ID or class.

^{back to table of contents}

Fix Broken Images Automatically

If you happen to find broken image links on your site replacing them one by one can be a pain. This simple piece of code can save a lot of headaches:

javascript $('img').on('error', function () { if(!$(this).hasClass('broken-image')) { $(this).prop('src', 'img/broken.png').addClass('broken-image'); } });

Alternatively, if you wish to hide broken images this snippet will take care of that for:

javascript $('img').on('error', function () { $(this).hide(); });

^{back to table of contents}

Post a Form with AJAX

jQuery AJAX methods are a common way to request text, HTML, XML, or JSON. If you wanted to send a form via AJAX you could collect the user inputs via the val() method:

javascript $.post('sign_up.php', { user_name: $('input[name=user_name]').val(), email: $('input[name=email]').val(), password: $('input[name=password]').val(), });

But all of those val() calls are expensive and using .val() on <textarea> elements will strip carriage return characters from the browser-reported value. A better way of collecting user inputs is using the serialize() function which collects them as a string:

javascript $.post('sign_up', $('#sign-up-form').serialize());

^{back to table of contents}

Toggle Classes on Hover

Let's say you want to change the visual of a clickable element on your page when a user hovers over it. You can add a class to your element when the user is hovering; when the user stops hovering removes the class:

javascript $('.btn').on('hover', function () { $(this).addClass('hover'); }, function () { $(this).removeClass('hover'); });

You need to add the necessary CSS. If you want an even simpler way use the toggleClass method:

javascript $('.btn').on('hover', function () { $(this).toggleClass('hover'); });

Note: CSS may be a faster solution in this case but it's still worthwhile to know this.

^{back to table of contents}

Disabling Input Fields

At times you may want the submit button of a form or one of its text inputs to be disabled until the user has performed a certain action (e.g., checking the "I've read the terms" checkbox). Add the disabled attribute to your input so you can enable it when you want:

javascript $('input[type="submit"]').prop('disabled', true);

All you need to do is run the prop method again on the input, but set the value of disabled to false:

javascript $('input[type="submit"]').prop('disabled', false);

^{back to table of contents}

Stop the Loading of Links

Sometimes you don't want links to go to a certain web page nor reload the page; you might want them to do something else like trigger another script. This will do the trick of preventing the default action:

javascript $('a.no-link').on('click', function (e) { e.preventDefault(); });

^{back to table of contents}

Cache jQuery Selectors

Think of how many times you write the same selector over and over again in any project. Every $('.element') selector has to search the entire DOM each time, regardless if that selector had previously run. Instead you can run the selector once and store the results in a variable:

javascript var blocks = $('#blocks').find('li');

Now you can use the blocks variable wherever you want without having to search the DOM every time:

```javascript $('#hideBlocks').on('click', function () { blocks.fadeOut(); });

$('#showBlocks').on('click', function () { blocks.fadeIn(); }); ```

Caching jQuery selectors is a good performance gain.

^{back to table of contents}

Toggle Fade/Slide

Sliding and fading are common in animations with jQuery. You might want to show an element when a user clicks something, which makes the fadeIn and slideDown methods perfect, but if you want that element to appear on the first click and then disappear on the second, this will work fine:

```javascript // Fade $('.btn').on('click', function () { $('.element').fadeToggle('slow'); });

// Toggle $('.btn').on('click', function () { $('.element').slideToggle('slow'); }); ```

^{back to table of contents}

Simple Accordion

This is a simple method for a quick accordion:

```javascript // Close all panels $('#accordion').find('.content').hide();

// Accordion $('#accordion').find('.accordion-header').on('click', function () { var next = $(this).next(); next.slideToggle('fast'); $('.content').not(next).slideUp('fast'); return false; }); ```

By adding this script all you really need to do on your web page is the necessary HTML to get this working.

^{back to table of contents}

Make Two Divs the Same Height

Sometimes you'll want two divs to have the same height no matter what content they have in them:

javascript $('.div').css('min-height', $('.main-div').height());

This example sets the min-height which means that it can be bigger than the main div but never smaller. However, a more flexible method would be to loop over a set of elements and set height to the height of the tallest element:

javascript var $columns = $('.column'); var height = 0; $columns.each(function () { if ($(this).height() > height) { height = $(this).height(); } }); $columns.height(height);

If you want all columns to have the same height:

javascript var $rows = $('.same-height-columns'); $rows.each(function () { $(this).find('.column').height($(this).height()); });

Note: This can be done several ways in CSS but depending on what your needs are, knowing how to do this in jQuery is handy.

^{back to table of contents}

Open External Links in New Tab/Window

Open external links in a new browser tab or window and ensure links on the same origin open in the same tab or window:

javascript $('a[href^="http"]').attr('target', '_blank'); $('a[href^="//"]').attr('target', '_blank'); $('a[href^="' + window.location.origin + '"]').attr('target', '_self');

Note: window.location.origin doesn't work in IE10. This fix takes care of the issue.

^{back to table of contents}

Find Element By Text

By using the contains() selector in jQuery you can find text in content of an element. If text doesn't exists, that element will be hidden:

javascript var search = $('#search').val(); $('div:not(:contains("' + search + '"))').hide();

^{back to table of contents}

Trigger on Visibility Change

Trigger JavaScript when the user is no longer focusing on a tab or refocuses on a tab:

javascript $(document).on('visibilitychange', function (e) { if (e.target.visibilityState === 'visible') { console.log('Tab is now in view!'); } else if (e.target.visibilityState === 'hidden') { console.log('Tab is now hidden!'); } });

^{back to table of contents}

AJAX Call Error Handling

When an AJAX call returns a 404 or 500 error, the error handler will be executed. If the handler isn't defined, other jQuery code might not work as intended. To define a global AJAX error handler:

javascript $(document).on('ajaxError', function (e, xhr, settings, error) { console.log(error); });

^{back to table of contents}

Chain Plugin Calls

jQuery allows for the "chaining" of plugin method calls to mitigate the process of repeatedly querying the DOM and creating multiple jQuery objects. Let's say the following snippet represents your plugin method calls:

javascript $('#elem').show(); $('#elem').html('bla'); $('#elem').otherStuff();

This could be vastly improved by using chaining:

javascript $('#elem') .show() .html('bla') .otherStuff();

An alternative is to cache the element in a variable (prefixed with $):

javascript var $elem = $('#elem'); $elem.hide(); $elem.html('bla'); $elem.otherStuff();

Both chaining and caching methods in jQuery are best practices that lead to shorter and faster code.

^{back to table of contents}

Sort List Items Alphabetically

Let's say you end up with too many items in a list. Maybe the content is produced by a CMS and you want to order them alphabetically:

```javascript var ul = $('#list'), lis = $('li', ul).get();

lis.sort(function (a, b) { return ($(a).text().toUpperCase() < $(b).text().toUpperCase()) ? -1 : 1; });

ul.append(lis); ```

There you go!

^{back to table of contents}

Disable Right-Click

If you want to disable right-click, you can do it for an entire page...

javascript $(document).ready(function () { $(document).bind('contextmenu', function (e) { return false; }) })

...and you can also do the same for a specific element:

javascript $(document).ready(function () { $('#submit').bind('contextmenu', function (e) { return false; }) })

^{back to table of contents}

Support

Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11.

^{back to table of contents}

Translations

^{back to table of contents}

# Awesome WebAudio

A curated list of awesome WebAudio packages and demos.

Inspired by the awesome list thing.

Please raise a Pull-Request to add an awesome WebAudio thing to this list.

Packages
Frameworks
Libraries
Utilities
MIDI
Apps
Resources
Tutorials
Books
Newsletters
Community
Obsolete

Packages

Frameworks

Tone.js - A framework for making interactive music in the browser.
Bap - A toolkit for making beats and composing sequences, inspired by the classic MPC60/2000.
Omnitone - Ambisonic spatial audio on the web.
Mach1Spatial - Vector based panning spatial audio on the web.
Elementary – Declarative, functional framework for writing audio software on the web or for native apps

Libraries

smoothfade - A library for smoothly fading between two AudioNodes.
virtual-audio-graph - Library for declaratively manipulating the Web Audio API.
XSound.js - Full stack library.
Sound.js - A micro-library to load, play and generate sound effects and music for games and interactive applications.
Meyda - Audio feature extraction library including a variety of widely used audio features.
Wavesurfer.js - Interactive navigable audio visualization using Web Audio and Canvas.
Audiojs - An object that enables you to store, read, and write PCM audio data more easily.
Tuna - An audio effects library.
Rythm.js - A javascript library that makes your page dance.
Howler.js - A comprehensive library with a fallback to HTML5 Audio.
Circular Audio Wave - A JS library for audio visualization in circular wave using Web Audio API and ECharts.
Wad - Web Audio DAW. Use the Web Audio API for dynamic sound synthesis. It's like jQuery for your ears.
p5.sound - An extension that adds Web Audio functionality to the creative coding library p5.js.
@magenta/music - A JavaScript library to use machine learning models and generate music in the browser, by having some neat abstractions over the Webaudio API.
soundfont-player - A soundfont loader/player to play MIDI sounds using WebAudio API.

Utilities

Audion - Chrome extension that adds a Web Audio panel to Developer Tools.
web-audio-generator - A UI for generating Web Audio code.

MIDI

midimessage - A simple MIDI Message parser.
JZZ - MIDI library for Node.js and all major browsers.
JZZ-midi-Gear - Retrieve your MIDI device model and manufacturer.
WEBMIDI.js - The Web MIDI API made easy.

Apps

BassoonTracker - MOD/XM Tracker in Javascript.
LoopDrop App - MIDI looper, modular synth and sampler app built using Web Audio and Web MIDI APIs.
X Sound - Multi Sound Application that uses XSound.js.
Molgav - Musical Step Sequencer for melodies exchange.
mod-synth.io - Create your own modular synthesizer, or emulate different synths.
GridSound - A work-in-progress DAW (Digital Audio Workstation).
Learning Music - Learn the basics of music making.
Super Oscillator - An interactive, 3D music synthesizer for the Web.
AudioNodes - Modular audio production suite with multi-track audio mixing, audio effects, parameter automation, MIDI editing, synthesis, cloud production, and more.
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! Project inspired by Audacity.
SoundCycle - A Web Audio based Loopstation for musicians with effects and different looping modes.
DSP.audio Worklet Editor - Online Audio Worklet editor for sketching and collaboration, with sampler, MIDI and analyzers. Like a JSFiddle, but for DSP.
AudioMass - free, open source, web-based Audio and Waveform Editor.
Csound IDE - web IDE for CSound programming language.
jamhub - low-latency remote music collaboration & jam.
Web Audio Metronome - metronome app that uses the Web Audio scheduler and setTimeout scheduler
EarSketch - free educational programming environment to teach Python and Javascript through music composing and remixing
webaudio-tinysynth - a small synthesizer written in JavaScript with GM like timbre map.
web-audio-beat-detector - a beat detection utility which is using the Web Audio API
web-audio-mixer - An audio mixer built using Web Audio.

Resources

Tutorials

WebAudio School - A series of self-guided workshops to learn WebAudio.
Web Audio API Understandable Reference - A reference that aims to be easy to understand for those who know some JavaScript and basic audio principles.
The Web Audio API: What Is It? - Intro to WebAudio.
Web Audio Basics - A growing set of light code samples with CodePen links for each.
Web Audio Perf - Performance of various AudioNodes and strategies for efficient resource usage (from WAC2016).
Percussion Synthesis Using Web Audio - This tutorial will introduce the basics of web audio programming by writing code to synthesize simple percussion sounds (from WAC2016).
Browser Noise: Web Audio Tutorials - Playlist of video tutorials by Dan Tramte, hosted on the Audio Programmer YouTube channel.

Books

JavaScript for Sound Artists - A bottom up JavaScript / DOM course using Web Audio for all the examples.
Web Audio API - Intended to be a springboard for web developers with little to no digital audio expertise. Geared towards game audio and interactive apps.

Newsletters

Web Audio Weekly Newsletter - A weekly review of what's happening in Web Audio.

Community

Slack - A Slack for discussing Web Audio.

Obsolete

Projects without activity since January 2019 or officially dead.

Gibberish - A JavaScript DSP library that creates JIT optimized audio callbacks using code generation techniques.
lissajous - A tool for programmatic audio performance.
SSSynthesiser.js - A wavetable synthesizer for interactive music and sound effects.
WAAX - Build Music Apps for browsers.
Band.js An interface for the Web Audio API that supports rhythms, multiple instruments, repeating sections, and complex time signatures.
reverbGen - A JavaScript library for generating artificial reverb impulse responses.
TuneJS - A tuning library of microtonal and just intonation scales. Supports over 3,000 historical tunings.
Beet.js - A sequencer library for creating euclidean rhythms and polyrhythms.
AudioKeys - A QWERTY keyboard for web audio projects.
web-audio-test-api - A Web Audio test library for CI.
javascript-karplus-strong - JavaScript/Web Audio implementation of Karplus-Strong guitar synthesis.
osc-msg - OSC message decoder/encoder with fault tolerance.
Pizzicato - A library that aims to simplify the creation and manipulation sounds in the browser.
Mooog - Tools that simplify working with AudioNodes, inspired by jQuery and mixing tables.
envelope-generator - Simple ADSR envelope generator for web audio.
audio contour - A 5 stage audio envelope generator.
web-audio-recorder-js - A library that records audio input (Web Audio API AudioNode object) and encodes to audio file image (Blob object).
audiolet - A JavaScript library for real-time audio synthesis and composition from within the browser.
playnote - Play your favorite instrument in the browser, with complex note intervals and scales.
Recorderjs - A plugin for recording/exporting the output of Web Audio API nodes.
resampler - A utility for resampling audio.
bpm-detective – Detects the BPM of a song or audio sample.
web-audio-utils - Commonly needed utility functions for Web Audio API.
web-audio-oscillators - A collection of Web Audio custom oscillators.
midi-ports - handy library to make it easier to work with attached MIDI devices.
Midi Logger - This Midi Logger will print all midi input to your browser for debugging.
Code Player - An experimental app that makes your codes sing for you.
Web Audio Modules - synthesizers and audio effects processors for web browsers (both API and implementations).

License

To the extent possible under law, Chinmay Pendharkar has waived all copyright and related or neighboring rights to this work.

Offline-First

Useful resources for creating Offline-First web apps

"Web" and "online" are two closely associated terms, downright synonymous to many people. So why on earth would we talk about "offline" web technologies, and what does the term even mean?

via https://www.html5rocks.com/en/features/offline

Inspired by the awesome list thing.

W3C Specification
Newsletter
Posts
Presentations
Videos
Slides
Tools
Books
Showcase
Who to Follow
Contributing

W3C Specification

Offline Web Applications

This specification highlights features (SQL, offline application caching APIs as well as online/offline events, status, and the localStorage API) from HTML5 and provides brief tutorials on how these features might be used to create Web applications that work offline.

Service Workers

This specification describes a method that enables applications to take advantage of persistent background processing, including hooks to enable bootstrapping of web applications while offline.

IndexedDB

This specification defines APIs for a database of records holding simple values and hierarchical objects. Each record consists of a key and some value. Moreover, the database maintains indexes over records it stores. An application developer directly uses an API to locate records either by their key or by using an index. A query language can be layered on this API. An indexed database can be implemented using a persistent B-tree data structure.

WebStorage

This specification defines an API for persistent data storage of key-value pair data in Web clients.

The Offline First Reader. A monthly reader featuring all things Offline First, covering theory, technology and user experience for new offline use cases.

Posts

Accessibility Testing for Offline First Applications (Maureen McElaney - Nov 6, 2017)

How to add an “Offline” notification to your PWA (Tyler Argo - Oct 28, 2017)

Building Offline-First App using MVVM, RxJava, Room and Priority Job Queue (James Shvarts - Oct 8, 2017)

Supporting Offline Users — What Happens When it Breaks? (John Kleinschmidt - Sep 27, 2017)

Using React and Preact to Build My First Offline First Apps (Nick Kasten - Sep 5, 2017)

Offline-Friendly Forms (Max Böck - Aug 23, 2017)

Service Worker: One fallback offline image for any aspect ratio (Sebastian Eberlein - Aug 14, 2017)

You're Offline (Max Böck - Jul 12, 2017)

[Part 2] Get rapid offline capability in your Angular app with service worker (Hugo Dolan - Jun 28, 2017)

Persistent Storage API: Building for the offline web (Dean Hume - Jun 26, 2017)

[Part 1] Get rapid offline capability in your Angular app with service worker (Hugo Dolan - Jun 21, 2017)

Building an offline Web App that works in very low internet conditions using ServiceWorkers (Hari krishna - Jun 16, 2017)

Offline POSTs in Progressive Web Apps (Nitish Thakur - Jun 23, 2017)

Offline First Design Patterns : Engineering (Anirudha Bedre - Mar 28, 2017)

Introducing Redux Offline: Offline-First Architecture for Progressive Web Applications and React Native (Jani Eväkallio - Mar 28, 2017)

Rethinking Offline First sync for Service Workers (Nolan Lawson - Mar 16, 2017)

Offline support: "Try again, later", no more. (Yonatan V. Levin - Mar 2, 2017)

Optimize with HTTP/2 Server Push and Service Workers! (Daniela Matos de Carvalho - Mar 1, 2017)

Understand offline first and offline last in Android (Florent Guillemot - Feb 27, 2017)

Why Offline First? (Zachary Smith - Feb 22, 2017)

Send messages when you’re back online with Service Workers and Background Sync (Phil Nash - Feb 17, 2017)

Easy Offline First Apps With Webpack's Offline Plugin (Kay Plößer - Feb 12, 2017)

Offline First React Native + Meteor Apps (Spencer Carli - Feb 8, 2017)

Offline-First Web Application Using Redux and PouchDB (Berkay Aydın - Jan 30, 2017)

Implementing "Save For Offline" with Service Workers. (Una Kravets - Jan 26, 2017)

Moving beyond localStorage (Mo Bitar - Jan 17, 2017)

How much data should my Service Worker put upfront in the offline cache? (Nicolas Hoizey- Jan 12, 2017)

Making Resilient Web Design work offline (Jeremy Keith - Jan 11, 2017)

Using Service Workers and Cache to Take Web Performance to a New Level (Chris Love - Dec 23, 2016)

Faking progress (service worker edition) (Remy Sharp - Dec 22, 2016)

Introduction to Progressive Web Apps (Offline First) (Prosper Otemuyiwa - Dec 19, 2016)

Won’t Get Fooled Again: Lessons in Lie-Fi (Ricardo Ferreira - Dec 15, 2016)

Designing for Accidental Disconnects: Our first attempt at an offline approach (Vivian Cromwell - Dec 14, 2016)

Offline Patterns: There are many jobs to be done (Steve Trevathan - Dec 13, 2016)

Writing offline web apps is easy (Ali Afshar - Dec 9, 2016)

Architecting a web app to “just work” offline (Islam Sharabash - Dec 6, 2016)

Offline App Architecture: how to build for the next billion (Arun Sasidharan - Dec 4, 2016)

Cross-origin Service Workers: Experimenting with Foreign Fetch (Jeff Posnick - Dec 2016)

Service Worker, what are you? (Mariko Kosaka - Dec 1, 2016)

Designed to be offline-first (Arjun Attam - Nov 29, 2016)

Hack Time: Service Workers, Background Sync, and PouchDB (John Kleinschmidt - Nov 29, 2016)

Offline UX Considerations (Mustafa Kurtuldu - 2016)

Storing Sensitive Data Offline (Paul Frazee - Nov 17, 2016)

Building Offline First React Native Apps (Spencer Carli - Nov 16, 2016)

Building a simple offline-capable Notepad app using ServiceWorker (Amit Merchant - Nov 15, 2016)

Instant Loading Web Apps with an Application Shell Architecture by Google (Addy Osmani & Matt Gaunt - 2016)

My biggest takeaway from the second Offline Camp in Santa Margarita, CA — plus toast! (J. Renée Beach - Nov 8, 2016)

The offline experience in 2016 (Lio Fleishman - Oct 27, 2016)

I Was Wrong About Offline (Tiago Simões - Oct 20, 2016)

Offline strategies come to the Service Worker Cookbook (Salva - Oct 19, 2016)

"Instant Loading" with IndexedDB (Building a PWA, Part 2) (Ire Aderinokun - Oct 18, 2016)

The Service Worker Lifecycle (Jake Archibald - Oct 13, 2016)

"Offline First" with Service Worker (Building a PWA, Part 1) (Ire Aderinokun - Oct 11, 2016)

Do you need Service Worker in your web app? (Valerii Iatsko - Oct 9, 2016)

Progressive Web Apps with React.js: Part 3 — Offline support and network resilience (Addy Osmani - Oct 5, 2016)

Offline Reading List (Chris Ruppel - Oct 5, 2016)

Almost any web page can work offline (Homam Hosseini - Sep 24, 2016)

Enabling Offline First Experiences on the Web with Service Workers (Dan Zajdband - Sep 12, 2016)

Build More Reliable Web Apps with Offline (Pedro Teixeira - Sep 7, 2016)

Songsearch – using ServiceWorker to make a 4 MB CSV easily searchable in a browser (Christian Heilmann - Aug 26, 2016)

Offline Storage for Progressive Web Apps (Addy Osmani - Aug 15, 2016)

Add offline support to any Web app (Wassim Chegham - Jul 23, 2016)

ServiceWorker: A Basic Guide to BackgroundSync (Dean Hume - Jul 19, 2016)

Offline First, the Decentralized Web, and Peer-to-Peer Technologies (Pedro Teixeira - Jul 15, 2016)

Offline Google Analytics Made Easy (Jeff Posnick - Jul, 2016)

Security in Offline First Apps (Calvin Metcalf - Jul 8, 2016)

My blog's Service Worker and Caching Strategy (Paul Kinlan - Jun 15, 2016)

Offline/Low-bandwidth UX Design Patterns (Steve Trevathan - Jul 8, 2016)

Offline Content with Service Worker (Chris Ruppel - Jun 6, 2016)

Taking an online book offline (Jeremy Keith - Jun 3, 2016)

Service Workers — Gotchas (Boopathi Rajaa - May 9, 2016)

Offline-first QR-code Badge Scanner (Glynn Bird - May 5, 2016)

Service Workers and PWAs: It’s About Reliable Performance, Not “Offline” (Alex Russell- May 4, 2016)

Progressive Web Apps: Eating your Cake (Daniel Appelquist - Apr 27, 2016)

Progressive Web Apps with Service Workers (Jesse Yang - Apr 21, 2016)

How To Use PouchDB + SQLite For Local Storage In Ionic 2 (Ashteya Biharisingh - Apr 18, 2016)

Offline-First, Document Sharing, Templates: Monod is Back (not in Black) (Apr 15, 2016)

Issue 4: Offline badging, DevTools, Testing, Travis, Web Storage, Service Worker Scopes, Data-driven Development, Compute Engine (Addy Osmani - Apr 15, 2016)

The New Builders Ep. 1: Craft Beer and Progressive Web Apps (Douglas Flora - Apr 14, 2016)

Service Workers replacing AppCache: a sledgehammer to crack a nut (Maximiliano Firtman - Apr 11, 2016)

Progressive Web Apps — Offline And Add To Home Screen (Ido Green - Mar 28, 2016)

The web on my phone (Jeremy Keith - Mar 23, 2016)

The copy & paste guide to your first Service Worker (Remy Sharp - Mar 22, 2016)

Service Workers: Save your User's Data using the Save-Data Header (Dean Hume - Mar 8, 2016)

Service Worker notes (Jeremy Keith - Feb 4, 2016)

Making A Service Worker: A Case Study (Lyza Danger Gardner - Feb 1, 2016)

Create a really, really simple offline page using Service Workers (Dean Hume - Jan 25, 2016)

Offline Web Applications: Using IndexedDB & Service Worker (Michael Wales - Jan 20, 2016)

Building Offline Sites with ServiceWorkers and UpUp (Tal Ater - Jan 19, 2016)

Instant Web Application (Gleb Bahmutov - Dec 24, 2015)

Introducing Background Sync (Jake Archibald - 2015)

Beyond Offline (Salvador de la Puente González - Dec 21, 2015)

Getting started with the Service Worker Toolbox (Dean Hume - Dec 17, 2015)

ServiceWorker Cookbook (by Mozilla)

Offline Web Applications with CouchDB, PouchDB and Ember CLI (Chris Moore - Dec 10, 2015)

A Hoodie Case Study: How minutes.io does offline (Alex Feyerke - Dec 1, 2015)

Reducing Single Point of Failure using Service Workers (Dean Hume - Dec 1, 2015)

Building realtime collaborative offline-first apps with React, Redux, PouchDB and WebSockets (Pedro Teixeira - Nov 30, 2015)

Cache-limiting in Service Workers …again (Jeremy Keith - Nov 29, 2015)

Introducing Pokedex.org: a progressive webapp for Pokémon fans (Nolan Lawson - Nov 23, 2015)

Cache-limiting in Service Workers (Jeremy Keith - Nov 19, 2015)

Offline Recipes for Service Workers (David Walsh - Nov 19, 2015)

Instant Loading Web Apps With An Application Shell Architecture (Addy Osmani - Nov 17, 2015)

An Offline Experience with Service Workers (Brandon Rozek - Nov 14, 2015)

Building Flipkart Lite: A Progressive Web App (Aditya Punjani - Nov 11, 2015)

Your first offline web app (Chrome Developer Team - 2015)

Making a Simple Site Work Offline with ServiceWorker (Nicolas Bevacqua - Nov 10, 2015)

My first Service Worker (Jeremy Keith - Nov 7, 2015)

Building an offline page for theguardian.com (Oliver Joseph Ash - Nov 4, 2015)

Creating Offline-First Web Apps with Service Workers (Ryan Chenkie - Oct 30, 2015)

Cache sandboxed HTTP requests with Service Worker (Roman Liutikov - Oct 26, 2015)

The offline experience (or, saying goodbye to imperative data fetching) (Dario Gieselaar - Oct 25, 2015)

ServiceWorker: Revolution of the Web Platform (Nicolas Bevacqua - Oct 21, 2015)

Taking the web offline with service workers (Ruadhan O'Donoghue - Oct 21, 2015)

Using Service Workers (MDN - Oct 18, 2015)

Don’t Wait for ServiceWorker: Adding Offline Support with One-Line (Kenneth Ormandy - Oct 14, 2015)

Service Workers in Production (Jeff Posnick - Oct 01, 2015)

How Do We Get It Done, Now? (Lyza Danger Gardner - Sep 30, 2015)

The Role of Workers and Offline Cache (Sep 7, 2015)

Let's make Offline Web Applications secure! (Egor Homakov - Jul 28, 2015)

Service Worker Meeting Highlights (Ben Kelly - Jul 28, 2015)

Q&A: Offline first, not just mobile first says Couchbase (James Nunns - Jun 26, 2015)

Why offline-first matters, and what developers should know about it (Marcel Kalveram - Jun 2, 2015)

Getting Appcache’s Fallback to work, crossbrowser (Ian Devlin - Jun 1, 2015)

Mobile Apps Offline Support (Gustavo Machado - May 29, 2015)

Making react-europe.org work offline with Service Workers and free SSL from Cloudflare (Patrick Aljord - May 14, 2015)

Offline Data Synchronization in Ionic (Marco Fernandes - Apr 29, 2015)

Offline Data in the Browser (Assaf Weinberg - Mar, 2015)

Offline: When Your Apps Can’t Connect to the Internet (Daniel Sauble - Mar 29, 2015)

Offline is not just another mobile feature (Chuck Ganapathi - Mar 4, 2015)

Offline-first, fast, with the sw-precache module (Jeff Posnick - Feb 23, 2015)

Offline is Not a Feature (Feb 16, 2015)

The Right and Wrong Strategies When Taking Your App Offline (Martin Heller - Feb 9, 2015)

Three takeaways for web developers after two weeks of painfully slow internet (Gabor Lenard - Jan 25, 2015)

Offline first: as simple as unplug & play? (Thomas Anciaux - Jan 15, 2015)

A simple ServiceWorker app (Chris Haynes - Jan 6, 2015)

ServiceWorker is available in Chrome 40 beta (Ilya Grigorik - Dec 11, 2014)

PSA: Service Workers are Coming (Alex Russell - Dec 11, 2014)

The offline cookbook (Jake Archibald - Dec 9, 2014)

The next UX challenge on the web: gaining offline trust (Christian Heilmann - Dec 8, 2014)

Service Worker Recipes (Cesar William Alvarenga - Dec 8, 2014)

Introduction to Service Worker (Matt Gaunt - Dec 1, 2014)

offline decentralized single sign-on in the browser (James 'substack' Halliday - Nov 27, 2014)

Offline Web Apps with Meteor (Gabriel Poça, Nov 26, 2014)

How to build web applications that can work offline with PouchDB? (Yann Jacquot - Nov 25, 2014)

Making Your App Work Offline: Tips and Cautionary Tales (David Aragon - Nov 11, 2014)

How Google and Mozilla are aiming to make web apps shine offline (Nick Heath - Oct 30, 2014)

Offline-first is people-first (Nolan Lawson - Oct 3, 2014)

Introducing Hoodie: Full Stack App Development for Front-End Developers (Alvaro Oliveira - Sep 24, 2014)

Offline-first: a new paradigm in web development (Boye Oomens - Sep 16, 2014)

Building A Simple Cross-Browser Offline To-Do List With IndexedDB And WebSQL (Matt Andrews - Sep 2, 2014)

Introducing MakeDrive (David Humphrey - Aug 25, 2014)

Worklight Authentication done right with AngularJs (Gideon Simons - Aug 22, 2014)

Taking your Worklight apps offline (Gideon Simons - Aug 19, 2014)

Working offline (Aug 12, 2014)

Offline First - the new paradigm in web development done Neptune style (Njål Stabell - Augt 5, 2014)

Breaking Development: Offline First is the new Mobile First (Luke Wroblewski - Jul 29, 2014)

Offline Patterns (Carlos Andreu - Jul 3, 2014)

Offline Web Apps,Web Storage,IndexedDB,AppCache,File API Futures (Ali Alabbas - May 21, 2014)

Service Workers: Offline Now(ish)! (Alex Russell - May 21, 2014)

Service Worker - first draft published (Jake Archibald - May 8, 2014)

The BMEAN Stack and Offline-First Design (Daishi Kato - Apr 11, 2014)

Do HTML5 apps have to be online all the time? (Christian Heilmann - Mar 23rd, 2014)

Building an Offline First App with PouchDB (Tiffany Brown - Mar 10, 2014)

Introduction to Offline Web Apps on the Kindle Fire (Russell Beattie - Jan 30, 2014)

Designing Offline-First Web Apps (Alex Feyerke - Dec 4, 2013)

Offline First: Learning from native experiences (Dion Almaer - Dec 4, 2013)

Offline First (Stuart Langridge - Nov 6, 2013)

Making the web work offline first (Marcel Kalveram - Nov 20, 2013)

Say Hello to Offline First (Dan Lash - Nov 5, 2013)

Offline First: Your Next Progressive Enhancement Technique? (Craig Buckler - Oct 30, 2013)

Appcache, not so much a douchebag as a complete pain in the #$%^ (John Allsopp - Jul 19, 2013)

Using HTML5 AppCache with Single Page Applications (Sergei Dorogin - Mar 29, 2013)

Application Cache is a Douchebag (Jake Archibald - May 08, 2012)

Appcache Facts

Chrome Offline Apps

Offline Support is Valuable, and You Can’t Add it Later (Aanand Prasad - Aug 13, 2011)

Offline-first web app design (Michiel B. de Jong - 2011)

5 Reasons Why There are no Killer Offline Web Applications (Craig Buckler - Feb 16, 2010

Offline Web Applications (Paul Rouget - Jan 7, 2010)

Let's take this offline (Mark Pilgrim)

Presentations

Videos

Offline-first for Your Static Site (Jeff Posnick - Jan 30, 2017)

Service Worker and the Appification of the Web (Nolan Lawson - Dec 05, 2016)

Future App Model: Advanced Service Worker (Jake Archibald- Nov 11, 2016)

Offline is the new black (Max Stoiber - Jun 19, 2016)

Service workers at scale with Facebook and Flipkart (Owen Campbell-Moore, Aditya Punjani and Nate Schloss - May 20, 2016)

Instant Loading: Building offline-first Progressive Web Apps (Jake Archibald - May 20, 2016)

Offline First – the good parts (Gregor Martynus - May 12, 2016)

Offline Web Applications: Using IndexedDB & Service Worker

Totally Tooling Tips: Offline Support (Addy Osmani & Matt Gaunt - Apr 27, 2016)

Using Service Workers in Ember (John Kleinschmidt - Mar 29, 2016)

Offline-First Apps with PouchDB (Bradley Holt - Dec 11, 2015)

Worker as a Service (Ola Gasidlo - Nov 19, 2015)

Taking Your Web Apps Offline (Mike Nitchie - Nov 16, 2015)

There is a client-side proxy (ServiceWorker) in your browser! (Ilya Grigorik - Nov 16, 2015)

OnConnectionLost: The life of an offline web application (Stefanie Grewenig - Oct 12, 2015)

Offline First and Service Workers (Maximilian Stoiber - Oct 5, 2015)

Offline First Podcast (The Web Platform Podcast - Sep 8, 2015)

The Once & Future Web (Jake Archibald - Jul 28, 2015)

Go Offline (Rob Dodson - Jun 29, 2015)

Taking Ember Offline (John Kleinschmidt - Jun 16, 2015)

Holy sync (Eugenio Marletti - May 5, 2015)

Making Offline Suck Less with Service Workers (Bret Little - Mar 28, 2015)

Say Hello to Offline First (Ola Gasidlo - Mar 26, 2015)

The UX Of Offline-First (Jake Archibald - Mar 18, 2015)

The Web's Future is Offline (John Allsopp - Feb 24, 2015)

Building Offline First Applications with Backbone (Gregor Martynus - Dec 17, 2014)

Working connected to create offline (Christian Heilmann - Nov 24, 2014)

The ServiceWorker is coming, look busy! (Jake Archibald - Sep 21, 2014)

The Next Challenge of the Web is Us (Christian Heilmann - Aug 1, 2014)

Offline First (Alex Feyerke - Jul 17, 2014)

The ServiceWorker: The network layer is yours to own (Jake Archibald - Jun 25, 2014)

Offline Web Applications (Jan Jongboom - May 23, 2014)

The Offline Web (Dale Harvey - Jun 20, 2014)

Bring NoSQL to your mobile (Patrick Heneise - Dec 16, 2013)

Network connectivity: optional (Jake Archibald - Dec 4, 2013)

Surviving the Offline Apocalypse (John Kleinschmidt - Nov 29, 2014)

Offline First (Jan Lehnardt - May 27, 2013)

Offline rules: Bleeding edge web standards at the Financial Times (Andrew Betts - Apr , 2013)

What's the right way to build offline into a web application? (Jake Archibald, Mark Christian, Alex Russell and Jonas Sicking - Feb 9, 2013)

AppCache: Douchebag (Jake Archibald - Jan 20, 2013)

Application Cache And Local Storage (Scott Davis - Dec 7 , 2012)

Offline Rules (Andrew Betts - Dec 4, 2012)

Building Web Apps of the future. Tomorrow, today and yesterday. (Paul Kinlan - Nov 12, 2012)

Taking Web Apps Offline (Kevin Markman - Nov 5, 2012)

Building Offline Web Apps with HTML5 (Jonathan Stark - Jul 25, 2012)

Getting off(line): appcache, localStorage for HTML5 apps that work offline (John Allsopp - Jul 3, 2012)

Slides

Offline, progressive, and multithreaded (Nolan Lawson - Oct 10, 2016)

Rise of the Web Workers (Parashuram N - Sep 16, 2016)

Building an Offline Page for theguardian.com (Oliver Joseph Ash - May 14, 2016)

Go offline with Service Workers (Emanuel Kluge - 2016)

Building an Offline Page for theguardian.com (Oliver Joseph Ash - Mar, 2016)

Insanely fast rendering w/ Service Workers and Early Flushing (Mark Stuart - Dec 14, 2015)

Offline-First Apps with PouchDB at Node.js Interactive (Bradley Holt - Dec 9, 2015)

Developing for Offline First Mobile Experiences (Nic Raboy - Dec 2, 2015)

At your service! - More than appcache uses for Service Workers (Salvador de la Puente González - Oct 21, 2015)

Offline First (Web) Apps (Alex Feyerke - Oct 20, 2015)

Offline-First Web Applications (Peter Müller - 2015)

Server in your Client - Service Workers' rise to fame (Szmozsánszky István - Oct 7, 2015)

Offline-First Web Applications (Peter Müller - Jun 27, 2015)

Offline-first mobile web apps with PouchDB, IBM Cloudant, and IBM Bluemix (Bradley Holt - Jun 22, 2015)

Building Offline-Enabled Apps with PouchDB (Bradley Holt - May 20, 2015)

Naked and afraid Offline Mobile (Matt Woodward - May 18, 2015)

Offline first, the painless way (Marcel Kalveram - May 17, 2015)

noBackend e Offline First: focusing on creating experiences (pt-br) (Joselito Júnior - May 16, 2015)

HOLY SYNC: a sane approach to offline-first cross-platform data syncing (Eugenio Marletti - Apr 10, 2015)

Service Worker and the Offline Web (Lewis Cowper - Mar 7, 2015)

Service Workers on vacay... (Natasha Rooney - Mar 6, 2015)

TGIF - Offline-first (Diego Calderón - Jan 30, 2015)

ServiceWorkers and High Performance Offline Apps (AlanDalton - Jan 13, 2015)

Leveraging hood.ie to build for the offline state (Marcel Kalveram - Nov 24, 2014)

Let's Take Drupal Offline! (Dick Olsson - Nov 17, 2014)

Offline-first web apps - Velocity EU 2014 (Matt Andrews - Nov 17, 2014)

Discover ServiceWorker (Sandro Paganotti - Nov 16, 2014)

Offline first <3 (Ola Gasidlo - Oct 17, 2014)

Scaling Down: The Offline First Story (Joan Touzet - Sep 16, 2014)

Status Web Offline (Caolan McMahon - Aug 21, 2014)

Look Ma, No Connections! Building Offline-capable Web Apps with HTML5 (Bijan Vaez - Aug 1, 2014)

Say hello to offline first! (Ola Gasidlo - May 19, 2014)

Offline First (Web) Apps (Alex Feyerke - May 2, 2014)

Offline First – Made Simple! (Gregor Martynus - Apr 24, 2014)

Offline First Re-Imagining Web Development For The Real World (Caolan McMahon - Mar, 2014)

Tools

offline-plugin: Offline plugin (ServiceWorker, AppCache) for webpack.

Pinterest Service Workers:A collection of utilities for creating/testing/experimenting with service workers.

Kinto: Add synchronisation and sharing abilities to your Web application in seconds.

bottle-service: Instant web applications restored from ServiceWorker cache.

react-boilerplate: Quick setup for performance orientated, offline-first React.js applications.

Haywire: A minimal javascript library for network issues detection.

sw-toolbox: A collection of tools for service workers.

UpUp: An Offline First library designed to be the easiest way to add offline capabilities to a site.

simple-serviceworker-tutorial: A really simple ServiceWorker example, designed to be an interactive introduction to ServiceWorker.

Hyperboot: Offline webapp bootloader.

MakeDrive: A cloud-based Dropbox® equivalent for browser filesystems. Designed for use with Mozilla Webmaker tools and services. See the Mozilla MakeDrive Wiki page for background info.

ApplicationCache: HTML5 provides an application caching mechanism that lets web-based applications run offline.

IndexedDB: IndexedDB is an API for client-side storage of significant amounts of structured data and for high performance searches on this data using indexes.

ServiceWorkers: A Service Worker acts like a proxy on the client. For page requests and requests made by pages, you get a fetch event that you can respond to yourself, creating offline experiences.

localForage: Offline storage, improved. Wraps IndexedDB, WebSQL, or localStorage using a simple but powerful API.

remoteStorage: remoteStorage enabled apps automatically sync your data across all of your devices, from desktop to tablet to smartphone, and even your TV.

pouchdb: PouchDB is an open-source JavaScript database inspired by Apache CouchDB that is designed to run well within the browser.

Offline.js: An awesome JavaScript library to improve the experience of your app when your users lose connection.

Hoodie: Hoodie is an Offline First and noBackend architecture for frontend-only web apps on the web and on iOS.

Offline States: What show applications when we have not internet connection.

appCache Nanny: JavaScript APIs for appCache

bro-fs: Promise-based wrapper over HTML5 Filesystem API allowing to work with sandboxed filesystem in Chrome.

Orbit.js: Framework for orchestrating access, transformation, and synchronization between data sources.

workbox: JavaScript libraries for Offline Caching

Books

The Offline First Book (by Neighbourhoodie)

Offline First Web Development (by Daniel Sauble)

Building Progressive Web Apps (by Tal Ater)

Client-Side Data Storage (by Raymond Camden)

Offline First: The book (draft) (by John Allsopp)

Pro HTML5 Programming - Chapter 12: Creating HTML5 Offline Web Applications (by Peter Lubbers, Brian Albers and Frank Salim)

Showcase

Minutes.io: Awesome offline first minute taking app built with Hoodie.

2048: The original 2048 is a great game to pin to your homescreen.

hospitalrun.io: Open source software for developing world hospitals.

pokedex.org: An index of Pokémon, built as a client-side JavaScript webapp. Powered by ServiceWorker, PouchDB, virtual-dom, and web workers.

Soundslice: Learn and teach music better with interactive notation with offline mode.

Who to Follow

Matthew Riley: Works at mozilla, creator of localForage (localstroage, IndexedDb and WebSQL Wrapper)
Jake Archibald: Self described service worker fanatic, works at google helping make offline web apps a thing.

Contributing

Sharing, suggestions and contributions are always welcome! If you want to contribute, you are highly encouraged to do so. Please read the contribution guidelines.

Thanks to all contributors.

Maintained by

Guille Paz (Front-end developer | Web standards lover)
E-mail: guille87paz@gmail.com
Twitter: @pazguille
Web: https://pazguille.me/

License

Awesome Static Website Services

A curated list of services for static websites.

Inspired by the awesome list thing.

Audio
Books
Calendar and Scheduling
Images
Maps
Presentations
Video
Code
Functions as a Service FaaS
GraphQL
Community
Comments
Forms
Live Chat
Newsletters
Social Media
Surveys
E-Commerce
Payments
Search
Analytics
Authentication
Other
Related Lists

Audio

SoundCloud - Audio hosting with an embeddable player. Up to 3 hours of content is free.
Mixcloud - Audio hosting with unlimited uploads and an embeddable player.
Spotify - You can embed any song, album, or playlist with a Spotify Play Button.

Books

Google Books - Allows you to display the books in your Google Books Library.
Goodreads API and widgets - Allows you to access any of the Goodreads data. Widgets are found on the widgets tab on your settings page.
Open Library Open API — Allows to retrieve book data from the biggest books open dataset on Earth, without any tracking.

Calendar and Scheduling

Google Calendar - Embeddable calendar that you can collaborate with other people.
Booking.js - Beautiful embeddable booking widget.
zenplanner - Paid - Online scheduling for fitness.

Images

Flickr - Online photo hosting by Yahoo.
Cloudinary - Image hosting, manipulation and delivery.

Maps

Google Maps - Google maps are easily embeddable.
Mapbox - Really nice looking embeddable maps.
uMap - Create and embed personalized maps, based on the great OpenStreetMap dataset.

Presentations

Prezi - Online presentations with really transitions that can zoom and rotate.
Reveal.js - HTML presentation framework.
Slides.com - A place for creating, presenting and sharing slide decks.
SpeakerDeck - Upload your slides as a PDF, and get an online, shareable presentation.

Video

Mux - Paid - An API to play videos directly to the client. Can also power live streams.
YouTube - Embeddable videos with unlimited uploads.
Vimeo - Paid - Embeddable videos with no ads.
Vevo - Embeddable music videos.
Wistia - Free plan has a limit of 25 videos.

Code

Codepen - A playground of embeddable front-end code examples.
JS Bin - Embeddable front-end code examples.
JSFiddle - Embeddable front-end code examples.
highlight.js - Syntax highlighting for the web.

Functions as a Service

1Backend - Deploy your backend in seconds. Free tier included. Open source.
AWS Lambda - AWS Lambda lets you run code without provisioning or managing servers. You pay only for the compute time you consume
Google Cloud Functions - Create single-purpose, stand-alone functions that respond to Cloud events without the need to manage a server or runtime environment
Webtask by Auth0 - Call code on the server with simple HTTP, easier to set up by far than Lambda or Google's
Azure Functions - by Microsoft - same premise as Lambda on the Azure cloud
IronWorkers - by Iron.io - Run code in a multilanguage containerized environment with unlimited scale and simple pricing
IronFunctions - by Iron.io - IronFunctions is an open source serverless computing platform for any cloud - private, public, or hybrid.
OpenWhisk by IBM - part of their BlueMix hosting platform, and open source, ties into their Watson AI ecosystem nicely
StackPath EdgeEngine - Write functions as a service in the language of your choice and deploy them to a global network of data centers. All the networking, including intelligent routing and load balancing, is managed by StackPath over a private backbone.
Vercel - Vercel lets people write functions as a service in their language of choice and deploy as part of a monorepo.
Azure Static Web Apps - Full-stack static app hosting including serverless Functions, authentication, CDN and more
Qoddi - Full stack app hosting with data storage included, similar to Heroku with a developer centric approach. Free to use up to 3 apps.
Autocode - Autocode turns functions into scalable web services in an instant, no configuration required; serverless hosting available with an in-browser IDE, an API library that’s easy to use, and seamlessly managed authentication.

GraphQL

FaunaDB - Serverless GraphQL database. Free tier with no time limit. Easily included in Netlify apps.

Community

Comments

Staticman - Staticman is a Node.js application that receives user-generated content and uploads it as data files to a GitHub repository. In practice, this allows you to have dynamic content (e.g. blog post comments) as part of a fully static website, as long as your site automatically deploys on every push to GitHub, as seen on GitHub Pages, Netlify and others.
Disqus - Easily embeddable comments with nested replies, multiple login methods, and email notifications.
Facebook Comments - Embeddable comments for your site by Facebook.
IntenseDebate Comments - Embeddable comments with nested replies, multiple login methods, and email notifications.
LiveFyre - Real-time comments, SEO-optimized, stocked with social features, and beautiful on both desktop and mobile.
Redditjs Embed Widget - Embed Reddit comments on your site. If it hasn't been posted, it will show a link to encourage the user to submit.
Muut.com - Embeddable comments, forum and private messaging. A lot of functionality, but really low footprint left on your website.
Gitment - Comment system based on GitHub Issues, which can be used in the frontend without any server-side implementation.
giscus - A comments widget built on GitHub Discussions.

Forms

Really Simple Forms

Formspree - Receive emails from a form on your static website.
elFormo - Simple form processing and response retrieval via email.
Flipmail - Simple form processing and response retrieval via email.
MailThis - Simple form submissions via email with optional attachments.
Simple Form - Simple forms with optional file attachments, email notifications, and online submission viewing.
Brisk Forms - Free form submission service emails you responses while keeping your email address private and is open source.
99 Inbound - Form endpoint service with email/Slack notifications and third party app integrations (e.g. MailChimp)
Getform - Form backend platform for designers and developers, with email and integrations.
HeyForm - Free, easy-to-use drag & drop form maker capable of crafting powerful online forms. Includes 40+ field types, integrations, analytics, and more.
Form.taxi - Backend to handle form submissions easily and reliably, with email notifications, file uploads and GDPR-compliant data processing.

Normal Forms

Formcarry - Hassle-free HTML form endpoints for your form, powerful dashboard, reliable spam blocking, attachment uploads and Zapier integrations.
Formcake - The form backend built for developers: Zapier integrations, simple endpoint API, unlimited forms.
Google Forms - Saves results into Google Sheets and can email you when there is a submission.
FormKeep - Paid - View form submissions in a beautiful web interface. It has spam filtering and it integrates with webhooks such as Gmail, Trello, and Basecamp.
123 Contact Form - Connects to other online services such at MailChimp, Salesforce, and Google Drive. It also integrates with payment Processers and includes security and analytics.
FormAssembly - Allows you to build any kind of form that can include complex branching logic and multiple pages.
FormSite - Form builder with payments and form management.
FormStack - Forms with A/B testing, partial submission, analytics, and integrations.
Sheetsu - POST and GET your data to Google Spreadsheet.
Typeform - Awesome forms that can be embedded.
Wufoo - Free or Paid - Forms that you can build with a form designer, with notifications, reports, and payments.
Zoho - Forms with file upload and captcha.
GitHub Issues - This is an interesting way for developers to get comments/questions. See github.com/sindresorhus/ama for an example.
Utterences - A lightweight comments widget built on GitHub issues.
FormBackend - Create form-backends and submit your HTML forms to our backend. View the entries online and connect to other services. Receive an email every time a new entry is submitted.
Pageclip - A flexible server / backend for HTML forms. View your data in the realtime web interface, or use the API to get CSV and JSON output.
Formester - Forms and email marketing (lead collection, email campaigns, and newsletters) with integrations.
StaticKit - Modern forms for static sites, with native support for React.
SheetDB - Turn a Google Spreadsheet into a JSON API.
Form2Channel - Post your HTML form to Form2Channel to store submissions in Google Sheets and receive them via email, Slack or Telegram. No signups, no costs, no limits.
reCAPTCHAme - reCAPTCHA and hCAPTCHA token verification service. Post your form to reCAPTCHAme to avoid getting spammed. Made for static websites, no server-side coding required.

Provided by the Host

Netlify - Netlify comes with built-in form handling.

Live Chat

jivochat - JivoSite is a professional live chat for websites that was specifically designed to increase your online sales.
LiveChat - Live chat on your website.
Olark - Live chat on your website. You can also see who's on your website and what they're doing.
SnapEngage - Live chat with integrations and custom styles.
tawk.co - Lets you monitor and chat with visitors on your website.
WebsiteAlive - Live chat for your website & social networks.
Zopim - Live chat with free trial.

Newsletters

MailChimp - Free email marketing. You can pay to add more features.
Constant Contact - Email marketing with campaigns, autoresponders, and analytics.
AWeber - Email marketing with campaigns, autoresponders, and analytics.
Campaign Monitor - Email marketing with campaigns, autoresponders, and analytics.
MailerLite - Free email marketing. You can pay for more subscribers.

Pinterest - Pin It Button.
Twitter - Embedded tweets.
Facebook - Facebook embedded plugins.
ShareThis - Sharing buttons for multiple social networks.
Kontaktify - A contact widget that provides an easy way for visitors to get in touch.

Surveys

Google Forms - You can use Google forms for surveys or for forms on your site.
SurveyMonkey - Easy to use and free surveys.
Typeform - Really beautiful forms.
Qualaroo - Embed surveys anywhere on your website that comes up from the bottom right side of the screen.
Insight Stash - Fast, Simple survey forms.

E-Commerce

Ecwid - Embeddable shopping cart.
FoxyCart - Add a shopping cart with basic html code.
Snipcart - Include a few lines of code for a full online shop.
Gumroad - An all-in-one solution to sell your work.
Payhip - An embeddable way to sell digital downloads & memberships
Moltin - Add eCommerce functionality to anything.
Trolley - Add a popup cart to any website - designed for static & JAMstack sites.
Commerce Layer - Add enterprise ecommerce to your JAMstack.

Payments

MoneyButton - Website payments and donations using Bitcoin (Satoshi's Vision).
ShapeShift Shifty Button - Accept payments using various cryptocurrencies.

Search

Self-hosted:

lunr.js - Simple full-text search in your browser.
itemsjs - Full text, faceted, almost dependency free search engine in javascript
minisearch - Tiny and powerful JavaScript full-text search engine for browser and Node
flexsearch - Next-Generation full text search library for Browser and Node.js
fuse.js - Powerful, lightweight fuzzy-search library, with zero dependencies
static-search - A Go program to generate JSON index of HTML files, and a JavaScript component with optional UI to search this index
elasticlunr - Lightweight full-text search engine developed in JavaScript for browser search and offline search based on Lunr.js
tinysearch - Tiny, full-text search engine for static websites built with Rust and Wasm
js-search - Client-side searches of JavaScript and JSON objects, ES5 compatible and does not require jQuery or any other third-party libraries
search-index - A persistent, network resilient, full text search library for the browser and Node.js
fuzzysearch - Tiny and blazing-fast fuzzy search in JavaScript
fuzzy - Fuzzy search / filter for browser and node
fullproof - Javascript library that provides high-quality full-text search in the browser
Jets.js - Native CSS search engine

Third party integration:

Google Custom Search Engine - Search your site with a custom Google Search.
Algolia - Hosted Search API that delivers instant and relevant results from the first keystroke.
CloudSh - Powerful search for your website with a few lines of JavaScript.

Analytics

Google Analytics - Freemium web analytics service offered by Google.
Simple Analytics - 💲 - Simple, clean, and friendly analytics.

Authentication

Uthentic - Serverless, passwordless login for static sites in 2 lines of code.

Other

Sketch Fab - Embeddable 3D content.

License

To the extent possible under law, Adam Garrett-Harris has waived all copyright and related or neighboring rights to this work.

Awesome Cycle.js

A collection of awesome Cycle.js tools, resources, videos and shiny things.

Learn
Documentation
Tutorials
Videos
Slides
Example Applications
Tools
CLI
Libraries
Drivers
Boilerplates
Testing
Debugging
Components
Community

Learn

Documentation

cycle.js.org - Cycle.js official tutorial and documentation.

Tutorials

What Developers Need to Know about MVI (Model-View-Intent) - Post on MVI architecture.
Cycle.js: a reactive framework - Introduction to Cycle.js with real time data example.
Building realtime applications with CycleJS and RxJS - Learn how to build realtime applications with CycleJS and RxJS
Working with HTTP Streams with Cycle.js - Learn how to use Cycle.js to handle HTTP requests and responses

Videos

What if the user was a function? - Presentation at JSConf BP2015 by Andre Staltz
Unidirectional data flow architectures - Presentation AtTheFrontend Conference by Andre Staltz
Cycle.js and functional reactive user interfaces - Presentation at ReactiveConf 2015 by Andre Staltz
Intro to Functional Reactive Programming with Cycle.js - Presentation by Nick Johnstone
Cycle.js Fundamentals - Playlist at egghead.io
Cycle.js was built to solve problems - by Andre Staltz at Frontend.fi
Brains as Building Blocks - by Andre Staltz at CycleConf 2016
Back to the Future, Hot reloading with Cycle.js - by Nick Johnstone at CycleConf 2016
From MVC to FRP - by Gleb Bahmutov at CycleConf 2016
Cycle.js on the bash side - by Hadrien de Cuzey at CycleConf 2016
Reactive Programming with Cycle.js - by Luca Mezzalira at JSDay 2016
Learning how to ride: an introduction to Cycle.js - by Fernando Macias Pereznieto at JS Monthly London
User Interfaces as Pure Functions of Time - Lightning talk by Thomas Belin at dotjs 2016

Slides

Cycle.js an honestly reactive framework for web user interfaces - by Eryk Napierała
Intro to Cycle.js - by Arye Lukashevki
Reactive Programming with Cycle.js - by Luca Mezzalira
Cycle.js - building apps with streams only - by Luca Matteis
Functional Reactive Programming with Cycle.js - by Sudarsan Balaji
Beyond flux: going full cycle with FRP - by Clément Delafargue

Example Applications

cyclejs/cycle-examples - Official collection of small Cycle.js examples
Widdershin/tricycle ★23 - Scratchpad for trying out Cycle.js, relies on Ace Editor with Cycle
cgeorg/todomvp ★21 - Minimum Viable Pizza, an example webapp written in Cycle.js
erykpiast/cyclejs-examples ★9 - Example web applications built with Cycle.js.
grozen/trends-cycle ★3 - Slack trend searching written in Cycle.js
ivan-kleshnin/cyclejs-examples ★120 - Collection of CycleJS examples, ES6.
ivan-kleshnin/tetris-cyclejs ★12 - Tetris game implemented in CycleJS, ES6
phadej/graafi ★20 - Cycle.js experiment with SVG and global undo/redo http://oleg.fi/graafi/
staltz/matrixmultiplication.xyz ★548 - A interactive matrix multiplication webapp
staltz/rxmarbles ★2,577 - Interactive diagrams of Rx Observables http://rxmarbles.com/
MarcCloud/magic-cart ★6 - Simple shopping cart of a magic creatures store.
foxdonut/cycle-todolist ★11 - demonstrates a simple Cycle.js TODO list app with CRUD.
Mercateo/component-check ★468 - Common patterns for building Cycle.js components
edge/electron-cycle-media ★27 - Media player written with Cycle.js and Electron.
kibin/cycle-example-who-to-follow ★16 - Small example partly implements twitter’s who to follow box using github api.
SkaterDad/cycle-snabbdom-examples ★12 - Examples of nested components, using snabbdom-specific animations.
bahmutov/draw-cycle ★112 - Interactive visualization of counter application showing the data flow inside a MVI component glebbahmutov.com/draw-cycle
andreloureiro/pomocycle ★21 - A simple Pomodoro timer.
laszlokorte/tams-tools ★24 - A set of tools for teaching and learning computer science built with cycle.js.
lucamezzalira/jsday-cycle-js ★16 - Reactive Live London Tube trains status example built with Cycle.js.
cyclejs-community/built-with-cycle ★9 - A website to showcase the cool projects built with Cycle.js
class-ideas/cyclejs-hangman ★10 - A hangman game built with Cycle.js
wmaurer/cyclejs-fractals ★15 - Dancing pythagorean tree fractal - Animating 2048 SVG nodes.
fabiothiroki/cyclejs-starwars ★2 - A Star Wars character search app using Cycle.js, RxJS and Virtual DOM tests.
staltz/mmmmm-mobile ★124 - A React Native + Cycle.js app to implement a social network on Secure Scuttlebutt networks
cyclejs/todomvc-cycle ★214 - TodoMVC example implemented in Cycle.js
jefersondaniel/cyclejs-notes - Notes app using Cycle.js and Orbit.js https://jefersondaniel.com/cyclejs-notes
staltz/dat-installer ★77 - Download, install, and update Android apps through Dat
usm4n/cycle-hn ★25 - Hackernews Clone Using CycleJS
lizraeli/cycle-github-emojis - A github emoji viewer made with Cycle.JS webapp
perjerz3434/meetup.com ★1 - Meetup.com RSVP visualization around the world using CycleJS

Tools

CLI

cyclejs-community/create-cycle-app ★160 - Create Cycle.js apps with no build configuration.

Libraries

Drivers

@cycle/http - A Cycle.js Driver for making HTTP requests, based on superagent.
@cycle/dom - A Cycle.js driver to enable interaction with the DOM. The driver is based on snabbdom as the Virtual DOM library.
@cycle/storage - A Cycle.js Driver for using localStorage and sessionStorage.
@cycle/history - This is the standard Cycle.js driver for dealing with the History API
@cycle/isolate - A utility function to make scoped dataflow components in Cycle.js.
@cycle/time - Fast and beautiful tests and time management for Cycle.js
cyclejs/cycle-notification-driver ★20 - A Cycle.js Driver for showing and responding to HTML5 Notifications.
axefrog/cycle-router5 ★30 - A router driver using Router5
cgeorg/cycle-socket.io ★27 - A Cycle driver for Socket.IO clients
secobarbital/cycle-fetch-driver ★2 - A Cycle.js Driver for making HTTP requests, using the Fetch API.
r7kamura/cycle-fetcher-driver ★14 - A Cycle.js Driver for making HTTP requests using stackable-fetcher.
benji6/cycle-audio-graph ★12 - A Cycle.js Driver for manipulating the Web Audio API using virtual-audio-graph
CyclicMaterials/cycle-hammer-driver ★11 - A Cycle.js driver to wrap Hammer.js and detect touch gestures
jessaustin/cycle-sse-driver ★6 - Source driver for Server-Sent Events/EventSource.
tylors/cycle-snabbdom ★41 - DOM driver using Snabbdom
cyclejs-community/cyclic-router ★90 - Router Driver built for Cycle.js
Widdershin/cycle-animation-driver ★33 - Cycle driver for requestAnimationFrame
dralletje/cycle-firebase ★21 - A Cycle.js Driver for Firebase
edge/cycle-blessed ★46 - A Cycle.js Driver for terminal applications
10clouds/cyclejs-cookie ★2 - Cookies Driver for Cycle.js
whitecolor/cycle-async-driver ★25 - Factory for creating async request/response cycle.js drivers
raquelxmoss/cycle-keys ★35 - Driver for keyboard events
rektide/recyclec ★0 - Readline driver
goodmind/cycle-telegram ★15 - A Cycle.js Driver for Telegram Bot API
apoco/cycle-electron-driver ★22 - Driver to interact with Electron interface from Cycle.js application
rkrupinski/cyclejs-animated-localstorage ★12 - A Cycle.js driver for animating (srsly) localStorage.
cyclejs-community/cycle-keyboard ★9 - A keyboard driver for cycle.js
garrydzeng/cycle-page ★3 - A tiny client-side router for Cycle.js
jbowden1982/cycle-socketcluster ★5 - A socketcluster driver for Cycle.js
cyclejs-community/redux-cycles ★599 - A Redux middleware that allows you to handle actions lifecycle with Cycle.js
JuniperChicago/cycle-gun ★18 - A basic Cycle.js driver wrapping a gun.js instance allowing graph storage and p2p sync
EnigmaCurry/cycle-deepstream ★8 - A Cycle.js driver for deepstream.io
Alex0007/cycle-express-driver ★1 - A Cycle.js driver for Express.js server
mrpierrot/cycle-node-http-server ★4 - A Cycle.js driver for Node.js HTTP(S) server
mrpierrot/cycle-net ★0 - A Cycle.js driver for Node.js HTTP(S)/WS(S)/Socket.io server
Avalander/cycle-idb ★4 - A Cycle.js driver wrapping IndexedDB
unhappychoice/cycle-pusher ★1 - A Cycle.js driver for Pusher
helmoski/cycle-selection-driver - A Cycle.js driver for interacting with the Selection API
mjyc/cycle-posenet-driver ★1 - A Cycle.js drivers for pose detection using TensorFlow.js-powered PoseNet
@cycle-robot-drivers/speech ★1 - Cycle.js drivers for speech synthesis and recognition using Web Speech API
@cycle-robot-drivers/sound ★1 - A Cycle.js driver for playing sounds using HTMLAudioElement

Utilities

staltz/chai-virtual-dom ★24 - Chai assertion helpers to test virtual-dom VTrees
cgeorg/sinject ★10 - a dependency injection tool supporting Cycle's circular dependencies
erykpiast/cyclejs-group ★20 - Utility for CycleJS framework for reducing boilerplate when creating groups of streams.
erykpiast/cyclejs-wc ★2 - Utility for creating Web Components based on Cycle.js
ohanhi/hyperscript-helpers ★390 - elm-html inspired helpers for writing hyperscript or virtual-hyperscript.
pH200/cycle-react ★342 - use React instead of virtual-dom with a Cycle-like API
madcapjake/earlhyperscript ★2 - A helper function and macro for using Earl Grey's document-building syntax with Cycle.js.
WorldMaker/cycle-gear ★4 - A main function factory for Cycle based upon a formalization of Cycle's MVI pattern
SuperManitu/cyclejs-sortable ★15 - Make everything sortable via drag and drop in only one line of code!
atomrc/cyclejs-auth0 ★22 - Everything you need to start playing with Auth0 on your Cyclejs app (Driver + component)
staltz/cycle-onionify ★244 - Fractal state management for Cycle.js apps
maiermic/cycle-storageify ★5 - Augments your Cycle.js component (main function) by storing its onion-shaped state in local storage
shfrmn/cycle-lot - Handle dynamic lists of Cycle.js components with ease (full typesript support)
sarimarton/powercycle - Static VDOM composition and React-like development on top of Cycle.js

Boilerplates

andreloureiro/cyclejs-starter ★50 - Cycle.js starter template with ES6 and Livereload.
Frikki/generator-cyclejs ★2 - Scaffold out a Cycle.js Nested Dialogue module using Yeoman.
edge/cyc ★194 - Scaffold an isomorphic Cycle.js app in seconds.
cmdv/cycle-webpack-boilerplate ★101 - Cycle app with routing, state handling and tests.
Widdershin/cycle-hot-reloading-example ★27 - A Cycle.js starter project with hot reloading using browserify-hmr
mciparelli/cycle-hmr-example ★0 - A Cycle.js starter project using browserify and cycle-hmr
cycle-community/typescript-starter-cycle ★22 - A simple project for getting started with TypeScript in cycle.js, using Webpack. Has settings for Visual Studio Code as candy.
wyqydsyq/unicycle ★6 - A boilerplate universal Cycle app running on a Koa.js server with HMR and ServiceWorkers via Webpack
syarul/cycle-iso ★4 - A barebone boilerplate Cycle app with data stream base on promises and fetched with Falcor.js
snowpack-cycle - Snowpack app template to create Cycle.js projects with create-snowpack-app

Testing

erykpiast/cyclejs-mock ★22 - Utility for testing applications based on CycleJS framework.
jeysal/pretty-format-snabbdom ★0 - A pretty-format (Jest snapshot) plugin for rendering snapshots of snabbdom VNodes as nicely as those of React elements

Debugging

cyclejs/cycle-time-travel ★213 - A time travelling debugger for Cycle.js apps. Displays a stream visualizer that you can drag to go back in time.

Components

erykpiast/autocompleted-select ★10 - Select Web Component with autocompletion. Based on RxJS and VirtualDOM.
enten/cyclejs-calendar ★11 - Calendar component for Cycle.js. Try it online here.
mciparelli/cyclejs-gravatar ★0 - Cycle.js component for rendering a gravatar profile image.
tommy-the-runner/cyclejs-ace-editor ★0 - Cycle.js intergration with Ace Editor using brace. Check an example here.
raquelxmoss/cycle-color-picker ★44 - A Color Picker component for Cycle.js. Check out the example.
cyclejs-community/cycle-svg-pan-and-zoom ★4 - A Google Maps style SVG pan and zoom component for Cycle.js

Community

Gitter chat - Ask 'how do I ...?'

License

Awesome text editing

A curated collection of text editing libraries, services, and resources for the web.

Rich-text editors using contenteditable

Slate - Rich text editor built on top of React and Immutable
TipTap - Rich text editor for Vue.js
Trix - Basecamp's rich text editor
CKEditor - Started back in 2003. Has both iframe and inline style rich-text editing
Squire - HTML5 rich text editor
ProseMirror - From the maker of CodeMirror
Scribe - From the Guardian team
Quill - Quill is a free, open source WYSIWYG editor built for the modern web
Summernote - Bootstrap dependent rich-text editor
wysihtml - Made by Voog
Etherpad - Open Source online editor providing collaborative editing in really real-time
TinyMCE - Used by much of the wordpress and drupal community
Medium.js - Warning: Not actually used by Medium
Textbox.IO - From the makers of TinyMCE
Froala - A simple to use rich text editor, with mobile support, lots of examples, high performance and inline editing
Redactor - Advanced, clean and smooth, Redactor Rich Text Editor offers an excellent immersive user experience
Ritzy - Collaborative web-based rich text editor
Aloha Editor - Open Source browser based html5 enabled rich text editor
WYMeditor - Open Source XHTML editor focusing on semantic markup
Dijit Editor - a Dojo-based rich text editor component
YUI Rich Text Editor - a Yahoo! rich text editor component
KindEditor - Open Source HTML editor
Hallo - Simple rich text editor (contentEditable) for jQuery UI
markitup - universal markup jQuery editor
openwysiwyg - Free cross-browser WYSIWYG editor
tejQuery - Lightweight (19.5 KB) and very useful HTML editor
Trumbowyg - light, translatable and customisable jQuery plugin
NicEdit - Abandoned in 2012
jWYSIWYG - WYSIWYG jQuery Plugin
Alloy - a modern WYSIWYG editor built on top of CKEDITOR
Draft.js - a rich text editor framework for React
MediumEditor - A clone of medium.com inline editor toolbar. Uses contenteditable API to implement a rich text solution.

Code editors

CodeJar - CodeJar is a micro code editor for the browser
CodeMirror - CodeMirror is a versatile text editor implemented in JavaScript for the browser
Ace - Ace is an embeddable code editor written in JavaScript
EditArea
Behave.js - lightweight library for adding IDE style behaviors to plain text areas

Markdown editors

markdown-js - A Markdown parser for javascript
pagedown - PageDown is the JavaScript Markdown previewer used on Stack Overflow and the rest of the Stack Exchange network

Heuristic for contenteditable rich-text editors

Editor should: * Be stable * Be open source * Handle soft breaks * Be able to manipulate styles on block level elements * Be able to manipulate styles on inline level elements * Be able to manipulate classes on block level elements * Be able to manipulate classes on inline level elements * Be able to alter custom attributes on block level elements * Be able to alter custom attributes on inline level elements * Cache the selection * Have iframing capabilities as well as inline mode capability * Change the tag type of nodes * Clear the format * Have a concise api * Support various module loaders * AMD & Common.js * Should have an organization backing the service and have a potential paid support plan * Should copy & paste from Microsoft word

License

Motion UI Design

What is motion design? It's a magic that's alive your interfaces, makes a user feel comfortable with UI changes. It’s curated collection of resources, software, libraries, videos and articles related to motion UI design, UI animations and transitions. Feel free to add something interesting (todo inside) by pull request!

Resources for inspiration
Articles
Software
Helpers
Libraries
- CSS
- JavaScript
- SVG
Web animation performance
Speeches, presentations, videos
Newsletters, podcasts, screencasts
Guidelines
Books

Resources for inspiration

Sites

Tympanus codrops – Interactive demos and experiments.
Codyhouse – Interactive demos and experiments.
Dribbble – Animated shots category on Dribbble.
Codepen – HTML/CSS/JS sandbox.
Give ’n’ Go – A curated gallery of Dribbble shots reworked as interactive CodePen pens.
capptivate.co – A collection of awesome mobile interfaces.
Awwwards – Websites examples of designs with animation.
cssanimation.rocks – CSS animated demos.
michaelvillar.com – experiments by @michaelvillar (Stripe).
hakim.se – Experiments by @hakimel.
ui-animations.tumblr.com – Animations in software user interfaces.
hoverstat.es – A collection of interesting web sites curated by Animade studio.
appealing. – A collection of mobile transitions and animations.
UI Movement - Animated interfaces and newsletter.

Pinterest boards

Gestures, transitions, animations by Yuri Vetrov.
Web UI animation by JRMY LFBV.
UX/UI interaction & Motion design by Matthieu Lerat.
Animated UX/UI by Julien Tilly.
Motion UI by CodeDesign.

Processing and other weird, but funny stuff

Bees & bombs – Processing experiments by Dave Whyte.
PATAKK – Processing experiments by Paolo Zagreb.
dvdp – Visual chinatown by davidope.
bigblueboo – 3d and processing experiments by Charlie Deck.
Misha Kvakin – Cinema4D and UI experiments.

Articles

How fast should your UI animations be? by @valhead.
Getting started with UI motion design by @Molly Lafferty.
A Designer’s Guide to Perceived Performance by @Luke Jones.
How to Use Animation to Improve UX by @Nick Babich.
How To Use Animations and Motion in Web Design by @PageCloud
UI Animation: Eye-Pleasing, Problem-Solving by @Tubik Studio.
UI Motion Design — The Compendium by @Thalion.
Creating Usability with Motion: The UX in Motion Manifesto by @Issara Willenskomer.
Jedi Principles of UI Animation @Adaptive Path.
Micro Interaction; great experience for user engagement @Sneha Munot.
UI Animation. Microinteraction for Macroresult @Tubik Studio.
The Principles of UX Choreography @Rebecca Ussai Henderson.

Software

List of all possible software that can produce UI animations separated by using technologies and result format (video, prototype, code etc) with links of must-see tutorials and plugins.

Video, gif, presentation

Adobe After Effects – The industry-standard animation and creative compositing app lets you design and deliver professional motion graphics and visual effects for film, TV, video and web:
Using After Effects for UI Animation Prototypes (:movie_camera: video).
UI Animation tutorials.
How to Use After Effects for Web Animation Prototypes (:movie_camera: video).
MtMograph summits (:movie_camera: video).
30 days of AE (:movie_camera: video).
After Effects CC Essential Training on Lynda (:movie_camera: video).
BodyMovin – Converter from AE to SVG/canvas.
Squall – Converter from AE to iOS.
Apple Motion – MacOS app for create and edit motion graphics, titling for video production and film production, and 2D and 3D compositing for visual effects.
Adobe Photoshop – Raster graphics editor that can also produce gif UI animations:
9 Photoshop UI Animation Tutorials.
Adobe Flash – Software for creating vector graphics, animations, games etc..
Apple Keynote – MacOS app for presentations, but also great for high-fidelity animations and prototypes:
- How To Prototype UI Animations In Keynote.

Visual programming

Quartz Composer – MacOS app with node-based visual programming language for prototyping MacOS/iOS apps:
The 4 Minute Guide to Quartz Composer (:movie_camera: video).
Introducing Origami for QC.
Origami – A tool for creating modern UI by Facebook.
Avocado – A toolbox for interaction designers.
Form – App with a node-based visual programming language for prototyping apps by Google.
Principle For Mac – MacOS app for create animated and interactive user interface designs.
Floid – MacOS interaction design tool for any platform & device (Web, iOS, Android).

HTML, CSS and JavaScript

Framer studio – MacOS app for prototyping animations by CoffeeScript programming language.
Your first prototype with framer.
Tumult Hype – MacOS app for creating HTML/CSS sites, banners, presentations etc.
Adobe Edge Animation – App for creating HTML/CSS sites, banners, presentations etc:
Prototyping UI Animation.
Adobe Experience Design (ex-Project Comet) – App for creating design, prototype and animation of websites and mobile apps (Preview version).
Google web designer – HTML-based designs and motion graphics.
Animatron – Web app for creating animations, banners, and infographics.
Pixate – Prototyping platform.
SpiritJS – Animation tool for the web (unrealized yet).
Any HTML/CSS editor, libraries ;)

And obvious your secret weapon – Pen and paper!

Helpers

easings.net – Easing functions cheat sheet.
cubic-bezier.com – Cubic-bezier visual tool.
csstriggers.com – List of CSS properties thats trigger repaint, reflow or compositing.

Libraries

Web Animation Infographics – Great (but old) infographic with libraries by used technology.
Bouncy Ball – Comparing animation techniques by showing how to bounce a ball with each one.

CSS

Animate.css – Collections of CSS animations.
Effeckt.css – Collections of UI animations.
Bounce.js – Tool for generate nice CSS keyframes animation from js easing function.
Animations.css - Collection.
Magic animations – Collection.
UI buttons – Collection of buttons.
Hover.css – Hover effects.
Morf – Transitions with custom easing functions.
Awesome CSS3 animations – Library of animations.
All Animation – Set of fun animations to make your project sexier.
CSS Animate – Tool for easy and fast creating CSS3 keyframes animation.
Mantra – Tool for creating keyframes animation.

JavaScript

GreenSock – Ultra high-performance, professional-grade animation for the modern web.
Velocity.js – Accelerated JavaScript animation.
Impulse – High-performance interactions for mobile web.
AniJS – Animations by declared data-attributes.
Snabbt.js – Minimalistic animation library in JavaScript.
Famo.us – High-performance JavaScript library for animations & interfaces.
Processing.js – JavaScript library for Processing visual programming language.
Framer.js – Prototyping tool for designing UI, interaction and animation.
Dynamics.js – JavaScript library to create physics-based animations.
Mo.js – Motion graphics toolbelt for the web.
AnimateTransition – Library for transition of blocks and popups.
Animate Plus – CSS and SVG animation library for modern browsers, performant and lightweight (3KB gzipped), making it particularly well-suited for mobile.
Gravitas.js – Super fast physics simulations for JavaScript.
Popmotion – JavaScript motion engine that makes creating engaging user interactions quick and simple.
anime.js - Lightweight JavaScript animation library.
useAnimations - micro-animations icon library;

SVG

SnapSVG — JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM.
- How to Manipulate and Animate SVG With Snap.svg
BonsaiJS – Lightweight graphics library with intuitive graphics API and SVG renderer.
Vivus.js – Allows you to animate SVGs, giving them the appearence of being drawn.
Walkway.js – Easy way to animate SVG images consisting of line, path, and polyline elements.
Transformicons – Animated icons, symbols and buttons using SVG and CSS.

Web animation performance

Jankfree.org – Collection of articles and presentations about browser performance.
High performance animations.
How to Create Smoother Animations and Transitions in the Browser.
CSS animations and transitions performance: looking inside the browser.

Speeches, presentations, videos

Interface Animations (Mark Geyer) – Workshop on BlendConf 2014.
The future of UX – Animation on the Brain (Rachel Nabors).
Designing Complex SVG Animations (Sarah Drasner, Trulia).
Designing with animation (Pasquale D'Silva) (:movie_camera: video).
Animating Web Experiences (John Allsopp) (:movie_camera: video).
Putting Your UI in Motion (Val Head) (:movie_camera: video).
Motion design with CSS (Val Head) (:movie_camera: video).
Lets move! (Benjamin De Cock, Stripe) (:movie_camera: video).
Animating Your UX (Rachel Nabors) (:movie_camera: video).
Styling and Animating Scalable Vector Graphics with CSS (Sara Soueidan) (:movie_camera: video).
Animating the User Experience (Rachel Nabors) (:movie_camera: video).
Designing meaningful animation (Val Head) (:movie_camera: video).
Functional Animation (Sarah Drasner) (:movie_camera: video).
Animations anew - laziness, arrogance and intolerance (Andrey Sitnik) (:ru: Russian language).

Newsletters, podcasts, screencasts

The UI Animation Newsletter – newsletter with resources plus helpful advice on how to make web animation work for you coming straight to your inbox each month by @valhead.
Web Animation Weekly – newsletter with articles, videos, book reviews, and other goodies pertaining to the wonderful worlds of web animation and motion design by Rachel Nabors.
Motion and meaning – Podcast about motion for digital designers by @valhead and Cennydd Bowles.
All The Right Moves – Animation reviews by @valhead.
UI Movement - best of the week UI animations newsletter.

Guidelines

Android
Material design guidelines: Motion
MacOS
OS X Human Interface Guidelines: Animation
iOS
User Interface Design for iOS 7 Apps (:movie_camera: video)
iPhoto for iOS: UI Progression and Animation Design (:movie_camera: video)
Apple Watch
Specifications: Animations
Windows
- Guidelines for animations
- Microsoft web framework: Motion
IBM
- IBM Design Language – Animation design guidelines
SalesForce Lightning

Books

The Web In Motion: Practical Considerations For Designing With Animation by Smashing Magazine.
Motion Design for iOS by Mike Rundle.
Animation in HTML, CSS, and JavaScript.
Futureproof Web Design Techniques. Interaction Design & Complex Animations by @UXPin.
CSS animations by @valhead.
Designing Interface Animations by @valhead (unpublished yet).

License

Collected with :heart: by Artur Kornakov and these awesome guys

Awesome Vue.js

A curated list of awesome things related to Vue.js - Resources - Official Resources - External Resources - Job Portal - Community - Conferences - Podcasts - Youtube Channels - Official Examples - Tutorials - Examples - Books - Blog Posts - Courses - Documentaries - Projects Using Vue.js - Open Source - Commercial Products - Apps/Websites - Interactive Experiences - Enterprise Usage - A11y - Components & Libraries - UI Components - Table - Notification - Loader - Progress Bar - Tooltip - Overlay - Parallax - Icons - Marquee - Menu - Minus Plus Input - Carousel - Charts - Time - Calendar - Map - Audio / Video - Infinite Scroll - Pull-to-refresh - Markdown - PDF - Tree - Graph - Social Sharing - QR Code - Search - Miscellaneous - Tabs - Form - Phone Number Input Formatter - Pincode Input - Picker - Generator - Date Picker - Select - Slider - Drag and Drop - Autocomplete - Type Select - Color Picker - Switch - Masked Input - Rich Text Editing - Image Manipulation - Video Manipulation - File Upload - Context Menu - Miscellaneous - Wizard - CSV - Comment System - Canvas - Link Preview - Tour - Data Masking - UI Layout - Frameworks - Responsive - Mobile - Component Collections - Admin Template - Server-side rendering - Static website generator - Other - UI Utilities - Event Handling - Responsive Design - Form - Validation - Resize - Scroll - Routing - Lazy Load - Pagination - Animation - Meta Tags - Portal - Filters - SVG - Miscellaneous - WebGL - Fullscreen - Page visibility - Printing - Utilities - Typescript - HTTP Requests - i18n - Custom Events - Persistence - State Management - Redux - Mobx - Pinia - Authentication/Authorization - Vuex Utilities - Sync Between Tabs - GraphQL - Concurrency Management - Code Style - CSS - Asset Management - Page Navigation - Miscellaneous - Web Workers - JSX - Migration - Web Sockets - Server-Sent Events - Payment - Stripe - Paypal - Plaid - Integrations - Vue CLI Plugins - Google Analytics - Yandex Metrika - Dev Tools - Inspect - Docs - Test - Browser-less require - Source Code Editing - Atom - Sublime Text - Vim - Visual Studio Code - Visual Studio - Brackets - Intellij - Emacs - Kate - Scaffold - Client - Universal - Server - Electron - Parts - Runtime - Command Line / Terminal - Prerendering

Resources

Official Resources

External Resources

Vue.js 資料まとめ(for japanese) by @hashrock
Vue.js Newsletter - Weekly dose of handpicked Vue.js news
Vue.js Wikipedia
Vue.js Radar - Curated newsletter + site covering new Vue.js releases/contributions.
Vue News - Social website focusing on the latest Vue.js news and information.
Vue Curated Resources - Recommended Vue.js courses and tutorials.
Vue School - Learn Vue.js from video courses by core members and industry experts
VueDose. Tips & tricks about the Vue ecosystem, for busy devs.
Vuelibs. A minimalistic list of Vue.js libraries and components based on the awesome-vue repo.
Vue.js DEV Community - Official tag for the Vue.js JavaScript Framework on DEV.to
Vue.js Online Courses Directory - Vue.js courses from top e-learning platforms curated by Classpert, a online course search engine.
WebTechSurvey.com - An extensive list of websites created with the Vue.js Javascript framework.
Vue Mastery - The ultimate learning resource for Vue developers
Vue 3 Video Playlist - Amazing Vue 3 tutorials and experiments
Vue.js Workshops - Learn Vue 2, in browser, by building 3 applications: Landing page, Todos App and Podcasts aggregator.( Vue.js, Vue-Router, Vuex, Vue-Axios, Vue-Apollo )
Vue.js Articles - Assorted Vue 2 and 3 tutorials and articles.
Best vue.js Courses On YouTube - Handpicked list of best Vue.js tutorials on YouTube

Job Portal

Vue.js Jobs - VueJobs - A Vue.js job portal to hire or get hired for all your Vue.js jobs.
Vue.js Interview Questions - A List of 300 VueJS Interview Questions and Answers
Prokarman Resume Builder - A Free Resume Builder for crafting resumes for your dream job.

Community

Conferences

Podcasts

Youtube Channels

Official Examples

Tutorials

Learn Vue 2: Step By Step on Laracasts
Vuejs 2 Authentication Tutorial on Auth0 blog
Create a GitHub File Explorer Using Vue.js on Scotch.io
Vue.js Tutorial on Vegibit
Vuex introduction video - James Browne from London Vue.js Meetup #1
Hybrid App Example with Laravel and Vue.js in Portuguese by @vedovelli
Vue.js Introduction Turkish Language on oguzhan.in
Vue.js VideoTutoral Series in Spanish (3-8-2016) on YouTube by Juan Andrés Núñez
Vue.js Screencast Series in Spanish on Styde.net
讲解 Vue.js 官网中文-含代码、百度云、youtube on bhnddowinf
Exploring Real Time Apps with VueJS, ES2015 and Webpack on Pusher
Vue.js in Bahasa Indonesia on sekolahkoding.com
Vue.js from Scratch Series in Russian on YouTube by .dev
Створення сервісу для зберігання файлів з Flask, RethinkDB та Vue.js, ч. 1 Ukraine
VueJS 2 French tutorial Français par Grafikart
Jayway Vue.js 2 workshop. Build an e-commerce site with vue-router, vuex and vue-resource
How to Create Great VueJS Applications Using Wijmo Controls
讲解 Vue.js 2 官网中文-含代码、百度云、youtube on bhnddowinf
Medium like Image Loading with Vue.js
How to Use Vuex in a Laravel Spark Project on Metric Loop
How To Set Up Modules in Vuex on Metric Loop
Up and Running with the Vue.js 2.0 Framework on SitePoint
How to make API Calls with Vuex on Metric Loop
How to Use Vuex to Build a Feature on Metric Loop
Vue.js 2.0 Fundamentals on YouTube by DevMarketer
Vuex For The Clueless — The Missing Primer On Vue’s Application Data Store
Real-time Grid Component Laravel, Vue.js, Vuex & Socket.io
VueJS 2 - The Complete Guide (incl. Vuex) - Udemy Tutorial
Develop Web Apps with Vue.js on egghead.io
Vue.js 2 - Getting Started
Vue.js 2 & Vuex (Basics)
Türkçe VueJS Eğitim Videoları on YouTube by Fatih Acet
Let's Vue! - OpenLecture 2017.01 in Russian on YouTube by Illya Klymov (@xanf)
Bootstrapping your first Vue.js application using vue-cli by @afropolymath
Build vue-hackernews-2.0 from Scratch by @ Detachment
Role Based Authorization for your Vue.js and Nuxt.js Applications Using vue-kindergarten
Complete Vue.js Application Tutorial - Creating a Simple Budgeting App with Vue by @matthiaswh
Vue.js Tutorial: A Prerendered, SEO-Friendly Example
Vue.js Introduction For People Who Know Just Enough jQuery To Get By
Fetching Data from a Third-Party API with Vue.js and Axios
Fun Projects with Vue 2 (Video) by Peter van Meijgaard, Packt. (April 2017)
Vue JS: Simultaneously Running Express and Webpack Dev Server on Medium by Henrik Fogelberg
Vue JS 2 Tutorials on Youtube by The Net Ninja
Add a headless CMS to VueJs in 5 Minutes
vue 架构中的 Watcher
Building Your First App With Vue.js
5 Practical Examples For Learning Vue.js
Migrating from KnockoutJS to VueJS
Create a quiz with Vue.js by @rap2h
Vue.js 2 & Firebase - Building Real Time Single Page Web Applications
Vue.js 2 & Vue-Resource - Real-World Application With External API Access
Interactive Vue.js Screencasts For Beginners
Vue.JS ile NASA API'ını Kullanarak Veri Çekme on YouTube
Web development with Vue.js 2 (Video) by Olga Filipova, Packt. (June 2017)
Build a realtime chart with VueJS and Pusher
Intro to Vue, repo for Frontend Masters Course
Vue Guide on CSS-Tricks
Using Typescript in your VueJS app
Vue.js 预览 on ninghao.net
Building a Vue v2 JS app using Vue-router
Build your own carousel with Vue by @Atom_Hernandez
Unit Testing Vue.js Components with the Official Vue Testing Tools and Jest by @alexjoverm
Creating Vue.js Transitions & Animation: Live Examples by @udyuxdev
Creating Custom Vue.js Plugins
Async in VueJS part 1
Async in VueJS part 2
Using localStorage with Vuex store without a plugin
Using props for accessing URL parameters within components with Vue Router
Deploy Vue.js — SSR(Vuetify) on Production with Pm2 and Nginx
Testing Vue Components on laracast
Building a Full Stack Web App with Vue.js and Express.js by @CodyLSeibert
Vue.js 2 Recipes (Video) by Peter van Meijgaard, Packt. (September 2017)
Getting Started with Vue.js
Building Your First Advanced CRUD Application with Vue 2 (Video) by Peter van Meijgaard, Packt. (July 2017)
프론트엔드 개발자를 위한 Vue.js 입문서
누구나 다루기 쉬운 Vue.js (Video) on Inflearn by Captain Pangyo
Build a Vue.js Blog in 2 hours tops on Snipcart
Getting Started with VueJS 2 by Sachin Bhatnagar @sachinbee on Udemy
Getting Started with Vuex: Managing State in Vue.js
Vue2 ACL using CASL by Sergii Stotskyi
Vuejs 2.5+ Authentication Tutorial using Auth0 on Storyblok blog
GraphCMS introduction guide with Vue on GraphCMS
Vue.js debugging in Chrome and VS Code This recipe shows how to use the Debugger for Chrome extension with VS Code to debug Vue.js applications generated by the Vue CLI.
Getting Started with Vue JS 2 (Video) by Sachin Bhatnagar, Packt. (January 2018)
Building a movie app interface with Vue.js
Let’s Build a Custom Vue.js Router
Build a Vue.Js E-Commerce App with ButterCMS Headless Backend
Build a voting application with Go and Vue.js
Build a collaborative painting app using Vue.js
Build a realtime payment dashboard with Stripe
Build a cryptocurrency tracker using Vue.js
Build a design feedback app using Vue.js
Developing a Single Page App with Flask and Vue.js
Accepting Payments with Stripe, Vue.js, and Flask
API Driven Development With Laravel and VueJS (Free Course) on serversideup.net
Managing State in Vue.js
Real World Projects with Vue.js by Daniel Khalil, Packt. (August 2018)
Heartbeat (Vue + NW.js Video series) by @ackzell (2017 - 2018)
Firebase Server-Side Render Vue Apps with Nuxt.js (Server-side Rendering with JavaScript Frameworks)
Firebase Measuring Vue SSR Performance with Nuxt.js (Server-side Rendering with JavaScript Frameworks)
Creating an interactive map with D3 and Vue (October 2018)
The guide to write universal, SSR-ready Vue components
Vue.js Fundamentals
Vuex for Everyone
Vue.js Form Validation
The Vue.js Master Class
Vue.js Firebase Realtime Database
Vue.js Firebase Authentication
Dynamic Forms with Vue.js
Custom Vue.js Directives
Vue.js Application Development Essentials by Bartłomiej Potaczek, Packt. (October 2018)
Troubleshooting Vue.js by Christian Hur, Packt. (October 2018)
Nuxt.js - Vue.js on Steroids by Maximilian Schwarzmüller, Packt. (October 2018)
Building an Electron File Explorer with Quasar (and Vue) by @hawkeye64. (November 2018)
Build Web Apps with Vue JS 2 & Firebase on Udemy by the Net Ninja
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex) on Udemy by Maximilian Schwarzmüller
SPA Application using Vue.js, Vuex, Vuetify, and Firebase (Part 1) (November 2018)
SPA Application using Vue.js, Vuex, Vuetify, and Firebase (Part 2) (November 2018)
SPA Application using Vue.js, Vuex, Vuetify, and Firebase (Part 3) (November 2018)
SPA Application using Vue.js, Vuex, Vuetify, and Firebase (Part 4) (November 2018)
Adding Internationalization to a Vue Application (November 2018)
Practical Projects with Vue JS 2 by Jack Herrington, Packt. (December 2018)
Vue.js 기초 다지기 (Video) by Lessipe
Full Stack Web Development with Vue.js and Node.js by Haider Rehman, Packt. (January 2019)
Vue for Designers by Design+Code (February 2019)
Vue Introduction in Turkish
Data pulling using Vue-Resource in Turkish
Spa Application using Vue-router in Turkish
Create Vue Projects using Vue-cli in Turkish
Messaging between Vue components and Vuex in Turkish
How to Dynamically Add a Class Name in Vue by Michael Thiessen
Build a Library web application with Vue JS, Node JS, and SQL or MongoDB using ScaffoldHub By Felipe Lima @scaffoldhub_io
Building a Realtime Location tracking app with NativeScript + Vue by Saibbyweb
Vue: Getting Started, by John Papa on Pluralsight
Building a Simple Pre-Rendered Web App Using Vue + Nuxt by Michael Lynch
Vue and GraphQL with Hasura video course
Frontend and Fullstack VENM-stack coding tutorials by RabbitWerks JavaScript
Nordschool Vue Tutorials
Vue Props Validation - Best Practices
Vue Router - The Complete Guide
Enable VS Code Debugger for Nuxt & Typescript
Create A Blog With Gridsome & Vue
Building an Imgur Clone with Vue.js and Serverless
Building a HackerNews clone in Vue.js on AWS
Vue.js: Build a Full Stack App with Firebase, Vuex and Router [Video] by Chris Dixon (October 2019)
Vue.js 2 Academy: Learn Vue Step by Step [Video] by Chris Dixon (October 2019)
Blazing-Fast Vue and GraphQL with Gridsome [Video] by Reed Barger, Packt
Build Your First Vue.js App in About 30 Minutes by Rad Devon (Video, February 2020)
How to make your components dynamic in Vue JS (September 2019)
Fragments in Vue JS (December 2019)
Build a movie search app using the Vue Composition API
Vue Testing Crash Course
Sharing and re-using Vue Mixins in the cloud with Bit.dev (May 2019)
Using Watchers in Vue JS (June 2019)
Understanding Filters in Vue JS (June 2019)
Form Validation In VueJS Using Yup by Vijit Ail (May 2020)
Use Vue.js to Rewrite React's Official Tutorial Tic Tac Toe By Chanvin Xiao
Can we use Python with Vue.js or Vue and Django or Flask?
MDN - Vue tutorials
Learn Vue 3 for Beginners - Full 2020 Tutorial Course on Youtube
Vue 3 Composition Api Introduction - Full Tutorial
Building a VueJS chat app with realtime storage of messages in Airtable by Srushtika Neelakantam (December 2020)
Building a realtime quiz with VueJS using a starter kit by Srushtika Neelakantam (October 2020)
Make an Heart clicker with vue.js and firebase
Building an E-Commerce app with Vue.js, Vuex & Axios by Deven Rathore ( November 2020)
Vue.js Debugging: A Guide to Fixing Your Frontend - Learn the basics of Vue.js debugging. This guide will walk you through a tutorial on how to fix your application's frontend.
Help you learn more efficiently vue3 source code - mini-vue by cuixiaorui
Vue.js SPA: Build a Powerful E-Commerce App
Learning Vue 3.0
Vue 3.0 and decentalized app (dApp)
Vuejs Authentication Tutorial on LoginRadius blog
Add a prebuilt video chat widget to any Vue app with daily-js by Jess Mitchell, via Daily (August 2021)
Build a custom video chat app with daily-js and Vue by Jess Mitchell, via Daily (November 2021)
Vue Pwa: Build a Progressive Web Application With Nuxt on Snipcart

Examples

Node Webkit + Vue example by @brandonjpierce
Vue Samples by @superlloyd
HackerNews clone with vue.js + vue-router by @kazupon
Electron + Vue example by @bradstewart
Single page application example (Vue + Voie) by Boris Okunskiy
Begin - Task Manager SPA written in Vue + Lumen by Raj Abishek
Vue Mini Shop
Vue SoundCloud by mul14
Feature Requests (Laravel + Vue Combo) by haydenbbickerton
Vue Cookbook (Vue1.0 + express) by @yjj5855: A demo first screen rendering of a service
Strong Together - A starter project to build single page Vue.js apps as stand-alone or for Laravel / Laravel Spark projects, based on Browserify and Semantic-ui) by WebSemantics
vuetest: an ad admin web with user auth, bootstrap ui, uploader, WYSIWYG editor in iframe
vue-shopping by andylei18
Vue-cnodejs,060 by @shinygang
vue-zhihu-daily by hilongjw
VueChess - Multiplayer online chess game
Ngexplorer-vuejs-client - Vue client for Ngexplorer
Vue 2048 (Vue + Webpack) by @pengfu: Popular 2048-Game implemented using Vue,Webpack,Sass,ES6
Vue Simple PWA
Tour of Heroes (Vue 2.0): A Vue 2.0 port of the Angular 2.0 Tour of Heroes demo app. Highlights: ES6/7, render functions, JSX, revue (redux bindings for Vue), vue-router, Airbnb eslint, webpack. by @aweber1
vue-table-pagination A table with pagination by echovic
Feathers and Vue 2.0 Blog Admin Demo Demo for using Feathers with Vue 2.0. It includes authentication, vue-router, vue-infinite-loading and roles by delay
vue-zhihudaily-2.0 Zhihudaily demo built with Vue 2.0, vue-router & vuex, with server-side rendering. by cs1707
vue-demo-todolist a simply vue2.0 demo built with Vue 2.0, vue-cli. by fishenal
vue-AdminLte by liujians
Vue(2.0) + Node.js: A blog content manage system (CMS) by @ycwalker
ngexplorer-quasar -Implementation of Ngexplorer with quasar framework
zhihu-daily-vue a zhihu daily base on vue2.0 by moonou
loopback-vue loopback+vue+vue-resource,ionic-app,vue page 分页功能,authenticate 权限控制,accesstoken 机制,credentials,CI,docker qxl1231
vue-s3-dropzone A Vue.js drag-and-drop component uploads files to AWS S3 serverlessly
easy-vue a easy example using the vue to implement easy web with vue 2.0, vuex 2.0, vue-router 2.0, vue-infinite-scroll 2.0, vue-progressbar 2.0 by TIGERB
Vuex Events Messaging Demo by Metric Loop
vue-memo a simple demo build with Vue.js(>2.x.), vue-router(>2.x.), vuex(>2.x.), vuex-router-sync@next(>3.x.) and Firebase(>3.6.x) by akifo
Resume Vue JSON based Resume based on Vue 2.0 by ChangJoo Park
App example with JWT Authentication developed with Phoenix Framework, Vue and Vue Router (demo)
Sample CRUD app with router in Vue 2.0 by @shershen08
ASP.NET Core Vue.js server-side rendering sample by @mgyongyosi
vuefire-quickstart - Documented Firebase integration w/ webpack and eslint, by @sejr.
hello-vue-django Vue.js and Django integration starter project with hot code reload
Real Time Social News App developed with Phoenix Framework, Vue, Vue Router and Vuex (demo)
vue-calculator a simply calculator built with Vue 2.0, vue-cli(webpack-simple).
Wikipedia-viewer A simple wikipedia-viewer page built with vue2.x ,vue-router,vue-cli(webpack-simple) and ajax(jsonp).
vue2.x-douban A simple of douban movie build with vue2.x,vue-router and axios(豆瓣电影). by Superman
vue-laravel-example Vue - Laravel - Example is a simple example to set Vue with Laravel. by Jiajian Chan
vue-foundation A demo app integrating VueJS with Zurb Foundation, built using the webpack vue-cli f
aspnetcore-Vue-starter A VueJS 2 starter template as part of an asp.net MVC dotnetcore project. This template includes the VueJS client app and a backend API controller.
vue-reddit-app A Reddit SPA demo built with Vue 2.X , Vue Router 2 , Vuex and axios. Using Muse-UI and vue-cli webpack template by @yujiahaol68
vue-music-qq A qq-music project is based on vue-cli. The pages are simple and smooth
NavigationTab with Vue-Redux and Plain VueJSX Navigation Tab with both plain Vue JSX and Vue + Redux Binding
Veggie Map An interactive demo using Vuejs + Vue router + Leaflet and Firebase
vuejs-d3 examples how to use d3 for visualisations.
vue-twitter-client A Twitter Client App build with Vue 2.X, Vuex, electron-vue and Electron
Douban Awesome douban Example created with Vue2.x + Vuex + Vue-router + vue-resource. by jeneser
Storyblok vuejs-boilerplate - Integrates Storyblok's Component System, allows to create editable Websites.
Vuexpresso - A boilerplate using VueX, Vue-Router, Vue-Apollo, webpack, GraphQL, Apollo-client, express and mongo
Vue.js with Sails.js example project - This project is for those who are new to single-page applications and want to learn through a real example.
Vue.js & Pyramid web framework app - A boilerplate using Pylons Pyramid webframework backend Vuejs webpack2, vue-router, yarn(packet manager)
vue-feathers-chat A sample realtime chat made with Vue in frontend and Feathers in backend, but using just Socket.IO-Client for the communication
vue-xplan A rotating earth demo page created with Vue and three.js
vueSocketChatRoom A socket chat room using vue2.x,vuex2.x,vue-router2.x,vux2.x,socket.io
vue-tetris (Use Vue, Vuex, Immutable to code Tetris) by @Binaryify: Use Vue, Vuex, Immutable to code Tetris.
route-planner-vue by @Kasheftin: The tool for planning routes with multiple sortable layers, draggable directions, markers and shapes on google map.
MyDiary-Vue A diary application build with Vue 2.X which is also have contact and todolist function
VueJS Example Projects on Github
todo-mvc-webpack by voluntapear TodoMVC implementation on Vue 2 using the webpack-basic template with examples showing vuex, vue-router, central event bus and VueFire.
Chess Storybook Example with Vue 2.0
Vue Weather Notifier A small sample animation app with SVG and Vuex
VueBlog A blog system supporting service side rendering by wmui
Cinemateka - An example of SPA made with Vue v1 & Laravel 5. Film & events schedule. Russian comments.
vue-2.x-boilerplate - A simple and small starter kit for a Vue project Vuex + vue-router
vue-minesweeper - A deadly simple minesweeper game with vuejs by rhapsodyn
X-Flowchart-Vue - A flowchart editor with SVG and Vue
koa-vue-notes-web - A fleshed-out SPA using Koa 2.3 on the backend and Vue 2.4 on the frontend. Includes fully featured user-authentication components, CRUD actions for the user's notes, and Vuex store modules.
Vuejs Shopping Cart - Shopping cart example using Vuejs and Firebase
PokedexVueJs by @rchung95
vuefire-auth A Vuefire Vue2-Auth-Email Verification with Firebase
vuefire-realtimedatabase A Vuefire Vue2-RealtimeDatabaseCRUD with Firebase
vuefire-storage A Vuefire Vue2-Storage with Firebase
Vue2-PWA-Blog by @deepak-singh
vue-firebase-auth-vuex A Vue2 Firebase Authentication with Vuex and support Progressive Web Apps
vue-chart-stater-kit Quick starter using Vue Router, Vue Chart, Element-UI
vue2.0-demos using mint-ui, Element-UI,And have Some demos（select city and so on）
conway Conway's Game of Life in Vue.
vuex-feature-scoped-structure An example application of the feature scoped vuex application structure
vuex-examples - Simple Examples on using Vuex to build Real World Apps
vue-vuex-todomvc - Example TodoMVC Vue.js app with Vuex store and server backend via REST and full set of E2E tests using Cypress.io test runner.
vuejs-sqljs-boilerplate - This is a boilerplate to use both Vue.js and sql.js together
X-WebDesktop-Vue - The WebDesktop system based on Vue
vuejs-music-player - A Vue.js lite music player
Vue.js Best Practices Example Project - A best practices example project using Vue.js + Vue Router + Vuex + Vuelidate
Vue.js [ONE] client - [ONE] client written with Vue2.5
Vue.js 2.5 with vue-cli v3 including authentication with auth0 by Dominik Angerer, Storyblok
Skeleton Vue+TypeScript - TypeScript, VueJS, ElementUI, Vue Router, Vuex, Material Icons, BrowserSync, Dockerfile
PENV Starter - A basic example of how to use VueJS, Express and PostgreSQL in conjunction.
vue-relay-examples - A collection of example applications using vue-relay.
laravel-vue-boilerplate - A Laravel 5.5 SPA boilerplate with a users CRUD using Vue.js 2.5, Bootstrap 4, TypeScript, Sass, Pug and Jest.
Vue Design System - An open source boilerplate for building UI Design Systems with Vue.js.
Vue Bulma Demo - A simple demo website to check out Bulma / Vue JS & express in conjunction.
Starter application ready for production with TypeScript, vuex, vue-router, HMR and more
vue.js 与 laravel 结合的前后端分离开发模板- A template website to laravel passport / Vue.JS & Element UI.
Hands-On Web Development with Vue.js by Roman Kuba, Packt. (May 2018)
Vue Online Shopping Mall - A online shopping mall SPA demo, 基于 VUE 开发的前后端分离电子商城前端项目
FUE - Admin SPA client and server-side boilerplate with Vue.js + Vue Router + Vuex + Vuetify + FeathersJS
Vue + TypeScript Cookbook - A small cookbook covering some less-than-obvious solutions for people getting started with Vue + TypeScript
Vuejs Examples
ASP.NET Core Vue Starter CLI 3.0 A Vue starter template using Vue CLI 3.0 with custom configuration (default TypeScript, Vue, Router, Vuex, Vuetify) integrated with ASP.NET Core by @SoftwareAteliers (September 2018)
vue-soundcloud A Soundcloud client built with Vue.js 2, by Soroush Chehresa
vue-cart A simple shop cart made with vue, vuex and vue router. by crisgon
Nuxt + Apollo + Element A Vue.js SSR boilerplate with Nuxt, Element (custom theme) and Vue Apollo.
vue-daily-zhihu a simple demo build with Vue 2.0 & vue-router & vuex by walleeeee
Multi-page ASP.NET Core Vue with TypeScript - Multi-page ASP.NET Core Vue, Typescript, Vuex, Vue router, Bulma, Sass and Jest application. Template/starting point on how to use Vue.js as a multi page(multiple mini spa's) application in .NET Core MVC.
CION - Design system boilerplate for Vue.js - A design system build primarily for Vue.js applications. It utilizes design tokens, a living styleguide with integrated code playgrounds and reusable components for common UI tasks.
Vue websockets example - A basic example of Websockets usage with Vue.js 2 + Node project for full working example.
Vue(2.0) + Node.js: A blog by @FatDong1
vue-todo-list ToDo List sample app based on Vue + Vuex + Vuetify + Vee-Validate
Vue.js and Ionic v4 examples - A set of examples of how to use Ionic v4 with Vue.js
Personal Website that use Vue, Vuex and Vue-Router - A simple website example that made with vue, vuex and vue-router by Muratcan Şentürk
Client-Side Vue.js - Demo - Vue.js client-side for tiny, quick-loading, node.js-less Single Page Apps by Justin Wash
Large scale Vue.js application boilerplate + Vuex - A boilerplate for starting large scale, flexible Vue.js application with using Vuex as state management - by Arun Redhu
Snake game on Vue.js without Canvas
A one-on-one chat app in Vue with CometChat
Vue webpack typescript Boilerplate with sass/ts/sfc linters. Full typesafety including vuex and nice looking vue component with vuex-module-decorators, vue-property-decorator
Laravel + Nuxt.js boilerplate - by @acidjazz
Add Push Notifications to Your Vue Chat App Using CometChat and Firebase
TO - A social media app that allows you post just texts.
All-About-Me - A Social Media Web App built with Vue, Firebase (Firestore/Auth/Storage), Element-UI, Disqus, Vuex, Vue-Router, and Sass. Supports image uploading, profile editing, add/remove friends, and comments.
Vue Voyagers 👽 Space Travel - A Vue.js Gamified example SPA that consumes a REST API. It presents infographics via D3.js, animation, and web audio.
TodoMVC Vue 3 Composition API - A complete TodoMVC implementation in Vue 3 Composition API with components, store, unit e2e tests and linting.
TodoMVC Vue - A complete TodoMVC implementation in Vue 2 with components, store, unit e2e tests and linting.
Movie search app with Composition API - A movie search app implemented in Vue 2 with the Composition API plugin
Nuxt with JWT authentication via OTP - A Nuxt.js boilerplate with basic register and OTP-enabled login functions.
vuetify-i18n-boilerplate - Demo - A boilerplate to quickly start a Vue project using Vuetify, Vue-i18n, Vuex and Vue-router
Google Keep Clone with Vue + Firestore - Google Keep clone with Vue and Firestore written in TypeScript.
Go-echo-vuejs-boilerplate - Boilerplate that uses go with echo framework as a backend and vuejs that serve the web traffic.
Vue-Next-TicTacToe - Simple Tic Tac Toe Game made with Vue Next
Vue 3 example without Webpack - An example of how to build a Vue app with Vue-Router without the need for Webpack or any other build tool. Includes the ability to prerender components and pages with Vue Server Renderer.
COVID19 Live Data Component - Simple component that shows live covid19 data across the world.
vue-stack-cesium - A minimal sample configuration project with CesiumJS and all the awesome vue features. The project contains many examples how to combine and use certain packages to get started.
Shopify Theme Lab - Shopify theme development starter using Vue, Vuex and Tailwind CSS
Peer to Peer game of telephone - A party game for 4 to 8 players (ideally!) where you mutate a phrase through drawings and captions, to make up funny scenarios with your friends. The project is an example of how to build a Peer-to-Peer game with Vue.
vue3-webpack vue 3 + webpack 4 starter.
laravel-vue-3-starter a pre-configured project using Laravel 8 and Vue 3.
Vuetify Swipeout - A swipe out example built with Vue 2 + Vuetify + Swiper.
Vuetify Todo PWA - A simple Todo PWA built with Vue 2 + Vuex + Vuetify.
Vue Todo PWA - A simple Todo PWA built with Vue 3 + Vuex + Bootstrap 5.
Vue simulating - A website simulating linux system's GUI, using theme of Deepin distro. Using vue + tailwindcss + animate.css.
Vue Word Game - A simple Hangman-like word guessing game, built with Vue 2.
Coinchartsvue - Coinchartsvue is a cryptocurrency price chart based off Coinbase's original price chart.
Vue 3 Shopping Cart - A Shopping cart example using Vue 3, Vite, daisyUI and Pinia.
vuemoji-picker - Vue 2 and 3 lightweight emoji picker.
Maxim Web Chat - A chat demo using MaximTop's IM SDK (floo), 使用美信拓扑 IM SDK 实现的聊天App 示例.
vue-cli-3-tailwind-axios-starter - A boilerplate using Tailwind, Axios-ready, Vuex and Router
vue-cli-3-wave-ui-starter - A boilerplate using Wave UI + Vuex and Router
CVue-Awesome Auto Resume Builder by Emre Coşkunçay
Vue 3 TypeScript Library Template A simple but complete library template for Vue 3, supports generating .vue.d.ts
Customizable Vue video chat app - A Vue video call demo app featuring local device controls and screen sharing.
Vue3-Starter A boilerplate with an opinion on how to structure your files/folders with a few examples such as Vue Router navigation guards, theming with TailwindCSS, form validation w/ Vuelidate, localization with Fluent, etc.

Books

The Majesty Of Vue.js by Alex Kyriakidis & Kostas Maniatis, Packt. (Nov 2016)
Learning Vue.js 2 by Olga Filipova, Packt. (Dec 2016)
The Majesty Of Vue.js 2 by Alex Kyriakidis and Kostas Maniatis, Leanpub. (Mar 2017)
Vue.js 2 Cookbook by Andrea Passaglia, Packt. (May 2017)
Vue.js in Action by Erik Hanchett and Benjamin Listwon (Spring 2018)
Testing Vue.js Applications by Edd Yerburgh (Summer 2018)
Vue.js 2 and Bootstrap 4 Web Development by Olga Filipova, Packt. (September 2017)
Front-end com Vue.js by Leonardo Vilarinho, Casa do Código. (November 2017)
Vue.js 2 Web Development Projects by Guillaume Chau, Packt. (November 2017)
Full-Stack Vue.js 2 and Laravel 5 by Anthony Gore, Packt. (December 2017)
Vue.js 2.x by Example by Mike Street, Packt. (December 2017)
Mastering Vue.js by Oleksandr Kocherhin. (January 2018)
Fullstack Vue: The Complete Guide to Vue.js by Hassan Djirdeh, Nate Murray, & Ari Lerner. (March 2018)
Vue.js 2 Design Patterns and Best Practices by Paul Halliday, Packt. (March 2018)
Vuex Quick Start Guide by Andrea Koutifaris, Packt. (April 2018)
Full-Stack Web Development with Vue.js and Node by Aneeta Sharma, Packt. (May 2018)
The Vue Handbook by Flavio Copes. (July 2018)
ASP.NET Core 2 and Vue.js by Stuart Ratcliffe, Packt. (July 2018)
Vue.js: Construa aplicações incríveis by Caio Incau, Casa do Código. (September 2017)
Getting to Know Vue.js by Brett Nelson, Apress. (August 2018)
Vue: Build & Deploy by Daniel Schmitz, Leanpub. (September 2018)
Building Applications with Spring 5 and Vue.js 2 by James J. Ye, Packt. (October 2018)
Vue.js Quick Start Guide by Ajdin Imsirovic, Packt. (October 2018)
Vue.js Component Patterns Course by Frederik Dietz (April 2019)
Vue.js: Understanding its Tools and Ecosystem by Dave Berning (November 2019)
Building Forms with Vue.js by Marina Mosti (October 2019)
Testing Vue.js Components with Jest by Alex Jover Morales, Packt (October 2019)
Vue.js by Chris Minnick and Nat Dunn, Webucator (February, 2020)
Become a Ninja with Vue 3 by Cédric Exbrayat (English and French versions) (May, 2020)
Large Scale Apps with Vue 3 and TypeScript Damiano Fusco, Leanpub (September, 2020)
Vue - The Road To Enterprise Thomas Findlay (January, 2021)
Accessible Vue – Get started with Accessibility in Vue.js! by Marcus Herrmann (March 2021)
Building a Strapi E-Commerce: Nuxt.js Tutorial & Live Demo (September 2021)

Blog Posts

Courses

Learn Vue by Building and Deploying a CRUD App - This course is focused on teaching the fundamentals of Vue by building and testing a web application using Test-Driven Development (TDD).
Advanced Vue.js Features from the Ground Up - Learn how to build more accessible routing, state management, form validation and internationalization libraries from the ground up!
Become a Ninja with Vue 3 - This course teaches how to build a complete application with Vue 3, step by step, using Vue CLI, TypeScript and the Composition API. Each exercise comes with instructions and tests to check 100% of your code.

Documentaries

Vue.js: The Documentary by Honeypot (Feb 2020)

Projects Using Vue.js

Open Source

PageKit - Modular and lightweight CMS built with Symfony components and Vue.js.
npmcharts.com - Compare npm packages and spot download trends.
Koel - A personal music streaming server that works.
Raven Reader - Simple RSS Reader made using atom electron and vue.js.
Gokotta - A simple music player built by electron and vue.
CoPilot - An admin portal based on AdminLTE with vue.js integration.
Retrospectify - A simple tool for doing collaborative retrospectives in agile teams.
jade-press - Cms based on mongodb, nodejs, koa, vue and more.
astralapp - Organize Your GitHub Stars With Ease.
EME - An Elegant Markdown Editor.
Github-explorer - A spa which can help you check your github in a better way.
Hotel - Start your dev servers from your browser and get local domains in seconds.
Surfbird - A Twitter client written with modern web technologies.
Approach0 - A math-aware search engine.
Flox - Self Hosted Movie, Series and Anime Watch List.
JavaScript Guessing Game - A game for identifying JavaScript tools and libraries.
vue-ghpages-blog - A blog based on GitHub pages by Vue.js 2 + Webpack 2.
Vuedo - Blog platform, built with Laravel and Vue.js.
vue-music163 - A Vue.js project for music.
Tomato5 - Real-time collaboration tool, it combines Pomodoro Technique with a team status share board.
Web Learn - A service which provides simple access to thousands of video tutorials on web developing and programming.
ExcelJSON - A tool to convert CSV, TSV to/from JSON.
Materialize-blog - A material blog built with Laravel5.3 and Vue2.x.
VueComponentGenerator - Generate vue single file component on browser.
SDR News - News for web designers and developers aggregated from multiple sources (Reddit, Hacker News and Prominent Blogs).
PJ Blog - Open source blog built with Laravel and Vue.js.
Lulumi-browser - Lulumi-browser is a light weight browser coded with Vue.js 2 and Electron.
vue-wordpress-pwa
OpenAPI 3 viewer - Browse and test a REST API described with the OpenAPI 3.0 Specification
Stacer - Linux System Optimizer and Monitoring
Distrochooser.de - An orientation guide for Linux beginners
Buka - EBook Management
Docute - A framework for writing documentation without build process
nativescript-vue - A Vue.js implementation of the NativeScript renderer.
piper - A drag-and-drop mobile website builder base on Vue.
mmf-blog-vue2 - A blog based on Vue2(Vue-router, Vuex) and Webpack2.
Media Manager - Web File Manager.
dyu/bookmarks - A self-contained, self-hosted bookmarking app powered by leveldb, built with Vue2.1.x.
JSON Schema Editor - An intuitive editor for JSON schema. Develop with Vue.js 2 and Firebase.
npm-stats - npm package download statistics dashboard
vue2-admin-lte - a project that converts AdminLTE to work with Vuejs (v2.x).
Dockeron - A project built on Electron + Vue.js for Docker on desktop.
Flamme - An open source Tinder desktop client built with electron and Vue.js for educational purposes
Goldfish - A HashiCorp Vault UI built with VueJS, Golang, and Bulma CSS
promptie - A framework written in Vue.js for creating command-line like interfaces in web browsers.
Hare - 🐇 Application boilerplate based on Vue.js 2.x, Koa 2.x, Element-UI and Nuxt.js
Paper-Dashboard -Creative Tim Paper Dashboard made for Vue
AdminLTE-VueJS2 - An open source project that implements VueJS (v2.x) on AdminLTE.
Material Dashboard - Creative Tim Material Dashboard made for Vue
Explore-Github - VueJS 2 Github Explorer Using API v3
CoreUI Vue Admin Template - Open Source Admin Template powered by Vue.js
ChuckNorris - Chuck Norris Jokes Generator built with VueJS + api.chucknorris.io
LeafPlayer - A simple and fast, privately hosted music streaming server.
JSON Editor - A schema-aware JSON editor. Develop with Vue2.
Voten - A Reddit-like platform built with Vue2 and Laravel.
News Weaver - A web based RSS Reader/Aggregator made using VueJS and VuetifyJS
Wake Up Billie Joe! - A web site countdown to October, based on Green Day's song Wake me up when September Ends. Created using Vue and Firebase.
Astrum - A lightweight pattern library designed to be included with any web project.
vue2-pwa-vision - A Face Detection Google Cloud Vision with Vue2 + Vuetify + Progressive Web App
vue2-pwa-rekognition - A Face Detection Amazon Rekognition with Vue2 + Vuetify + Progressive Web App
AmmoBin.ca - meta search site for online ammo prices across Canada
SPA-asp.net-api-vuejs- - A Vue.js single page application for basic task Management & messaging using ASP .NET Webapi 2 and SQL server
Book-Trading-Club - Trade or loan books with other book readers in your area. Built using nodejs and vuejs2
vuejs-extension-pack vscode - An extension packf or vscode with popular VS Code extensions for Vue.js development.
Wiki.js - A modern, lightweight and powerful wiki app built on NodeJS, Git and Markdown
vue-pwa-speech - A Speech to text With Google Cloud Speech on Vue2 + Vuetify + Progressive Web App
vue-speech-streaming - A Performing Streaming Speech Recognition results in real time Speech To Text with Google Cloud Speech + socket.io on Progressive Web App
My Animation List - A tool to easy get css animation code
vue-input-streaming - A TextInput Streaming RealTime And Two Way Data Binding Broadcasting with Pusher
TidyTab - A Chrome extension for tidying up those tabs.
peregrine-cms - A Vue.js and Apache Sling based head-optional CMS
concept-to-clinic - Lung cancer prediction project with Vue.js interface
grid-awesome - Generate boilerplate css for grid layouts using the css display: grid; property.
Light Bootstrap Dashboard - Creative Tim Light Bootstrap Dashboard made for Vue
Hubaga - A free and lightweight WordPress eCommerce plugin for developers and other digital shops.
vue-webpack-buefy - Vue.js starter with full-featured Webpack and Buefy
Coypu - Text-editor-like weekly planner
core-server - Highly scalable VueJs framework with an integrated API system, and multiple advanced features.
discord-logo - A Vue.js animated discord logo generator based on SVGs. (Github Page)
node-vue-template - A starter template for building complete application using Node.js (API) and Vue.js (SPA) with some included packages and configurations to help start the development quickly.
vue-storefront - Vue.js Storefront - PWA for eCommerce. 100% offline, platform agnostic, headless, Magento2 supported.
fd-vue - Vue.js client for an IoT framework
wildfire - A drop-in replacement for other comment plug-ins.
Ride Receipts - Simple automation desktop app to download and organize your tax invoices from Uber and Lyft.
vue-chrome-extension-boilerplate - Boilerplate for Chrome extension using Vue.js and Webpack
TimeMark - A Time manager which will can record your time and some more function will be developed.
Laravel Enso - SPA Admin Panel built with Bulma, VueJS and Laravel, packing lots of features out of the box.
Code Notes - A simple code snippet manager for developers built with Electron & Vue.js.
Pomotroid - Simple, visually-pleasing and customizable Pomodoro timer.
XMR Miner - Cryptocurrency (XMR) mining app, built with Vue.js and visualized with D3
XMR Paper - Monero wallet generator, built with Vue.js
JoyProxy - Chrome extension for handling proxy settings
activity-automation - Manage daily activities and get reports on timely basis.
jsettlers-web - Popular German board game to build hexes, settlements, cities, roads with earned resources
Tamiat CMS - Tamiat is a front-end focused CMS, uses Vue.JS as the frontend and integrates with Firebase for the backend functionality.
vuegg - vue GUI generator: Create mockups and code in one go! It leverages the creation of pages, components and styles with its visual editor. Generate all scaffolding code for your next vuejs project.
Podlove Web Player - Podcast-optimized, HTML5-based audio player featuring chapters, transcripts and embedding.
Leo Vue - Use the open source Leo outlining editor/IDE to create webapps with nested menus, with support for Vue components in content.
Deezer-Vue - Deezer client built with Vue\Vuex
Vuep.run - Online SFC editor for Vue
V·oogle - Google.com, reVued
Pomidorus - Pomodoro time tracker build using Vue and D3 🍅
Hubble - :telescope: Travel through GitHub Stars' history.
Vuepress - Minimalistic Vue-powered static site generator
Socialhome - A federated rich profile builder with social networking features
GenVue - a hostable, web application that lets confidential users upload and share private files build on Vue.js, Vuetifyjs and NetCore WebAPI stack
vue-array - Array object operation under Vue, Array object operation under Vue Use this package to manipulate the array. Vue can monitor the changes in the array
Laqu-l - A complete App starter kit with Quasar Framework, GraphQL API backend with OAUTH 2.0 authentication, Firebase ready, multilanguage capability and more.
Protovue - A prototyping component library that helps designers and developers quicky scaffold an abstracted app layout.
Chattier - SPA social network built with Laravel 5.6, Vue.js 2, and Bulma (Buefy components + Bulmaswatch themes). Also uses JWT authentication.
chrome-ribbon-reminder - A Chrome extension written using Vue and Async/Await. Uses a popup display and changes badge counts.
Faviator - A simple easy favicon generator.
Modular Genealogy - Genealogy / family tree management system using Laravel 5.7, Vue.js 2.5 and various components. Work in progress.
Minimal Notes - Web app build with Vue.js
Roast - An app built to help coffee enthusiasts find their next cup of coffee while learning about Laravel + Vue.js.
Stack Edit - In-browser Markdown editor
Bael Blog Template - A static generated blog template that uses Netlify CMS for the backend and Netlify for hosting. Features a brutalist aesthetic, fuzzy search, serverless email signup, and more.
Buefy Shop - Sample shop, open source, built with Nuxt, Stripe, Firebase, Bulma and Serverless Functions.
sysmon - A B/S mode system monitor for Linux. You can remotely watch the usage of your system resources via web browser everywhere.
eth-vue - A Truffle Box that provides everything you need to quickly build Ethereum dApps that have authentication features with Vue.js, including configuration for easy deployment to the Ropsten Network. It's also Gravatar-enabled.
Nippon-color - Inspired by nipponcolors dot com. This is a nippon-color PWA build with vue-cli 3.
Saleina CMS - A static site content management system built with vue using git as a backend.
Vuido - A framework for creating native desktop applications. It can run on Windows, OS X and Linux, using native GUI components.
YouGet - YouTube Video/Audio/Subtitle Downloader + Cutter
Vue Pug Stylus - Vue + Pug + Stylus boilerplate 💚 🐶 🖌
Crypto News - allows you to convert cryptocurrencies, view latest news and exchange rates for each ICO – all the data from the world of cryptocurrencies in one place.
Epiboard - A new tab page extension with material design and useful features :new: :tada:
zhudyos/duic - Distributed configuration center :new:
Vuemmerce - Free ecommerce template built with Vue.js and Bulma framework :new:
Nucleus - Vue startup application template that uses ASP.NET Core API layered architecture at the back-end and JWT based authentication
Carpoolear - The open source Vue.js frontend (mobile and cordova app) for the argentinian carpooling application: Carpoolear
Statusfy: Statusfy is a Status Page System, easy to use and completely Open Source.
DynamoDb-GUI-Client: Cross-platform GUI client for DynamoDb
RosterWebApp - Open source rostering web application which allows the rostering of employees/teams to work sessions and other features.
Vue E-Store Templet - An e-commerce templet build with vue/vuex/vue-router and bootstrap4.
Twill - An open source CMS toolkit for Laravel that helps developers rapidly create a custom admin console that is intuitive, powerful and flexible.
MATH_BOT - Learn math by programming a robot.
Vue Crossword - A Vue.js based crossword puzzle builder and filler front-end application. Built with CodeSandbox.
Vue Org Chart - Manage and publish your interactive organization chart (orgchart), free and no webserver required.
Beep - Account Security Scanner built with Vue.js and Ionic 4
Vue CRUD - Vue.js based REST-ful CRUD system. Vue CRUD allows you to easily create fast applications such as CMS or CRM.
Vue HQ Admin Dashboard – A modern admin dashboard powered by Vue, Sass, Firestore, and Netlify.
MToDo - Mini To Do Lists with simple auth built with Vue.js and JSON Server as data mock. Great as reference for anyone that finding reference about real world Vue.js
FireX Proxy - FireX Proxy is the user's trusted Chrome and Firefox browser extension that allows you to unblock any website and browse the web privately and securely. 🛡
VueSolitaire - Solitaire (spider,klondike) imlemented in Vue.js.
Thermal - One stop to all Git repository.
QMK Configurator - QMK Firmware Keyboard Configuration UI in Vue.js.
Eplee - Sweet, simple epub reader made with Vue.js and Electron.js.
vue-realworld-example-app - Exemplary fullstack Medium.com clone
Daily - Curated dev news delivered to your new tab 👩🏽‍💻
Laravel File Manager - Powerful file manager for Laravel
Vue Crypto Dashboard - Cryptocurrency Dashboard made with Vue.js
ETCD Manager - A modern, efficient and free multi-platform ETCD GUI app based on Electron and VueJS.
Idea Re-Vue - Social Ideation Platform to Create, Manage and Brainstorm Ideas in a fun, visual way. Built on the top of VueJS and Vuetify using Firebsae as a backend
Vue Expenses - Expense tracking app made with Vue.js, Vuetify and ASP.NET Core
Akaunting - A free and online accounting software for small businesses and freelancers based on Laravel and VueJS.
VueFront - CMS Agnostic PWA & SPA. Modernize your Wordpress websites in less than 5 min
Mockup-server - Mockup-server is easily create server from local directory.
MQTTX - Cross-platform MQTT 5.0 desktop client built with Vue.js, Typescript and Electron.
Pychat - Self-hosted webrtc video chat (an alternative to Slack)
super.ba - RSS News aggregator built with Vue.js, Ant Design of Vue (antdv) and NodeJS.
Rapido - Rapido is software to make a website. Rapido is fast, easy to use and respectful of your privacy.
miniPress - Yet another static site generator
Zeithub - Open source time tracking, invoicing & expenses management for freelancers
CodeceptJS UI - Cypress-liked UI for ✔️ CodeceptJS end 2 end tests ✔️.
Vue Pivottable - Vue port of the jQuery-based PivotTable.js
Vue Datamaps - Vue port of the javascript-based DataMaps
Marked.cc - 📝 Create and share beautiful images of your notes and prose.
LeagueStats - Statistics website for players of the online game League of Legends.
Veniqa - An E-commerce solution with a shopping client and admin panel written in Vue.
tato music player - A mobile first, handwritten, responsive web app for music fans written in Vue and Vuetify.
Sheiley Shop - PWA to track personal purchases, No more paper and pencil to go to the supermarket 🏬 Vue and Vuetify
Afterman - 🌕 Create beutiful docs in markdown and HTML from postman collection. Using Quasar Framework
Greenpress Admin Panel - The Admin panel of Greenpress, a fully-operative open-source for creating blogs and content websites.
Greenpress Blog-Front - The frontend application service of Greenpress, a fully-operative open-source for creating blogs and content websites.
Movie Paradise - A responsive movie preview web app built by Vue and Vuetify
Pathfinding Visualizer ThreeJS - A visualizer for pathfinding algorithms in 3D with maze generation and first-person view
Agile Visitors - Application for registering employee entries with the possibility of generating reports, validating and storing users with minimal effort.
Pexelry - Application that leverages the pexels api to enable you find beautifull photos and pictures.
karrot-frontend - Web application for organization of foodsaving groups worldwide.
Realtime quiz framework - A starter kit built with NodeJS, VueJS and Ably providing the scalable base networking framework to host a live quiz
LogChimp - Open-source software to track your customer's feedback to build better products.
Trooveo - Search, listen to YouTube videos (Audio Only), No YouTube Api.
Yacht - A Docker container management webui using Vuetify for a hassle free way of managing docker containers and projects.
Antares SQL - Cross platform SQL client made to be simple and complete.
Bagisto - A Free and Opensource Laravel eCommerce framework built for all to build and scale your business.
Samaya - Friendly personal dashboard on Chrome's new tab; featuring Nepali calendar, daily Nepali quotes & Nepali wallpapers.
Mythic table - A Free and Open Source virtual table top for playing Role Playing Games.
GrandNode 2.0 - Open Source Cross Platform E-Commerce Solution based on .NET Core 5.0 and MongoDB / Azure CosmosDB / Amazon DocumentDB / VueJS
Aimeos - Leading Laravel eCommerce framework to build ultra fast online shops, marketplaces and complex B2B applications scalable from 1 to 1,000,000,000+ items
XIV ToDo - Dashboards, completion trackers, tailored weekly and daily checklists and tools for Final Fantasy XIV.
QuickTok - TikTok popular trends viewer.
Interface X - UI Search&Discovery components to rapidly build beautiful search experiences
Context Note - A free open source note-taking 📝 chrome extension: take you notes on the web with their context.
Balancer - A Decentralized Finance app that runs on Ethereum.
Materio Free Vuetify VueJS Laravel Admin Template - Open-source & easy to use Vuetify Vuejs Laravel Admin Template with Elegant Design & Unique Layout.
NuxTube - YouTube app for privacy, made with NuxtJs.
Dashy - A self-hosted startpage, with an easy to use visual editor, status checking, themes, widgets and tons more
NuxtBlog - Blog site made with firebase real-time database

Commercial Products

Wijmo - A collection of UI controls with VueJS support.
ChatWoot - Livechat and agent collaboration over Facebook messenger.
VueA - VueJS Admin template with multiple layouts and laravel version.
Teleo - Team collab-app moving effortlessly between talking, planning & doing
EducationLink - CRM and sales automation for education agents and colleges.
Pragmatic v2.0 - Responsive and configurable admin template built with Vue.js and Element.
Moonitor - Cryptocurrency tracker for Desktop.
Deskree - Online collaboration platform that combines Ideas, Tasks, and Issues in one place.
OSHCExpress - A comparison and ecommerce for OSHC (Overseas Student Health Cover) insurance (Australia's insurance for international students).
Agiloo - Project Management app for Scrum and Kanban
ScaffoldHub - Online Web App Generator for VueJS with NodeJS, and MongoDB or SQL.
Commandeer - Cloud Management Reimagined. A Desktop cloud management app built with Vue.js and Electron.
Mongster - Connect your Mongo DB nodes into one cluster within a control panel.
Leave Dates - A powerful new way to track your staff leave.
Time Door - A time series analysis API
vREST NG - An enterprise application for Automated API Testing, built with VueJS and Element UI.
ScaleChamp - multi-cloud managed databases provider with Hetzner, AWS, Linode, IBM, Azure, Scaleway, Alibaba Cloud, DigitalOcean, GCP and UpCloud support
Coloban - All-in-one project management tool with chats, Kanban, Gantt, calls, screenshare and many more.
NxShell - An easy to use new terminal for SSH, which based on Electron and VueJS.
Materio Vuetify VueJS Admin Template - Most Powerful, Developer Friendly, Production ready & Comprehensive Vuetify VueJS Admin Template.
NocoDB - An opensource Airtable alternative.
KodaDot - NFT Marketplace on Polkadot funded as public good, written in Vue.js

Apps/Websites

Laravel Spark
Vice Video
Formlets
Laracasts
esa.io
稀土掘金
Prague Airport
Portfolio Site
Statamic
Embalses! - A tool to report water dam level using the U.S. Geological Survey database.
TravelMap - A simple way for travelers to create a blog based on a Map.
Proper Cloth Shirt Builder - Custom shirt builder.
Powerpuff Yourself by Cartoon Networks
vNotes - Simple and beautiful notepad to Markdown with Vue.js and Local Storage API.
Open Function Computers
Dermail - A webmail client written in Vue.js for Dermail, a mail system written in node.js.
octimine - A patent search engine.
Draxed - A web based MySQL and PostgreSQL data browser and dashboard manager.
Jobinja - A Job Board and career platform operating in Iran.
滚蛋吧！莆田系 - Show all Putian hospital information
Livestorm - Webinar / Live events app.
Holden
Global-Exam - Online Training for Language Proficiency Tests
SlugSurvival - A webapp that helps student better plan their courses (hobby project, not in affiliation with UCSC).
GitRelease - Track github project's new release on mac menubar using vue.js with electron.
12BAY.VN - Applications online flight bookings.
PLAYCODE.IO - Playground for Rapid Frontend Experiments.
The Void Radio - Underground House Music Online Radio.
Bitly Vue - Shorten URLs with VueJS & Bitly API.
Storyblok - API Based/Decoupled CMS using VueJS for its frontend.
WizzAir
Moving to HTTPS - Guide to moving different platform/hosting sites to HTTPS
Booknshelf - Discover great books and bookshelves on different topics.
Euronews - Euronews is a multilingual news media service, headquartered in Lyon, France.
Roozame روزامه - Roozame is a Persian smart news media service.
Koumoul
NinjaCalc - A suite of embedded engineering related calculators, built as an open-source single-page app with vue.js.
Vue.js Feed - The latest Vue.js news, tutorials, plugins, and more. Made with Vue.js and Laravel.
蒜瓣 - A web app developed with Vue2.0 and Douban API
Guess Right - A 'guess the word' game - Written with Vue/vuex/vue-router (front-end) and Laravel/MySQL (back-end). Code is Open Source on GitHub (although not the live files that run the game at kdcinfo).
GRAP - Business communication service
Easy Mock
mmf-blog-vue2-ssr - A blog built with Vue 2.0, vue-router & vuex, with server-side rendering
JSON Schema Editor - An intuitive editor for JSON schema built with Vue.js and Firebase.
Winsome Trivia - A single or multiplayer trivia game featuring over 2,000 unique questions built with Vue.js and powered by the Open Trivia Database.
Moon Organizer - Lunar calendar app
Flash-Vue - ‘Flashcards of the Future’ bring learning everywhere :rocket:
Kinderbesteck - A full Online Shop SPA with Vue2.0, Vuex, Vue Router
n2ex - A vue ssr(nuxt) website, use v2ex API
Power Thesaurus - A crowdsourced online thesaurus
Chattanosy - A community-powered database of new things and places in Chattanooga, TN.
PAIXIN - A genuine picture sale website
CodeBottle - Drag-and-drop snippets to your projects
1XBET - A betting company operating since 2007
MyOwnTV - A streaming website for creating internet television
CrowdCircus - Europe’s biggest crowdfunding- and crowdinvesting-aggregator
ابیات ناب پارسی - A collection of Persian poems
Ripplectron - Ripple(Blockchain coin) Wallet Desktop client for vue-electron
PingBreak - A free and simple website monitoring service using vuejs for real-time dashboard
Todoist Tribute - Todoist clone, written in Rails + Vue
JSON Editor - A schema-aware JSON editor built with Vue2 and firebase.
Develteam - A social network for indie game developers.
Mixsii - A free video chat room site for teens, adults, family, and friends.
PipQuest - A retro-style puzzle game built in Vue
Matryx - A decentralized collaboration platform.
iPrevYou - YouTube™ Player - A chrome app for watching youtube videos on your desktop.
Item Manager - An application to transfer items for Destiny 2 game.
Frontend Masters Intro to Vue - Frontend Masters full day course
TR-101 - A drum synth / sequencer.
Bazaar - Media sharing platform.
Vectr - A free vector graphics software
brain bits - A P300 online spelling mechanism for Emotiv headsets
Coin Dashboard - The fully client-side cryptocurrency asset dashboard.
Habitica - online task management application in the form of a role-playing game.
MadeWithVueJs - A Gallery of Projects made with Vue.js (also the Site itself uses Vue.js)
CodeDependencyScanner - A C# dektop application that display .Net assembly code dependencies build with Vue, Neutronium and D3.js.
Thousand Ether Homepage - The Million Dollar Homepage reimagined as an Ethereum DApp. Build on Vue.js and open source.
Let's Enchance - free online image upscale and enhancement with neural networks.
Pi.TEAM - Online Invoicing and Accounting - Simple to use online accounting and invoicing, free for single users and freelancers.
Vuethwallet - A simple app generate ethereum wallet with vuejs.
Tipe - Next Generation API-first CMS. Create your content with powerful editing tools and access it from anywhere with a GraphQL or REST API. Stop letting your CMS decide how you build your apps.
Vuethexplore - A simple app explore ethereum blockchain with vuejs.
Fintechers - Fintech focused job board.
Devjournal - Collaborative todo list for projects and ideas.
Bubbleflat - Online platform that helps students and young Professionals find their perfect roommates by searching for people with similar lifestyles, interests, or schools. Laravel & Vuejs
TeaQuinox Tea Co -- ecommerce site that specializes in loose leaf tea.
blip - Test websites for speed, mobile-friendliness, security and the HTML5 doctype. Find businesses around a location and test their websites en masse, or just test your own URL.
sunpos - Sun position, elevation, azimuth, ecliptic/equatorial coordinates and sunrise/sunset time (Julian day) calculation and conversion utilities. Web site is programmed using pure JS, Vuejs and i18n Vuejs localization plugin. Visualization is created using D3.js.
U3xyz - A personal blog base on vue ssr.
27.ua - Ukraine-based internet hypermarket
Chess Guardian - Answer chess positional questions from your own games.
Blackjack Break - A quick game of blackjack
GameVix - Swap your used video game discs with others, hassle free. PWA with Material Design.
VivifyScrum - Agile project management app for teams that deliver. Customizable Scrum and Kanban boards.
9GAG - Popular online platform and social media website
Kitchen Stories - Cooking platform
MailRabbit - Create, A/B test, and monitor transactional emails without a developer.
Vue 资源精选 - great Vue components list, category, inline demo show and brief
Cronhub - Painless Cron Monitoring Tool
wrkprty - Pop-up coworking events for freelancers, remote workers, and professionals looking to get out of the office.
Made with love - The Made with Love ❤️ around the world, initiative is a movement to celebrate 🎉, promote 📣 and build a brand 👑. It feed Tech news, design inspiration and trends from over 💯 sources including Dribbble, ProductHunt, Behance and Techcrunch. 💝
V·oogle - Google.com, reVued. A joke-project. :)
Broker Notes - 'Study to become a Real Estate Agent' :house:
SyncLounge - SyncLounge is a tool to sync Plex content across multiple players in multiple locations.
HCE.it - The website of an Italian agency, entirely made with Vue using a Laravel-based headless CMS.
Pages - Web design inspiration
Scrumpy - A Beautiful Project Management Tool for Agile Teams
Spektrum - The website of Spektrum Media Agency
SPK The website of SPK Ecosystem
IDDEF ☪️ The Federation of the Associations that Value Humanity's webpage, CMS, CRM and Donation and all e-commerce pages are designed with Vue.js, Vuex and pure JavaScript 🙏
Configuration File Management - A simple way to manage your configuration files
Roast an app built to help coffee enthusiasts find their next cup of coffee while learning about Laravel + Vue.js.
YBR - Centralized YBS Public eComplaint Management System. (Full SPA)
Regex Fiddler
Myanpwel - The website of event ticketing platform.
CryptoArte - An Ethereum art collection, non-fungible token, and Dapp.
Muuviez - A movie discovery and tracking website with stylish design
NAGA VIRTUAL - NAGA VIRTUAL is the first independent virtual goods market.
Scroll.in - Scroll.in is an independent news, information, and entertainment venture.
Akunyi - Charity Website
What Would Mark Ruffalo Do? - Motivational website based on the story that Mark Ruffalo failed at several hundred auditions before finding success.
Brandy - brand assets manager for your menu bar.
NBC Sports - NBC Sports is a sports news website.
WITHIN - Extraordinary stories in Virtual Reality.
plottr.io - Plan your running and cycling routes
beCamp - A community-organized tech conference in Charlottesville, VA. Website code is open-source.
Trustpilot - a free and open to all review platform.
Lagom - Simple, intuitive and fully responsive WHMCS theme
ScoutMyTrip - Roadtrip Planner - Road trip planning app for India which helps travelers to build their itinerary, discover points of interest, find hotels, gas stations, food joints etc along the route.
GamersClub - Biggest company of eSport community development in Brazil
MIT - Official Website of Massachusetts Institute of Technology.
Elvenar - Elvenar is a browser based fantasy city builder game.
Beacon - :blue_heart: A service that allows you to share your content across multiple websites.
Artfinder - Artfinder is a website for buying & selling art paintings.
Rolodromo - A spanish website dedicated to tabletop RPG.
GitHubExplorer - Pure static page webapp for exploring GitHub. Using Vuejs and GitHub GraphQL API v4.
Keynote - Present with Vue.
HappyPlants - A progressive web app for organizing your plants 🌱.
Pocket Lists - World's friendliest to-do list app.
Padlet - Collaborative bulletin boards
Glovo - On-demand delivery
MySigMail - MySigMail is a free, in browser, email signature generator without creating account
Wordguru - A simple verbal game where you split into teams and try to guess as many keywords as you can.
ApiFlash - A Chrome based screenshot API built on top of AWS Lambda for Developers
Kitty Ipsum - Generate lorem ipsum composed of "meow" in different languages.
Git Superstar - Count your git stars and top repositories.
DECS - The decentralised all-in-one workspace to manage code snippets and to protect sensitive data.
Asciiur - Internet's ascii art collection
Tapestri Designer - Free tool to design PCR primers for genome sequencing experiments (NGS)
Remote-Access-SSH - Web based remote host access with node-ssh
Map Marker Generator - A Free Online Tool To Generate Custom Map Icons On The Fly
Monocle Reader - Follow feeds, Twitter, YouTube, Blogs and everything else, all in one place.
前站导航 - 前端社区、文档收录.
Geenes - Generate and apply color palettes to your UI, then export it to sketch or code.
Blurrish - Encrypted Morning Pages journal for Mac/Windows, built with Vue and Electron. Blurs as you write so you can journal in public workspaces.
ExifShot - What and how on photography, beautifully.
Studolog - Online file sharing platform for students, including tester and reviews. Currently in Czech 🇨🇿 only.
sum.cumo – Digital business models (with Vue as a tech stack centerpiece).
Gamebrary - Open source tool to organize video game collections.
Premium Poker Tools - What poker players use to study.
QMK Configurator - Configure, Build, and Download Custom QMK Firmware from your browser.
Worksome - Marketplace/platform for qualified it professionals and freelancers and companies looking to hire them.
Translator-vuejs - Translation App built with Vuejs, Yandex API & ResponsiveVoice.js API.
Big Timer - Fullscreen countdown timer for workshops, meetings and presentations. Big Timer helps workshop facilitators, meeting chairs, design sprinters, presenters and aspiring game show hosts stick to their program.
Wirenook - Free online app for building responsive website wireframes. Hi- and Lo- Fidelity, project sharing and svg download.
Kvalitetskontroll - Norwegian management system tailored for the construction industry.
Poolside FM - A retro-style music player
Inoreader.com - One of the biggest RSS readers and news aggregators out there.
AwesomeTechStack - Website Tech Stack Analyzer
massCode - An open source code snippets manager for developers. Build with Electron, Vue and Monaco editor.
ClipLeap - Platform for posting and sharing moments in long videos.
RSVP Keeper - Online reservations made easy. Get your event up and running in no time. Made with Vue and Go.
PNGK - Official website for a consultancy company working to find solutions for humanitarian, human rights and other like minded organizations.
BMWUSA Vehicle Configurator - Vehicle Configurator for BMWUSA
mumbasket - an ecommerce website with laravel and vuejs
Fanmio - Meet your favorites celebrities through personal video experiences on Fanmio
OneConcern source
AtomicWallet - Multi-asset cryptocurrency wallet. Desktop and mobile apps both were built with Vue.
Helpninja - Simple & fast help desk
Todo DEV - A simple Todo App made for developers with Vuejs, Vuetify and the powerful Firebase.
36 Pixels - French agency website made with vue.js
Vue Spotify - Spotify client built with vue.js / vuex
temp-mail.io - Disposable temporary email service.
Best-movies.watch - A website which allows to watch movies online for free without sign up
Tune.pk - Tune.pk is one of the largest video sharing website with content from all over the world.
Narrandum - Customer journey mapping tool built using Vue.js, Vuetify, and Feathersjs
Keep Formula - Keep Formula is a simple app to make your calculations easier.
tato music player - A mobile first, handwritten, responsive web app for music fans written in Vue and Vuetify.
ChatterBoxes - For quick secret chat sessions
goonlinetools.com - 100% Free Online Tools site.
CMD Generators 命令行生成器 - Generate CMD by click buttons. Such as tar, ssh. 命令行参数多不熟悉? 点点按钮就能生成啦!
Portfolio Site - Olaolu Olawuyi, A Frontend developer and UX Engineer's portfolio site.
Portfolio Site - David Aji aka Ajiva is a Front End Developer with experience using frameworks like Vue and React to build "class" web apps.
d-patterns.js.org - FOSS Discord templates listing website 💬
linksift.com - LinkSift lets you explore what a website links to.
postmake.io - A curated directory of 300+ tools and resources used by companies and startups all over the web. Built using Vue.js and Nuxt.
screenshotapi.net - A website screenshot API, capture pixel-perfect website screenshots.
FontGet - Download Free Fonts.
Travel_Smart - A tour-based web app that uses Vue + Vue Router + Vuex.
National Institutes of Health (NIH): FEVS Survey Results - National Institutes of Health (NIH) data visualization of Federal Viewpoints Survey (FEVS) survey results.
U Can Stock - U.S. stock market information platform for Korean. It's built with Vue, Vuex, Vuetify, Nuxt and Firebase.
Nipashe -"Nipashe" is a Swahili word that means "Inform me".Nipashe is a web app built in Vue + Vuex(state management) + Vue-Router(navigation) that gives a tally/statistics on the current COVID19 infections across the world based on the WHO
DevSnap.me - A website that helps web developers find tons of free and open source HTML, CSS, and JavaScript assets.
Pexies - Pexies is a personal photo gallery built on pexels api. You can see curated/randomized pictures, and add them to your favourites.
Wammes Gifts - Wammes Gifts helps you find the perfect gift.
Back Home/回家 - A flight searching engine for the flights from oversea to China Mainland (and China to oversea) that still fly during COVID-19.
Deadlines - An offline, simple deadline tracker made with Vue.js and localForage.
Scraperbox - Undetectable web scraping API. Built with Laravel and Vue.
Darwin Analytics - Tool for measuring and optimizing your site. Built with Vue3 and Vite.
Pinterest video downloader - Tool for Downloading pinterest videos in HD
Scrumfast - Extremely intuitive project management scrum tool.
CryptoTracks - Unleash and discover musical creativity on the Ethereum blockchain.

Interactive Experiences

YouTube AdBlitz 2016
Omnisense Experience
Louis Ansa Website (portfolio)
Djeco.com
Tolks.io
NOIZE original
TR-101 Synth Drum Machine
Bootstrap 4 Editor
Subtletab - Browser Extension
web-riimote - Turn your smartphone into a 3D controller (source code)
CSS ColorVars - Interactive tool code generation (source code)
Nightlight During Conflict - Explore GIS data on nightlight output for countries in conflict.
User Friendly Justice Data - Explore justice data from Morocco.
Thing - Breath exercise & meditation web app made with Vue.

Enterprise Usage

Alibaba
Baidu
Sina Weibo
Xiaomi
Ele.me
Optimizely
Expedia
UCWeb
Line
Nintendo
Celtra
Sainsbury's
AREX
DJI
Octimine GmbH
Hunliji
GitLab
Clemenger BBDO Melbourne
ZenMate
Codeship
Storyblok
Monito - Building the Booking.com for international money transfers
Hypefactors - Software for data-driven PR professionals
Adobe
IBM
Cotabox
Aromajoin - Develop the finest digital scent products based on the harmony of hardware, software and material technology.
Carrefour
Staples Canada
Blibli
Manduka

Vue A11y project - Vue.js community project to improve web accessibility.
vue-skip-to - It helps people who only use the keyboard to jump to what matters most.
vue-axe - Accessibility auditing for Vue.js applications.
vue-announcer - A simple way with Vue to announce any useful information for screen readers.
eslint-plugin-vue-a11y - Static AST checker for accessibility rules on elements in .vue
vue-focus-lock - It is a trap! A lock for a Focus. A11y util for scoping a focus.
vue-a11y-calendar - Accessible, internationalized Vue calendar.
eslint-plugin-vuejs-accessibility - Vue.js accessibility eslint-plugin managed by @vue-a11y .

Components & Libraries

UI Components

Table

Tables / data grids

vuetable-2 - Data table simplify.
vue-tables-2 - Vue.js 2 grid components.
vue-datasource - A vue.js server-side component to create dynamic tables.
ag-grid-vue - Vue adaptor for ag-Grid.
vue-data-tables - Vue2.0 DataTables, based on element-ui.
vue-floatThead - Vue 2.0 component for floatThead, a floating & sticky table header plugin.
vuetiful-datatable - Datatable component with sorting, filtering, pagination, grouping and aggregation.
vue-materialize-datatable - VueJS datatable for Materialize CSS
vue-good-table - An easy to use, VueJS (2.x) table plugin with sorting, column filtering, pagination etc.
vue-grid - A flexible grid component for Vue.js
vue-easytable - A powerful table components based on Vue2.x
vue2-datatable-component - The best Datatable for Vue.js 2.x which never sucks
vue-js-grid - Vue.js 2.x responsive grid system with smooth sorting, drag-n-drop and reordering
vue-handsontable-official A Vue.js wrapper for the Handsontable spreadsheet component
vue-grid - A powerful flexbox grid system for Vue.js 2.x, built with inline-styles
vue-data-tablee - Based on vue-good-table, a simple and pretty table component
vue-scrolling-table - Simple table component with flexbox sizing, scrolled table body (horizontal and vertical), slots for all tr/th/td rendering.
el-search-table-pagination - Combines Form, Table and Pagination components of Element UI together. Based on Vue 2.x.(Detail)
vue-crud-x - Extensible crud component using Vuetify layout, other than the usual page, sort, filter, it is able to do nested CRUD, custom forms, filters, operations.
Vue Datatable - VueJS powered Datatable with Laravel server-side loading and JSON template setup
v2-table - A simple table component based Vue 2.x.
vue-cheetah-grid - A high-performance grid engine that work on a canvas for Vue.js.
vue-table-component - A straight to the point Vue component to display tables.
@lossendae/vue-table - Simple table component for Vue.js 2.x with pagination and sortable columns.
el-data-table - base on element-ui, makes crud easily
DevExtreme Vue Grid - High-performance plugin-based Vue data grid for Bootstrap.
vue-ads-table-tree - A vue Table component, with filtering, sorting and pagination. Rows can have child rows, so a tree structure can be build. It also supports async calls to load rows from the backend. It's built with the css framework tailwindcss
@marketconnect/vue-pivot-table - A vue component for pivot table
vue-teible - Lightweight and flexible table component for the web :zap:
vue-jqxgrid - Vue data grid with filtering, sorting, editing, grouping, data export and other features.
vue-jqxpivotgrid - Vue pivot data grid with pivot designer, drill through cells, pivot functions.
toast-ui.vue-grid - Vue Wrapper for TOAST UI Grid.
vueye-datatable - Vueye data table is a responsive data table component based on Vue.js 2, it organizes your data per pages in order to navigate easily.
vue-sorted-table - A plugin to turn tables into sorted tables. Supports nested object keys, custom icons and reusable components.
vue-bootstrap4-table - An advanced data table based on Vue 2 and Bootstrap 4, which includes Multi column filtering, Multi column sorting, Pagination & Info, Checkbox rows and Highly customizable slot options.
vuejs-smart-table - Straight Forward Table Component using the vanilla HTML Table Structure with Sorting, Filtering, Pagination and Selection out of the box.
@myena/vue-table - Table Components for Client/Server data handling. Filter, sort, paginate, group, expanding details row. Highly customizible via slots for filter, headers, column, pagination, details row.
vue-jd-table - Advanced and flexible data table component for Vue 2. Feature Rich: search, filtering, exporting, pagination (traditional and virtual scroll) and so much more!
iview-table-page - Combines Table and Page components of iview UI together. Based on Vue 2.x. And Hear are some examples to use iview-table-page.
fancy-grid-vue - Vue adaptor for FancyGrid.
vue-table-dynamic - A dynamic table with sorting, filtering, editing, pagination, multiple select, etc.
vue-quintable - A responsive and highly configurable table based on Vue 2.x and Bootstrap 4.x
vue-grid-responsive - Responsive grid system based on Bootstrap for Vue 2.x.
vue-js-datatable - VueJS light weight wrapper datatable component for datatables.net
bee-grid-table -BeeGridTable , is a Highly Customizable Table UI component library based on Vue.js. Rich functions、More efficient、Easy to use!
vue-datagrid - Vue grid wrapper for powerful webcomponent revo-grid with excel like rich edit and behavior.
element-ui-sticky-table - Sticky for element-ui table
vue-dataset - A set of Vue.js components to display datasets with filtering, paging, and sorting capabilities!
jz-gantt - A high-performance Vue gantt component, which includes highly customizable table columns, dynamic update data, freely drag the progress bar, switch header, etc.

Notification

Toaster / snackbar — Notify the user with a modeless temporary little popup

vue-notifications - Vue.js agnostic non-blocking notifications library.
vue-easy-toast - A toast plugin for vue/vue2.
vue-toasted - Responsive Touch Compatible Toast plugin for VueJS.
vue-notifikation - Vue.js notification plugin.
vue-notification - Vue.js 2+ notification plugin using Velocity for animations.
vs-notify - Tiny but powerful notification component with no dependencies.
vue2-notify - Vue.js 2+ notification plugin.
vue-notifyjs - Minimalist, 3kb themable notification plugin
vueup - Simple, lightweight and elegant global notification popup for Vue.js
vuex-flash - Flash message component for VueJS 2.x within Vuex 2.x.
vue-snotify - Vue.js 2 Notification Center
vue-notify-me - Stackable notification Alert for Vue
vue-noty - A Vue.js 2 wrapper around Noty
vue-notice - Vue.js 2 wrapper around Noty.js with native API
vue-flash-message - Simple yet flexible notification plugin
@voerro/vue-notifications - Simple Vue.js 2 notifications plugin with HTML and styling support.
vue-awesome-notifications - Lightweight Vue.js notification library with advanced async support.
vue-izitoast - A Vue.js 2 wrapper around IziToast.
vue-toastr-2 - Simple toast notifications for Vue.js built on toastr
vue-snack - A Vue.JS plugin for Snackbars based on Google Material.
vue-m-message - A message plugin for vue.
vue-notification-bell - A Vue UI component for showing notifications.
v-tostini - Really plain toast notifications mechanism for Vue.js 2.x. No CSS included.
vue-toast-notification - Yet another Vue.js Toast notification plugin.
VueToastify - A fuss free notification component.
vue-toastification - Light, easy and beautiful toasts for Vue
@smartweb/vue-flash-message - The component to display single flash message or multiple flash messages to user
vue-notification - A clean & nice notification system with Material Design style with a queue :new:
Breadstick - 🚀 A simple and flexible positioning, stacking and dismissal API for your custom Vue notifications.
vuetify-toast-snackbar - Vue.JS toast service with queue support that uses Vuetify's "Snackbar" component.
vue-toaster - Vue.js toast notification plugin for Vue 3
vue-notification-ui - A simple push the notification UI with Vue.js
vue-my-toasts - Provide your component and let us toast the rest.
@kyvg/vue3-notification - Vue 3 notification library

Loader

Loaders / spinners / progress bars — Let the user know that something is loading

vue-radial-progress - Radial progress bar component for Vue.js.
vue-simple-spinner - A simple, flexible spinner for Vue.js
vue-wait - Complex Loader Management for Vue/Vuex and Nuxt applications.
vue-progress-path - Customizable progress indicators and spinners that support any custom SVG path.
vue-blockui - BlockUI for vue 2, similar to jquery blockUI, can be used for loading screen.
epic-spinners - Easy to use css spinners collection with vue.js integration.
svg-progress-bar - A simple progress bar for Vue.js.
vue-loading-overlay - Tiny full screen loading indicator
vue-loaders - vue wrappers for loaders.css
vue-promise-btn - Tiny and powerful tool for asynchronous buttons(or any other tag) lock with fancy built-in spinner
vue-spinkit - 🌈 A collection of loading indicators animated with CSS for VueJS
vue2-form-loading - A VueJS directive can be used with forms in order to disable submit button while the next page is loading
vue-element-loading - ⏳ Loading inside a container or full screen for Vue.js
tb-skeleton - A skeleton screen loading for Vue.js
vue-spinners - 💫 A collection of loading spinner components for Vuejs
vue-progress-bar - This is a cascading progress bar plugin based on vue
vue-loading-button - 👇 Straightforward button with slideout loading indicator
vue-loading - 🔄 Block page while requesting API
vue-preloaders - Attach your preloader at any time, to any element easily and quickly
vue-ellipse-progress - A flexible Vue.js component to create beautiful animated circular progress bars and loaders
vuesence-cloud-sync-button - Animated button which also serves as a cloud synchronization progress bar
vue-ui-preloader - Pre Loader components for vue.js projects with playground.
vue-splash - A simple and cool splash plugin for vue.js 💦
vue-ultimate-skeleton-cards - The Ultimate, fully-customizable Skeleton Card plugin for Vue 🚀
vue-wait-for - A loader manager for Vue.js 3 with reactive method
vue-content-loader - SVG component to create placeholder loading, like Facebook cards loading
vue3-circle-progress - Highly customizable Vue.js 3 circular progressbar component.

Progress Bar

A slim progress bar at the top of the page

vue-progressbar - A lightweight progress bar for vue.
vue2-loading-bar - Simplest Youtube Like Loading Bar Component For Vue 2.
vue-top-progress - Yet another top progress loading bar component for Vue.js.
vue-nprogress - Progress bars is based on nprogress for Vue.
vue-progress-button - Vue.js 2.x animated button component.
vue-simple-progress - A simple, flexible progress bar for Vue.js
vue-component-loading - Manage a loading state inside each component and display the global loading state with a progressbar.
vue-scroll-progress - Simple Vue.js plugin for page scroll progress bar
vue-read-progress - Customizable progress bar at the top of the page that shows the scroll progress
easy-circular-progress - Easy circular progress component with counting effect
vue-twitter-counter - Counter component inspired in Twitter with Vue
vue-ins-progress-bar - A Vue component of ins-style progress bar 一款 ins 风格的 vue 进度条组件
vue-next-progressbar - Slim progress bars(1KB gzipped) for Vue 3.
vue3-progress - Fully customizable vue3 plugin to display a progress bar while waiting for something, e.g. http requests

Tooltips / popovers

v-tooltip - Easy tooltips with Vue 2.x.
vue-popper-component - Popper.js directive for Vue.js.
vue-directive-tooltip - Simple, flexible tooltip directive (based on Popper.js)
vue-popperjs - VueJS 2.x popover component
vue-tooltipster - VueJS 2.x tooltip component. Support html content, hover and hover+click events.
k-pop - Simple popover component based on popper.js. Highly customizable. Comes with themes. Supports custom triggers and can listen to any event.
@adamdehaven/vue-custom-tooltip - Vue 2 & 3 :tada: customizable, reactive, and reusable tooltip component that supports plugin options, props, and multiple use-cases. Also works with SSR (e.g. VuePress, Nuxt) and includes TypeScript types. (Vue 3 is available on next branch/npm tag)
vue-use-popperjs - Vue 2 & 3 popper hook powered by @popperjs
vue-follow-tooltip - Tiny tooltip directive for Vue 3.
Tippy.vue - Nesting-free Tippy.js directive/component for Vue 3. A drop-in addition with no structural or style changes required. Supports both individual and singleton tooltips.

Overlay

Overlay / modal / alert / dialog / lightbox / popup

vuedals - A VueJS (2.x) Plugin for multiple modals windows with a single component instance.
sweet-modal-vue - The sweetest library to happen to modals. Now available for Vue.js.
vue-js-modal - Simple to use, highly customizable, mobile friendly Vue.js 2.0+ modal with 0 dependencies.
vudal - Modal window for vue.js
vodal - A vue modal with animations.
vue-image-lightbox - A Vue image lightbox/gallery to display images nicely.
vue2-simplert - Vue 2 Simple Alert Component (SweetAlert Inspired) By Irfan Maulana
Vue-Semantic-Modal - Vue 2 Semantic-UI modal component without jQuery dependency
v-img - Easy to install image gallery.
vue-dialog-drag - Draggable dialog
vue-ya-semantic-modal - Yet another semantic-ui modal component for Vue2 without Jquery but with Vue transition
vue-pure-lightbox - Very simple lightbox plugin without any dependencies - only Vue! 🖼
v-viewer - Image viewer component for vue2 and vue3, supports rotation, scale, zoom and so on, based on viewer.js
vue-messagebox - Easy and made-to-order messagebox component on Vue.
vuejs-dialog - A lightweight, promise based alert, prompt and confirm dialog.
@hscmap/vue-window - Window UI Component for vue2.
vue-gallery - VueJS responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers. Based on blueimp-gallery
vue-swal - A small wrapper for integrating SweetAlert to Vuejs. (Compatible with SSR)
vue-modal-dialogs - ✨ Promisify your own dialogs!
vue-img-view - a plugin for Vue.js, you can drag / view / rotate pictures anywhere
vue-modaltor - most advance configurable modal component for vuejs
v-modal-backdrop - A simple generic backdrop component for vue
vue-cute-modal - A simple and easy to use Modal component for Vue applications.
v-dialogs - A simple and powerful dialog, including Modal, Alert, Mask and Toast modes, based on Vue2.x
vue-gallery-slideshow - Responsive gallery component for VueJS
vue-a11y-dialog - A Vue.js component wrapper for the accessible dialog a11y-dialog.
vue-slideout-panel - Stackable panel component for VueJS
v-gallery - A Vue2 plugin for images show in gallery or carousel
vue2-image-loader - A image lazyLoad loader component for vue2
vue-my-photos - A simple dependency-free image lightbox component with filtering capabilities
vue-img-orientation-changer - A Vue.js directive that automatically adjust your img to correct orientation.
vue-topmodal - A fully customisable, easy to use, Vue.js modal component. (Responsive, Stackable, Scrollable, Animated)
vue-modal 🖼 - Feed your objects array for multiple switchable modal content or quickly inline your content. A fully customisable vue modal component .
@innologica/vue-stackable-modal - Library for modal dialogs which can be stacked. Fully customizable and very easy to use.
vue-sweetalert2 - wrapper for sweatlaert2 with support for TypeScript, Nuxt and SSR
vue-modality - A really nice Vue.js modal component
vue-tinybox - a tiny (only 2.5 KB minzipped) and slick lightbox gallery. Optimized for both desktop and mobile.
vue-accessible-modal - A Vue.js accessible modal wrapper over your components.
vuetify-dialog - Dialogs easy to use with Vuetify.
vue-hawesome-modal - A Vue promisify modal component plugin based on Vuetify with Vuex.
xmodal-vue - 🚀 A simplistic and easy to use wrapper around your components that will help you create custom and dynamic modals, from your components.
@kouts/vue-modal - A customizable, stackable and lightweight modal component that adheres to the guidelines set in WAI-ARIA Dialog (Modal) section of W3C.
vue-final-modal Tailwind-friendly, highly customizable, stackable modal component.
vuesence-modal-window - Simple Modal window Vue.js component that takes care of overlay, centering, animation, outside click/Escape key/X-mark closing and allows you to concentrate on its content only.
vue-it-bigger - A simple image / (YouTube) video lightbox component for Vue.js.
v3confirm - A plugin dedicated for vue3 to show confirm dialog modal.
vue3-promise-dialog - Let's you create promise based dialogs in Vue 3 (Composition or Options API) with ease !
vue3-side-panel - 🔥 Easy to use and flexible modal sidebar component for Vue3.

Parallax

vue-parallax - Scrolls an image slower than the window to create a neat optical effect.
vue-parallaxy - Vue.js component for parallax image scroll effects.
vue-mouse-parallax - A simple to use Mouse Parallax Component - Made with Vue.js
vue-parallax-js - Tiny vue component that adds a directive for parallax effect on elements.
vue-parallax-view - Create a composite control that displays different images that react to the mouse movement to create a depth effect

Icons

vue-awesome - Font Awesome component for Vue.js, using inline SVG.
vue-material-design-icons - A collection of SVG Material Design icons as single file components.
vue-icon-font - A iconfont plugin for Vuejs (support Font-class and Symbol).
vue-ionicons - Vue Icon Set Components from Ionic Team.
vue-ico - Dead easy icons for Vue with drop-in browser support & selective bundling
mdi-vue - Material Design Icon components for Vuejs
vue-fontawesome - Font Awesome 5 Vue component
g-icon - Simple icon component for your svg icons (compatible with Font Awesome-like font toolkits)
vue-simple-line-icons - Simple Line Icons component for Vuejs
vue-country-flag - Vue component for country flag icons
vicon - Vicon is an simple iconfont component for vue.
md-svg-vue - Material Design Icons by Google for Vue.js & Nuxt.js (server-side support (with caching), inline svg rendering, official icon names)
vue-lang-code-flags - Vue component which shows the flag of the country from which the language comes from
vue-zondicons - Vue component for the beautiful Zondicon svg icons
vue-eva-icons - Simply beautiful open source eva icons as Vue components.
vue-unicons - 1000+ Pixel-perfect svg unicons for your next project as Vue components.
vue-fa - Simple FontAwesome 5 Vue.js 2 component.
vue-cryptoicon - Beautiful pixel perfect 400+ cryptocurrency and 10+ Fiat currency icon.
vue-hero-icons - A set of high-quality SVG icons, sourced from @refactoringui/heroicons, as Vue functional components.
vue-heroicons - Vue component for 104 premium Heroicons UI svg icons
vue-tabler-icons - Vue components for Tabler Icons SVG icons.
oh-vue-icons - A Vue component for including inline SVG icons from different popular iconpacks easily.
vue-feather-icons - Simply beautiful open source icons as Vue functional components.
vue-feather - Feather icons component for Vue 3.
eos-icons-vue - Eos icons npm package for Vue 3, eos-icons-vue2 for Vue 2
vue-icomoon - With vue-icomoon you can easily use the icons you have selected or created in icomoon.

Marquee

vue-dynamic-marquee - Marquee component, fully responsive to changes on the fly.
vue3-marquee - A simple and responsive marquee component for Vue 3 applications with 0 dependencies.

vue-accordion - Simple accordion nav menu component for Vue.js.
vue-js-dropdown - Vue.js 2 dropdown menu component. Light, easy to use and extend, no external deps.
vue-slideout - Vue implementation of the popular library slideout
vue-quick-menu - This is web navigation component base on vue.js2.
@hscmap/vue-menu - Menu / Context Menu component for vue2.
vue-router-nav - Minimalistic responsive navigation bar that renders routes of vue-router.
vue-drawer-layout - A simple DrawerLayout component like Android has for Vue.js.
vue-simple-menu - Simple menu component with a set of basic functionality, which is enought in 80% of cases
vue-tree-navigation - Vue.js 2 tree navigation with vue-router support
bp-vuejs-dropdown - Vuejs => 2 dropdown. Easy to use, no external, optional.
vue-bulma-accordion - Simple, easily configurable accordion or collapsible styled with Bulma custom or built in icons available
v-selectmenu - A simple, easier and highly customized menu solution for Vue2.
vue-burger-menu - An off-canvas sidebar Menu component with different CSS animations.
vue-dynamic-dropdown - A Highly Customizable, easy-to-use elegant dropdown component
vue-navigation-bar - A simple, pretty navbar for your Vue projects.
vue-simple-search-dropdown - A simple searchable input dropdown component with no external dependency
@innologica/vue-dropdown-menu - Dropdown menu component for Vue. Any element can be dropdown trigger and anything can be dropded down content.
vue-menu-aim - Menu triangle select, aka Amazon
vue-stripe-menu - Creating a navigation menu with animations like on Stripe
vue-burger-button - A pretty simple Vue functional component for menu burger buttons.
@satmaxt/sidebar-menu-drawer - A simple interactive sidebar menu drawer and easy to implement
vue-file-toolbar-menu - UI file/toolbar menus for Vue apps
v-dropdown-menu - Customizable dropdown menu plugin for vuejs. SSR supported.
vue-bottom-sheet - A swipeable bottom sheet component for Vue.js created with Hammer.js
SDropdown - Highly customizable, simple and modern Vue 3 dropdown component.

Minus Plus Input

minus-plus-input - A number input with plus minus; included for Vue.js v1 and v2.
vue-integer-plusminus - Integer input with increment and decrement buttons for vue 2.
vue-numeric-input - Number input component with controls.

Carousel

vue-easy-slider - Slider Component of Vue.js.
vue-l-carousel - A responsive carousel(namely slider or swiper) component for Vue.js v2.x+.
vue-awesome-swiper - Swiper(slide) component for Vue.js(1.x ~ 2.x).
vue-lory - Vue Slider Component based on lory.
vue-slick - Vue component for Slick-carousel.
vue-flickity - A Vue Component for Flickity.js.
vue-carousel-3d - Vue Carousel 3D - Beautiful, flexible and touch supported 3D Carousel for Vue.js.
vue-carousel - A flexible, responsive, touch-friendly carousel for Vue.js.
vue-coverflow - A vue2.x coverflow component.
vue-agile – A carousel component inspired by Slick, written in Vue.js and vanilla JS only.
vue-tiny-slider – A carousel component created by ganlanyuan, written in Vue.js. No jQuery. Works in IE8+.
vue2-text-swimlane - A Text Swimlane plugin for Vue.js
vue-picture-swipe - Vue Picture Swipe Gallery (a gallery of image with thumbnails, lazy-load and swipe) backed by photoswipe.
vue2-siema - Plugin wrapper for the very tiny Siema carousel/slider library.
vue-flux - Image slider which comes with 20 cool transitions.
vue-glide - Vue slider & carousel component on top of the Glide.js
vue-owl-carousel - Vue component for Owl Carousel 2
vueper-slides - A touch ready and responsive slideshow / carousel for Vue JS.
Hooper - Customizable accessible carousel slider optimized for Vue
Lingallery - Simple image gallery component for Vue which displays a large image with thumbnails below
vue-piece-slider - Animated slides in a fragmented look
vue2-photo-carousel - A photo carousel component for Vue2
vue-netflix-slider - A Netflix like slider.
vue-pswipe - Easy to use, no need to set the size, support rotation, photoswipe based vue swipe plugin
vue-cat-carousel - Lightweight, simple and customizable for Vue Js
@egjs/vue-flicking - It's reliable, flexible and extendable carousel for Vue.js 2 & 3.
slither-slider - Carousel for images, videos, or components. Throw pretty much anything you want at it.
vue-slick-carousel - A carousel with slick features & SSR support written for faster Luxstay
@jfm/vue-carousel - A Vue carousel component.
vue-snap - Lightweight Carousel based on Scroll Snap CSS
vuerollr - Mouseover gallery plugin for Vue.js. Supports image and video.
vue-splide - Splide is a free lightweight but powerful slider and carousel, written in pure JavaScript without any dependencies. It supports a thumbnail slider, nested slide.
swiper - Official Swiper component for Vue 3. Tree shakable, SSR support, typing, a11y and a lot more
vue-split-carousel - A carousel component meanwhile display several carousel item, supprot vue 2 and vue 3.
vue-concise-carousel - Vue Concise Carousel with True SSR. Works for Vue 2 & 3.

Charts

vue-morris - VueJS component wrapping Morris.js.
vue-chartjs - Vue.js wrapper for Chart.js.
vue-echarts - ECharts component for Vue.js.
vuetrend - Simple, elegant spark lines for Vue.js.
vue-highcharts - Highcharts component for Vue.
vue-echarts-v3 - Vue.js(v2.x+) component wrap for ECharts.js(v3.x+).
vue-chartist - Vue.js 2.0 component wrap for Chartist.
vuebars - Simple, elegant spark bars for Vue.js.
vue-d3-network - Vue component to graph networks using d3-force
vue2vis - Vue2 wrapper for Visjs.
vue-c3 - A reusable vue component for c3 charts
vue-d2b - Vue components for d2b charts. (Including axis, pie, sankey, and sunburst charts)
VueChart - A very simple Vue wrapper for Chart.
vue-chartkick - Create beautiful JavaScript charts with one line of Vue
d3vue - A D3 Plugin for Creating Reactive Data Visualizations in VueJS
vue2-frappe - A simple wrapper around Frappe Charts for VueJS
vue-google-charts - Reactive Vue.js wrapper for Google Charts lib
vue-graph - Data visualization library for dashboard implementation in Vue.js
vue.d3.sunburst - Reactive sunburst component based on D3.js
v-chart-plugin - A customizable component for adding D3 charts that binds to your components data.
vue-jqxchart - Charting component with Pie, Bubble, Donut, Line, Bar, Column, Area, Waterfall, Polar & Spider series.
toast-ui.vue-chart - Vue Wrapper for TOAST UI Chart.
vue-apexcharts - Vue.js component for ApexCharts.
vue-doughnut-chart - Doughnut chart component for Vue.js.
v-charts - Chart components based on Vue2.x and Echarts.
vue-css-donut-chart - Lightweight Vue component for drawing pure CSS donut charts.
vue-trend-chart - Simple trend charts for Vue.js
vueplotlib - Declarative, interactive, linked plot components
vgauge - A Vue Wrapper to GaugeJS - Create beautiful gauges
vue-plotly - Wrapper for plotly.js declarative charting library that ships with 20 chart types, including 3D charts, statistical graphs, and SVG maps.
vue-funnel-graph-js - Funnel graph drawing library for Vue.js. Create vertical and horizontal animated SVG funnel charts and add labels, values, legend and other info.
pure-vue-chart - Lightweight vue charts implemented without any chart library dependencies
f2-vue - Vue wrapper of f2 - elegant, interactive and flexible mobile chart library
ZingChart-Vue - Vue component made by ZingChart with 35+ chart types.
jscharting-vue - Vue chart component offering a complete set of chart types and engaging data visualizations with JSCharting.
flowchart-vue - Flowchart & Flowchart designer component for Vue.js.
vue-d3-barchart - Small component to draw charts using d3.
vue3-highcharts - A Highcharts.JS wrapper component for Vue 3
echarts-for-vue - ECharts Wrapper Component For Vue 3 and 2
vue3-chart-v2 - Vue wrapper component base on Chart.JS for Vue 3
vue-gauge - Vue.js component to create animated svg gauge charts

Time

Display time / date / age

vue-timeago - A tiny timeago component for Vue.
vue-moment-jalaali - Jalaali Moment.js filters for your Vue.js project.
vue-countdown-timer - Added timezone conversion support.
vue-analog-clock-range - Analog clock range to show time difference.
vue-moment-lib - A simple Vue.js 2.0 MomentJS library (filters & globals) using the same momentjs API.
vuejs-countdown - A simple countdown timer component for vue js 2.0
vue2-flip-countdown - A countdown timer with flip effect for Vue 2.x
timeline-vuejs - A minimalist timeline for Vue
vue-awesome-countdown - Countdown plug-in with high performance and high accuracy for Vue 2.5.0+. Official site: https://vac.js.org
vue-clock2 - Display clock component for Vue.
vuemodoro - Pomodoro timer as single file Vue component.
digital-clock-vue - ️A digital clock simulation build on Vue.
bs-vue-timeline - An alternative responsive boostrap-vue timeline
simple-vue-timeline - A simple but customizable and reactive timeline vue component
vue-moment - Handy Moment.js filters for your Vue.js project.
v-idle - A Vue.js plugin to detect idle/non-active users.
v-digital-time-picker - Digital Time Picker for Vuetify.
vue-horizontal-timeline - Just a simple horizontal timeline component made with Vue.js.
vue-timer-hook - Vue 3 Timer module inspired by react-timer-hook
vue3-flip-countdown Customize Countdown timer with Flip Animation for Vue 3.x

Calendar

Display non-editable events in a Calendar

vue-fullcalendar - Vue calendar fullCalendar. No jQuery required. Schedule events management.
vue-event-calendar - A simple events calendar for Vue2, no dependencies except Vue2.
vue-calendar-picker - Lightweight calendar component for events display, period selection and date picker.
vue-lunar-calendar - A vue component for lunar calendar. Uses Moment.js for date operations.
vue-simple-calendar - Flexbox-based Vue month calendar compenent; supports multi-day events, localization, holiday emoji, drag/drop. No dependencies.
vue2-calendar - A simple full calendar component aimed at being flexibile and lightweight.
vue-jlunar-datepicker - A Chinese lunar datepicker component with festivals and solar terms.
vue-full-calendar - A complete fullcalendar.io wrapper for both Vue 1 and 2
v-calendar - Animated calendar/datepicker that displays regions, indicators and day popovers for simple & recurring dates.
vue-infinite-calendar - A simple infinite calendar implementation for Vue 2
vue-calendar - A simple calendar components for Vue 2.1.5+, support custom content. No dependencies.
vue2-event-calendar - An events calendar for Vue2, support customize event items and calendar header.
vue2-datePicker-infinite - An infinite datePicker for Vue2, easy to use and no dependencies.
vue2-slot-calendar - A vue 2 calendar, datepicker component which supported lunar or date event, bootstrap style.
quasar-calendar - A vue.js calendar using the Quasar framework that implements monthly, multi-day and agenda views.
vue2-datepicker - A beautiful datepicker / datetimepicker component for Vue2
vue-pikaday - VueJS wrapper component for Pikaday datepicker
vue-tuicalendar - VueJS wrapper component for tui.calendar calendar
vue-jqxscheduler - VueJS Scheduler component.
toast-ui.vue-calendar - Vue Wrapper for TOAST UI Calendar.
vue-functional-calendar - Lightweight, high performance calendar component(Date Picker, Date Range) based on Vue.
vue-cal - A Vue JS full calendar, no dependency, no BS. 🤘.
vue-material-year-calendar - A full year (12 months on a page) calendar for Vue2. Uses dayjs.
vuelendar - Simple and clean calendar written in VueJS
vue-date-tools - Most lightweight VueJS Date picker & Daterange picker using date-fns and no other dependencies
vue-spring-calendar - It's a Vue based component which provides the functionality of a full-calendar that shows daily events. the demo.
vue-jquery-calendar - VueJS light weight wrapper component for jquery ui datepicker
vue-schedule-board - A easy-to-use component to show somebody's schedule list to help interview arrangement or visit arrangement.
vue-lunar-calendar-pro - A vue component for lunar calendar. Uses calendar.js for date operations.
vue-sweet-calendar - A simple and sweet vue.js calendar
vue-datepicker-ui - A datepicker component for vue.js

Map

vue2-google-maps - Google maps component for vue with 2-way data binding.
vue2-leaflet - Vue 2 components for Leaflet maps.
vue-mapbox-gl - Vue 2.x component for Mapbox GL JS
vue-yandex-maps - Vue 2.x component for Yandex Maps
vue-baidu-map - Vue 2.x component for Baidu Maps.
vue-choropleth - Vue 2.x component to display a choropleth map.
vuelayers - Vue 2 components to work with OpenLayers.
vue-googlemaps - Vue 2.x components to integrate Google Maps.
vue-static-map - Vue 2.x simple component to generate an static google map
vue-mapbox - Vue 2.x wrapper around Mapbox GL JS library that provides vueish-way to interact with the map.
vue-cesium - Vue 2.x & Vue 3.x components for Cesium.
vue-async-gmaps - Let users decide to load google-maps script for better privacy
@geospoc/v-mapbox - Combine powers of Vue.js and Mapbox GL JS (Maintained fork of soal's vue-mapbox)
@geospoc/v-mapbox-geocoder - Geocoder control for your awesome Mapbox library
x5-gmaps - lightweight Google Maps plugin for Vue 2.x
vue2-gmap-custom-marker - Vue google map custom marker component
vue3-openlayers - Vue 3 components to work with OpenLayers.
vue-mars3d - Vue 2.x 3D earth visualization JS development platform.
vue-leaflet-custom-marker - Vue leaflet for open street map custom marker component

Audio / Video

Vue-APlayer - :cake: Easy-to-config music player for Vue 2.x.
vue-audio - audio-tag wrapper; sound player component for Vue 2.x
vue-dplayer - A Vue 2.x video player component based on DPlayer.
vue-canvasvideo - A Vue 2.x component for video backgrounds and autoplay video on iOS/Safari.
vue-music - A Vue component base on html5 <audio>.
vue-audio-visual - Vue HTML5 audio visualization components.
vue-plyr - A set of Vue components for the plyr video & audio player.
v-playback - A Vue2 plugin to make video play easier.
vue-audio-recorder - Audio recorder for Vue.js. It allows to create, play, download and store records on a server
vue-video-section - A simple video header/section component for Vue. Good for video backgrounds and overlaying content on them.
vue-waveform -It is use canvas waveform audio player wavesurfer component contains timeline bar line for Vue 2.x
vue-responsive-video-background-player - Play your own videos in background responsively in different resolutions.
vue-h5-audio-controls - A simple h5 music controller for Vue.
xns-audio-player-simple - A light and customizable Vue 2.x audio player powered HTMLAudioElement.
vue-core-video-player - A Lightweight Video Player For Vue.js
vue-player - A simple html5 video player with img placeholder for Vue 2.x.
vue-audio-better - Easy to create custom audio player components for Vue 2.x. A progress bar with soul.
vue-sounds - Easy to add sounds to your components.
vue-soundcloud-player - A custom Soundcloud player supporting single tracks & playlists
vue-use-sound - A Vue Hook for playing sound effects.
vue-flv-player - An HTML5 Flash Video (FLV) Player component for Vue 2.x, based on flv.js.
control-knob - Rotary control knob component for Vue 3 that behaves like audio app controls.

Infinite Scroll

vue-infinite-loading - An infinite scroll plugin for Vue.js 1.0 & Vue.js 2.0.
vue-mugen-scroll - Infinite scroll component for Vue.js 2.
vue-infinite-scroll - An infinite scroll directive for vue.js.
vue-loop - An infinite content loop component for Vue.js 2.
vue-scroller - An infinite content loop component for Vue.js 2, including functionalities such as 'pull-to-refresh', 'infinite-loading', 'snaping-scroll'.
vue-infinite-list - An infinite list mixin can recycle dom for Vue.js 2
vue-infinite-slide-bar - ∞ Infinite slide bar component.
vue-virtual-infinite-scroll - A vue2 component based on Iscroll, supports big data list with high performance scroll, infinite load and pull refresh.
@egjs/vue-infinitegrid - Arrange infinite card elements according to various layout types like masonry for Vue.js 2.
@grafikri/vue-infinite-scroll - Basic infinite scroll for Vue

Pull-to-refresh

vue-pull-refresh - A pull to refresh component for Vue.js 2.0.
vue-data-loading - Another component for infinite scroll and pull down/up to load data.
vue-quick-loadmore - A pull-down refresh and pull-up infinite scroll plugin for Vue.

Markdown

vue-markdown - A Powerful and Highspeed Markdown Parser for Vue.
vue-mavonEditor - A markdown editor based on Vue that supports a variety of personalized features.
vue-simple-markdown - A Simple and Highspeed Markdown Parser for Vue.
vue-simplemde - A wrapper around simplemde. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.

PDF

vue-pdf - A pdf viewer based on mozilla's PDF.js
pdfvuer - A PDF viewer for Vue using Mozilla's PDF.js with text support for Vue2 and Vue3. Demo
vue-pdf-embed - PDF embed component for Vue 2 and Vue 3

Tree

Vue.D3.tree - A Tree View based on D3.js
vue-json-tree-view - A JSON Tree View Component for Vue.js.
vue-tree - A Tree Component for Vue.js 2.X.
liquor-tree - Amazing Vue Tree component
vue-trees-ui - A Tree Ui Base On Vue.
Bosket - Collection of tree view components for front-end frameworks (Vue, React, Angular and Riot).
plantain-00/tree-component - A reactjs, angular and vuejs tree component.
sl-vue-tree - A simple customizable draggable tree component for Vue.js
he-tree-vue - A draggable sortable vue tree component, with dragging placeholder, types definition. 14 KB gzipped.
vuejs-tree - A highly customizable VueJs tree viewer
vue-jstree - A Tree Plugin For Vue2 with beautiful icons and drag&drop
vue-vtree - Universal and flexible tree component for Vue.js
vue-json-component - JSON tree view with no dependencies, TypeScript support, and easy customization.
vue-tree-list - A vue component for tree structure
vue-finder - A component to display hierarchical data, with selection, filtering and drag & drop
vue3-router-tree - This component is based on Vue.js 3, it represents your routes or items as a tree view 🌲.
object-visualizer - Vue 3 JSON inspector with Chrome-like theme.
vue-virtual-tree - Tree component for large amount of data, base on Vue3.
vue-json-viewer - A JSON Tree View Support for incremental update components, base on Vue2 and Vue3.

Graph

vue-pipeline - A easy-to-use component to show beautiful responsive pipeline like jenkins blue ocean plugin.
vnodes - General purpose components to create svg interactive graphs, diagrams or node based visual tools.
v-network-graph - An interactive SVG based network-graph visualization component for Vue 3.
coya - Diagram drawing library (vue3 only)

vue-social-sharing - A renderless Vue.js component for sharing links to social networks, compatible with SSR
vue-goodshare - Vue.js component for social share with beautiful button design. Simple install, extensive documentation, developer support, SEO friendly, clean code without scripts tracking user activity on the page, high speed. Work with Vue.js 2.x.
vue-socialmedia-share - A Vue.js component for sharing links to social networks, with Vue 2.X
vue-picture-sharesheet - A Vue Picture Sharesheet Component heavily inspired by the Image Sharesheet in Apple's Newsroom
vue-twitter - A Vue.js component for embed twitter widgets (e.g timeline, buttons)
vue-share-buttons - Vue.js component for placing buttons in your project using which you can share anything
vue-share-it - A Vue.js component for sharing links to social networks
vuesocial - 🧞‍♀️🧞‍♂️ One easy-to-use button component for Vue.js with 65+ social networks.
vue-socials - 💬 Social media share buttons and counts for Vue.js.

QR Code

vue-qriously - A Vue.js 2 component to draw QR codes on an HTML Canvas using qrious.
vue-qart - The directive of vue 2.x for qart.js.
vue-qrcode-reader - A Vue.js 2 component which detects and decodes QR codes from a camera stream.
vue3-qr-reader - A Vue 3 QR reader component. Refactor vue-qrcode-reader for vue 3 compatibility.

Search

vue-fuse - A lightweight plugin for fuzzy search library, Fuse.js
vue-instantsearch - The ultimate toolbox for creating instant-search experiences using Algolia.
vue-innersearch - A Vue.js wrapper for Elasticsearch
reactivesearch-vue - UI components for building data-driven apps with Elasticsearch
vue-search-panel - A Vue component for searching with suggestions
vue-json-search - Headless Vue 3.x component for easy and simple json-based search
vue-search-input - A Vue 3 search input component, inspired by the global search input of Storybook and GitHub.

Miscellaneous

vue-avatar - An avatar component for vue.js.
vue-touch-ripple - Touch ripple component for Vue.js(1.x ~ 2.x).
vue-typer - Vue component that simulates a user typing, selecting, and erasing text.
vue-keyboard - Vue 2 virtual keyboard component.
vue-twentytwenty - Image comparison component, works with Vue.js 2.x
vue-cookie-law - Cookie info plugin for Vue.js 2.x
vue-gravatar - A dead-simple gravatar component for Vue.js 2.x
vue-clipboard2 - An easy to use clipboard.js binding for Vue.js 2.x
vue-flashcard - FLashcard component with animation for Vue.js 2.x :bulb:
vue-truncate-collapsed - A simple component that truncates your text and adds a 'Read More/Show Less' clickable for Vue.js 2.x
vue-kanban - A flexible drag and drop kanban board component
vue-letter-avatar - A simple and elegant letter avatar component for vue.js
vue-highlightjs - Syntax highlighting with highlight.js
v-clipboard - Simple, tiny and easy to use directive to save your models to clipboard (less than 2kb minified, no dependencies)
vue-invisible-recaptcha - Super easy integration for Google's Invisible reCAPTCHA
vue-embed - Embed component is based on embed.js for Vue 2.x, a component that embeds emojis, media, maps, tweets, gists, code, services and markdown.
vue-particles - Vue.js component for particles backgrounds
vue-uniq-ids - Vue.js 2.x plugin that helps to use id-related attributes with no side-effect
vue-multivue - Use multiple vue apps of the same class on the same page.
vue-affix - A Vue.js 2.x plugin that affixes an element in the window while you scroll, similar to Bootstrap Affix but much simpler and smarter
X-Browser-Update-Vue - A Vue.js browser-update plugin.
vue-query-builder - A UI component for building complex queries with nested conditionals.
vue-info-card - A simple and beautiful card component with an elegant spark line and CSS3 flip animation.
v-offline - Simple, tiny and easy to use detection of offline & online events for your Vue app (less than 390b minified)
vue-word-cloud - A word cloud generator.
vue-flat-surface-shader - A Vue component for flat surface shader
vue-easteregg - Easey add an easteregg to your vue app (default with konami code)
vue-barcode-scanner
vue-heatmapjs - A Vue directive for tracking and visualising mouse activity
vue-maze - An itty-bitty maze game made as Vue.js component
vue-drag-verify - This is a vue component, which is sliding to unlock for login or sign up.
vue-balloon - Vue components for creating fixed, zoomable containers in the corner of a page. Similar to the mail composition wrapper used in gmail.
vue-sticker - Sticker effect to any directions
v-rating - ⭐️ Rating component in Semantic-UI made with VueJS (< 500B gzipped, blazing fast)
vue-content-placeholders - Composable components for rendering fake (progressive) content like facebook in vue
vue-page-designer - Vue component for drag-and-drop to design and build mobile website.
vue-creativecommons - CreativeCommons.org Vue.js components library.
vue-status-indicator - A Vue.js component to show status indicator as colored dots.
vue-google-adsense - Vue.js Google Adsense Component with InFeed and InArticle Ads support
emoji-vue - Emoji 😎👌🏻 dropdown for Vue.js project
vue-chessboard - Chessboard vue component to load positions, create positions and see threats.
vue-mindmap - Vue component for mindnode maps.
v-currency - Vue component for formatting currency.
vue-emoji-picker - Highly customizable unicode emoji picker 🔥🚀
vue-8-puzzle - An itty-bitty slide puzzle game made as Vue.js component
vue-e164 - Customizable phone formatter with E.164 standart support
vue-pgn - Vue.js component for viewing chess games in pgn format
vue-avatar-editor - Resize, rotate and crop your uploaded avatar using a clear user interface.
vue-connection-listener - Vue event bus plugin listening for online/offline changes.
vue-sauce - "View source" directive for Vue.
vue-prom - Vue promise wrapper component.
numeric-keyboard - Numeric keyboard for mobile browsers.
vue-zoom-on-hover - Image zoom on mouse hover
vue-responsive-image - A Vue component that lets you quickly create responsive image tags with an optimal number of image sources for all devices.
vue-highlight-text - Vue component for highlight multiple instances of a word
vue-cast-props - Provides a convenient way of converting props to common data types.
vue2-heropatterns - A Vue2 implementation allowing you to add the popular Hero Patterns onto any Div
vue-link - One component to link them all 🔗 (treat external and internal links same)
vue-identify-network - ⚡️Identify what kinda internet your users are using!
vue-cloneya - A vue component to clone DOM elements
vue-survey-builder - Survey builder for vue.js applications
vue-if-bot - A lightweight component to hide/show content to clients based on the user agent
vue-clampy - Vue.js (2+) directive that clamps the content of an element by adding an ellipsis to it if the content inside is too long.
vue-cookie-accept-decline - Show a banner with text, a decline button, and an accept button on your page. Remembers selection using cookies. Emits an event with current selection on creation. Good for GDPR requirements.
@lossendae/vue-avatar - An avatar component for VueJS 2.0.
vue-text-highlight - Text highlighter library for Vue.js 💄
vue2-hammer Hammer.js wrapper for Vue 2.x to support mobile touch..
vue-countable - Vue binding for countable.js. Provides real-time paragraph, sentence, word, and character counting.
v-show-slide - A Vue.js directive for animating an element to and from height: auto in a sliding motion.
vue-swipe-actions - iOS style swipe actions for Vue.js
vue-friendly-iframe - A Vue js component for creating super fast loading, non-blocking iframes.
vue-beautiful-chat - A simple and beautiful Vue chat component backend agnostic, fully customizable and extendable.
vue-magnifier - A simple image zooming / magnifying component for Vue.js 2.x.
vue-highlight-words - Vue component to highlight words within a larger body of text. Ported from react-highlight-words
vue-tags-ball - Create a beautiful and spherical tag with this plugin
vue-rippler - Simple Vue.js plugin for custom ripple effect
vue-contacts - Mobile contacts component for Vue
basic-vue-chat - Easy to use Vue.js chat
vue-resize-text - A vue directive which automatically resize font size based on element width.
vue-github-profile - A vue component to view the profile and repos of determined user
vue-niege - 🎄 🎅 Single File Vue component to add a snow storm through a canvas.
vue-dynamic-star-rating - A highly dynamic vue stars rating component, like google play rating ⭐️ ⭐️ ⭐️ ⭐️ ⭐️
vue-katex - Simple plugin for math typsetting using KaTeX in Vue.js
vue-baberrage - A simple Barrage plugin Base on Vue.js😎
vue-terminal-ui - 🖥Terminal UI emulator Vue: custom and basic commands
vue-command - A fully working Vue.js terminal emulator
vue-ribbon - Vue component for GitHub ribbons
avatio-avatar - Vue component for illustrated avatars - used by Avatio
vue-jazzicon - A dead-simple Jazzicon component for Vue.
vue-star-rating - A simple, highly customisable star rating component ⭐️ ⭐️ ⭐️
vue-fixed-header - Simple and cross-browser friendly fixed header component for Vue.js written by TypeScript.
vue-particle-effect-buttonsA bursting particles effects buttons component.
vue-insomnia - Prevent display screen from sleeping (wake lock).
vue-car-plate-keyboard - A car license plate number keyboard for VueJS 2.x.(车牌号输入键盘，支持新能源车牌 🚗🚗🚗)
vue-dataflow-editor - Vue2 dataflow graph editor
vue-twemoji-picker - A fast plug-n-play Twemoji Picker (+textarea for Twemoji rendering) for Vue.
vuejs-avataaars - Simple avatar generator Vue component for avataaars.
vue-moveable - A Vue Component that creates Moveable, Draggable, Resizable, Scalable, Rotatable, Warpable and more.
vue-camera-gestures - Let users control your Vue app using AI and gestures in front of their camera in just 1 line in your HTML template!
vue-aspect-ratio - A tiny component to handle aspect ratios with no effort.
query-builder-vue - A query-builder library for building complex and nested queries with draggable re-ordering.
vue-meeting-selector - A meeting selector inspired by doctolib, fast and fully custom made with Typescript.
cool-emoji-picker - A fast plug-n-play [Tw]emoji Picker (+textarea for Twemoji rendering) component for Vue.
vue-web-cam - Webcam component for VueJs.
vue-cursor-fx - An animated custom cursor effects for interactive elements like navigation, galleries and carousels.
vuetimeline - One easy-to-use component to build beautiful responsive timelines.
v-emoji-picker - :star2: A Lightweight and customizable package of Emoji Picker in Vue using emojis natives (unicode).
learnawesome-flashcard - Deck of flashcards with spaced-repetition via localStorage :bulb:
vue-portfolio-viewer - Scroll animated portfolio viewer component for vue js :bulb:
vue-text-middle-ellipsis - A simple vue-directive(2+) that clamps the content in the middle of the element if the content inside is too long.
vuesence-book - Documentation/help system component.
vue-turnjs - A component libary to add book experience to your app.
vuesence-sliding-header - Sliding header(s) for top navigation bar(s).
tsParticles - A lightweight Javascript library to easily create highly configurable and interactive particle animations
@bananajs/vue3-book-component - Book component for Vue 3. It provides easy, flexible API and great customizability.
@bananajs/vue2-book-component - Book component for Vue 2. It provides easy, flexible API and great customizability.
vue-image-zoomer - image zoom component for Vue.js 2, that also works on touch devices.
vue-show-more-text - Vue multiline sentence ellipsis component. The text in the component will be truncated.
vue-copy-to-clipboard - Vue.js 3 plugin to copy text to clipboard (Vue 3)
vue-advanced-chat - Feature-rich and fully customisable chat rooms component. Support files, images, videos, audio, emojis, customised actions, etc.
vue-visual-filter - 🕵️‍♂️ An unopinionated advanced visual filtering component for Vue 2 and 3.
vue-easter-egg-trigger - This packages makes it nice and easy to add Easter Egg triggers to your Vue site.
vue-word-highlighter - The word highlighter library for Vue 2 and Vue 3.
vue3-emoji-picker - Simple and Powerful Emoji Picker for Vue3.
vue-mathjax - A Vue.js Plugin for Mathjax
vue-mathjax-next - A Vue 3 plugin for Mathjax

Tabs

vue-tabs - Simple tabs and pills.
vue-swipe-tabs - A touch swipe tab component for vue.js(vue2).
vue-tabs-component - An easy way to display tabs with Vue.
vue-k-tabs - A simple tabs components with Gitlab design.
vue-tabs-with-active-line - Simple Vue 2 component, that allows you to make tabs with moving bottom line
vue-tabs-chrome - A Vue component for Chrome-like tabs.
vue-tiny-tabs - A minimalistic tabs component as tinytabs Vuejs wrapper (size < 3.1kb)
vue-lumino - A component to use Vue.js with Jupyter Lumino (PhosphorJS), integrating DOM & VDOM through event listeners and Vue reactivity system.
vue-router-tab - Vue.js tab components, based on Vue Router.
vue3-tabs - A touch swipe tabs component for vue 3
vue3-tabs-chrome - A Vue3 component for Chrome-like tabs.
vue-nav-tab Tab components for Vue.js 3 project

Form

Let the user create & edit data

Phone Number Input Formatter

vue-phone-number-input - A beautiful input to format & valid phone number with country code :fire:
vue-tel-input - International Telephone Input with Vue.

Pincode Input

vue-pincode-input - Smart pincode input component

Picker

vue-smooth-picker - A smooth picker component for Vue 2.x, like iOS native datetime picker.
vue-scroll-picker - A scroll picker component for Vue 2.x. Support all gestures of mouse(also wheel) and touch.
vue-fontawesome-picker - a font awesome icon picker component for Vue 2.x.
vue3-scroll-picker - A scroll picker component for Vue 3.
vue-wheel-picker - Customizable Picker with 3D wheel and all guestures supported for Vue 2.

Generator

FormSchema Native - Generate a form using JSON Schema and Vue.js
vue-generator - Initial router and components for the Vue project.
vue-form-json - Generate a vue form with validation and bulma style, from json
form-create - Form builder with dynamic rendering, data collection, validation, and submission capabilities, supporting json data
element-form-builder - Build element-ui forms with JSON Schema.
ncform - a very nice configuration generation way to develop form
Laraform - Advanced form builder for Vue.js with Laravel support
vue-ele-form - Vue DataForm, based on element-ui
vue-otp-2 - Vue OTP input 2, A Vue component for OTP input.
vue-form-generator A schema-based form generator component for Vue.js.
vue-form-builder - Build powerful vue form with JSON schema and composition api, popular ui frameworks such as Element UI, View UI, Ant Design Vue are supported. Online Demo
vue-dynamic-inputs - Create dynamic forms with buefy from json Online Demo
Vue Flow Form - Create conversational conditional-logic forms with Vue.js. Online Demo
vue-dd-form - 📋 Build forms only by describing data nodes - without programming! Online Demo
vue3-otp-input - A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API.
Vueform - (probably) the most comprehensive form builder for Vue.js Online Demo
IFstruct-parser-vue - Converts iofod edited projects into production-ready Vue projects

Date Picker

Date / datetime / time Picker

vue-datepicker - [unmaintained] Calendar and datepicker component with material design for Vue.js.
vue2-timepicker - A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support. :clock7: (Back and recharged in 2019 :battery:)
vuejs-datepicker - A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations.
vuedt - Crazy lightweight (<5kb!) Vuejs Date and Time picker component with i18n support, nice animations and not too much fuzz.
vue-flatpickr-component Vue.js component for flatpickr datetime picker
vue-jalaali-datepicker - Jalaali calendar and datepicker for vue.js 2.
vue-date-picker - A vue date picker component inspired by material design
vue-monthly-picker - Vue.js component for month and year picker only
vue-hotel-datepicker - A responsive date range picker that displays the number of nights selected, allows custom check-in/check-out rules, blocking dates, localization support and more.
vue2-persian-datepicker - An awesome Persian datepicker component for vue. کامپوننت انتخاب تاریخ برای ویو.
vue-datetime - Mobile friendly datetime picker for Vue. Supports date, datetime and time modes, i18n and disabling dates.
vue-rangedate-picker - Range date picker with simple usage
v2-datepicker - A simple datepicker component based Vue 2.x.
vue-datepicker-local - A Beautiful Datepicker Component For Vue2.
vue-airbnb-style-datepicker - A Vue datepicker with a similar look and functionality as the popular AirBnb datepicker. Lightweight, configurable and good browser support!
vue-persian-datetime-picker Persian material datepicker. Supports datetime, date, time, year, month.
VCalendar Very customizable and powerful calendar/datepicker component with many features and good documentation.
@owumaro/vue-date-range-picker - A vue component using Bootstrap 4 styles for date range selection
vue-datepicker-mobile - A mobile friendly datepicker for vue2. :cn: select one day or range of date and custom it that you wish.
vue-draggable-cal - Not your ordinary datepicker. A Vuejs draggable date selector with a fresh responsive design, mobile ready and 0 dependencies, 17kb gzipped.
vue-vanilla-datetime-picker - Datetime picker for Vue.
vue2-daterange-picker - Vue2 date range picker based on bootstrap-daterangepicker (no jQuery dependency)
vue-timeselector - Fully and simply customizable powerful time picker component for Vue.js.
vue-date-picker - Lightweight datepicker component for Vue 2.x.
vue-ctk-date-time-picker - A beautiful VueJS component to pick date & time (with range mode) :new:
simple-vue2-datetimepicker - A simple, easy to use vue.js component for date and time picking. :new:
vue-business-hours - Vue component for selecting business hours in an administration panel or dashboard.
material-vue-daterange-picker - a daterange picker of Material Design style for Vuejs 2.x, which is compatible with vuetify and friendly for mobile.
vue-datepicker - A clean & responsive datepicker with Material Design style for Vuejs 2.x. (date/month/quarter && date range picker) :new:
@alireza-ab/vue-persian-datepicker - A datepicker component for select persian date. (single and range selection, select date and time, select with keyboard, customizable style, localization)
vue-easy-range-date-picker - A simple and easy VueJS (2.x) component for date range selection
vue3-date-time-picker - The most complete date picker solution for Vue 3
vue-datepicker-next - Vue 3.x component for datepicker / timepicker / datetimepicker / calendar

Select

vue-select - A native Vue.js component that provides similar functionality to Select2 without the overhead of jQuery.
vue-multiselect - Universal select/multiselect/tagging component for Vue.js.
stf-vue-select - most flexible and customized select Vue2
vue-select-image - Vue 2 Component for selecting image from list
@riophae/vue-treeselect - A multi-select component with nested options support for Vue.js.
@k186/pd-select - A mobile UI component like IOS picker for Vue 2.x,can be wheel pick what ever you defined.
vue-dropdowns - A minimalistic and adaptable way to display select boxes if using objects for vue2.x
v-cascade - A lovely component of cascade selector with Vue 2.x (Support both of PC and Mobile)
vue-multi-select - A custom component to make select/multiselect for Vue2.
v-region - A simple region selector, provide Chinese administrative division data.
v-selectpage - A powerful selector for Vue2, list or table view of pagination, use tags for multiple selection, i18n and server-side resources supports.
vue-cool-select - Bootstrap / Material Design theme, support slots, autocomplete, events, validation and more.
@myena/advanced-select - Single/Multiple Select component with search, controls for (de)select all and a Bootstrap 3 theme
@alfsnd/vue-bootstrap-select - Vue version of bootstrap-select.
@SamuelTrottier/vue-wheel-select - A simple scrolling select component.
vue-search-select - Searchable select components and semantic-ui's dropdown compatible.
vue-gridmultiselect - Simple multi-select component with items displayed in a table like UI
vue-select-sides - A component for Vue.js to select double-sided data (2-sides).
vue-selectize - A Vue.js component wrapper around Selectize.js, a vanilla js select component
@vueform/multiselect - Vue 3 multiselect component with single select, multiselect and tagging options.

Slider

vue-slider-component - Slider for vue1.x and vue2.x.
vue-circle-slider - Circle slider component for vue2.x.
vue-slide-bar - Very simple vue slider bar component.
textra - Vue js add-on to slide text.
vue-knob-control - A rotary knob control for Vue.js
iv-slider - Slider component for vue2.x.
vue-histogram-slider - Range slider with histogram for Vue.js
xns-seek-bar - A seekable progress plugin for Vue 2.x.
@vueform/slider - Vue 3 slider component with multihandles, tooltips merging and formatting.

Drag and Drop

vuedraggable - Vue component allowing drag-and-drop sorting in sync with View-Model. Based on Sortable.js.
vue-dragula - Drag and drop so simple it hurts.
vue2-dragula - A vue-dragula fork for Vue2, with a lot of improvements.
awe-dnd - A sortable list directive with Vue.
vue-draggable-resizable - Vue2 component for draggable and resizable elements.
vddl - Vue components for modifying lists with the HTML5 drag & drop API, supports VueJs versions 1 and 2.
vue-drag-drop - A minimal and lightweight wrapper for the HTML5 Drag and Drop API.
vue-swing - A swipeable cards interface, as seen in apps like Jelly and Tinder.
vue-slicksort - A dependency-free set of mixins for animated, touch-friendly, sortable lists
draggable-vue-directive - A simple directive to handle drag and drop of any Vue component.
vue-smooth-dnd - Vue wrappers of smooth-dnd library. drag and drop, sortable library covering for many cases.
vue-drag-resize - A dependency-free Vue component for draggable and resizable elements with aspect ratio, reactive props etc
vue-drag-it-dude - Vue2 component, that allows you to drag object wherever you want.
vue-draggable - Vue Drag and Drop library without any dependency. Simple and easy to use.
vue-nestable - A simple drag & drop hierarchical list made as a vue component.
vue-tinder - Have your own Tinder and TanTan.
vue-card-swipe - A touch slider for vue.js, support sliding in any direction to switch cards, compatible with PC and mobile.
vue-drag-n-drop - A simple kanban board where the items can be dragged and dropped from the list on to the board.
vue-card-stack - Stackable, swipeable, tweakable Vue card component.

Autocomplete

Autosuggest / autocomplete / typeahead

vue-instant - Vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 applications.
v-autocomplete - Autocomplete component for Vue.js
vue-auto-complete - Autocomplete for Vue2. Works with objects or api calls.
vue-autosuggest - WAI-ARIA complete Autosuggest component with full customization over rendering and styling.
v-autosuggest - A simple modular Vuejs component that autosuggest input from a dynamic or static data querying.
autocomplete - Simple Autocomplete component for Vue.js 2.*
vue-infinite-autocomplete - Vue infinite-autocomplete wrapper for Vue.js 2.*
vue-simple-suggest - Simple yet feature-rich autocomplete component for Vue.js
v-suggest - A Vue2 plugin for input content suggestions, support keyboard to quick pick.
vue-bootstrap-typeahead - An typeahead/autocomplete component for Vue2 using Bootstrap 4 CSS.
vue-email-dropdown - An autocomplete for custom email domains.
vue-combo-blocks - Small, accessible, customizable and "renderless" autocomplete component for Vue.

Type Select

Let the user select a tag / something while typing

vue-input-tag - Vue.js 2.0 Input Tag Component.
v-distpicker A flexible, highly available district picker for picking provinces, cities and districts of China for Vue.js 2.x.
vue-img-inputer A graceful, highly customizable img type input for Vue 2
vue-img-preview An image input preview component in vue 2
v-image :camera: Tiny little component for input type=file (< 1kb, gzipped)
@voerro/vue-tagsinput A simple tags input Vue.js 2 component with typeahead/autocomplete
vue-tag-selector - Tag-like input. Light, customizable and handles REGEX validation!
vue-input-text-to-tags - A input component that can create tags for the result display

Color Picker

vue-color - Vue Color Pickers for Sketch, Photoshop, Chrome & more.
vue-swatches - Help the user picking beautiful colors!
radial-color-picker - Minimalistic color picker with a focus on size, accessibility and performance.
vue-color-picker-board - Vue Color Picker component designed for humans!
verte - A Complete Vue.js Color Picker Component.
vue-color-input – Vue 3 color picker component whose goal is to replace <input type="color">

Switch

Switch / on/off toggle / checkbox

vue-switches - An on/off switch component for Vue.js with theme support.
vue-js-toggle-button - Vue.js 2.0+ toggle / switch button - simple, pretty, customizable.
vue-checkbox-radio - A Vue component to easily styling checkbox and radio inputs.
vue-enhanced-check - Vue component to redesign/labelize checkbox/radio, including toggle/switch button.
pretty-checkbox-vue - Implementation of pretty checkbox 3(A pure CSS library to beautify checkbox and radio buttons) components for Vue.js 2.2+.
vue2-collapse - Vue Collapse is a flexible content toggling plugin for the accordion lists or any other conditional content rendering.
vue-badger-accordion - A wrapping Component for Badger Accordion for Vue.js 2.0+
vue-loading-checkbox - A highly customizable Vue.js checkbox UI component with loading state
vue-rocker-switch - A customizable rocker switch component for Vue.js.
vue-toggle-btn - A Highly Customizable, easy-to-use elegant toggle/switch button component
vue-tristate-checkbox - Cycling tristate checkbox that supports form submission
vue-toggles - A highly customizable and accessible toggle component
@vueform/toggle - Vue 3 toggle component with labels, custom slots and styling options.

Masked Input

vue-masked-input - Masked input component for Vue.js.
vue-text-mask - Input mask for React, Angular, Ember, Vue, & plain JavaScript.
vue-ip-input - An ip input implemented by vuejs.
vue-numeric - Input field component to display currency value based on Vue.
awesome-mask - Mask directive based on a pure and simply VanillaJS implementation
v-money - Tiny (<2k gzipped) input/directive mask for currency
vue-autonumeric - A Vue.js component that wraps the awesome AutoNumeric input formatter library
vue-inputmask - Vue.js directive to add Robin Herbots' inputmask library to your inputs (vanilla javascript).
vue-input-number - A custom input number component for Vue.js 2.
v-unicode - Vue directive to restrict an input by unicode values.
vue-cleave-component - Vue.js component for cleave.js
vue-ip - An ip address input with port and material design support
vue-r-mask - Directive with template similar to javascript regular expression.
vue-input-code - Base on Vue.js 2.0+ verification code input component.
label-edit - Inspired by Trello. Click to show editable input and return the value changes. This is a Vue Component.
vue-jquery-mask - Vue.js v2.x component for jQuery Mask Plugin
vue-currency-input - Easy input of currency formatted numbers for Vue.js.
vue-restricted-input - Input mask library for vue.js based on restricted-input
vue-input-facade - A lightweight and dependency free input masking library created specific for Vue, originally a fork of the famous vue-text-mask but activelly mantained and with lots of improvements after there.

Rich Text Editing

vue-quill-editor - Quill editor component for Vue2.
vue-mobiledoc-editor - A mobiledoc editor component toolkit for Vuejs.
vue2-medium-editor - A MediumEditor component for Vue 2.
vue-froala-wysiwyg - Official VueJS plugin for Froala WYSIWIG HTML Editor.
vue-at - At.js for Vue.
vue-wysiwyg Lightweight, fast & extensible WYSIWYG editor
vue-trumbowyg Vue.js component for Trumbowyg WYSIWYG editor
vue-pell-editor Vue.js component for Pell WYSIWYG editor
vue-tinymce-editor Tinymce editor component for Vue2.
vue-mce - tinymce editor component for VueJS.
Vue2-Editor - HTML Editor using Vue.js and Quilljs
vue-codemirror - A Codemirror component for Vue2.
vue-easy-tinymce - A simple and powerful package for easy usage of tinymce in Vue.js project.
vue-highlightable-input - Highlight and style text as you're typing
vue-trix - Simple and lightweight Trix rich-text editor for Vue.js
tiptap - A renderless and extendable rich-text editor for Vue.js
toast-ui.vue-editor - Vue Wrapper for TOAST UI Editor.
ckeditor5-vue - An official CKEditor 5 rich text editor component for Vue.js.
yimo-vue-editor - A wangEditor2 component for Vue2.
vue-mathlive A MathLive math editor (mathfield) for Vue.hjs
vue-editor-js Next generation block styled editor. for Vue.js
element-tiptap A WYSIWYG rich-text editor using tiptap and Element UI for Vue.js
@mycure/vue-wysiwyg - 34Kb lightweight wysiwyg editor with NO 3rd party plugin.
ckeditor4-vue - An official CKEditor 4 rich text editor component for Vue.js.
vue-quill - ✒️📝 A Vue 3 rich text editor component based on Quill Editor.

Image Manipulation

Edit images

vue-core-image-upload - A vue plugin for image to crop and upload.
vue-croppa - A simple straightforward customizable lightweight mobile-friendly image cropper for Vue 2.0.
vue-cropper - A picture clipping plugin for vue2.0
toast-ui.vue-image-editor - Vue Wrapper for TOAST UI Image Editor.
vue-quick-cropper - Vue mobile avatar upload cropping plugin can choose cropping area and zoom.
vue-croppie - Yet another image cropper
vue-slim-cropper - 💇 A simple and elegant mobile image crop upload component for Vue 2.x.
vue-advanced-cropper - An advanced cropper that gives you opportunity to create almost any cropper that you desire
vue-anka-cropper - image cropper and uploader, rectangular and circular crop, customizable css
vue-picture-cut - image cropper：scale, flip, rotate, edge check, rectangle clip, ellipse clip
vue-img-cutter - A vue plugin for image cutting tool,it's very convenient to use.

Display images

vue-cloudinary - A vue (2.0) plugin that offers a reusable directive to get images from Cloudinary (https://cloudinary.com) with dynamic manipulation (resizing/cropping/effects/watermarking/scaling/formatting) and optimization (webp/png/auto quality/auto retina).
img-Vuer - An Mobile-First image viewer/gallery for Vue2
vue-image-loader - A vue loader/progressive image plugin like Medium.
vue-load-image - display loader during image loading, as well as by display alternate content when the image fails to load.
vue-image-painter - 🙋 Image magic animation drawing effect component for Vue 2.x.
vue-cosha - 🎨 An easy to use vue directive that places a colourful shadow behind any image
vue-image-kit - Vue.js Image Kit Component with Lazy Load built in and Responsive Images.
vue-preview-imgs - A picture preview plugin for Vue3

Video Manipulation

vue-playlist - A lightweight vue (2.0) component with no dependancies that offers truly seamless html5 video playback. The one and only working solution for seamless video play done with vanilla JS. It takes an array of videos and stitches them together into a single video.

File Upload

vue-clip - Simple and hackable file uploader for VueJs. Supports Vue >= 2.1.
vue-simple-upload - Simple File upload component for Vue.js.
vue2-multi-uploader - A drag and drop multiple file uploader component that uses Vue.js v2 and Axios. Uploader shows file names, sizes and total size of files added. It also allows setting a minimum required number of files to upload.
vue-dropzone - A Vue.js (vue2) component for Dropzone.js - a drag’n’drop file uploads utility with image previews.
vue-transmit - A purely Vue.js drag & drop uploader component based on Dropzone.js for Vue 2.0
vue-upload-component - Vue upload component, Multi-file upload, Upload directory, Drag upload, Drag the directory. Supports Vue >= 2.0
vue-uploader - A Vue.js upload component powered by simple-uploader.js
ic-firebase-uploader - A clean multi-file upload component for Firebase storage.
vuejs-uploader - A resumable multipart file uploader for HUGE file uploads.
vue-filepond - A Vue.js component for FilePond - a file upload library that can upload anything you throw at it.
v-uploader - A Vue2 plugin to make files upload simple and easier, you can drag files or select file in dialog to upload
vue-file-agent - Full-featured drag & drop enabled Vue file upload component with previews and upload progress
vue-cloudinary-uploader - A cloudinary image cropper and uploader component for VueJs
vue-dropify - A Simple image dropzone component for Vuejs

vue-context-menu - A context menu component for vue js.
vue-lil-context-menu - A flexible lil context menu component for Vue.
vue-mouse-menu - A popup menu for vue 2.6+ with support for mobile.
vue-context - A simple but flexible context menu for vue js.
vue-simple-context-menu - Simple context-menu component built for Vue. Works well with both left and right clicks.
vue-context-menu-popup - Context Menu popup for Vue 2. Works on right click or can be triggered programatically.
@kiyoaki_w/vue-context - A customizable context menu component built for Vue2, supporting fontawesome icons.
@overcoder/vue-context-menu - Minimal context menus

Miscellaneous

vue-gmaps - Search places and address using Google Maps API.
vuep - A component for rendering Vue components with live editor and preview.
vue-places - Places component is based on places.js for Vue 2.x. Turn any input into an address autocomplete.
vue-password-strength-meter - Password strength meter based on zxcvbn in vue.js.
vue-float-label - Float label pattern for Vue.js.
vue-longpress - A VueJS (2.x) button component that requires you to keep pressing to confirm a given action.
vue-google-autocomplete - A Vue.js (2.x) autosuggest component for the Google Maps Places API.
vue-default-value - Vue.js 2.x directive to set a default value for editable elements with no affect to the model state
vue-model-autoset - A Vue.js plugin to workaround Vue limitation in observing dynamically added properties with v-model directive
vue-submit - Simple implementation of Ladda (1, 2) in less than 90 lines of code with no dependencies.
vue-rate - Rate component for Vue
vuetify-google-autocomplete - A Vuetify ready Vue.js (2.x) autosuggest component for the Google Maps Places API.
vue-ripple-directive - Material Ripple Effect as Vue Directive.
vue-fab - Vue Floating Action Button.
vue-complexify - Vuejs porting library from jquery.complexify.js.
vue-mc - Models and Collections for Vue.js
vue-stars - Highly customizable rating control (using stars or other characters)
vue-confirmation-button - Customizable confirmation button that requires users to read messages before performing an action
vue-poll - A Vue.js component for voting
vue-diagrams - Diagram component for vue.js, inspired by react-diagrams
vue-easy-polls - A Vue.js component for creating polls, voting and showing results. It’s easy to implement and easy to customize.
vue-m-button - A beautiful button component for vue.
vue-long-click - Long click (long press) directive library for vue, support mobile and desktop.
vue-ui-predicate - A rules editor, generic filtering UI, predicates component for Vue JS.
vue-mobile-detection - Vue.js prototype function this.$isMobile() that returns a Boolean value depending on whether or not the user is browsing with a mobile.
vue-input-contenteditable - A Vue component wrapper for contenteditable with all the features you normally expect. Make beautiful inputs without the restrictions of input[type='text'].
@utlime/vue-zoom - A Vue zoom component.
vue-credit-card - A Vue Component for Credit Card Input & Masking & Preview
vue-simple-password-meter - Lightweight password strength meter with no dependency
vue-autosizer - A light replacement for built-in <textarea> and <input> elements allowing them to automatically stretch to fit the content.
vue-interactive-paycard - A fantastic credit card form with smooth and sweet micro-interactions.
vue-paycard - Credit card component made with Vue.js.
vue-list-picker - Just a simple list picker component made with Vue.js.
vue-diagram-editor - Highly customizable diagram editor with slot-based nodes (vue^2.6)
v-use-places-autocomplete - 📍 Vue composable for Google Maps Places Autocomplete.

Wizard

vue-form-wizard - Tab based component which can replace classic bootstrap & jQuery form wizards
vue-stepper - A simple stepper with simple actions such as next, back and end to perform simple forms.
vue-stepper-component - A fully customizable Stepper component with Vuex support and Zero dependencies.

CSV

vuecsv - A Simple CSV Downloader from json with option modal panel component.

Comment System

vue-comment-grid - 💬 Responsive Vue.js comment system plugin that built with CSS Grid and Firebase REST API + Authentication.
fastcomments-vue - 💬 A Vue component for FastComments, a live commenting system.

Canvas

vue-easeljs - Data-driven control over an HTML5 canvas element.
vue-canvas-effect - A simple, canvas effect collection for Vue.js.
vue-konva - Vue & Canvas - JavaScript library for drawing complex canvas graphics using Vue.
vue-html2canvas - Vue mixin to capture html and convert it to an image using Html2Canvas.
vue-canvas-nest - A Vue.js component for canvas-nest.
vue-signature-pad - 🖋 A Vue Signature Pad Component
vg-editor - A visual graph editor based on G6 and Vue, inspired by GGEditor
vue-pencil.js - Build reactive 2D graphics scene in your Vue project.
vue-scratchable - A Vue.js wrapper component that turns everything into fun scratch cards.
vue-rough - Components for Rough.js, a graphics library that lets you draw in a sketchy, hand-drawn-like, style.
vue3-signature - A electronic signature component for Vue 3
vue-signature - A electronic signature component for Vue2.x
v-perfect-signature - Pressure-sensitive signature drawing for Vue 2 and 3.

Link Preview

link-prevue - Flexible component for generate a link preview.

Tour

vue-tour - Lightweight and customizable tour plugin
vue-page-guide - Page tour / guide plugin with directive

Data Masking

vue-manual-data-masking - A VueJS (2.x) component for manual data masking

UI Layout

Layout for the overall / main view

vue-waterfall - A waterfall layout component for Vue.js.
vueisotope - Vue component for isotope filter & sort magical layouts.
vue-grid-layout - A draggable and resizable grid layout, for Vue.js.
vue-drag-zone - Drag Zone component for Vue.js(2.x).
vue-masonry - Vue.js directive for masonry blocks layouting.
vue-fraction-grid - Flexbox based responsive fraction grid system for Vue.js.
vue-virtual-scroll-list - A vue (2.x) component support big data by using virtual scroll list.
vue-virtual-scroller - Component to scroll a large amount of elements efficiently (Vue 2.x).
vue-virtualscroll - [Vue 2.x] component to virtual scroll things.
vue-inview - [Vue 2.x] Viewport, get notification when DOM element is entered or leave.
dnd-grid - A vuejs grid with draggable and resizable boxes
vue-extend-layout - Extend the default layout or create custom layouts for the pages of your Vue.js SPA
vue-masonry-css - Vue.js Masonry layout component powered by CSS, dependency free.
vue-fullpage.js - Official fullPage.js component for Vue.js.
vue-virtual-collection - Vue component for efficiently rendering large collection data.
autoresponsive-vue - Auto responsive grid layout library for Vue.
VueFlex - A flexbox grid system.
v-chacheli - A Vue.js component to create and display custom dashboard-like grid layouts.
vue-grid-styled - A lightweight set of functional grid components, ported from React's grid-styled
simple-grid - Vue component for grid layout,support flex.
vue-container-component - Simple container component inspired on Bootstrap Container
vue-colcade - A small wrapper for integrating Colcade grid layout to Vuejs.
vue-ads-layout - A small library of Vue components to quickly generate a responsive web application layout with toolbar, left/right drawers and a footer. All components can be positioned fixed or relative.
vue-magic-grid - A tiny port of Magic Grid for Vue.js 2.
vue-splitter-pane - A Vuejs component which renders two slots in a adjustable split arrangement (vetical or horizontal).
splitpanes - A Vue JS reliable, simple and touch-ready panes splitter / resizer.
vue-mock-layout - Easily mock the layout of your Vue apps.
vue-simple-drawer - A tiny drawer panel with bounced animation, nest supported and theme customized. directions: left/right/up/down
vue-grd - Simple, Light-weight and Flexible Vue.js component for grid layout.
vue-masonry-component - A Vue.js component wrapping masonry layout library.
vue-smart-widget - Smart widget is a flexible and extensible content container component for Vue.js 2.x.
vue-colrow - Responsive grid layout components: Row, Col. Based on css flexbox. Support SSR, fixed or fraction width, auto grow Col.
vue-diagonal - Simple and light-weight component to create diagonal elements.
vue-responsive-dash - A Responsive, Draggable & Resizable Dashboard (grid) made with vue and typescript.
vue-masonry-wall - A pure vue responsive masonry layout without direct dom manipulation, ssr friendly and lazy loading.
vue-horizontal-list - A pure vue responsive horizontal list layout with ssr support, mobile and touch friendly.
vue-layout-system - Vue components that solve daily layout problems.
simple-vue-grid - Simple grid containers that will help you to build layouts for your app.
iron-grid-system - A responsive grid system for Vue 3.x.

Frameworks

Responsive

Set of components + responsive layout system

quasar-framework - Quasar Framework. Build responsive websites, hybrid mobile Apps and Electron apps using same code, with VueJs 2.
vue-material - Material design for Vue.js.
vuetify - Material Component Framework for Vue.js 2.
muse-ui - Material Component library for Vue.js 2.
buefy - Components based on Bulma framework.
element-ui - A Vue.js 2.0 UI Toolkit for Web.
vue-bulma-components - Easily use bulma class syntax with vue components.
iview-ui - A Vue.js 2.0 UI Framework for web.
AT-UI - A fresh and flat UI-Kit specially for desktop application, made with ♥ by Vue.js 2.0
v-semantic - Implementation of semantic-ui for Vue
BootstrapVue - Bootstrap v4 components and grid system for Vue.js.
fish-ui - A Vue.js 2.0 UI Toolkit for Web
zircle-ui - A frontend library to develop zoomable user interfaces.
Material Components Vue - wrapper around material-components-web for Vue.js
VueFace - A Vue.js 2.0 UI Component library for Web
vuecidity - UI component framework for Vue.js 2.0
ant-design-vue - An enterprise-class UI components based on Ant Design and Vue 2.5.0
heyui - (https://www.heyui.top/en) - A Vue.js 2.0 UI Toolkit for Web.
Carvue.js - IBM's Carbon Design System for Vue.js
BalmUI - A modular and customizable UI library based on Material Design and Vue 3.0
Osiris UI - :art: A Vue.js 2.0 universal responsive UI component library
N3-components - Beautiful Web Components built with Vue 2
Shards Vue - ✨ Sleek & UI Components Library based on the Bootstrap 4 Framework.
Fundamental Vue - Components based on SAP Fiori Fundamentals.
Framevuerk - 🚀 Fast, Responsive, Without Dependencies, Both Direction Support and Configurable UI Framework based on Vue.js.
@Carbon/vue - Carbon Design System components from the @carbon team.
Inkline - Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building Vue.js 3 Design Systems.
vue-awesome-mui - A Vue.js 2.0 MUI Component for Web
MDBootstrap - Powerful UI toolkit based on the latest Bootstrap 4 and Vue 2.6.10, providing a set of slick, responsive page templates, layouts, components and widgets to rapidly build responsive, mobile-first websites and apps.
vue-material-adapter - Integration of Material Components for Vue.js which follows the best practices recommended by Google: Using Foundations and Adapters
PrimeVue - The Most Complete UI Component Library for Vue
CoreUI for Vue.js - CoreUI for Vue.js is a UI Component Library that offers a bunch of cross-browser, responsive, and lightweight Vue.js UI components.
DaoStyle - A high quality component library built on Vue.js.
Chakra UI Vue - ⚡ A lightweight & customizable component library to help you build accessible Vue applications and sites with speed.
vue-canvas - Vue canvas component for vuc-identify
oruga - UI components for Vue.js without CSS framework dependency.
Wave UI - An emerging UI framework for Vue.js with only the bright side. ☀️
vectre - A lightweight, simple and responsive component framework based on Spectre CSS
element3 - A Vue.js 3.0 UI Toolkit for Web is based on element-ui
superBVue - A Vue 3 UI Components for Web is based on boostrap v5
Qui - A Vue 2.x Design System for Web
Mijin - Responsive Tailwind CSS UI components, without dependencies
vuestic-ui - A Vue.js 3.0 UI customizable UI Framework.
Qui-max - A Vue 3.x Design System for Web
Naive UI - A Vue 3 Component Library Fairly Complete, Customizable Themes, Uses TypeScript, Not Too Slow Kinda Interesting
Element Plus - A Vue 3 UI Framework.
AgnosticUI - Accessible Vue 3 Component Primitives that also work with React, Svelte, and Angular!
Unge UI - A Vue 3.x Component Library. Complete documentation support and both Chinese and English.

Mobile

UI frameworks for mobile

Framework7-Vue - Build full-featured iOS & Android apps using Framework7 & Vue.
vux - [Chinese] Vue UI Components based on WeUI.
vue-onsenui - Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.
Weex - Weex provides the ability to publish cross platform, so web, Android, and IOS apps can use the same API development functions.
weex-eros - [Chinese] Eros is a app solution based on Weex and Vue, which enables you to use API of Vue, simple and quick development of small and medium app.
Ionic - Mobile app development framework
Native script - Native mobile applications using NativeScript
Vue Native - Build cross platform native mobile apps using JavaScript

Set of components for mobile

mint-ui - Mobile UI elements for Vue.js.
vant - A Vue.js 2.0 Mobile UI From YouZan.
cube-ui - A fantastic mobile ui lib implement by Vue.js 2.
mand-mobile - A mobile UI toolkit, based on Vue.js 2, designed for financial scenes.
NutUI - A Vue.js 2.0 UI Toolkit for Mobile Web

Component Collections

Set of components without layout system

vue-mdc - Material Components Web for Vue.js.
keen-ui - A lightweight collection of essential UI components written with Vue and inspired by Material Design.
vue-admin - Vue Admin Panel Framework, Powered by Vue 2.0 and Bulma 0.3.
vuikit - UIkit with all the power of Vue.
uiv - Bootstrap3 components implemented by Vue2.
wffranco/vue-strap - Bootstrap 3 components built with Vue.js 2
jsmod-vue-pc - Highly scalable web components for vue 2.0
guilhermewaess/SemVue - Semantic-ui Modules implemented with Vue 2
office-ui-fabric-vue - Office UI Fabric implementation for Vue.js
Semantic UI Vue - Semantic UI integration for Vue
vuesax - Frontend vue Components for Vue.js.
Essential JS 2 for Vue - Full-featured 45+ Vue.js components which includes Data Grid, Chart, Scheduler and Diagram components etc.
Banshee - A mostly renderless Vue UI component and utility framework that ships with no CSS.
vue-atlas - A library of beautiful Vue components.
DevExtreme Vue Components - 65+ responsive and feature-complete Vue UI components with customizable Material Design and Bootstrap compliant themes.
jqwidgets - 70+ Vue.js 2.0 UI Components with Material Design themes.
vue-uix - UI collection for web page implementation in Vue.js
vuedarkmode - A Minimalist Dark Design System for Vue.js 🎨
Kendo UI for Vue – Over 70 UI components, including a Grid, built for business applications. Fully responsive with support for several Design Languages including Material Design and Bootstrap.
Vuent - Vue.js components implementing Microsoft Fluent Design
bpit/vue - Vue components lib which is focused on effects
vue-tailwind - Vue components with customizable classes ready for TailwindCSS, but compatible with any framework.
Equal UI - Vue UI kit based on TypeScript 🧬
slim-ui - Minimal UI components based on Vue.js
Vue Component Development Kit - Unstyled, highly tested and flexible Vue components/mixins/plugins.
element-pro-components A component library for Vue 3 base on element-plus

Admin Template

Set of admin template

iView Vue Admin - iView Vue Admin / An admin portal template based on iView 2.x Online Demo
element Vue Admin - element Vue Admin / An admin portal template based on Element UI 2.x
vue-element-admin - A magical vue admin based on Element UI 2.x Online Demo
D2 Admin - An elegant backstage template build by vue Online Demo
rest-admin - Restful Admin Panel Based on Vue and Bootstrap 4 Online Demo
Shards Dashboard Lite Vue - ✨ Modern admin template featuring dozens of custom components and templates.Online Demo
Vue Material Admin - A vue material design admin template Online Demo
element-admin - A dead simple but powerful vue admin with Vue CLI 3 and element-ui.Online Demo
dashboard - A dashboard scaffolding based on vue.js created by vuejs/vue-cli 4.x. Online Demo
vue-admin-next - Professional enterprise application with Multi-Module Design, Vue Composition API, and Friendly User Interface. Online Demo
vue-pro-sidebar : A responsive template starter with the ecosystem configuration (vue-router, vuex), this boilerplate allows you to choose your preferred colors. Live demo
Stellar Admin Boilerplate Boilerplate Admin template created using Bootstrap-Vue.Live demo
vuestic-admin - Vue Admin Dashboard built with Vue 3 and vuestic-ui.
Materio-vuetify-vuejs-admin-template-free - A Production ready, carefully crafted, most comprehensive Vuetify Vuejs admin template. Live demo
Tailmin - Admin dashboard built with Vue.js and Tailwind CSS. Live demo
Vue-Admin-Template - A beautiful free vuejs admin template, designed using vuetify and apexcharts. Live Demo
Admin One Vue 3 Tailwind dashboard - Vue.js 3 Tailwind CSS admin template with dark mode.
Mosaic - Vue Admin TailwindCSS template - The All-in-one Tailwind CSS Admin Dashboard Template.

Server-side rendering

Nuxt.js - Versatile Vue.js Framework.
Ream - A minimalistic framework for building server-rendered and static websites.
Universal vue - Vue CLI plugin to create universal Vue applications with ease
Factor Platform - An extension-driven VueJS platform (Factor.dev → Docs)
Vapper - A Vue-based server-side rendering framework.

Static website generator

VuePress - Minimalistic Vue-powered static site generator.
Peco - A static website generator for humans. UNMAINTAINED
Saber - A static website generator for building blazing fast websites with Vue.js.
Gridsome - Build super fast, modern websites with Vue.js
Servue - Server-side rendering engine that renders vue files into html strings.

Other

app-framework - IOS and Android Apps with HTML & JavaScript - develop, build and deploy - free and open source.
Myfirebase - A decoupled Single page application Framework which is highly compatible with google firebase.
Vue-Access-Control Frontend access control framework based Vue.js 2.
Basys Toolbox for building full-stack Vue.js apps
CabloyJS The Ultimate NodeJS Full Stack Business Development Platform, based on KoaJS & EggJS & VueJS & Framework7
vue-service-model - Vue.js library for handling REST service requests with caching, aggregation and model definitions.
DataFormsJS - A minimal routing and web service framework that uses Vue as a templating engine.
V-Craft - A toolset for building extensible page builders with Vue.js.
Vue-Low-Code - Low Code toolkit that can generate VUE apps from Quant-UX prototypes
Figma-Low-Code - Turns your Figma design into VUE applications.
vue-notion - An unofficial Notion renderer – Use Notion as a CMS for Vue (e.g. Nuxt)
Fes.js - An easy-to-use front-end application framework based on vue3.
petite-vue - 6kb subset of Vue optimized for progressive enhancement.

UI Utilities

Event Handling

Handling of user events (scroll, click, key strike, ...)

vue-shortkey - Vue-ShortKey - plugin for Vue.js.
vue-throttle-event - Throttle events based on requestAnimationFrame.
vue-waypoint - Waypoint component for Vue, this is the easiest way to trigger a function when you scroll.
vue-clickaway - Reusable clickaway directive for reusable Vue.js components.
vue-scrollfire - Fires an event on a specific scroll position.
vue-resize-directive - Vue directive to detect resize events with deboucing and throttling capacity.
v-click-outside - Vue directive to react on clicks outside of an element without stopping the event propagation.
vue-outside-events - Vue 2.x directive to help a specified element listen for specific events occurring outside of itself.
vue-selectable - Vue 1.x/2.x directive to make items selectable by mouse.
vue-click-helper - Vue2.x directive to handle click event and dblclick event on same element.
v-hotkey - Vue 2.x directive for binding hotkeys to components.
vue-resize - Vue 2.x component to detect DOM elements resizing (event based/no window.onresize)
vue-observe-visibility - Vue 2.x directive using Intersection Observer API that detects if the element is visible (in the viewport and not hidden by CSS).
v-dragged - Vue 2.x directive plugin for drag event detection.
vue-esc - Vue.js directive to add a document event listener on escape keyup.
vue-global-events – A component to handle global events (like shortcuts) using Vue’s event modifiers
vue-edge-check – Check browser edge to prevent transition effect triggered oddly when swipe edge with vue-router
vue-mutation-observer – A simple and tiny directive to observe changes in DOM use MutationObserver API
vue-scroll-show – Showing the element if the user reached it after scroll
vue-tabevents – Easy communication between other opened tabs
vue-visibility-trigger - 👀 Declaratively trigger methods when scrolled into view
v-click-outside-x - Vue V2 directive to react on click, touch, pointer or multiple events outside an element.
vue-keypress - Global keypress event handler component for Vue.js applications.
vue-pseudo-window - 👻 Component to declaratively interface window/document in your Vue template

Responsive Design

vue-viewports - Define your custom viewports and use them in your components.
vue-responsive: Vue.js(2.x) directive to hide/show HTML-elements with the Bootstrap 4, 3 or self defined breakpoints.
vue-match-media - Vue 2.x-compatible plugin that offers a consistent, semantic approach to making components media query-aware.
vue-media-query-mixin - Vue 2 media query mixin that can be used in both component js and component template. Compatible with bootstrap and vuetify viewports. wXS returns if screen width is xs, wSM returns true if screen width is sm, etc...
vue-breakpoints - Vue 2 minimal components to show and hide elements based on breakpoints. Inspired by Airbnb.
vue-mq - Offer some useful tools to quickly setup responsive design with a semantic and mobile-first API (Vue 2.x)
VueResizeSensor - A container that supports resize event.
vue-breakpoint-component - A render-less component for composing CSS breakpoint state.
fine-mq - A fine API to manage media queries in JS with ease and first-class integration with VueJS as a plugin.
vue-responsive-components - Create responsive components with ResizeObserver.
vue-screen-size - Get easy and reactive access to the width and height of your screen.
vue-container-query-2 - Smart vue plugin for working with css container query.
vue-component-media-queries - MatchMedia component library for Vue.

Form

vue-formly - JavaScript powered forms for Vue.js.
vue-focus - A reusable focus directive for reusable Vue.js components.
vue-form-generator - A schema-based form generator component for Vue.js.
FormSchema Native - Generate a form using JSON Schema and Vue.js
ic-formly - Simple form component powered by vue-formly.
Form Builder - Json template based form builder, based on Vue and Laravel.
vue-autofocus-directive - Vue autofocus directive.
vue-awesome-form - A vue.js component just like json-editor
vue-form-components - Clean & minimal vue form elements with validation
v-ajax-form - vue.js component plug-in to make Form tag compatible with ajax request
Vue Formulate - The easiest way to build forms with Vue. Validation, error handling, form generation, comprehensive documentation, and more.
Reforms.js - Vue 3 and Bootstrap forms and cards generator. Validation, multiple fields, grouping, schema and more.

Validation

vee-validate - Simple Vue.js input validation plugin.
vue-rawmodel - RawModel.js plugin for Vue.js v2. Form validation has never been easier.
vuelidate - Simple, lightweight model-based validation for Vue.js.
simple-vue-validator - A simple yet flexible validator library for vue.js.
vue-vform - Vue.js 2 form component that integrates jQuery Validation and Axios.
vue-form - Comprehensive form validation for Vue.js.
vuelidation - simple, powerful, vuejs validation.
laravel-vue-validator - Display errors from laravel validation rules
vue-daval - Super vue data validator. Easiness, simplicity, accurate.
willvalidate - Validation Forms for Vue.js.
vue-isyourpasswordsafe - A small utility written in Vue that checks if the given password has been leaked against the Have I Been Pwned API.
vue-form-send - A Vue.js directive for sending data from form and primitive validation
FormVuelar - Vue form components with server-side validation in mind
vue-final-validate - Vue validation solution from my development experience, support nested, async.
vform - A simple way to handle Laravel back-end validation in Vue.
vue-form-container - A Provider Component that encapsulates your forms and handles their states and validations.
ps-validation - A Vue plugin that provides out-of-the-box data validation rules, very much inspired by the Laravel validation system.
vue-laravel-errors - A Vue.JS plugin that adds a global mixin which can be used to fill an errors variable from a laravel error response and display it as an object or array, can also be used as a local mixin.
vue-input-validator - 🛡️ Highly extensible & customizable input validator for Vue 2
@vuito/vue - Simple, lightweight, isomorphic, and template-based validation library.
vue-tiny-validate - Tiny (2.5KB minified) Vue Validate Composition.
vest - 🦺 Declarative form validation framework inspired by unit testing.

Resize

vue-not-visible - Vue directive for removing from dom (like v-if) element on screen smaller than breakpoints.
vue-window-size - Provides reactivity window size properties.
vue-responsive-text - ↔ Component that scales its child node in relation to its parent node's width

Scroll

Set window scroll position

vue-chat-scroll - Automatic scroll-to-bottom directive for Vue.js 2.0.
vue-scrollto - Adds a directive that listens for click events and scrolls to elements.
vue-next-level-scroll - A component based and SSR ready approach to smooth scrolling using the modern Scroll behavior API
vue-scroll-sync - A component that synchronizes containers’ scroll positions
v-scroll-lock - A Vue.js directive for body scroll locking without breaking scrolling of a target element
vue2-perfect-scrollbar - PerfectScrollbar minimalistic wrapper
vue-scroll-to - Adds a directive that listens for click events and scrolls to elements.
vue-scroll-progressbar - A customizable component that indicates the scroll relative position in a progressbar.
vue-backtotop - A Back-to-top component for Vue.js, which scroll page to the top when clicked.

Virtual scrollbar

VBar - The virtual responsive cross-browser scrollbar component for Vue.js 2x.
Vuebar - Vue 2 directive for custom scrollbar that uses native scroll behavior. Lightweight, performant, customizable and without dependencies.
vue-detached-scrollbar - A simple scrollbar that can be detached from the container it is scrolling.
vuescroll - A scrolling plugin based on Vue.js for uniforming the scrolling in PC and mobile.
vue-simplebar - Vue.js wrapper for simplebar plugin.
smooth-vuebar - Vue directive wrapper for smooth-scrollbar

Detect when components enter viewport

vue-scrollview - A component utilizing scoped slots to detect when a vue component enters and leaves the viewport.
vue-scrollactive - Adds an active class in a menu item based on the current section in viewport, also scrolling to the section when clicking the menu item.
vue-intersect - A Vue component to add intersection-observer to a Vue component or HTML element.
vue-scrollmonitor - A Vue plugin to watch visibility state of elements inside viewport with a wide range of browsers supported (use provide/inject so compat vue@2.2.x)
vue-stroll - An Awesome CSS3 list scroll effects component for Vue.js 2.x.
navscroll-js - Highlights menu items as you scroll, and also scrolls to a section when a menu item clicked. Use as a vue component, a vue directive or with vanilla js.
vue-scrollwatch - A light plugin detecting scroll event,customize callback when element enter viewport,expose 'scrollTo' api to scroll to specific element .Using vue directive.
vue-check-view - A plugin that checks if element is in viewport. Fast, small, has no dependencies, live demo.
vue-stickto - A vue directive that supports multiple DOM nodes stick to top automatically
vue2-scrollspy - A scrollspy plugin and animated scroll-to.
vue-trip-wire - A custom directive for firing functions when an element reaches a designated point in the viewport, with option to import module with globally accessible functions.
v-intersect - A Vue directive and component that detect element when it's visible or hidden on viewport
vue-scrollama - A Vue component to easily setup scroll-driven interactions (aka scrollytelling).

Customize the scroll behavior

vue-scroll-behavior - Customize the scroll behavior on route navigation. Especially hash mode.
vue-scroll-stop - Stops propagation scroll when edge reached.

Seamless scrolling

vue-seamless-scroll - A simple, Seamless scrolling for Vue.js.

Routing

vue-router - The official router for Vue.js.
vue-router-storage - Router storage & resolve solution for Vue.js 2 & vue-router 2
vue-tidyroutes - Decentralized vue-router routes definitions
vue-routisan - Elegant, fluent route definitions for Vue Router, inspired by Laravel.
vue-error-page - Provides a wrapper for router-view that allows you to show error pages without changing the URL
vue-router-sitemap - Generate sitemap.xml by vue-router configuration
vue-smart-route - Smart route directive to make intelligent looking apps with Vue.js.
vue-router-lite - A component-based, declarative router for Vue.js 2.
vue-route-props - Automatically bind vue-router query to vm, APIs are mostly same as the Vue props.
vue-pilot - A Trie-based vue router with the ability of managing history.state.
vue-lang-router - Vue.js 2 & 3 language routing with (optional) URL localization.
vue-router-compositions - A util package for Vue-Router and Vue Composition API.
vue-middleware - Middleware for Vue.

Lazy Load

vue-lazyload - A Vue.js plugin for lazyload your Image or Component in your application.
vue-lazy-background-images - Lazy load background images for Vue 2.
vue-progressive-image - Vue progressive image loading plugin.
vue-l-lazyload - A lazyload plugin for Vue.js v2.x+.
vue-lazyload-img - Especially optimized for mobile browser. support V2 & v1.
vue-lazy-images - A plugin of lazyload images for Vue 2.x.
v-lazy-img - Tiny (<0.6kb) directive for progressive image loading for Vue 2.
vue-clazy-load - Lightweight transitionable image lazy loading component using IntersecionObserver for Vue 2.
vue-lazy-this - Lazyloading component using Intersection Observer API.
v2-lazy-list - A simple lazy-load list component based Vue 2.x
pimg - A Simple Progressive Image Component used for lazy loading images.
vue-tiny-lazyload-img - A small size Vue.js v.2+ directive for lazy loading images
vue-lazy-youtube-video - A simple Vue.js component for lazy loading YouTube videos.
lazyload-vue- Vue Plugin for vanilla-lazyload.
vue-lazy-loading - A vue plugin to better supporting native lazy-loading for image and iframe.
v-lazy-component - Vue component render when visible. Uses Intersection Observer API.
vue-lazy - Lightweight Image/Picture lazyload based on Intersection API
vue3-lazyload - Vue module for lazy-loading images in your vue 3 applications.

Pagination

vue-paginate - A simple vue.js plugin to paginate data.
vue-pagination-2 - Vue.js 2 pagination component.
vuejs-uib-pagination - Best and complete pagination plugin for Vue.js. Inspired in Angular Bootstrap Pagination.
vuejs-paginate - A Vue.js(v2.x+) component for creating pagination.
vue-pagination-bootstrap - A Vue.js (1.x & 2.x) server-side paging component with a template based on Bootstrap
laravel-vue-semantic-ui-pagination - A Vue.js 2.x pagination used with Laravel & Semantic-UI.
vue-paginate-al - Vue paginate with return your data.
vue-tiny-pagination - A Vue component for create a tiny pagination.
laravel-vue-pagination - A Vue.js pagination component for Laravel paginators that works with Bootstrap.
vue-lpage - Low-level Vue pagination component.
v-page - A simple pagination bar, including length Menu, i18n support, based on Vue2.x.
vue-smart-pagination - Smart pagination of any data with a lot of nice settings.
vue-paginatron - Pagination component built with scoped-slot props for maximum flexibility.
vue-ads-pagination - A vue pagination component build with the css framework tailwindcss
v-pagy - A lightweight and customizeable Bootstrap Pagination for Vue.
v-paginator - Simple page-by-page navigation for Vue.js based on your html templates with ssr support.
vue-use-paginator - Vue 3 use-hook to reactively paginate data and arrange paginator buttons. Completely renderless.

Animation

vue2-animate - A Vue.js 2.0 port of Animate.css. For use with Vue's built-in transitions.
animated-vue - A Vue.js 2.x plugin to easily use Animate.css animations as transitions. As easy as <animated-tada>!
vue-lottie - A Vue.js 2.x plugin to render after effects animations based on bodymovin
Vueg - Make vue-router have a transition effect / 为 webApp 提供转场特效的开源 Vue 插件
v-animate-css - The easiest to implement Vue 2 directive for Animate.css
vue-mixin-tween - Mixin factory that adds tweened values to component context for animations
v-odometer - Smoothly transitions numbers with ease. Use this library to give your application a smooth animation, only applicable on numbers.
vue2-transitions ✨ Reusable Vue 2 transition components
vue-overdrive Super easy magic-move transitions for Vue apps 🎩
animated-number-vue Super easy way to animate numbers.
vue-typed-js Typed.js integration to easily create typying animations.
vue-parent-change-transition Enable a child components to animate when it changes the parent.
vue-smooth-reflow Transition an elements reflow in response to data changes.
VueTween Allows components to tween their properties.
vue-slide-up-down Like jQuery's slideUp / slideDown, but for Vue!
vue-animejs Simple anime.js directives for Vue.
Eagle.js Eagle.js is a web-based slideshow framework for Vue.js.
vue-slide-up-down-component It is a simple interface but realizes very flexible and powerful slide animation, for Vue!
femtoTween A minimalistic (zero-dep, less than 1k) tweening library with first-class Vue support
vue-sequential-entrance Plugin for creating elegant sequential animation entrances with a list of elements of your page. Zero effort. Simple and lightweight
vue-animate-scroll Super lightweight way to add CSS animations to elements as they scroll into view.
vue-svg-transition Create 2-state, SVG-powered transitions
vue-page-transition Easy route / page transitions for Vue.js
Vuenime A flexible Vue wrapper for Animejs
vue-flipper - A component to flip children with a nice transition.
v-number Animated number transition library for Vue.js
vue-kinesis A set of components to create interactive animations
vue-digital-transform A vue component for better digital transform animation
vue-typical 🐡 Vue Animated typing in ~400 bytes of JavaScript.
vue3-lottie A component for importing and displaying Lottie animations in Vue 3

Meta Tags

Manage meta information in the document head

vue-head - Manage the meta information of the head tag, a simple and easy way.
vue-meta - Manage page meta info in Vue 2.0 components. SSR + Streaming supported.
vue-headful - Set document <title> and meta tags from within your views.
vue-simple-headful - Easily set meta-tags with vue.js - a simpler vue-headful alternative with TypeScript support.

Portal

Move a DOM node to a target DOM node

vue-dom-portal - An escape hatch for DOM Elements in Vue.js components.
portal-vue - A Vue Plugin to render your component's template anywhere in the DOM (Works on the virtualDOM level, doesn't move nodes within the DOM)

Filters

vue2-filters - A collection of standard filters Vue 1. adapted for use in Vue 2..
vue-morphling - A collection of standard and custom filters for Vue 2.
vue-currency-filter - Lightweight and Customizeable Vue 2 Currency Filter.
vue-trans - A simple filter to provide a similar way of translating to the Symfony trans.
vue-string-filter - Lightweight Vue 2 String Manipulation Filter.
vue-units - A collection of handy unit conversion filters for use in Vue 2.
vue-numeral-filter - A collection of filters that allows Numeral.js to be used inline in the template section of a component.
vue-filter-date-format - Simple datetime filter for Vue 2.
vue-filter-pluralize - Simple pluralize filter for Vue 2.
vue-filter-date-parse - Simple parsing datetime filter for Vue 2.

SVG

vue-svgicon - A tool to create svg icon components. (vue 2.x).
vue-content-loading - Vue component to easily build (or use presets) SVG loading cards Facebook like.
vue-annotator - Annotate page using any SVG Element (rect, polygon, and many more, even HTML Element like canvas if wrapped in foreignObject)
vue-svg-sprite - A plugin, component or directive to simply use SVG sprite (vue 3.x, vue 2.x).
vue-svg-filler - Vue component for custom your svg file 🖍 🎨 (vue 2.x).
vue-inline-svg - Vue component loads an SVG source dynamically and inline <svg> so you can manipulate the style of it with CSS or JS. (vue 2.x, vue 3.x)

Miscellaneous

vue-resource-progressbar-interceptor - Interceptor that ties a progressbar to all requests, that it is clear that something is loading.
vue-images-loaded - Vue.js 2.0 directive to detect images loading.
vue-visible - A v-visible directive for VueJS (2.x), like v-show but for visibility.
vue-resize-sensor - Component to detect container resizing (event-based)
v-blur - Vue directive to blur an element dynamically
vue-async-methods - Helper utilities for promise based methods
vue-openseadragon - OpenSeaDragon component for Vue.js (zoom and pan)
vue-match-heights - Directive to set heights of elements to be the same.
vue-conditional-attrs - A Vue.js component for conditional rendering attributes and directives
vue-cbsc - A Vue.js 2.x component for programmatically blender, shader and convert colors.
vue-spatialnavigation - Vue directive (Vue.js 2.x) for spatial navigation (keyboard navigation)
vue-lifecycle - A Vue.js lifecycle directives.
v-aspect-ratio - Vue.js directive for setting an aspect ratio.
@kooljay82/vue-m-camera - To avoid changing orientation of photo automatically which is taken via camera of user's device.
v-ripple-directive - Vue.js directive for ripple effect.
vue-material-design-ripple - Add material design ripple to any element. Use any ripple color you want. No performance issues. Mobile friendly. No dependencies. It just works.
v-github-icon - easily add "that" tiny GitHub icon on the right/left corner of your Vue components/libraries demos' 🤙
vue-styled-shadows - Component based styled shadow patterns for images.
v-visible - Vue.js directive for setting visibility of an element.

WebGL

vue-3d-model - A 3D model viewer in Vue component.
vue-pano - A panorama viewer in Vue component.
vue-threejs - Vue bindings for Three.js.
VueGL - Vue.js components rendering 3D graphics reactively via three.js
vue-vr - A framework for building VR applications with Vue based on threejs and Panolens, inspired by react-vr
vue-displacement-slideshow - A Vue.js component that makes Webgl image displacement transitions easier.
vue-fake3d-image-effect - An interactive 3D fake-effect for images with depth maps in WebGL.

Fullscreen

vue-fullscreen - A simple Vue component for fullscreen, support Vue2 and Vue3.

Page visibility

vue-page-visibility-awesome - A Vue 2.x component of easy-to-config page visibility api.
vue-authplugin - an elegant view auth control plugin, support directive and prototype methods.

Printing

vue-html-to-paper - Vue mixin for paper printing html elements to paper.

Utilities

Utilities not directly related to the UI

vue-underscore - simple vue plugin to implement underscore
vue-lazy-calc - A simple calculation plugin in lazy && chaining way with strong typed.
vue-loadable - A plugin to improve loading state control with pretty simple methods, decorators and helpers.
vueuse - Collection of essential Vue Composition API utils works for Vue 2.x and 3.x.
vue-composable - Vue composition-api composable components. i18n, validation, pagination, fetch, etc. +30 variable composable functions.
vue-condition-watcher - 🕶 Vue Composition API for automatic fetch data when condition has been changed.
vue-use - Use magic Vue Composition APIs to provide a lot of reusable logic, such as form, table and loading, etc.
vue-concurrency - library for encapsulating asynchronous operations and managing concurrency for Vue and Composition API.
vue-ics - Vue.js plugin for generating ICalendar (.ics) files.
vue-use-switch-map - 👽 The power of the RxJS switchMap operator injected into the Vue composition world.
vue-use-infinite-scroll - ♾️ A Vue composition function that makes infinite scroll a breeze.
vue-with-wrapper - A object deconstruction used in template
vesselize - ⛵ A JavaScript IoC container that works seamlessly with Vue.js.
vue-context-composition - share state created with the composition API between components, similar to useContext from React Hooks
vuex-overlay-tools - 🛠 A Vue 3 plugin for monitoring Vuex store (time-travel is also supported)
vuse-rx - Complete first-class rxjs support for Vue 3
vue-props-validation - Vue props validation logic extracted for nested validations in objects and arrays using the Vue native syntax.
vue-next-rx - Complete RxJS integration for Vue.js. (Update of vue-rx)
fontawesome-autogen - Automatically detect and import fontawesome icons used in your webapp.

Typescript

vue-typed - Sets of ECMAScript / Typescript decorators that helps you write Vue component easily.
vue-typescript - Typescript decorators to make vue feel more typescripty.
vue-property-decorator - Vue.js and Property Decorator.
vue-typescript-component - Decorators to use TypeScript classes as Vue.js 2.0 components.
vue-typescript-import-dts - TypeScript declaration file that allows using 'import' with .vue files.
vue-ts-loader - Type-check your script in your vue-loader.
vue-mixin-decorator - Typescript decorator for strongly typed Mixins.
vue-ts-component-generator - A simple cli tool for generating vue typescript components.
vue-local-storage-decorator - Persist data by using local stoarge in decorator format
vuex-module-decorators - Typescript/ES7 Decorators to make Vuex modules a breeze
vuex-class-modules - Introduce a simple type-safe class style syntax for your vuex modules, inspired by vue-class-component.
vue-corator - Vue typescript decorator utils
vuedts - Generate TypeScript declaration files for .vue files.
@icare-jp/vue-props-type - Helps to define the props type.

HTTP Requests

Retrieve data over HTTP

vue-resource - The HTTP client for Vue.js.
vue-async-computed - Async computed properties for Vue.js.
vue-jsonp - A tiny library for handling JSONP request.
v-model - V-Model is a model plugin for Vue.js, like ng-resource.
vue-resource-mock - A helper to mock your http response, based on vue-resource's interceptor.
vue-async-data-2 - Async data loading plugin for Vue.js.
vue-api-request - A plugin that provides full control on your APIs, making your request simple, fast, and easy to implement.
vue-fast-axios - Make requests with validations in a simple and beautiful way.
vue-async-properties - An asyncData and asyncComputed plugin with support for debouncing, transforming results, error handlers, loading/pending flags, lazy/eager requests.
vue-axios-plugin - A plugin that combines axios with Vuejs, making http request more easier.
zipkin-instrumentation-vue-resource - An interceptor for vue-resource that instruments outgoing HTTP requests with Zipkin
vue-api-query - Elegant and simple way to build requests for REST API.
vue-chimera - A full-featured RESTful resource based client, compatible with Nuxt.js and allows server-side fetch.
vue-apis - A vue plug-in integrated with axios that chain-builds API instances. Available from the context of a vue instance (eg: this.\$apis.apiName()).
rexios - Utils normalize url, data, params for axios when using rest api request.
vue-axillo - Composable Axios for REST API with query notation GraphQL.
vue-request - ⚡️ Vue 3 Composable for data fetching, supports SWR, polling, error retry, cache request, pagination, and other cool features.
swrv - Stale-while-revalidate data fetching for Vue.

i18n

Internationalization / L10n / localization / translation

vue-i18n - Internationalization plugin for Vue.js.
vue-translate-plugin - VueJS plugin for translations.
vuex-i18n - Localization plugin for vue.js 2.0 using vuex as store.
vue-gettext - Translate your Vue.js applications with gettext.
vue-i18n - A small plugin for implementing translations in Vue.js.
vue-multilanguage - Support many languages in Vue.js 2.
vue-ts-locale - A plugin for implementing translations using Intl in Vue.js 2 with typescript support.
vue-i18next - A i18next wrapper to support translations in Vue.js 2.
vue-polyglot - Basic translation plugin for Vue.js 2 with async loading.
v-localize - Simple localization plugin for the amazing Vue.js.
vue-simple-i18n - Probably the thinnest library to end all Vue i18n solutions within 1kb
template-string-i18n - I18n using template strings with auto save/load translate documents.
vue-translations - Translate your vuejs application easy with it.
vue-i18n-service - Export and import vue-i18n's SFC translations.
vue-i18n-filter - Vue filter extend for Vue-i18n, simply using {{ hello world | t }}.
vue-translation-manager - Interactively find and translate strings in your Vue.js application. Works well with vue-18n and vuex-i18n.
vue-t9n - Simplest way to translate your applications
vue-simple-inline-translation - A Vue component that simplifies the way text is translated: by translating it inline.
vue-i18n-extract - Manage vue-i18n localization with static analysis. Make reports about missing and unused i18n entries.
vscode-vue-i18n-ally - VSCode extension for better Vue-i18n experiences.
v-intl - Global Intl wrapper for your awesome Vue 3 app 🔉
excel-vue-i18n - A plugin transforms excel file to i18n json format for translations.
vue-i18n-lite - A super lightweight and minimal plugin that introduces internationalization into your Vue.js app with a simple API.
v-google-translate - A component that use google translate to internationalize your Vue.js app.
fluent-vue - Internationalization plugin for Vue.js (2 and 3). Vue.js integration for Fluent.js - JavaScript implementation of Project Fluent
localize-vue-2x - Uni Localization Vue 2 integration example. Customizable Language Menu widget built with Web Components.
localize-vue-3x - Uni Localization Vue 3 integration example. Customizable Language Menu widget built with Web Components.
vue-next-i18n - A lightweight internationalization plugin for Vue 3.
tolgee/vue - Web-based localization tool enabling users to translate directly in the Vue 3 app they develop.

Custom Events

vue-events - Simple event handling for Vue.js.
vue-event-handler - Event handling plugin for VueJS.
vue-event-manager - The global event manager for Vue.js.
vue-geb - A global event bus using Observables.
vue-bus - Tiny simple central event bus plugin for Vue.js 2.
vue-simple-events - Yet another event management plugin, but WITHOUT Vue instance
vue-option-events - Bring Vue.js 1 events option and \$emit to Vue.js 2.
vue-emit - A helper function to emit events from functional components.
vue-plugin-events - Simple global event bus for Vue.js applications with automatic subscription control.
vue3-custom-hooks - Build custom hooks for Vue.js 3 Composition API.
vue-catch-hrefs - Catch clicks on hrefs links (in v-html) and route them to vue-router.

Persistence

LocalStorage etc.

vue-localstorage - Vue.js localStorage plugin with types support.
vue-ls - Vue plugin for work with LocalStorage from Vue context.
vue-pouch - Live and reactive bindings for PouchDB. Persist data in IndexedDB and sync with CouchDB.
vue-idb - Lists and huge lists management with IndexedDB (Dexie.js) only or automatically created and extendible vuex modules
vue-browserstore - Browser storage wrapper.
VueStorage - Allows components to save and load their data across browser sessions.
vue-web-storage Another Vue.js plugin for localStorage and sessionStorage
vue-universal-cookies Isomorphic cookies plugin for Vue.js / Nuxt.js supports Browser, Express, http (node).
vue2-storage Browser storage for Vue.js app
vue-warehouse A Cross-browser storage for Vue.js and Nuxt.js, with plugins support and easy extensibility based on Store.js.
vue-storage-watcher / Vue 3 version - A reactive localStorage/sessionStorage plugin for Vue.js with strong typed for Vue 2 / Vue 3.
vue-use-local-storage - A composition api to persist and rehydrate reactive data to local storage for vue 3.

State Management

vuex - Centralized State Management for Vue.js.
vue-sync - Synchronize Vue State with the Browser URL, Server Backend, and other endpoints.
vuelm - Lightweight state management inspired by Elm architecture.
vuez - A simple but powerful State Management for Vue.js, with only 2 APIs.
vuet - Vue.js state management model for Agile Development
vue-ya-stash - Yet Another stash storage with update/patch event emitters simillar with v-bind.sync
vue-assign-model - Automatically assign elements value to model for Vue.js.
vue-stash - Easily share reactive data between your Vue components.
vue-model - Model component for Vue.js
tuex - A mostly reasonable alternative to Vuex.
revuejs - A tiny, light and handy state management for vuejs 2, writing less verbose code.
lue - Vue and vuex based library, writing less verbose code.
vuex-lite - A 1KB Vuex with just state and mutations.
vue-shared - A light and simple alternative to vuex
vuex-module-generator - It allows you to create a vuex module easily.
vuex-declaration - Declare state like props, make state inject to vuex dynamically when component created.
vuex-up - Brings mixing and services injector features to module vuex.
effector — Fast and powerful reactive state manager. Effector lets you write simple, fast and type safe code and manage reactive state with ease.
nano-state-vue - Efficient, effective, and extensible state management: less is more
universal-model-vue - Unified state management for Vue (and also for Angular/React/Svelte)
vue-states - State management system for Vue with same API as Vue components
v-bucket - 📦 Fast, Simple, and Lightweight State Management for Vue 3.0 built with composition API, inspired by Vuex.
VueFort - Data modeling for Vue. Works for Vue 2 & 3.
@korijn/vue-store - Lightweight Vue 3 composition API-compatible store pattern library with undo/redo.
vuex-light - State management system with robust typing for Vue 3
vue-object-state - Simple object/dto/model state tracking
vue-datatable-url-sync - Synchronize datatable options and filters with the url to keep user preference even after refresh or navigation
vue-path-store - Simple state management that uses the dot notation path syntax, also comes with Vuex and Pinia plugins.
pinia - 🍍 Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support.
harlem - Simple, unopinionated, lightweight and extensible state management for Vue 3
hami-vuex - 🍈 Hami melon flavored Vuex, modular by design, completely TypeScript intelligence, state management for Vue.js.

Redux

vuedeux - Binding Solutions for Vue & Redux.
redux-store-mixin - Mixin for integrate action creators in methods of vue-component
vue-redux-prepare-props - Helper for use props of Redux with Vue.js using Vuex and Vuedeux
vuejs-redux - High order component facilities for Vue and Redux.
vuex-coolstory - Plugin for vuex to run redux-saga.

Mobx

movue - Mobx integration for Vue.js.
vue-mobx - Mobx binding for Vuejs 2.x.
mobx-vue-lite - Lightweight Vue 3 bindings for MobX based on Composition API.

Pinia

pinia-shared-state - A lightweight plugin to sync your pinia state across browser tabs.
pinia-undo - Undo/Redo plugin for pinia.
pinia-xstate - Put your xstate state machines into a global pinia store.
pinia-persistedstate - Persist Vuex state with localStorage, like vuex-persistedstate.
pinia-orm - The Pinia plugin to enable Object-Relational Mapping access to the Pinia Store. 🍍

Authentication/Authorization

vue-kindergarten
vue-authenticate - Simple Vue.js authentication library for login/register and OAuth (1.0/2.0) authentication
vue-facebook-account-kit - Simple vue wrapper to the fb account kit library.
casl-vue - Restricts what resources a given user is allowed to access
vue-google-api - A wrapper for easy integration of the Google's APIs client in any vue.js 2 project, based on promises, with built-in Oauth2 "Sign In with Google" facilities.
vue-auth - A simple light-weight authentication library for Vue.js
vue-auth-plugin - A simple authentication and authorization library for Vue.js using typescript
vue-google-signin-button - A simple Vue plugin to include a Google sign-in button into your web app
vue-facebook-signin-button - A simple plugin to include a custom Facebook sign-in button into your web app
vue-auth-href - A VueJS directive for downloading files that are under a protected route schema
vue-msal - Vue plugin for using Microsoft Authentication Library (MSAL)
vue-simple-acl - A simple unopinionated Vue plugin for managing user roles and permissions, access-control list (ACL) and role-based access control (RBAC).

Vuex Utilities

vuex-persistedstate - Persist Vuex state with localStorage.
vuex-plugin-jsdata - A plugin for syncing Vuex store with js-data.
vuex-local - Local state management within Vuex.
vuex-action - Utilities for vuex to easily create and manage actions.
vuex-rest-api - A Helper utility to simplify the usage of REST APIs with Vuex. Based on axios.
vuex-cache - A Vuex plugin utility to cache action those will make remote request.
vuex-persist - A Typescript-ready Vuex plugin to help save the store to localStorage or any custom Storage (that you can configure).
vuex-local-state - Add 'localState/sessionState' options to vuex. Keep the Vuex state with localStorage.
vuex-action-reload - A vuex plugin that reloads actions when a condition is met.
vuejs-storage - Vue.js and vuex plugin to persistence data with localStorage/sessionStorage.
vuex-orm - The Vuex plugin to enable Object-Relational Mapping access to the Vuex Store.
vuex-async-module - Reduce async boilerplate code generating Vuex modules. Compatible with Vue 2.x.
vuex-iframe-sync - Vuex state synchronization between iframe/window.
vuex-aspect - Bind remote data of any kind to the vuex store.
Vuenut - is a component to develop faster and more fluently.
vuex-map-fields - Enable two-way data binding for form fields.
vuex-search - Vuex binding for client-side search with indexers and Web Workers.
vuex-pathify - provides a unified path syntax to Vuex stores (such as foo/bar@a.b.c)
vuex-loading - Simplify vuex loading state management
vuex-module-builder - Vuex module builder is a wrapper for writing vuex stores efficiently with some common methods built-in.
vuex-pagination - Easily work with paginated resources in your Vue/Vuex application. Works well with most of the Vue pagination components.
vuex-easy-firestore - Easy coupling of Firebase Cloud Firestore and Vuex. 2-way sync with 0 boilerplate!
vuex-listener - A global Vuex action and mutation listener plugin
jsonapi-vuex - Use a JSONAPI api with a Vuex store, with client-side restructuring/normalization of records.
vuexi - provides utilities to simplify async actions and state management
stfalcon-vuex-loading-plugin - the easiest way to handle loading state of vuex
Vue Rest Resource - Rest HTTP resource management for Vue.js and Vuex projects.
Vuex Stateshot - 💾 A State Snapshot plugin on Actions/Mutations for Vuex3.1+.
vuex-loopback - Vuex module factory and Vue components for Loopback.
vuex-state-snapshot - A Vuex plugin to take state snapshot on mutation.
vuex-awesome-async - It wraps Vuex stores to easily manage async requests (loading, error and cache state).
vuex-factories - Factory functions to generate vuex actions and mutations.
vuex-hooks - Typescript enabled vuex composition-api hooks.
vuex-composition-helpers - A util package to use Vuex with Composition API easily.
vuex-ts-enhance - A tool to enhance mapXXX and dispatch methods hint
vuex-masked-modules - A Vuex plugin put data structure of the module in localStorage, with the ability to mask or encrypt the data to make it difficult to explore. Designed for Vue 3 and Vuex 4.

Sync Between Tabs

vuex-basement - Vuex state persistence and synchronization between tabs/windows.
vuex-shared-mutations - Share vuex mutations between tabs/windows.
vuex-multi-tab-state - Share and synchronize status between multiple tabs with this plugin for Vuex.

GraphQL

vue-apollo - Apollo/GraphQL integration for VueJS.
vue-relay - A framework for building GraphQL-driven Vue.js applications.
vuex-orm-apollo - Apollo/GraphQL integration for Vuex-ORM.

Concurrency Management

vuency - Concurrency management for Vue.js.

Code Style

Improve readability of code

vue-types - Vue Prop Types definitions.
vue-factory - A simple factory/provider extension for Vue.js, like services in Angular.
eslint-plugin-vue - Eslint plugin for Vue.js projects.
vue-decorators - Decorators for Vue.js (beta).
vue-computed-helpers - Computed helpers for Vue.js apps
vert - Library to build Vue applications in OOP.
vue-slot-checker - Provide the function to check slot like checking props.

CSS

vue-bem-cn - Simple BEM class name generator for Vue.JS.
vue-css - Vue.js plugin that allows you to bundle CSS with your components.
vue-mods-names - Adding modificators to class names for all components in app.
vue-styler - Simple, performant styler for vue.
vue-css-modules - Seamless mapping of class names to CSS Modules inside of Vue components.
vue-simple-bem - Directive with succint syntax for adding BEM class names to elements.
fela-vue - CSS-IN-JS mixin for Vue designed for flexibility yet team-oriented.
j-vue
vue-spinners-css - Collection of pure CSS vue spinners components, css spinners for ajax or loading animation based on loading.io.
vue-css-doodle - Porting of css-doodle, a web component for drawing patterns with CSS.

Asset Management

Utilities for building / compiling / bundling / loading assets

vue-script2 - Standardized, designer-friendly script tag behavior for your Single Page App.
vue-loader - Webpack loader for Vue.js components.
vueify - Browserify transform for single-file Vue components.
vue-compiler - A simple cli wrapper around the vue-component-compiler.
vue-brunch - Adds support to Brunch for pre-compiling single file Vue components.
poi - Start writing an app with a single .js file, Poi could handle all the development setups for you, no more configuration hell.
http-vue-loader - Load .vue files directly from your html/js without node.js environment nor build step.
vue-jsx-hot-loader - Enable HMR for Vue.js components with JSX render functions.
VueInBrowserLoader - Loads a .vue file from the given URL and compiles it to a component directly in the browser.
vue-separate-files-webpack-loader - Webpack loader for separated Vue components parts
vue-svg-loader - webpack loader that lets you use SVG files as Vue components
vue-registrar - ☘️ A package that dynamically registers your components and vuex modules - Makes your code a lot readable!
vue-automatic-import-loader - webpack loader that auto import your Vue single file components by using a match function.
vue-aimg-loader - A easy way to use image in Vue template without wirte css.
vite-svg-loader - Vite plugin to load SVG files as Vue components
vue-sfc-split - Convert SFCs for native browser use without build

vue-navigation - A page navigation library, record routes and cache pages, like native app navigation. 一个页面导航库，记录路由并缓存页面，像原生 APP 导航一样。
vue-acl - Access Control List for VueJS 2.
vue-breadcrumbs - Implements simple breadcrumb functionality with vue-router for both Vue 1.x and Vue 2.x.
vue-2-breadcrumbs - breadcrumb together with vue-router for Vue 2.x. and Bootstrap 4
vs-crumbs - Vue breadcrumbs in 40 lines of code that allows nested paths without child views.
vue-nav - Page navigation manager, support all navigation function of native mobile app. 页面导航管理器，支持手机原生应用的所有导航功能。
vue-2-crumbs - Breadcrumbs plugin for Vue.js 2 framework that allows to select parent route in route meta object with no need of sub-routing. Also allows using dynamic data.
vue-pesdk Vue.js wrapper for the PhotoEditorSDK
vue-resolve Resolve routes data before entering / rendering the component for that route.
vue-page-stack - Routing and navigation for your Vue SPA. Vue 单页应用导航管理器

Miscellaneous

vue-super - A simple plugin to call methods on parent components.
@skyrpex/props-to-local - Vue mixin that maps props to local data.
vue-inject - Dependency injection for Vue 2.x Components
vue-deepset - Interact with deeply nested fields in Vue/Vuex objects/state with v-model in Vue 1.x and 2.x
vue-gaspard - DOM helpers plugin for Vue.js
vue-configuration - A static configuration object for Vue.js
vue-lodash - A simple wrapper for integrating lodash to Vue 2.
vue-ramda - Vue Wrapper for ramda
vue-router-user-roles - Protects routes based on user roles. Add your own authentication.
vue-messenger - A series of useful enhancements to Vue component props: Transform, Enum-type, Numeric-type, Two-way data bindings.
vue-uuid-v4 - Plugin Vue2 to easy get UUIDv4
vue-async-operations - Managing async operations statuses in your Vue components
vue-direction - 👋 Direction aware hover in Vuejs
vue-unique-id - Generates unique component ids and component-scoped HTML ids.
stfalcon-vue-di - ⭐️ Lightweight DI for vue components️ ❤️
vue-uuid - Adds UUID to Vue instance.
vue-injector - Dependency injection for Vue 2.x
vue-subslot - 💍 Vue component to pick 'n choose what you want from a slot
vue-timed-content - Shows or hides content based on a given time range and timezone.
vue-live - A component to demo components, inspired by react-live.
vue-safe-html - Vue.js directive which renders sanitised HTML dynamically.
v-fetch - Vue.js directive to make AJAX requests.
vue-use-model-helpers - Helper to map properties to local Ref using Composition API for Vue 2.x and 3

Web Workers

vue-worker - A Vue.js plugin to use webworkers in a simple way.
vue-log-worker - A Vue.js plugin to log error and vuex mutations to your backend through a web worker

JSX

jsx-vue-functional - A Babel plugin that brings syntactic sugar for Vue functional components.
jsx-event-modifiers - A Babel plugin that adds event modifiers similar to Vue templates to JSX.
jsx-v-model - A Babel plugin that brings v-model to JSX.
vue-jsx-sync - A Babel plugin that brings vue sync modifier to JSX.

Migration

vue-backbone - Vue.js Plugin to facilitate Backbone integration.
vue2-migration-helper - Transforms Vue.js SFCs to composition api syntax.

Web Sockets

vue-socket.io - Socket.io implementation for vuejs.
vue-websocket - Simple websocket (socket.io) plugin for Vue.js.
vue-echo - Integrates Laravel Echo into Vue, allows for easy registration of socket events.
vue-socket-cluster - Web Sockets for vue with uws(Micro web sockets) through socket cluster
vue-native-websocket - Native websocket implementation for Vuejs 2 and Vuex
vue-socket.io-extended - Socket.io bindings for Vue.js and Vuex
vue-phoenix - Elixir Phoenix Web Socket implmentation for vuejs. Also provides typescript decorator for better use.

Server-Sent Events

vue-sse - A Vue plugin for using Server-Sent Events (EventSource).

Payment

Payment utilities.

Stripe

vue-stripe-checkout - A simple vue plugin for Stripe checkout.
vue-stripe-payment - Vue wrapper for jquery.payment by Stripe.
vue-stripe-elements - Vue component collection for Stripe.js
vue-stripe-js - Vue 3 components for Stripe.js

Paypal

vue-paypal-checkout - A simple Vue.js wrapper component for paypal-checkout.

Plaid

vue-plaid-link - Easy to use Vue component for Plaid Link.

Integrations

Integrate with services or other frameworks

vue-disqus - Vue component to integrate Disqus comments in your application, with support for SPA.
vue-youtube-embed - Vue.js and YouTube.
vue-add-to-calendar - A Vue.js component that provides "Add to Calendar" functionality, works with Vue 2.X.
Vue + Meteor - Vue first-class integration in Meteor.
av-ts - A modern, type-safe, idiomatic Vue binding library.
Neutronium - Build .NET desktop applications using HTML, CSS and javascript.
vue-typescript-jest - Jest preprocessor.js for Vue.js components (supporting html, pug, and babel) and TypeScript.
vue-jest-utils - Utilities for testing Vue.js components using Jest.
vue-custom-element - Vue Custom Element - Custom Elements for Vue.js.
vue-cordova - Vue.js plugin for Cordova.
vue-wamp - AutobahnJS wrapper library fo Vue.js.
express-vue - Vue rendering engine for Express.js. Use .Vue files as templates using res.render().
vue-grecaptcha - Google reCAPTCHA for VueJS 2
vue-recaptcha - Google reCAPTCHA component for Vue.js
require-vuejs - RequireJS plugin to async and dynamic load and parse .vue components.
facebook-login-vuejs - Vue Component for Authenticating your Facebook App and get the benefits of Facebook Login.
vuejs/vuefire - Official Firebase Integration for VueJS
vuefire - Firebase for VueJS and Vuex
vue-runkit - RunKit Embed for Vue.js
vue-youtube - Provides a simple layer for you to use your imagination while over the YouTube IFrame Player API. (Compatible with SSR)
vue-introjs - Integrates intro.js step-by-step guide and feature introduction with Vue.js http://introjs.com/.
vue-loopback - Loopback and Vue application template
vue-laroute - Integrate Laravel routes into your VueJS application using laroute.
vue-raven - Automatically reports uncaught JavaScript exceptions triggered from vue component.
vue-telegram-login - Vue Component for Telegram Login
vuexpress - Vue + Express.js = VueXpress / A server-side rendering engine for Express.js. Use .vue files as your express.js templates.
vue-fixer - A simple vue component for the fixer API.
amazon-cognito-vuex-module - Vuex module for Amazon Cognito.
vue-web3 - Web3 blockchain bindings for Vue.js (inspired by Vuefire and Drizzle)
sbt-vuefy - Vue.js integration for Playframework
loopback-vue-starter - LoopBack and Vue starter template with easy plugin management through vue-cli and vue ui.
vue.py - Write Vue.js Components in Python
vue-telegram-passport - Vue Component for Telegram Passport
vue-facebook-login-component - A fully customizable component for integrating Facebook login.
vue-programmatic-invisible-google-recaptcha - A simple invisible Google reCAPTCHA component focused solely on programmatic invocation.
vbuild - Its main purpose is to let you use components (.vue files) in your vuejs app, without a full nodejs stack. Since 0.6 versions : you can create your component in pure python !
feathers-vuex - is a first class integration of the Feathers Client and Vuex. It implements many Redux best practices under the hood, eliminates a lot of boilerplate code, and still allows you to easily customize the Vuex store.
vue-nocaptcha - Aliyun noCAPTCHA component for Vue.js
ionic-vue - Vue.js integration for Ionic v4
vue-0xcert - Vue.js integration for 0xcert Framework - an open-source library that provides tools for building powerful decentralized applications
vue-zdog - Vue wrapper for zDog - a minimalist 3D engine for the browser
vue-unleash - A Vue plugin for the Unleash open-source feature flag platform
vue-zeye-client - A Vue plugin for simple use of the Zeye-server open-source mediasoup WebRTC SFU server
vue-postgrest - Vue.js integration for postgREST: flexible, powerful and easy to use.
Vuecket - WebFramework where power of Vue.JS married with magic of Apache Wicket
vue-ld - Vue LaunchDarkly plugin and routing utilities
Prisma - Logs visualization client for @sherlog/cli
vuetube - 🚀 A fast, lightweight, lazyload vue component acting as a thin layer over the YouTube Iframe Player API which renders fast
vue-tweet - Vue 3 component that let you embed tweets in your App by only giving the tweet id
vue-dapp - Vue 3 library for building Dapps with ethers.js.

Vue CLI Plugins

vue-cli-plugin-cordova - Vue CLI Plugin to add Cordova easily to your project
vue-cli-plugin-component - Vue CLI Plugin to create component
vue-cli-plugin-modular-vuex - Vue CLI Plugin to create modular Vuex store files
vue-cli-plugin-modular-router - Vue CLI Plugin to create modular route files
vue-cli-plugin-docker-nginx - Vue CLI Plugin to add a docker deployment using a minimal nginx server
vue-cli-plugin-element - Vue CLI Plugin to build an enterprise application with element-ui in seconds
vue-cli-plugin-electron-builder - Vue CLI Plugin for Electron with no required configuration that uses Electron Builder.
vue-cli-plugin-codeceptjs-puppeteer - installs CodeceptJS & Puppeteer for supercharged end 2 end testing 🙋
vue-cli-plugin-kami - Vue CLI Plugin with work-made architecture for quickly start your app
vue-cli-plugin-auto-alias - Vue CLI Plugin to automatically sets aliase
vue-cli-plugin-clean - Vue CLI Plugin to help you clean and quickly set up your Vue app by adding some common tools and patterns
vue-cli-plugin-mock - Vue CLI Plugin to mock http request
vue-cli-plugin-ci - Vue CLI Plugin to generate CI agent config file to start project with CI
vue-cli-plugin-capacitor - A Vue CLI 3 Plugin for Capacitor
vue-cli-plugin-chrome-extension-cli - Vue CLI Plugin generat chrome extension template

Google Analytics

vue-ua - Google Universal Analytics support in Vue.js.
vue-analytics - Vue plugin for Google Analytics.
vue-gtm - Vue plugin for Google Tag Manager
vue-gtag - Global Site Tag plugin for Vue

Yandex Metrika

vue-ya-metrica - Vue plugin for Yandex.Metrica
vue-yandex-metrika - Vue plugin for Yandex Metrika with router integration, plugin options

Dev Tools

vue-dev-server - A small development server for building vue components.
Storybook - The UI Development Environment. works with v3.2+ later.
Font Awesome Finder - Chrome extension to search, preview and choose Font Awesome icons and copy the selected icon HTML code & Unicode to clipboard.
vue-dummy - Placeholder Text and Dummy Images as a simple v-dummy directive.
Bit - Manage and reuse vue components between projects. Easily isolate and share components from any project without changing its source code, organize curated collections and install in different projects.
ComponentFixture - is a component design to develop and test other components, automatically binding their props.
vue-cli-template-dev-server - A development server for building vue-cli custom templates.
vue-codemods - Collection of codemod scripts that help update and refactor Vue and JavaScript files.
codesandbox - An online IDE and prototyping tool for rapid Vue development.
vue-dom-hints - 💡 Get hints in the DOM. Minimal Vue devtool alternative.
components-helper - Based on the documents to provide code prompt files for vue component library.

Inspect

Inspecting & debugging

Vue.js devtools - Chrome devtools extension for debugging Vue.js applications.
DejaVue - Visualization and debugging tool built for Vue.js.
vue-clicky - Right click any component to show info about it in the console.
vuejs-logger - Provides customizable logging functionality for Vue.js.
vue-inspector - Vue.js Inspector for Mobile Devices
Vue Performance Devtool - Vue Performance Devtool is a browser extension for inspecting the performance of Vue Components
VueSource - Global Vue mixin which identifies components in source code by adding HTML comments
NW-Vue-DevTools - DevDependency for adding Vue DevTools into NW.js
bruit-io - Collect feedbacks with screenshot and technical data and post them to an API like bruit.io.

Docs

Create documentation

vue-markdown-loader - Convert Markdown file to Vue Component.
vue-styleguide-generator - React inspired style guide generator for Vue.js.
CheatSheet - Complete Interactive API.
Vuex CheatSheet - Complete Interactive Vuex API.
vue-styleguidist - A style guide generator for Vue components with a living style guide.
vue-elucidate - A component that generates beautiful documentation for your living styleguide / design system.
vue-md-loader - Markdown files to ALIVE Vue components.
@vuedoc/parser - Generate a JSON documentation for a Vue file component.
@vuedoc/md - Generate a Markdown Documentation for a Vue file.
jsdoc-vue-component - A jsodc3 plugin that extract vue SFC info(name, props, events...) to document.
jsdoc-vuedoc - A jsdoc3 plugin use @vuedoc/md.
vue-storybook – Add <story> blocks to your Vue single file components for tighter integration of Vue + Storybook
vue-patterns - Useful Vue patterns, techniques, tips and tricks and helpful curated links.
vuese - One-stop solution for vue component documentation.
vue-dotmd-loader - A webpack loader for loader markdown file transform to vue file.
vue-tut - Easily build beautiful tutorials with Vue.

Test

vuenit - Utilities for testing Vue components and directives.
vue-unit - A library for Vue.js that makes it easier to create and unit test components.
vue-a2b - A library for Split Testing with Vue.js (A/B Testing). Highly configurable and tiny (1.2k gzipped).
vue-test-utils - Official utilities for testing Vue components.
vue-test-actions - Unit testing Vuex actions with Jest mocks.
jest-vue-matcher - Additional jest matchers for vue
vue-hubble - A better way to select elements for UI testing in Vue.
Vue Testing Library - Simple and complete testing utilities that encourage good testing practices. Based on DOM Testing Library and built upon the official Vue Test Utils.
jest-serializer-vue-tjw - Improved formatting of Jest Snapshots
vuex-test-utils - Unit testing Vux with chai.

Browser-less require

Load Vue components without browser

vue-node - Load vue components in node.

Source Code Editing

Text editor plugins

Atom

language-vue@atom.io - Vue component file syntax for Atom.
vue-snippets@atom.io - Atom snippets for Vue component files.
vue-autocompile@atom.io - Auto compile vue file on save.
lint-sass-vue@atom.io - Atom.io package to lint Sass/SCSS in .vue files.
vuejs2-snippets@atom.io - Atom snippets for javascript and components, including lifecycle hooks, directives, properties, vuex, vue-router, vue-i18n support.
vue2-autocomplete@atom.io - Vue.js 2.0+ autocomplete for Atom.

Sublime Text

Vue Syntax Highlight - Sublime Text syntax highlighting for single-file Vue components.
VUEFormatter - Sublime Text code format
Vue Next Formatter - Sublime Text Vue formatter, Supported ES5/6/7, Less/Sass and Pug/Html template.

Vim

Vim Vue - Syntax Highlight for Vue.js components.
vim-vue-plugin - Vim syntax and indent plugin for .vue files.

Visual Studio Code

Vetur - Vue tooling for VSCode.
Vue VSCode Snippets - Snippets that will supercharge your Vue workflow.
Ionic Snippets - Vetur support for Ionic Components
Volar - The Fastest Vue Language Support Extension

Visual Studio

VuePack - Contains HTML Intellisense and code snippets for the Vue.js JavaScript library.

Brackets

Brackets Vue - Brackets extension for Vue.js.

Intellij

Vue.js support for WebStorm, IntelliJ IDEA, PhpStorm, PyCharm & RubyMine – official Vue.js support by JetBrains

Emacs

Vue Mode - Emacs major mode for vue.js.

Kate

Kate Syntax Files - Syntax files (modified or original) for katepart (kate, kwrite, kdevelop).

Scaffold

Scaffold / boilerplate / seed / starter kits / stack ensemble / Yeoman generator

vue-cli - Simple CLI for scaffolding Vue.js projects.
Vue-Django - A boilerplate to set you up in bringing the awesomeness of VueJS into a Django (Python) app.
python-vuejs - Gluing Python web frameworks and Vue.js with a set of scripts. Basically a vue-cli wrapper.
generator-vue-plugin - Yeoman generator generating vue plugin.
vue-seed - vue-seed is minimal seed for those looking to get up-and-running with Vue
nuxt-seed - nuxt-seed is minimal seed for those looking to get up-and-running with Vue and Nuxt
rails_vue_melt - Rails view with webpack=vue optimizer.
vue-starter - A Vue.js starter kit that lets you focus on more programming and less configuration.
vuejs-wordpress-theme-starter - A WordPress theme with the guts ripped out and replaced with Vue
Cordovue - A sample Apache Cordova application using Vue.
Cookiecutter-Django-Vue - Django+VueJS+Docker customizable project generator with a large number of settings/integrations
iBiu A visual CLI for scaffolding large Vue projects in 2 seconds.
wp-vue - A simple Vue blog template that displays posts from a WordPress REST API endpoint.
vue-cli-template-nativescript - Template for starting new nativescript+vue projects with rollup+babel+eslint
vue-element-ui-scaffold - Online and visual Vue 2 with Element-UI CRUD scaffold/generator.
vue-firebase-element-ui-scaffold - Online and visual Vue 2, Element-UI and Firebase scaffold/generator with CRUDs, authentication, file/image upload, activity log and more.
vuesion - Vuesion is a boilerplate that helps product teams build faster than ever with fewer headaches and modern best practices across engineering & design.
vue-vuex-typescript-webpack-seed - A seed project with Vue, Vuex, Typescript, Scss & Webpack with hot reloading
VueCharged Template - A highly opinionated, feature-first Vue 2 template with CLI scaffolding. Uses Vue 2, Vuex, Vue Router and Vue I18n.
Huncwot - Vue.js boilerplate with Node.js for building modern JavaScript applications with « batteries included » approach.
wemake-vue-template - Bleeding edge vue template focused on code quality and developer happiness. Featuring: nuxt, flow, and jest.
vue-lib-template - 🛠 A simple template for building and publishing Vue component/library as an open source project.
Awesome Vue Boilerplate - 😍 Awesome Vue, 🥰 Vuex, Vuex-pathify, element-ui, tailwindcss
ScaffoldHub.io - Generate full Vue applications with SQL, MongoDB or Firebase Firestore databases.
VuePlay - Generate disposable Vue playgrounds in seconds. Allows you to test things quickly.
Mevn-CLI - Light speed setup for MEVN stack based apps.
vue-cli-template-registry - A solution for installing vue-cli custom templates hosted on private/enterprise repositories.
Vuejs Firebase CRUD Starter with Auth
vue-enterprise-boilerplate - An ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI 3.
vue-starters-directory - Search for available scaffold projects and starter kits for VueJS. Features search and github stats are available.
janak - Build your Vue 3 apps in a breeze 🌬
vue-composable-starter - 🪝 Minimalist starting point for your next Vue composable.
Vuetify-tailwind-animate-starter - A vue-cli starter template for vuetify + tailwindcss + animate.css.
vuejs-vuetify-structured-template boilerplate - A vue-cli template for a full-featured Vuejs + Vuetify + Great structure + API Ready

Client

Render Vue application in the browser only

Bourgeon - Bourgeon is an opinionated-featured VueJS 2.0 setup for Webpack.
Vue Settler - An opinionated Vue 2.0 SPA Starter.
vue-multiple-pages - A modern Vue.js multiple pages starter which uses Vue 2, Webpack2, and Element-UI
vue-typescript-boilerplate - A Vue.js typescript SPA starter with Vue 2, Vue Typed, Vuex, Vue Router and localization
vue-tachyons-template - A Vue 2 project starter template w/ Tachyons, Webpack, and ESLint
Vuets - A Vue, TypeScript ready boilerplate using class-style components, vue plugin options, webpack & vue-cli.
MMF-FE/vue-typescript - A vue2.x typescript template.
Friendly Vue Starter - A full-featured Vue.js starter project with GraphQL support via Apollo-client (Vuex, Vue-router, Vue-i18n, Webpack 3, Eslint, Prettier, ...)
vue-ts-amd - A full-featured Vue.js 2 boilerplate using AMD pattern (RequireJS) and Typescript.
vue-2-boilerplate - Vue 2 boilerplate for developing medium to large single page applications by petervmeijgaard
vue-cli-template-library - Template for developing open-source vue.js libraries with Rollup + Jest + Babel + Storybook + TravisCI + SemanticRelease.
vue-cli-template-github-pages - A full-featured Webpack + vue-loader setup for Github Pages Deployment with travisCI.
vue-webpack-chrome-extension-template - Template for quick creation of Chrome extension on Vuejs hot reloading when developing.
vue-auth-boilerplate - Vue SPA boilerplate with Router/Vuex/CLI3 and auth functions (cool looking register and login). Works with minimal setup out of the box with laravel-api-boilerplate-jwt.
vue-atomic-design - Vue front-end boilerplate based on atomic design methodology.
vue3-compact-template - ⚡️ A simple and compact vue 3 template with current cutting edge front end technologies.

Universal

Render Vue application to HTML on the server and to the DOM in the browser

SPA Starter Kit - A highly opinionated starter kit for building Single Page Applications with Laravel and Vue.js.
SSR Boilerplate - Vue.js server-side rendering boilerplate without polluting Vuex.
neutrino-preset-vue-static - A minimalistic starter kit for building static sites using Vue.js.
Vueniverse - A fully featured, universal Vue template for user-based applications, powered by Nuxt.js and Express.
vue-preload - A plugin Vue for adding <link rel="preload" capabilities
Vue.js/Nuxt.js full-featured boilerplate - professional agency frontend template for building fast, robust, and adaptable web apps or sites by vuejs/nuxtjs.

Server

Includes a backend boilerplate

Vuetober - Single page apps with Laravel, Vue.js, and October CMS.
vue-server-demo - Writing koa server in Vue.
vue-apollo-connector-kit - JWT authentication with 2 different strategies (localStorage and httpOnly cookies). Authorization using custom directives (apollo).
DotVue - Implement .vue file handler in .NET with server ViewModel postback. Single-file components with server-side ViewModel. Use all power of VueJS with simple C# server-side data access.
isomor-vue-app - Setup a working environment with Vue and isomor, to unify the frontend and the backend by generating automatically the API.

Electron

Electron Vue - An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.
VuePack - A modern starter which uses Vue 2, Vuex, Vue-router and Webpack 2 (and even Electron).
vue-flexible-link - Tiny Vue component for Electron to open links in a browser. Ideal for cross-environment apps (Web & Native)
vuelectron - electronjs starter kits for vue.
vue-design - the best website visualization builder with Vue and Electron.
dapp - Boilerplate for stack of Vue/Parcel/Electron.
vue-electron-template - An Electron & Vue.js boilerplate with Hot-reloading enabled and common Vue plugins, dev and build scripts configured using webpack-4
vue-iview-electron-boilerplate - An Electron & Vue.js boilerplate with iview4.x, Vue2.x, electron8.x and webpack4.x
electron-vue3-flask - An Electron & Vue.js application starter template that uses a python backend via Flask for desktop application building.
electron-vite-template - A modern desktop application project template with Vue 3, Vite & Electron. It's fast!

Parts

Scaffold parts of the app

vue-generator - A CLI generator for Vue components, views and store modules.
vue-component-generator - A generator for vue component, supports Vue1.X and Vue2.X.
rapydml_cmp - Vue-component pythonic generator, built on top of RapydML & RapydScript.
vue-authoring-template - Template for authoring also publishing Vue component and their use case in story-scenario (storybook) format in easy way.
vue-component-boilerplate - Template for generating the boilerplate code for a VueJS component, with build scripts and testing pre-installed.
vue-generate-component-typescript - A typescript code generator for vue, it can generate components, directives, filters.
vuejs-generate - An easy CLI for generating Vue components, stores, store modules & unit tests.
vue-sh-cli - A CLI for generating Vue components, views, store modules & unit tests. Supports Vue 3 components template and Typescript.

Runtime

Command Line / Terminal

blessed-vue - A VueJS runtime to let you write command line UI in Vue Edit

Prerendering

react-snap - A zero-configuration static pre-renderer for SPA
prerender-plugin - A Node.js/ webpack plugin to prerender static HTML in a single-page application (SPA).
vue-prerender - A Vue.js tailored plugin which implements three strategies for prerendering Vue.js pages using headless chrome.
Rendora - dynamic SSR (server-side rendering) using headless Chrome to effortlessly solve the SEO problem for modern javascript websites
pre-vue - A boilerplate Vue + Nuxt project that offers built-in support for OpenGraph tags, Google Analytics, a sitemap, and robots.txt.
ssr-vuejs-nodejs - Server-side render vuejs with nodejs without Nuxt.
vue-genesis - 🔥Micro front end, micro service and lightweight solution based on Vue SSR🔥

Awesome Marionette.js

A list of resources for marionette.js

General

Tutorials and articles

A Thorough Introduction To Backbone.Marionette Part 1: Application
A Thorough Introduction To Backbone.Marionette Part 2: Modules
A Thorough Introduction To Backbone.Marionette Part 3: Views
A Simple Backbone.Marionette tutorial: Application. Simple List
A Simple Backbone.Marionette tutorial: Application with Interactions
A Visual Guide To Marionette.js Views by Matt Bajoras
Representing Marionette.js Views With State by Matt Bajoras
The Case for Marionette.js
Connecting Data to Your Views
Building Complex Layouts with Marionette.js
The Life of a Marionette View
Building Modular Web Apps with Backbone.Radio
From Backbone.js to Marionette.js (Russian) - by Mahnunchik
Marionette.js Behaviors, Part 1: The Basics
Marionette.js Behaviors, Part 2: Testing Behaviors
Things I Learned from Building a Large Scale Backbone + Marionette Application by Ian Williams
Design Rules in a Backbone-Marionette App
A Short Primer on Marionette.js
Pimping Backbone with Marionette by Tom Herold
Handling Forms with Marionette.js by Al Scott
Nested Views in Backbone.Marionette by Sam Saccone
DRY up Your Views in Backbone Marionette by Sam Saccone
Strengthening Our Backbone with Marionette (Part I)
Tutorial: Nested Views Using Backbone Marionette's CompositeView bu David Sulc
Components with Backbone.js and Marionette.js by Jeremy Fairbank
Managing Layouts and Nested Views with Backbone.Marionette by Derick Bailey
Revisiting the Backbone Event Aggregator: Lessons Learned by Derick Bailey
Why Should I Use Backbone.Marionette Instead of … ? by Derick Bailey
Polymer Web Components with Marionette.js by Jeremy Fairbank
Building a Marionette App with Flux Architecture by Kurtis Kemple
Marionette-Service: Service Objects for Marionette by Ben McCormick
Refactoring a JavaScript Application to Use Microservices: What We Learned with Backbone and Marionette by Pasha Craydon
SEO-Enabling Your Marionette App

Books

Building Backbone Plugins by Derick Bailey and Jerome Gravel-Niquet
Backbone.Marionette.js: A Gentle Introduction by David Sulc
Structuring Backbone Code with RequireJS and Marionette Modules by David Sulc
Marionette Exposé by Jack Killilea
Backbone.Marionette.js: A Serious Progression by David Sulc
Getting Started with Backbone Marionette by Raymundo Armendariz and Arturo Soto
Marionette Guides
Better Backbone Applications with MarionetteJS

Videos

Dancing with Marionette - Youtube channel
Backbone.js with Derick Bailey by Derick Bailey
The Tools and Patterns for Building Large-Scale Backbone Applications by Brian Mann
Episode 03 of BackboneRails Screencast by Brian Mann
Backbone Marionette and Require.js by Daniel Cousineau
Backbone's Rarely Enough: An Introduction to Backbone Marionette by Len Smith
Unsuck Your Backbone by Amy Palamountain
Building Modular and Component Driven Architecture in Backbone.js and Marionette.js by Jeremy Fairbank Slides
Marionette: The Backbone Framework from BackboneConf 2014 by James Smith
Building Beautiful Apps with Marionette
Nesting Your Views in Marionette
Marionette Behaviors
Backbone.Wreqr
Jason Laster - Backbone Under the Magnifying Glass Tools for Exploring and Debugging Your Apps
Browserify + Marionette = Better Apps
Using DevTools for Marionette Debugging
Routing Made Better
View and Application State

Examples and boilerplates

Marionette Require Boilerplate
Marionette Contact Manager - Continuation of development "Backbone Contact Manager" but using Marionette.js
Marionette, Require, and Gulp.js Boilerplate - A Lightweight boilerplate originally project based off "Marionette Require Boilerplate", with Gulp.js integration instead of Grunt.js
MarionetteJS + RequireJS + Twitter Bootstrap - Let's start the dance! This boilerplate is a ready setup for starting your next awesome javascript app in minutes
Marionette Gentle Introduction
Marionette Wires
Marionette Cookbook
MarionetteJS + Brunch + Babel/ES6
A Place to Write About Technical Subjects on the Web
The Front End App for edit.sx
Streamus
Marionette-Integrations - example marionette apps using several different asset management tools
ES6 Marionette Project
Todo List - TodoMVC example
Webpack-Marionette A small boilerplate introducing webpack and es6 features to a Marionette/Backbone application, contains a sample CRUD application of an editable Cookbook.

Libraries

Marionette State
Marionette Virtual Dom
Marionette Form View
A Better Router for Backbone and Marionette Applications
Marionette.Toolkit - A collection of opinionated Backbone.Marionette extensions for large scale application architecture.
Orchestra - Client-side app orchestration framework

Aurelia Awesome

A curated list of amazingly awesome Aurelia libraries, resources and shiny things.

Current Aurelia version

Aurelia
Official Resources
Community
Experts on personal blogs
Aurelia Tools
Seed Project
Aurelia Generators
Aurelia Cheatsheet
Aurelia Tutorials
- Aurelia Podcasts
- Aurelia Videos
- Aurelia Books
- Aurelia Articles
Material Design
Aurelia Plugins
Aurelia Implementation
Aurelia Custom Element
Aurelia Auth
Aurelia Libraries
Aurelia Examples
TypeScript
TypeScript General Resources
Seed Projects
Examples
Aurelia in ES5
Seed Projects
Examples
Aurelia and Meteor
Seed Projects
Contributing

Aurelia

Aurelia is a next gen JavaScript client framework for mobile, desktop and web that leverages simple conventions to empower your creativity.

Official Resources

Community

Experts on personal blogs

Aurelia Tools

Chrome Extension * This tool is called "Aurelia Inspector"
vscode-extension * An Aurelia extension for the VS Code editor that provides HTML syntax highlighting, statement completion and CLI integration.
vscode-aurelia-snippets * HTML, JavaScript and TypeScript snippets for VSCode
aurelia-update * Update all aurelia dependencies easily.
aurelia-template-lint * Sanity check of Aurelia-flavor template HTML
atom-aurelia-snippets * JavaScript and TypeScript snippets for atom
aurelia-installer * CLI for managing Aurelia components and vendor libs
aurelia-debugger * Visual debug tool for Aurelia

Seed Project

Beginner kits * Houses the beginner getting started started kits for ES 2016 and TypeScript.
TypeScript + Webpack Starter Kit * A minimal Aurelia starter kit written in TypeScript and built using webpack.
{{ add_your_repo }}

Aurelia Generators

zewa666/generator-aurelia Yeoman generator for the JavaScript Framework Aurelia by @zewa666
kristianmandrup/generator-aurelia-ts Turbo Start generator for Aurelia apps by @kristianmandrup

Aurelia Cheatsheet

Aurelia Getting Started Cheat Sheet by ErikCH

Aurelia Tutorials

Aurelia Value Converters
Aurelia & Framework7 vs. Angular2 & Ionic2
Aurelia-styleguide * A starting point for Aurelia development teams to provide consistency through best practices.
Aurelia Tutorial | TutorialsPoint

Aurelia Podcasts

02.22.2016 No Fluff Just Stuff Podcast: Checking out Aurelia with Peter Pavlovich
02.18.2016 Program With Erik Podcast: The History Behind Aurelia with Rob Eisenberg
02.11.2016 Adventures in Angular Podcast: Aurelia with Rob Eisenberg
08.04.2015 Herding Code 203: Rob Eisenberg on Aurelia
06.02.2015 The Changelog #140: Aurelia, Durandal, and leaving AngularJS with Rob Eisenberg
02.02.2015 The Web Platform Podcast : 38: Aurelia.io

Aurelia Videos

02.20.2018 Aurelia For Beginners: The New Age JS Framework | Packt
01.04.2018 Tutorial Series of Aurelia | AureliaCasts
02.28.2017 Aurelia Web Development - Part 1 | Packt
05.04.2016 Brian Noyes | Aurelia Fundamentals on Pluralsight.com
03.08.2016 Discover Aurelia with CEO Rob Eisenberg
11.01.2016 Rob Eisenberg | Aurelia: Next Generation Web Apps | NDC {London}
12.16.2015 Ashley Grant on Custom Components in Aurelia | Dev Chat
12.10.2015 Jeremy Danyow on Binding | Readthesource 12
12.09.2015 Jakub Jedryszek | Aurelia * The next generation JavaScript framework you will love | SeattleCodeCamp
11.12.2015 Rob Eisenberg on Aurelia | DEVIntersection 2015 | Channel 9

Aurelia Books

Aurelia for Real World Applications by Dwayne Charrington (Dec 2018, 174 pages)
Mastering Aurelia Store By Dwayne Charrington (last updated Nov 2018)
Aurelia in Action By Sean Hunter (Aug 2018, 432 pages)
Hands-On Full Stack Web Development with Aurelia By Diego Argüelles & Erikson Murrugarra (June 2018, 348 pages)
Practical App Development with Aurelia by Matthew Duffield (March 2018)
Practical Aurelia by Behzad Abbasi (behzad888) (March 2018, 137 pages)
Learning Aurelia by Manuel Guilbault (Dec 2016, 292 pages)
Beginning Aurelia by Behzad Abbasi (behzad888) (July 2016, 218 pages)
Aurelia App Amazement By Kristian Mandrup (2016)

Aurelia Articles

Authorization in Aurelia using CASL * by Sergii Stotskyi (stalniy)

Material Design

Official Aurelia Material Design (Github)
aurelia-mdl
aurelia-material
aurelia-mdl-plugin * Material Design Lite plugin for Aurelia
{{ add_your_repo }}

Aurelia Plugins

aurelia-auth * Token-based authentication plugin for aurelia
aurelia-computed * A plugin for Aurelia to observe computed properties without dirty-checking
aurelia-i18n {official} * A plugin that provides i18n support
aurelia-ui-virtualization {official} * A plugin that provides a virtualized repeater and other virtualization services
aurelia-bs-grid * Aurelia and Bootstrap powered datagrid control
aurelia-polymer * Aurelia plugin to support Polymer
aurelia-google-maps * A highly configurable custom element for use in your Aurelia applications for inserting Google Maps into your application
webpack-plugin {official} * A plugin for webpack that enables bundling Aurelia applications
aurelia-cycle * An Aurelia plugin that enables the use of Cycle.js inside of Aurelia
aurelia-kendoui-bridge * Aurelia and KendoUI integration
aurelia-long-click-event * Add delegate/trigger capabilities for long click.
aurelia-react-loader * Load React components directly from Aurelia views
aurelia-validatejs {official} * Enables expressive validation using decorators and/or a fluent API.
aurelia-view-pipeline * A plugin for loading any Markdown into custom element
aurelia-routed-footer * An Aurelia plugin which adds the ability to control footer content via the router
aurelia-api {ES6/TS/Webpack} * A wrapper around aurelia-fetch-client for multiple endpoints
aurelia-authentication {ES6/TS/Webpack} * Authentication plugin for aurelia with aurelia-api support.
aurelia-orm {ES6/TS/Webpack} * Makes working with entities and calling your Rest API simple.
aurelia-notification {ES6/TS/Webpack} * Automatically translated notifications utilizing humane.js and i18n
aurelia-binding-loader * An Aurelia loader for using any module directly from a view template
aurelia-dragula * An ES2015 port of the Dragula library, targeted at the Aurelia Framework
aurelia-breeze * Everything you need to use Breeze with Aurelia
aurelia-bootstrap-datepicker * An aurelia port for bootstrap-datepicker
Aurelia-Configuration * Smart configuration for your Aurelia applications.
aurelia-environment * aurelia-environment provides simple .env parsing and loading
aurelia-firebase * A Firebase plugin for Aurelia
aurelia-flux * Flux dispatcher plugin for Aurelia
aurelia-grid * A fresh Aurelia Grid written in TypeScript based charlespockert's Aurelia BS Grid
aurelia-google-analytics * An Aurelia.io plugin that adds Google Analytics page tracking to your project.
aurelia-knockout * A Knockout plugin for Aurelia
aurelia-leaflet * Leaflet Plugin for Aurelia
aurelia-notify * A notification plugin for Aurelia
aurelia-rethink-bindtable * Aurelia bind table integration for RethinkDB via Socket.io
aurelia-sails-socket-client * A simple, restful, message-based wrapper around sails.io client
aurelia-switch * An aurelia optimised switchButton
aurelia-yt-player * Aurelia plugin for Youtube player API
abalmus/aurelia-ace-editor * Aurelia ace editor plugin
Tseberechts/aurelia-place-picker * A place picker inspired by the Autocomplete places with Aurelia
treacherous-aurelia * An Aurelia plugin for the treacherous validation system
aurelia-filter * A plugin for aurelia to populate search/filter criteria. Works well with aurelia-orm
aurelia-charts * Graphs plugin for aurelia. Supports all libraries
aurelia-view-manager * A view manager for aurelia plugins. Add support for overriding views, and multiple frameworks
aurelia-resize * aurelia plugin to observe DOM-element resize events
aurelia-keyboard-plugin * Simple keyboard plugin for aurelia
aurelia-ui-framework * A bespoke UI Framework built on Aurelia for desktop business application
aurelia-tags-input * An aurelia tags input plugin
aurelia-formio * A dynamic JSON Form Renderer and Form Builder - See Example
aurelia-swipeout * A custom element for iOS style swipeout actions - Demo
aurelia-split-pane * A custom element for resizable split panes - Demo
aurelia-bootstrap-plugins * A set of plugins to bridge with 3rd party Bootstrap addons - Demo
aurelia-slickgrid * Slickgrid the best javascript datagrid for performance & customization is now available in Aurelia - Demo
casl-aurelia * Permissions management plugin which allows to integrate Aurelia and CASL
aurelia-json-schema-form * A completely customizable plugin to dynamically generate forms & validate them based on JSON schema
aurelia-highlightjs * An Aurelia custom element for highlight.js
aurelia-fontawesome * Aurelia component for Font Awesome 5.
aurelia-kis-oidc * An Aurelia plugin that encapsulates oidc-client-js library.
aurelia-telemetry
{{ add_your_repo }}

Aurelia Implementation

aurelia-animator-tinyanimate * Implementation of the Aurelia base animator using TinyAnimate
sukobuto/aurelia-tinymce-sample * Sample app with Aurelia and TinyMCE
stamp-web/stamp-web-aurelia * Next Generation Stamp Web Editor written in Aurelio with Bootstrap
aurelia-tabs * A dependency free tabs component for your Aurelia applications. Allows you to toggle between sections of content, with supports for dynamically composing views with optional data
aurelia-flickr-ts-memo-game * Match the pairs type of game written with Aurelia in TypeScript using Flickr
aurelia-datatable * A 100% aurelia based data table component http://aurelia-datatable.spoonx.org

Aurelia Custom Element

aurelia-v-grid * aurelia-v-grid
aurelia-leaflet * A Leaflet CustomElement for Aurelia
aurelia-chart * A chart element for aurelia which is powered by chart js using html5 canvas
aurelia-toolbelt * A set of components for bootstrap4, it also includes other components and value converters.
ag-grid-aurelia * The Aurelia Component for use with ag-Grid, an advanced data grid/data table - Demo

Aurelia Auth

sentry * An Aurelia template with a built in authentication shell
aurelia-authentication-loopback-sample * Aurelia client sample with aurelia-authentication and loopback server (ES6/TS+jspm, ES6+webpack)
aurelia-identityserver-aspnetcore * Sample integrating aurelia with identityserver 4 and docker
casl-aurelia-example * Example applilcation of authorization in Aurelia app using CASL.

Aurelia Libraries

pollyfils * The minimal set of polyfills needed to run Aurelia
aurelia-sails-socket-client * A simple, restful, message-based wrapper around sails.io client
aurelia-bundler * A library for bundling JavaScript, HTML and CSS for use with SystemJS
{{ add_your_repo }}

Aurelia Examples

jdanyow/aurelia-breeze-northwind * A Northwind demo using Aurelia and Breeze by @jdanyow.
jdanyow/aurelia-solitaire * Klondike solitaire built with Aurelia and dragula.
discosultan/aurelia-minesweeper * Classic Minesweeper game built with Aurelia by @discosultan.
aurelia-webapi-example * An example WebAPI written with C# and Aurelia
michaelbull/aurelia-hacker-news * A recreation of the Hacker News website written in TypeScript and built using Aurelia, with webpack as a module bundler.
Built with Aurelia * Showcase of examples created by the Aurelia community.

Aurelia + Electron Examples

aurelia-electron-webpack * A basic boilerplate to build Electron apps with Aurelia, Typescript, and Webpack.
AureliaElectronHappiness * Sample application that shows how to combine TypeScript, VSCode and Electron.
electron-aurelia-example * An example desktop application written with Electron and Aurelia.

TypeScript

TypeScript lets you write JavaScript the way you really want to. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

TypeScript General Resources

TypeScript Official Website for TypeScript
REPL Official TypeScript REPL that runs entirely in your browser
TypeScript Repository (GitHub) Official GitHub Repo for TypeScript
DefinitelyTyped Repository (GitHub) The repository for high quality TypeScript type definitions.
TSD TypeScript Definition manager for DefinitelyTyped

Typescript Seed Projects

Aurelia Typescript * A starter kit for working with the Aurelia TypeScript type definitions by @cmichaelgraham
aurelia-axel * As a Visual Studio TypeScript and C# developer building web-based, spatial information systems targeting a variety of platforms that leverage ESRI and SQL Server, I want a starter kit so that I can rapidly build implementations
aurelia-axel-northwind * As a user, I want a walk through of creating a web app from the aurelia-axel starter kit, based of a familiar database (Northwind)
aurelia-skeleton-navigation-gulp-typescript * Aurelia navigation skeleton implemented with Gulp and Typescript
aurelia-chrome-extension-seed * Aurelia chrome extension seed
{{ add_your_repo }}

ES5

An ECMAScript language that includes structured, dynamic, functional, and prototype-based features.

ES5 General Resources

{{ help_add_resources }}

ES5 Seed Projects

ahmedshuhel/nav-app-es5 Skeleton that sets up a standard aurelia navigation-style app just using ES5, Bower and RequireJS by @ahmedshuhel.

ES5 Examples

aurelia-observer-patterns * Simple examples for different methods of implementing observer patterns in Aurelia

Meteor

Meteor is a full stack JavaScript platform which can use Aurelia as its front-end framework.

Meteor Seed Projects

TsumiNa/meteor-aurelia Skeleton that allows Meteor to use Aurelia as the front-end by @TsumiNa.

Contributing Guideline

Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

Ensure your pull request adheres to the following guidelines:

Search previous suggestions before making a new one, as yours may be a duplicate.
If you just created something, wait at least a couple of weeks before submitting.
You should of course have read or used the thing you're submitting.
Make an individual pull request for each suggestion.
Use the following format: [name](link) * Description.
Keep descriptions short and simple, but descriptive.
Start the description with a capital and end with a full stop/period.
Check your spelling and grammar.
Make sure your text editor is set to remove trailing whitespace.
Link additions should be added to the bottom of the relevant section.
New categories or improvements to the existing categorization are welcome.
Pull requests should have a useful title and include a link to the package and why it should be included.

Thank you for your suggestions!

Updating your PR

A lot of times, making a PR adhere to the standards above can be difficult. If the maintainers notice anything that we'd like changed, we'll ask you to edit your PR before we merge it. There's no need to open a new PR, just edit the existing one. If you're not sure how to do that, here is a guide on the different ways you can update your PR so that we can merge it.

awesome

A curated list of chart and dataviz resources that developers may find useful. Focused on relevant and currently active JavaScript charting libraries for different use cases. Ordered alphabetically in each category.

Inspired by the Awesome thing.

Brought to you by

A declarative, efficient, and simple JavaScript library for building responsive charts

Table of Contents * Commercial Libraries * Free and Open Source Libraries * Free Libraries * Framework-Specific Libraries * Data Visualization Resources

Commercial Libraries

amCharts - Three libraries for traditional charts, stock, and maps. Features a hand-drawn style theme option.
AnyChart - Set of products for charting different types of data. Has a special Oracle Apex integration option.
CanvasJS - A tight set of chart types in a library with a small file size. Different looking default theme than other commercial libraries.
FusionCharts - Charting library with a strong maps component.
Highcharts - A series of charting libraries for a variety of uses. Can be compatible back to IE6.
JSCharting - Integrated suite of charting libraries with traditional charts types plus maps, stock, Gantt, grid and org charts in one package.
Kendo UI - Premium charting library with native UI components available for Angular, React, and Vue.
ZingChart - Built to render large data sets other libraries can't handle. Super customizable styling and new features added often. Everything in one modular library.

Free and Open Source Libraries

apexcharts.js - A JavaScript Chart Library with simple API.
Billboard.js - a fork of C3 that tracks D3 releases more closely.
C3.js - D3 based reusable chart library.
Chart.js - Tiny library (11kb!) including core chart types.
Charts.css - CSS data visualization framework.
Chartist - Simple, lightweight chart library that uses SVG to render the chart, and CSS to style it.
Chartkick - JavaScript charts with one line of Ruby.
D3.js - Allows the user to manipulate documents based on data to render charts in SVG.
dc.js - D3 Library with crossfilter support
dygraphs - Interactive zoomable time series charts.
ECharts - A powerful charting and visualization library for browser.
EJSChart - enterprise ready charting library.
Graphosaurus - 3D graph viewer powered by WebGL (three.js)
lightweight-charts - Financial lightweight charts built with HTML5 canvas
Morris.js - Simple API to render line, bar, area, and donut charts
Plotly - Built on top of d3 and stack.gl, allowing users to create basic charts and SVG maps.
Plottable - Library with OOP style syntax to build charts.
QuickChart - Web API that renders static chart images.
rgraph - 2D/3D javascript charts with google sheets import capabilites.
sigma.js - Graphs / Network diagram library built with canvas.
Smoothie Charts - JavaScript charts for realtime streaming data.
TauCharts - Unique syntax that lets the developer describe the data using DSL. Has the ability to create facets.
μPlot - A small (< 25 KB min), fast chart for time series, lines, areas, ohlc & bars.
uvCharts - JavaScript Charting library built using d3.js
vis.js - Network diagrams, descriptive timelines with labels, and has 3D graphs.
reaviz - Modular chart component library for React.
reaflow - Modular diagram engine for build static or interactive editors.

Free Libraries

Google Charts - Maps are dialed in (of course) and some cool animation options. Extensive docs and use community (forum).

Framework-Specific Libraries

Angular

Angular-Chart- Simple API to render line, bar, area, and donut charts
n3-charts - Easy to use library written with AngularJS, rendering charts with D3.
Angular-scale - Simple and lightweight library for creating line charts

Ember

Ember Charts - Five basic chart types ready to go in Ember.js projects.

jQuery

Flot - A JavaScript charting library for jQuery. Contains useful chart types but looks like it may no longer be in active development.
jqPlot - Open source jQuery plugin for drawing charts. Contains many commonly used features but may use different naming conventions for these items.
jqxChart - Plenty of chart types rendering in SVG, Canvas, and VML.
JQuery-linechart - Simple and lightweight library for creating line charts

Lit-html

lit-line - {fast, small, interactive, fully responsive} Line Chart web component build on top of lit-html.

React

nivo - React components to easily build dataviz apps, built on top of D3.
react-vis - a composable visualization system by Uber
vx collection of reusable low-level visualization components, on top of d3
Potion - Low-level building blocks for constructing animated visualizations with React & D3.
react-chart-js - React wrapper for Chart.js
react-d3 - Charting library that relies on React for generating SVG markup and d3 to calculate path values.
react-muze - React wrapper for muze (free data visualization library for creating exploratory data visualizations in browser, using WebAssembly)
react-vis - A collection of React components to render common data visualization charts
recharts - Redefined chart library built with React and D3
Victory - A collection of composable React components for building interactive data visualizations

Data Visualization Resources

Dataviz Catalogue - A place to go when you're wondering which chart type is best. A project by Severino Ribecca.
Evergreen Data - Information and opinions on presenting data more effectively.
Flowing Data - A resource on maps, visualizations, stats, and design by Nathan Yau, formerly of the New York Times.
Junk Charts - Dataviz critic (and Columbia professor) Kaiser Fung breaks down data visualizations to identify what is wrong and recommends ways to make them better.
The Functional Art - Noted data visualization author and professor Aberto Cairo's blog on dataviz trends and best practices.
Visualizing Data - Dataviz consultant Andy Kirk compiles examples, resources, and reference materials on the subject of charting and visualization.
Well Formed Data - Thought pieces on information visualization and design by Moritz Stefaner previously of the World Economic Forum.

Awesome Ionic

An "awesome" list of the Ionic resources

Ionic

"Ionic is the beautiful, open source front-end SDK for developing hybrid mobile apps with web technologies."

Current Ionic version:

Official Resources

Ionic Fundamentals

Theming

Components

Authentication

Unit Testing

Ionic Native / Cordova Plugins

Payment Gateway Integrations

Backend as a Service

i18n & l10n

Internationalize and Localize Your Ionic 4 App
Internationalize and Localize Your App With Angular 2
attranslate - Semi-automated translation of JSON and other resource files

Tools

Ionic2-vscode
Vim-ionic2
Ionic Vetur Intellisense - Vetur support for Ionic Components for tag and attribute autocompletion

Video Tutorials

Books

Open Source Projects

Contribute

Contributions welcome! Read the contribution guidelines first.

License

Awesome Chrome DevTools

Awesome tooling and resources in the Chrome DevTools ecosystem

Learning
DevTools tooling and ecosystem
Chrome DevTools Protocol
Using DevTools frontend with other platforms
DevTools Extensions

Learning

Dev Tips - Large collection of tips as animated gifs.
DevTools Snippets - Collection of snippets.

Multiuser DevTools

DevTools Remote - Remotely debug someone else's browser.

DevTools tooling and ecosystem

Object formatting

immutable-devtools - Custom formatter for Immutable-js values.

Network Inspection

betwixt - System level network proxy, providing inspection via Network panel.
Weer - A HTTP protocol debugger (closed source)

CPU profile

call-trace - Can instrument your JS with hooks, and then generate a .cpuprofile of the of the complete (non-sampled) execution. View either time or call counts.
cpuprofilify - Converts output of various profiling/sampling tools to the .cpuprofile format.
Wishbone python framework - Profiling data can export as .cpuprofile.

Multimedia

snapline - Converts timeline screenshots to gif.

Timeline, Tracing & Profiling

DevTools Timeline Viewer - Share URLs of your timeline recordings.

Chrome Debugger integration with Editors

VS Code - Debugger for Chrome - Breakpoint debugging in VS Code.
VS Code - Elements for Microsoft Edge - Elements panel inside VS Code.
ChromeREPL - Within Sublime Text, use the Chrome console.
Sublime Web Inspector - JavaScript Breakpoint debugging right in Sublime Text.
WebStorm/JetBrains Chrome Extension - The WebStorm IDE can debug JavaScript, view the DOM tree, and edit HTML, CSS and JS live.

Chrome DevTools Protocol

ChromeDevTools/devtools-protocol - Canonical location of the protocol JSON. Issue tracker for protocol bugs. TypeScript types.
DevTools Protocol API Docs - Easy browsable UI for exploring the protocol's domains, methods and events.

Developing with the protocol

chrome-remote-interface Wiki - Many useful recipes.
Chrome Protocol Proxy - Tool for debugging clients using devtools protocol.
Remote Debug Gateway - Allows you to connect a client to multiple browsers at once.
DevTools Backend - Standalone implementation of the Chrome DevTools backend to debug arbitrary web environments.
RemoteDebug - Initiative to normalize debugging protocols across today's browsers.
ChromeDriver - The official Selenium/WebDriver implementation for Chrome is implemented on top of the DevTools Protocol.
BrowserGap Community Edition - A remote browser product, open sourced. Makes heavy use of the raw, tip-of-tree Chrome DevTools protocol.

Automation

Puppeteer - Node.js offering a high-level API to control headless Chrome over the DevTools Protocol.
Python port: pyppeteer
Rust port: Rust Headless Chrome
.NET port: Puppeteer Sharp
Ruby port: Ferrum
headless-devtools - Puppeteer plugin to get CSS Coverage or JS Heap snapshot.
PuPHPeteer - PHP-bridge to control Puppeteer using PHP.
Playwright - Node.js library to automate Chromium, Firefox and WebKit with a single API.
Taiko - A Node.js module to automate the Chrome/Chromium using DevTools protocol.
cuic - Clojure library providing a high-level API for UI test automation over the DevTools Protocol.
Also all Protocol Driver Libraries below

Protocol Driver Libraries

JavaScript/Node.js: chrome-remote-interface - The most-used JavaScript API for the protocol
TypeScript/Node.js: chrome-debugging-client
Java: chrome-devtools-java-client
Java: karate - Web-service testing framework with a Java API to automate Chrome
Java: jvppeteer - Headless Chrome For Java
Python: PyCDP - Pure-Python, sans-IO wrappers. See also the Trio CDP driver
Python: chromewhip - drop-in replacement for the splash service
Python: pychrome - low level CDP transport handler
Python: ChromeController - high-level browser mgmt
Go: chromedp - High-level actions and tasks for driving browsers
Go: cdp
Go: gcd
Go: godet
Go: Rod
C#/dotnet: chrome-dev-tools - Protocol wrapper generator that can be customized by editing handlebars templates. Includes .Net Core template.
Ruby: Cuprite - Capybara driver
Ruby: ChromeRemote
Kotlin: chrome-reactive-kotlin - reactive (rxjava 2.x), low-level client library in Kotlin
Kotlin: chrome-devtools-kotlin - A coroutine-based client library, providing low-level CDP primitives and high-level extensions.
Clojure: clj-chrome-devtools - The CDP wrapper API is autogenerated and will be updated when CDP protocol changes.
PHP: chrome-devtools-protocol - A PHP client library for the protocol.

Browser Adapters

Remote Debug Firefox adapter - Translates Firefox's devtools protocol to the CDP.
ios-webkit-debug-proxy - Exposes Mobile Safari & UIWebView instances via the CDP.
Remote Debug iOS WebKit adapter - Builts upon ios-webkit-debug-proxy and translates WebKit's Remote Debugging Protocol API to the CDP.
IE Diagnostics Adapter - Protocol adaptor for Microsoft IE 11 to CDP.

Using DevTools frontend with other platforms

Android

Facebook Stetho - Native Android debugging with Chrome DevTools.
j2v8-debugger - Debugging JavaScript running in J2V8 with Chrome DevTools.

ClojureScript

Dirac - Debugging of ClojsureScript.

Lua

Mare - Lua debugging with Chrome DevTools.

iOS

PonyDebugger - Remote network and data debugging iOS apps with Chrome DevTools.

Go

go-debugger-devtools

Node.js

ndb - An improved Node.js debugging experience with the DevTools Frontend.
Debugging Node.js with Chrome DevTools - Guide on using the full debugging and profiling support in Node v6.3+.
thetool - CPU, memory, coverage, type profiling with Node.
chrome-devtools-frontend - Mirror of the frontend that ships in Chrome.

DevTools Extensions

Chromelens - See how your web app will look to people with different types of vision and the path users will travel when tabbing through your page.

Workflow

Clockwork - View PHP application profiling data.
Emulated Device Lab - Experiment with multiple devices being emulated at the same time.
RailsPanel - View Ruby on Rails application profiling data.
React Developer Tools - Inspect the React component hierarchies.
EmberJS Inspector - Allows you to inspect EmberJS objects in your application.
VueJS Developer Tools - Inspect VueJS components and manipulate their data.
Angular Batarang - Inspect an Angular application's scope and profile its data.
Augury - Debugging and Profiling for Angular 2 applications.
Marionette Inspector - Inspect a Marionette application's views, events, and live data.
Backbone Debugger - Inspect a Backbone application's views, models, events, and routes.
App Inspector for Sencha - Inspect a Sencha ExtJS/Touch application's component tree, data stores, events, and layouts.
Redux Devtools - Inspect Redux with actions history, undo and replay.
Three.js - Edit any three.js project.
Insight - A WebGL debugging toolkit which enables more productive WebGL development and more efficient WebGL applications.
BEM devtools - Inspect BEM entities expressed in i-bem framework.
Metal.js Developer Tools - Inspect the Metal component hierarchies.

Themes

DevTools Author - A selection of themes to modify parts of DevTools related to authoring web applications.
Zero Dark Matrix - Dark theme for Chrome Developer Tools.
Material UI Theme - Provides various Material Design inspired themes.

Performance

sloth - Chrome extension allows to enable and save CPU and network throttling for selected tabs.
TracerBench - TracerBench is a controlled performance benchmarking tool for web applications, providing clear, actionable and usable insights into performance deltas.

Automation

Puppeteer IDE - Standalone Puppeteer playground in browser's developer tools.

Awesome PostCSS

A selective list of PostCSS resources and other related things.

PostCSS simply provides a css parser and a framework for creating plugins that can analyse, lint, handle assets, optimise, create fallbacks, and otherwise transform parsed css. PostCSS parses css into an abstract syntax tree AST, passes it through a series of plugins, and then concatenates back into a string.

Awesome PostCSS
- Articles
- Community
- Guides
- Official Resources
- Podcast
- Plugins
- Presentations
- Task Runner

Contributing

Your contributions are always welcome. But, please take a quick gander at the CONTRIBUTION guidelines first.

Who to follow

License

This project is licensed under the MIT license - see the LICENSE for details.

Awesome Draft.js

Draft.js is a framework for building rich text editors in React.

Table of Contents

Community

Slack channel

Presentations

Standalone Editors Built on Draft.js

Draft WYSIWYG - WYSIWYG editor that with drag&drop, resizing & tooltips.
Draft.js Editor - A Rich text editor inspired by Medium & Facebook Notes.
React-RTE - A full-featured textarea replacement similar to CKEditor or TinyMCE.
Facebook Notes Clone(ish) - Rich text editor similar to Facebook notes.
Megadraft - A rich text editor with a nice default base of plugins and extensibility.
Medium Draft - Medium-like rich text editor with a focus on keyboard shortcuts.
React-Draft-Wyiswyg - A WYISWYG editor, with various text editing options and corresponding HTML generation.
Dante 2 - Just another Medium clone built on top of DraftJs.
Last Draft - A Draft editor built with Draft.js plugins.
Z-Editor - Online Z-notations editor.
Draftail - A configurable rich text editor based on Draft.js, built for Wagtail.
Braft - Extensible Draft JS Editor

Plugins and Decorators Built for Draft.js

Draft.js Plugins - A Plugin architecture on top of Draft.js
Alignment
Block Breakout - Break out of block types as you type.
Buttons
Color Picker
Counter - Character, word & line counting.
Divider
Drag and Drop
Embed
Emoji - Slack-like emoji support
EmojiPicker
Focus
GifPicker
Hashtags - Twitter-like hashtag support
Image
Inline Toolbar
Katex - Insert and render LaTeX using Katex.
Link
Linkify - Automatically turn links into anchor-tags.
List - Automatic list creation, nested lists
Markdown Shortcuts - Markdown syntax shortcuts.
Mathjax - Edit math using (La)TeX rendered by Mathjax.
Mention - Twitter-like mention support
Modal
Prism - Syntax highlight code blocks with Prism.
Resizeable
RichButtons - Add and customize rich formatting buttons.
Side Toolbar
Sidebar
Single Line - Restrict to a single line of input.
Sticker - Facebook-like sticker support
Toolbar
Undo - Undo & Redo button.
Video
Draft.js Gutter - Compliments line number gutter.
Draft.js Basic HTML Editor - Accept html as its input format, and return html to an onChange.
Draft.js Prism- Highlight code blocks using Prism.
Draft.js Typeahead - Support for typeahead functionality.
Draft Extend - Build extensible Draft.js editors with configurable plugins and integrated serialization.
Draft.js Code - A collection of low-level utilities for nicer code editing
Draft.js Annotatable - Out of the box annotation system for Draft.js with support for user-created annotations.
Draft.js Regex - The set of flexible helpers, like regex, blank lines preventing and pasted HTML clearing.

Common Utilities

BackDraft.js - Function to turn a rawContentBlock into a marked-up string.
Draft.js Exporter - Export and format the content from Draft.js.
Draft.js: Export ContentState to HTML - Export ContentState to HTML.
Draft.js: Export ContentState to PDFMake - Export ContentState to PDFMake.
Redraft - Renders the result of Draft.js convertToRaw using provided callbacks, works well with React
Draft.js exporter (Ruby) - Export Draft.js content state into HTML.
Draft.js exporter (Python) - Library to convert Draft.js raw ContentState to HTML
Draft.js AST Exporter - Export content into an abstract syntax tree (AST).
Draft.js AST Importer- Import an abstract syntax tree (AST) output from the companion draft-js-ast-exporter.
Draft.js Multidecorators - Combine multiple decorators.
Draft.js SimpleDecorator - Easily create flexible decorators.
DraftJS Utils - Set of utility functions for DraftJS.
DraftJs to HTML - Library for generating HTML for DraftJS editor content.
Draft Convert - Extensibly serialize & deserialize Draft.js ContentState with HTML.
HTML to DraftJS - Convert plain HTML to DraftJS Editor content.
Draft.js Exporter (Go) - Export Draft.js content state into HTML.
React Native Draft.js Render - A React Native render for Draft.js model.
Draft.js filters - Filter Draft.js content to preserve only the formatting you allow.
Sticky - A simple note taking and clipboard managing desktop application

Blog Posts & Articles

Facebook open sources rich text editor framework Draft.js
This Blog Post Was Written Using Draft.js
How Draft.js Represents Rich Text Data
A Beginner’s Guide to Draft.js
Implementing todo list in Draft.js
Draft.js Pieces
Learning Draft.js - Series of blog posts on how to develop with draft.js
Why Wagtail’s new editor is built with Draft.js
Rethinking rich text pipelines with Draft.js

Live Demos

Draft-js Samples - An app with examples and code explanations
Draftail Playground – Wagtail’s Draft.js dependencies as a standalone demo.
Draft drag and drop demo for mobile browser

Playgrounds for Examples from Official Repository (v.0.10.0)

Usage in Production

License

To the extent possible under law, Nikolaus Graf has waived all copyright and related or neighboring rights to this work.

Awesome Service Workers

A curated collection of service worker resources.

Service workers are at the heart of every progressive web app. Their persistent nature allows progressive web apps to fulfill our expectations of what an app should do. They are the missing link between what only native apps could do and what modern progressive web apps can do.

-- Building Progressive Web Apps - O'Reilly

If you want to contribute, please read the contribution guidelines.

Must Reads
Learning Resources
Reference
Browser Support
Libraries and Tools
Videos
Case Studies
Related Technologies

Must Reads

Building Progressive Web Apps - O'Reilly - A hands-on guide and reference for service workers, caching strategies, push notifications, and more. Everything you need to build a modern progressive web app.
Introduction to Service Worker - A gentle introduction to service workers.
Offline Web Applications Using IndexedDB & Service Worker - A great Udacity course introducing service workers and IndexedDB.
Service Workers Explained - Service workers explained by Alex Russell.

Learning Resources

Building Offline Sites with ServiceWorkers and UpUp - A general introduction to service workers and using UpUp to provide offline functionality in minutes.
Introduction to Service Worker
Service Workers 101 - An infographic summarizing the most important parts of service workers API.
ServiceWorker Cookbook by Mozilla - A collection of recipes for different use cases.
The copy & paste guide to your first Service Worker - Shortest available introduction, by Remy Sharp.
The offline cookbook - The bible of service worker Patterns by Jake Archibald.
Designing Offline-First Web Apps - A fascinating look at design and UX considerations for dealing with various states of connectivity.

Reference

Background Sync Spec - The WIP spec for Background Sync.
Service Workers - W3C Specification - The official service workers spec.

Browser Support

Can I Use - Service Workers - Up-to-date browser support table of ServiceWorker API.
Jake Archibald - Is Service Worker ready? - Current status of ServiceWorker support in different browsers.

Libraries and Tools

UpUp - A popular service worker library providing complete offline functionality for your site in 1 line of code.
sw-toolbox - A collection of simple helpers to simplify implementing common runtime caching patterns.
Manifest Generator - Generate a web app manifest, required for push notifications and installable web apps.
sw-precache - Generates a service worker to cache your local App Shell resources.
sw-offline-google-analytics - A service worker helper library to retry offline Google Analytics requests when a connection is available.
Workbox - a set of libraries and Node modules that make it easy to cache assets and take full advantage of features used to build progressive web apps.

Videos

Instant Loading: Building offline-first Progressive Web Apps - Google I/O 2016 - A quick dive into the most common technologies and techniques for building progressive web apps.
Offline Web Applications Using IndexedDB & Service Worker - This free Udacity course is a must if you're planning to dive deep into service workers.
Instant Loading with Service Workers (Chrome Dev Summit 2015) - Explains how to structure your web app to optimize load time for initial and return visitors, and cover helpful service worker libraries that minimize the amount of boilerplate code you'll have to write.

Case Studies

Service Workers in Production - A case-study about how Google I/O 2015 web app was built.
Measuring the Real-world Performance Impact of Service Workers - One of the most significant benefits of service workers (from a performance perspective, at least) is their ability to proactively control the caching of assets. A web application that can cache all of its necessary resources should load substantially faster for returning visitors. But what do these gains actually look like to real users? And how do you even measure this?

Awesome Progressive Web Apps

A curated collection of Progressive Web Apps resources.

Progressive web apps are a new breed of web apps. They combine the benefits of a native app with the low friction nature of the web. Progressive web apps start off as simple websites, but as the user interacts with them, they progressively gain new powers. They transform from a website into something much more like a traditional native app.

-- Building Progressive Web Apps - O'Reilly

If you want to contribute, please read the contribution guidelines.

Must Reads
Learning Resources
Browser Support
Videos
Case Studies
Sample Progressive Web Apps
Specific Technologies
Service Workers
CacheStorage API
Background Sync
Push Notifications
IndexedDB
Installable Web Apps
- App Icons
Web Share APIs
Awesome Performance

Must Reads

Building Progressive Web Apps - O'Reilly Media - A deep dive into progressive web apps, service workers, push notifications, background sync, IndexedDB, offline first and much more.
Offline Web Applications Using IndexedDB & Service Worker - A free Udacity course introducing the basic concepts of building a progressive web app.

Learning Resources

Google Developers - Your First Progressive Web App - A step-by-step guide to building a progressive web apps using the app shell pattern.
Awesome Service Workers - A collection of awesome resources for learning service workers.
Service Workers W3C Specification - The official service workers spec.

Browser Support

Can I Use - Service Workers - Up-to-date browser support table of ServiceWorker API.
Is Service Worker ready? - Current status of ServiceWorker support in different browsers.

Videos

Instant Loading: Building offline-first Progressive Web Apps - Google I/O 2016 - A quick dive into the most common technologies and techniques for building progressive web apps.
Intro To Progressive Web Apps - This free Udacity course by Google covers intro to PWAs, service workers and web app manifests.
Offline Web Applications Using IndexedDB & Service Worker - This free Udacity course is a must if you're planning to dive deep into service workers.
Progressive Web Apps (Chrome Dev Summit 2015) - An introduction to progressive web apps by Alex Russell and Andreas Bovens.
Polymer and Progressive Web Apps: Building on the modern web - Google I/O 2016 - Using Polymer to build progressive web apps.

Case Studies

Building the Google I/O 2016 Progressive Web App - Building and launching a progressive web app using web components, Polymer, and material design.
AliExpress Case Study - AliExpress increases conversion rate for new users by 104% with new progressive web apps.
eXtra Electronics Case Study - United eXtra Electronics grows eCommerce sales by 100% with Web Push Notifications.
Jumia Case Study - Push Notifications help Jumia reverse cart abandonment and increase conversions by 9X.
Konga Case Study - Konga cuts data usage 92% with new Progressive Web App.
Suumo Case Study - Japan's top real estate site supercharges new listings with web Push Notifications and sees a 31% open rate for notifications.

Sample Progressive Web Apps

PWA.rocks - A showcase of several progressive web apps, collected by the Opera Dev Relations team.
SVGOMG
Guitar Tuner
Voice Memos
Hacker News

Specific Technologies

Service Workers

Awesome Service Workers - A curated collection of the finest service worker resources.

CacheStorage API

Offline Storage for Progressive Web Apps - The current state of offline storage in the browser
CacheStorage API - API docs, and sample code from Mozilla.

Background Sync

Introducing Background Sync - A gentle introduction to background sync, along with some great videos and code samples.
Background Sync Explained - The official "explainer" document for background sync, including one-off synchronization and periodic synchronization.
Background Sync Spec - The WIP spec for Background Sync.

Push Notifications

Can I Use - Push API - Up-to-date browser support table of Push API.
Chrome Platform Status - Web Notifications - Implementation status for Chrome and other browsers.
PWA Dev Summit 2016 codelab - Push Notifications Up-to-date getting started tutorial for Progressive Web App, Push Notifications and service worker basics.
Using the Push API - An article introducing Push API.
web-push-libs - A collection of useful libraries for web push in different technologies (Node.js, PHP, Python, etc.)

IndexedDB

IndexedDB API - API docs, key concepts, and sample code from Mozilla.

Installable Web Apps

Increasing Engagement with Web App Install Banners - An intro to App Install Banners and making sure Chrome offers your web app to your users.
Installable Web Apps with the Web App Manifest in Chrome for Android - An introduction to installable Web Apps in Chrome for Android.

App Icons

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.

Introducing the Web Share API - High level introduction to the Web Share API.
Web Share API explainer - An explanation of the API, along with some examples. Part of the proposal doc.
Web Share Target API - The proposal for the Web Share Target API, as well as a high level explainer.

Awesome Performance

Web Fundamentals - Performance - Google's performance learning portal, containing a wealth of knowledge on optimizing your web apps for perfomance.
Introducing RAIL: A User-Centric Model For Performance - The seminal introduction to RAIL by the Gang of Pauls.
Website Performance Optimization - A free Udacity course on optimizing websites for speed.
Browser Rendering Optimization - A free Udacity course helping you create web apps that maintain jank-free 60fps performance.
The PRPL Pattern - A new pattern for structuring and serving Progressive Web Apps, with an emphasis on performance.
Browser Rendering Performance - Understand how HTML, JavaScript and CSS is handled by the browser, and how to optimize your page accordingly.

Awesome choo
:steam_locomotive::train::train::train::train::train:

choo is a 4kb framework for creating sturdy frontend applications

Official resources
Dependencies
Demos
Community
Plugins and addons
Elements
CLI Templates
Resources
Projects using choo

Official resources

Dependencies

choo is a modular framework. These are the dependencies it glues together under the hood:

bel - Create composable DOM elements using template strings.
hyperx - Convert template strings to library backends.
nanomorph - Hyper fast diffing algorithm for real DOM nodes.
nanoraf - Only call RAF when needed.
nanorouter - Smol frontend router.
nanobus - Tiny message bus.
nanolocation - Small window.location library.
nanohref - Tiny href click handler library.
nanoquery - Tiny querystring module.
nanotiming - Small timing library.

Demos

Community

Freenode

Plugins and addons

choo-location-electron - Fix choo's router in electron.
choo-log - Development logger for choo.
choo-test - Easy choo app unit testing.
choo-persist - Synchronize choo state with LocalStorage.
choo-promise - Use promises in effects and subscriptions.
choo-pull - Wrap handlers to use pull-stream in a choo plugin.
choo-redirect - Redirect a view to another view.
choo-model - Experimental state management lib for choo.
choo-resume - choo-resume + hot-rld = hot app reload in choo.
choo-detached - Use choo as a mountable, simple stand-alone component (no routing).
choo-service-worker - Service worker loader for choo.
choo-websocket - Small wraper around WebSocket browser API, for choo apps.
choo-store - Lightweight state structure for choo apps.

Elements

dom-notifications - Atom-inspired notifications component.
choodown - A simple markdown component for choo.
choo-md-editor - Lightweight markdown editor that can be used inside Choo app or as a standalone library.
choo-chartist - A little component for using Chartist with the choo framework.

CLI Templates

Templates for choo-cli

trainyard/template-basic
haroenv/template-webpack
simonwjackson/atomic-choo - An opinionated project seed to get started developing with electron, webpack and choo.

Other CLI templates - graforlock/choo-bandwagon

Resources

:movie_camera: : videos :computer: : tutorials :book: : articles

:computer: Your first choo app
:movie_camera: TCBY community live hangout
:book: A better frontend experience
:book: Composition in CycleJS, choo, React and Angular2
:book: Stupidly smart components in choo

Projects using choo

boxcar - A choo-based grid/spreadsheet editor.
choo-sortable - Building sortable code with choo.
hacker-choo - Hacker Typer clone written in choo.
footprint-rechoo - A choo rewrite of footprint-review.
minidocs – A documentation site generator built with choo.
dataface - Desktop application to manage databases.
BlankUp - Multiplatform markdown editor.
hackernews-choo - A Hacker News reader built with choo.
tic-tac-choo - Progressive tic tac toe game, made with choo.
enviar - Chat interface for SMS / text messages.
kaktus - A new minimalistic web browser, built on choo and IndexedDB.
civicdr.org - Website for CiviCDR.
nekocafe - Web chat room :cat: :speech_balloon:.
Robotopia - Introducing kids to coding with tiny virtual robots!
busca - A small web-extension to search the current tab on reddit.
choo-ban - Simple kanban to manage board tasks, built with choo.
boowa - A fun blog generator, built with choo.
hyperamp - Humble music player.

License

To the extent possible under law, Yerko Palma has waived all copyright and related or neighboring rights to this work.

Redux Libraries & Learning Material

Redux is a state container for JavaScript apps.

Official website: devarchy.com/redux
Use devarchy to add a library to the catalog

Code Architecture
Utilities
Code Style
Dev tools / Inspection tools
React Integration
Other Integrations
Boilerplate
Miscellaneous
Learning Material
Community

Code Architecture

Aims to improve the overall structure of the source code. Makes reasoning about the code easier.

redux-schema - Automatic actions, reducers and validation for Redux.
redux-tcomb - Immutable and type-checked state and actions for Redux.
redux-action-tree - The Cerebral signals running with Redux.
redux-elm - The Elm Architecture in JavaScript.

Utilities

redux-orm - Small, simple and immutable ORM to manage relational data in your Redux store.
redux-api-middleware - Redux middleware for calling an API.
redux-ignore - Higher-order reducer to ignore Redux actions.
redux-modifiers - Collection of generic functions for writing Redux reducers to operate on various data structures.
rereduce - Reducer library for Redux.
redux-search - Redux bindings for client-side search.
redux-logger - Logger middleware for Redux.
redux-immutable - Redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state.
reselect - Selector library for Redux.
redux-requests - Manages in-flight requests with a Redux reducer to avoid issuing duplicate requests.
redux-undo - Higher order reducer to add undo/redo functionality to Redux state containers.
redux-bug-reporter - Bug reporter and bug playback tool for Redux.
redux-transducers - Transducer utilities for Redux.

Store Persistence

redux-storage - Persistence layer for Redux with flexible backends.
redux-persist - Persist and rehydrate a Redux store.

Side Effects

Side Effects / Asynchronous Actions

redux-saga - Alternative side effect model for Redux apps.
redux-promise-middleware - Redux middleware for resolving and rejecting promises with conditional optimistic updates.
redux-effects - You write pure functions, redux-effects handles the rest.
redux-thunk - Thunk middleware for Redux.
redux-connect - Provides decorator for resolving async props in react-router, extremely useful for handling server-side rendering in React.
redux-loop - Port of elm-effects and the Elm Architecture to Redux that allows you to sequence your effects naturally and purely by returning them from your reducers.
redux-side-effects - Redux toolset for keeping all the side effects inside your reducers while maintaining their purity.
redux-logic - Redux middleware for organizing business logic and action side effects.
redux-observable - RxJS middleware for action side effects in Redux using "Epics".
redux-ship - Composable, testable and typable side effects.

Code Style

Aims to make parts of the source code easier to read/write.

redux-act - Opinionated lib to create actions and reducers for Redux.
redux-crud - Set of standard actions and reducers for Redux CRUD Applications.

Dev tools / Inspection tools

redux-devtools-inspector - Another Redux DevTools Monitor.
redux-diff-logger - Diff logger between states for Redux.
redux-devtools-chart-monitor - Chart monitor for Redux DevTools.
redux-devtools - DevTools for Redux with hot reloading, action replay, and customizable UI.
redux-devtools-dispatch - Dispatch your actions manually to test if your app Reacts well.
redux-devtools-dock-monitor - Resizable and movable dock for Redux DevTools monitors.
redux-devtools-filterable-log-monitor - Filterable tree view monitor for Redux DevTools.
redux-devtools-log-monitor - The default monitor for Redux DevTools with a tree view.
remote-redux-devtools - Redux DevTools remotely.

React Integration

redux-test-recorder - Redux middleware to automatically generate tests for reducers through ui interaction.
react-redux - Official React bindings for Redux.
react-easy-universal - Universal Routing & Rendering with React & Redux was too hard. Now it's easy.
redux-form-material-ui - Set of wrapper components to facilitate using Material UI with Redux Form.

Routing

redux-async-connect - It allows you to request async data, store them in Redux state and connect them to your React component.
redux-tiny-router - Router made for Redux and made for universal apps. Stop using the router as a controller, it's just state.
redux-router - Redux bindings for React Router – keep your router state inside your Redux store.
react-router-redux - Ruthlessly simple bindings to keep react-router and Redux in sync.
ground-control - Scalable reducer management & powerful data fetching for React Router & Redux.

Forms

redux-form - Higher Order Component using react-redux to keep form state in a Redux store.
react-redux-form - Create forms easily in React with Redux.

Component State

redux-react-local - Local component state via Redux.
redux-ui - Easy UI state management for React Redux.

Other Integrations

Flux

redux-actions - Flux Standard Action utilities for Redux.
redux-promise - FSA-compliant promise middleware for Redux.

Backbone

backbone-redux - Easy way to keep your backbone collections and Redux store in sync.

Falcor

redux-falcor - Connect your Redux front-end to your falcor back-end.

RxJS

redux-observable - RxJS middleware for action side effects in Redux using "Epics".
rx-redux - Reimplementation of Redux using RxJS.
redux-rx - RxJS utilities for Redux.
redurx - Redux'ish Functional State Management using RxJS.

Electron

redux-electron-store - Redux store enhancer that allows automatic synchronization between electron processes.

Deku

deku-redux - Bindings for Redux in deku < v2.

Other

redux-rollbar-middleware - Redux middleware that wraps exceptions in actions and sends them to Rollbar with current state.
kasia - React Redux toolset for the WordPress API.

Boilerplate

Boilerplates / Scaffolds / Starter Kits / Generators / Stack Ensembles

redux-cli - Opinionated CLI for building Redux/React apps quicker.
reactuate - React/Redux stack (not a boilerplate kit).
react-chrome-extension-boilerplate - Boilerplate for Chrome Extension React.js project.
universal-redux - Npm package that lets you jump right into coding React and Redux with universal (isomorphic) rendering. Only manage Express setups or Webpack configurations if you want to.
generator-react-aspnet-boilerplate - Starting point for building isomorphic React applications with ASP.NET Core 1, leveraging existing techniques.
generator-redux - CLI tools for Redux: next-gen functional Flux/React with devtools.
generator-react-webpack-redux - React Webpack Generator including Redux support.
socrates - Small (8kb), batteries-included Redux store to reduce boilerplate and promote good habits.

Miscellaneous

redux-core - Minimal Redux.

Learning Material

Redux's concepts

Redux official documentation does a great job at explaining Redux's core principles.
Why immutable data structures

The guide on performance of React's official documentation explains well what immutable data structures are and why they play an important role.
Side Effects

Redux Loop's readme gives a good insight on Side Effects in the context of Redux.

Reading the aforementioned material will get you a good start for writing apps with Redux. If you are curious for more, check out following resources.

Functional Programming - Basics

This post goes over basic concepts of functional programming while building a YouTube instant search demo app.
Reactive Programming

This introduction to Reactive Programming explains Reactive Programming with clarity.
Functional Programming - Going beyond

Well written article that talks about interesting computer science concepts implemented in functional languages and how these apply to JavaScript.
Monads

Curious about monads? Wikipedia gives a good overview on monads and this article explains monads in more details with graphics and simple examples.

Community

Awesome Browserify

:crystal_ball: A curated list of awesome Browserify resources, libraries, and tools.

Please help improve this list by contributing!

About
Official Resources
Community Resources
Tutorials
Articles
Demos
Videos
Tools
Development Servers
Plugins
Watchers
CSS Bundlers
Transforms
Node in the Browser
Production Tools

About

Browserify lets you require('modules') in the browser by bundling up all of your dependencies.

You can use a node-style require() to organize your browser code and load modules installed by npm. 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 <script> tag.

Official Resources

Community Resources

Tutorials

Articles

Demos

Videos

Tools

Development Servers

budo - Dev server for rapid prototyping.
beefy - Local development server that aims to make using browserify fast and fun.
wzrd - Super minimal browserify development server.

Plugins

browserify-hmr - Hot Module Replacement plugin for Browserify.

Watchers

watchify - Watch mode for browserify builds.
persistify - Wrapper around browserify to make incremental builds.

CSS bundlers

sheetify - Modular CSS bundler for browserify.
parcelify - Add css to your npm modules consumed with browserify.
css-modulesify - Browserify plugin to load CSS Modules.

Transforms

babelify - Browserify transform for babel.
aliasify - Remap require calls at build time.
brfs - fs.readFileSync() and fs.readFile() static asset browserify transform.

Node in the Browser

crypto-browserify - Port of node's crypto module to the browser.
stream-browserify - The stream module from node core, for browsers!
buffer - The buffer module from node.js, for the browser.
requirebin - Write browser JavaScript programs using modules from NPM.

Production Tools

wzrd.in - Browserify CDN. Browserify-as-a-Service!
bankai - DIY asset server. Serves HTML, CSS and JS as streams.

Contributing

Contributions welcome! Please read the contributing guidelines before getting started.

License

The browserify logo is by substack.

All other content is released to the public domain under CC0-1.0.

Awesome Sass

Curated list of awesome Sass and SCSS frameworks, libraries, style guides, articles, and resources.

Use command + F or ctrl + F to search for a keyword.
Contributions welcome, please see contribution guide.

About
Getting Started
Sass vs SCSS
Frameworks
Libraries and Mixins
Grid
Media Queries
Color
Typography
Animation
Miscellaneous
Style Guides
Articles
Tools
Books
Videos
Community

About

Sass 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.

Sass has two syntaxes. The new main syntax (as of Sass 3) is known as "SCSS" (for "Sassy CSS"), and is a superset of CSS's syntax. This means that every valid CSS stylesheet is valid SCSS as well. SCSS files use the extension .scss.

The second, older syntax is known as the indented syntax (or just "Sass"). Inspired by Haml's terseness, it's intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Although no longer the primary syntax, the indented syntax will continue to be supported. Files in the indented syntax use the extension .sass.

Getting Started

Official Sass and SCSS Guide - Official Sass and SCSS guide.
Tutorialzine - Learn SASS in 15 minutes tutorial.
Codecademy - Learn Sass with Codecademy.
Lynda - Learn how to use Sass, from beginner basics to advanced techniques, with online video tutorials taught by industry experts.
Official Sass and SCSS Reference - Official Sass and SCSS Documentation Reference.
SitePoint Sass and SCSS Reference - SitePoint Sass and SCSS reference.

Sass vs SCSS

SitePoint - What’s the difference between Sass and SCSS?
The Sass Way - Which syntax is better?
Stack Overflow - What's the difference between SCSS and Sass?

Frameworks

avalanche - Framework for building the foundation for a package based CSS workflow.
Bootstrap 4 - Bootstrap version 4, the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Bootstrap-sass - Official Sass port of Bootstrap 2 and 3.
Bulma - Modern CSS framework based on Flexbox.
Cirrus - A component and utility centric SCSS framework designed for rapid prototyping.
Foundation for Sites - The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites that work on any kind of device.
Hocus-Pocus - Universal and lightweight stylesheet starter kit that focuses on base html elements and typography.
iotaCSS - Open source Sass-based OOCSS framework built for scale.
Kickoff - Kickoff is a lightweight front-end framework for creating scalable, performant and responsive sites.
Materialize - Modern responsive front-end framework based on Material Design.
mini.css - Minimal, responsive, style-agnostic CSS framework.
Scooter - SCSS framework built to provide base styles, CSS components, and rapid static prototyping for Dropbox.
Sierra - Micro SCSS library to help you build websites, without all the arbitrary selectors.

Libraries and Mixins

Grid

Avalanche - Lightweight, responsive, Sass-based, BEM-syntax grid system.
csswizardry-grids - Simple, fluid, nestable, flexible, Sass-based, responsive grid system.
Griddle - Extremely flexable CSS grid constructor.
Gridlex - Flexbox grid system.
Jeet - Simple fractional grid system for Sass and Stylus.
Neat - Lightweight semantic grid framework built with Sass.
Sass Flexible Grid System - Sass flexible grid system.
SCSS Flexible Grid System - SCSS flexible grid system.
Susy - Responsive layout toolkit for Sass.
Toast - Flexible and lightweight grid framework from the creator of animate.css.
Waffle Grid - Easy to use flexbox grid system.

Media Queries

Breakpoint - Breakpoint makes writing media queries in Sass super simple.
include-media - Simple, elegant and maintainable media queries.
mq-scss - An extreamly powerful but easy to use Sass media query mixin.
Sass MediaQueries - Collection of useful media queries mixins for Sass (including iOS devices, TVs and more).
Sass MQ - Sass mixin that helps you compose media queries in an elegant way.

Color

brand-colors - 1100+ collection of popular brand colors available in Sass, Less, Stylus and CSS.
Open color - Open color is a color scheme for UI design. Available in CSS, SCSS, LESS, Stylus, Adobe library, Photoshop/Illustrator swatches and Sketch palette.
sass-planifolia - Advanced color manipulation and contrast calculation in vanilla Sass.
scss-blend-modes - Using standard color blending functions in Sass.

Typography

Sassline - Set text on the web to a baseline grid with Sass & rems using a responsive modular-scale.
Sassy-Gridlover - Super easy to use Sass mixins to establish a typographic system with modular scale and vertical rhythm. Based on the Gridlover app.
Shevy - Typography made easy. A vertical rhythm library.
Typi - Sass mixin to make responsive typography easy.

Animation

Animate.scss - Port of Dan Eden's Animate.css for SASS.
Hover - Collection of CSS3 powered hover animated effects to be applied to links, buttons, logos, SVG, featured images and so on. Available in CSS, Sass, and LESS.
Kf - Sass mixin library for creating keyframe-based animations from maps.
Sass Burger - Sass mixin for creating animated hamburger icon.
SpinThatShit - Set of SCSS mixins for single element loaders and spinners.

Miscellaneous

Angled Edges - Sass mixin for creating angled edges on sections by dynamically encoding SVGs.
Bourbon - Simple and lightweight mixin library for Sass.
Buttono - A flexible Sass mixin for creating BEM-style buttons.
Buttons - CSS button library built using Sass and Compass.
csstyle - A SCSS library to help you build modular CSS that generates your selectors for you and deals with specificity automatically.
Family.scss - Set of 26 smart Sass mixins which will help you to manage the style of :nth-child’ified elements, in an easy and classy way.
Gerillass - A Sass mixin library to help you create modern web sites.
Juice - Collection of Sass mixins and functions.
Modular Scale - Modular scale calculator built into your Sass.
normalize-scss - Sass/Compass version of Normalize.css, a collection of HTML element and attribute rulesets to normalize styles across all browsers.
Pretty checkbox - SCSS/CSS library to beautify checkbox and radio buttons.
retina.js - JavaScript, SCSS, Sass, Less, and Stylus helpers for rendering high-resolution image variants.
Sass Accoutrement - Accoutrement modules are Sass toolkits that work together to form the central configuration of a project. The tools can be used individually, or integrated for extra power.
Sass Deprecate - Sass mixin that helps managing code deprecation.
Sass flexbox mixin - Set of mixins for those who want to mess around with flexbox using the native support of current browsers.
Sassdash - The Sass implementation of lodash (API documentation).
Scut - Collection of Sass utilities to ease and improve the implementations of common style-code patterns.

Style Guides

Hugo Giraudel's Sass Guidelines - Guidelines for writing sane, maintainable and scalable Sass.
BigCommerce Sass Coding Guidelines - Guidelines in use at BigCommerce.
Airbnb Sass and CSS Style Guide - Sass and CSS style guide by Airbnb.
Dropbox (S)CSS Style Guide - Dropbox’s (S)CSS authoring style guide.

Articles

Tools

dart-sass - Dart implementation of Sass.
diamond - Dependency management built for Sass, Less, and CSS.
libsass-python - Binding of libsass for Python.
libsass - C/C++ implementation of a Sass compiler.
node-sass-magic-importer - Custom node-sass importer for selector specific imports, node importing, module importing, globbing support and importing files only once.
node-sass - Node.js bindings to libsass.
OctoLinker - Navigate through .scss and .sass files efficiently with the OctoLinker browser extension for GitHub.
sass-extract - Extract variables from scss files. Use scss to describe styles for use in javascript by extracting computed styles into js objects. Supports imports and advanced language features.
sass-loader - Sass loader for webpack.
sass-rails - Ruby on Rails stylesheet engine for Sass.
SassDoc - Documentation system (like JSDoc for JavaScript) to build pretty and powerful docs in the blink of an eye.
Scout-App - Process your Sass and SCSS files into CSS without needing any knowledge of the command line.
scss-lint - Configurable tool for writing clean and consistent SCSS. (deprecated)
SharpScss - P/Invoke .NET wrapper around libsass to convert SCSS to CSS supporting NET2.0/NET3.5/NET4.x+ and CoreCLR platform.
stylelint - A mighty, modern CSS linter that helps you enforce consistent conventions and avoid errors in your stylesheets. Supports CSS-like syntaxes, including SCSS.

Books

Videos

Community

License

---. ╭───╮╭──╮ ╭──╮ ╭──╮ ╭───╮ ╭──╮ ╭─── ───╮ ╭──╮ -.. \ / ││ │──│ │ / ╭─╯/ ╭──╯ / \ │ │ │ / ╭─╯ _|_|_ │ o ││ │ │ │ / ╰─( \─╮│ ││ ─ ─ │ / ╰─╮ / O \ │ ││ │ │ ││ ╭─╯\__ ││ O ││ \_/ ││ ╭─╯ \_______/ │ _ ││ ` ' ││ ╰─╮/ \ ││ ││ │ ││ ╰─╮ / \ │ │ │ \ / │ │\ │ \ / │ │ ││ │ \/ \ ╰──┴──╯ ╰──╯─╯ ╰─────╯ ╰───╯ ╰──╯ ╰───╯───╯╰─────╯ /'---'\ ____/ | \_____ ╭───╮╭───╮ ╭──────╮ ╭──╮ ╭──╮ ╭───╮╭────╮ ╭───╮╭───╮ __/\____/ \_ / ││ \ │ │ │ \ / ╭─╯/ ╭──╯╰╮ ╭╯ / ││ \ | \ │ o ││ _ ││ │ │ \ / ╰─( \─╮ │ │ │ ╭──╯│ _ │ / \__ /\ '_ │ ││ │ │╰─╯ ╰─╯ │ D ││ ╭─╯\__ │ │ │ │ │╭─╮│ │ │ / \__ \ \ │ _ ││ │ │ │ │ │ ││ ╰─╮/ \ │ │ │ │ ╰─ ││ │ │ \ \_\_________\ │ │ ││ │ │ │ │ │ ││ │\ │╭╯ ╰╮│ ││ │ │ \ \ \ ╰──┴──╯╰──┴──╯ ╰──╯ ╰─────╯╰─────╯ ╰───╯╰────╯╰─────╯╰──┴──╯ \ \

A curated list of Ant Design resources and related projects. The main idea is that everyone can contribute here, so we can have a central repository of informations about Ant Design that we keep up-to-date.

Ant Design, a design language for middleware, is refined by Experience Technology Department of Ant Financial, aims to uniform the user interface specs for middleware projects, reduce the unnecessary cost of design differences and implementation and liberate the resources of design and front-end development.

Contents
Resources
Articles
Tools
Theming
Themes
Related Projects
Angular
Vue.js
Components
React Hooks
Applications
Boilerplates
Non-JavaScript Libraries
Electron
Icons
Design Tools and Resources
Other
Contributing
License

Resources

Official projects and resources of Ant Design.

Ant Design - An Enterprise-class UI design language and React-based implementation.
Ant Design Pro - An out-of-box UI solution for enterprise applications :fire::fire::fire:
Ant Design Mobile - Configurable Mobile UI specification and React-based implementation.
Ant Design of React - Graceful UI components out of the box, based on React.
Ant Design SVG Icons - Project to transform regular icon fonts into SVG format, supporting Ant Design icon fonts.

Articles

Tools

These are tools and utilities to help build apps using Ant Design,

Antd Init - Ant Design boilerplate generator (for demo only, use dva-cli).
Dva Cli - Create Ant Design projects based on Dva.js, a lightweight front-end framework based on Redux and React and inspired by Elm and Choo.
Antd Tools - Very useful list of tools for Ant Design to create documentation, create new components, build tools and many more.
Antd Tools Docs - Documentations for Ant Tools.
iConfig Ant Design - Boilerplate for quickly getting a new project up and running with a few useful transforms.
vscode-antd-rush - Rush to Ant Design in VS Code
Antd Snippets for VS Code
Generator Antd Pro - An easy way to build your Ant Design Pro application.
formik-antd - Declarative bindings for the popular form state management library Formik.
Zaku - JSX-based UI editor, easy way to build page and generate antd code.
Antd-Pro-Generator for VS Code Generate Service/Mock/Model from Swagger2.0 or OpenApi3.x docs for Ant Design Pro.

Theming

Here are utilities that can help you customize your theme and ability to change it in browser

antd-theme-webpack-plugin - A webpack plugin to generate your custom theme file.
antd-theme-generator - A simple script to generate theme specific less file which can be used in any environment.
dynamic-antd-theme - A simple plugin to dynamic change ant-design theme whether less or css.

Themes

ant-design-dark-theme - Dark theme variables of Ant Design.
ant-design-aliyun-theme - Aliyun console theme variables of Ant Design.
ant-dark-theme - Dark theme variables of Ant Design.

Ant Design family of projects.

Grammar of Graphics - Pure javascript, powerful semantic graph generation tool for big data which provides a set of graphical syntax that lets users build with simple syntax a myriad of charts and integrates a large number of statistical tools, (Read more).
Ant Visualization - Professional data visualization specification that aims to put several years of valuable data pattern group work in the process of exploring data visualization to share with all people who need data visualization theory. AntV consists of few parts, data, design specifications and rules for use of the chart, (Read more).
Ant Motion - Efficient motion design solutions that complies with Ant Design Visual specification with React implementation.
Ant UX - Make a sitemap template for UX design using Omnigraffle, Sketch or Axure. This is a library which assists designers to define, refine and finalize the inter-page logic of their products.

Angular

Projects that are built with Angular and Ant Design.

NG-ZORRO - Ant Design of Angular.
NG-ZORRO-Mobile - Ant Design Mobile of Angular
ng-alain - ng-zorro-antd admin panel front-end framework.

Vue.js

Projects that are built with Vue.js and Ant Design.

ant-design-vue - Ant Design of Vue.js 2.5.0+.
Vue.js Beauty - Beautiful UI components build with Vue.js and Ant Design.
Vue.js Ant UI - Ant Design UI components built in Vue.js.
Ant Design Vue - Vue.js version of Ant Design.
antue - A set of enterprise-class Vue UI components, following the Ant Design specification completely.
vue-antd-admin - Ant Design Pro's implementation with Vue

Blazor

Projects that are built with Blazor WebAssembly and Ant Design.

ant-design-blazor - Ant Design of Blazor(both Server-side and WebAssembly).
Blazorise - AntDesign support for Blazorise and Blazor Demo

Components

A list of UI components built with Ant Design.

antd-group-slider - A group of sliders that help input data with multiple ranges & description. Have data sync between sliders to improve UX, avoid accidental missing range during inputing range data.
antd-table-infinity - An infinite scroll component based on antd table that supports virtual scrolling & high-performance
react-lz-editor - An open source rich react editor based on draft-Js and ant design.
React Grid [Deprecated] - Grid React UI Component based on Ant Design.
Antd Kit - Advanced Ant Design components.
antd-data-table - A component that combines antd's Table and Form to do the search, display, and operating jobs for data.
ngx-recursive-form - Angular recursive form based on json input built with Ant Design.
antd-amplify-react - A collection of Ant Design component for Aws Amplify for Authentication
antd-password-input-strength - AntD Input component with password-strength indicator.

React Hooks

Sunflower(🌻) Collection of React Hooks returning component of antd.

Applications

A list of mature apps built with Ant Design.

Eevee - Based on Github page online editing blog platform. The project is based React, Ant Design and GitHub API.
Productivity Application - Kanban style, Trello inspired Productivity application built using React, Ant Design and other fantastic modules.

Boilerplates

A list of starter projects and boilerplates built with Ant Design.

Ant Design Pro - An out-of-box UI solution for enterprise applications :fire::fire::fire:
Scaffold Market - scaffolds and boilerplates using Ant Design
Antd Admin - A admin dashboard application demo built upon Ant Design and Dva.js.
Meteor Antd Boilerplate - A basic social network built using Antd and Meteor. Example
React SPA - Building SPA with React, Router, ES6, Fetch, Babel, Webpack, Npm, MockJs, FontAwesome, AnimateCSS, Ant Design, LESS and jQuery.
React Admin - React Admin UI built on Ant Design (username: admin, password: 123456).
React Redux - React Redux for CMS/Enterprise class apps (ERP/Admin) built with Ant Design.
React Antd Starter - This project is designed to develop website/web apps using Ant Design and Redux.
Webbf - Java demo that uses Maven to build the backend with Spring, Spring MVC and Mybatis. React, Reflux, Eebpack, jQuery, React-bootstrap and Ant Design.
React Redux Antd Starter - Front-end boilerplate built with React, Redux and Ant Design.
Koa - Example app to build Admin UI built with React, Ant Design and Koa.
Star Admin - Demo app built with React, Ant Design, Redux, React-router, Webpack and Babel.
React Redux Intro - Demo app built with Ant Design and can be configured to initialize a Redux dependencies.
React Start Kit - SPA Boilerplate built with React, Webpack, ES6+, Redux, Router, Babel, Express, Ant Design.
CL React - Based on Ant Design front-end framework structures for enterprise back-office software.
TODO MVC - Todo list built with React and Ant Design.
React Boilerplate - React Admin front-end boilerplate built with Ant Design.
Dva Antd Starter - Get started with Dva.js and Ant Design.
Dva Antd Mobile Starter - Get started with Dva.js and Ant Design mobile.
Dva Ant Admin - A front-end boilerplate built with Dva, Ant-Design
Aspnet Core Antd Boilerplate - Server Side Rendering with Asp.net core.
React Redux Universal - Universal/Isomorphic boilerplate using react router 4 and webpack 2.5+. All latest packages.
CRA-TS-Antd - Create-React-App + TypeScript + Ant-Design (without Eject).
Ng-Alain - Angular Admin UI built on Ant Design (with ng-zorro-antd).
Typescript React With Mobx Starter - a starter-template with typescript, react, mobx, antd and webpack).
React-PWA, PawJS and AntDesign - A pluggable boilerplate with SEO, PWA, SSR, Skeleton, Placeholders, etc. as some of its many features.
Create React App + Ant Design - Use antd in create-react-app without ejecting
ScaffoldHub.io - Generate fullstack React + Ant Design applications with MongoDB, SQL or Firebase Firestore.
The Green Meal - Next.js, PostgreSQL demo app written in TypeScript.

Non-JavaScript Libraries

A list of libraries that are written for non-JavaScript languages.

Antizer - Ant Design library for ClojureScript, an immutable, functional language that cross-compiles to JavaScript.
syn-antd - Ant Design wrapper for ClojureScript and Reagent using shadow-cljs with tree-shaking support. As with other ClojureScript libraries, it cross-compiles to JavaScript.

Electron

StarCabinet - Github Stars-based cross-platform tool based on React, Electronand and Ant Design.
Nowa - A webpack based front-end plug-in scaffolding and development solution.

Icons

Official Ant Design Icons
Ant Design Icons - The premium icon font from Ant Design and Ant Design Mobile.
Material Design Icons Material Design Icons for Ant Design

Design Tools and Resources

Kitchen - Sketch Plugin with suites of functions to enhance designers
Ant Design Library - Ant Design Axure Library
Ant UX - Sitemap templates for ux design in OG, Sketch, Axure, Affinity, Adobe XD.
Ant Design Design Resources - Sketch Symbols

Other

Ant Design of Ember - Enterprise-class UI framework based on Ant Design and Emberjs.
Fable Ant Design - Ant Design bindings for Fable Elmish.

Contributing

Your contributions are always welcome! Click Here to read the guidelines.

License

This work is licensed under a Creative Commons Attribution 4.0 International License.

Awesome Less

Curated list of awesome Less frameworks, libraries, style guides, articles, and resources. The main idea is that everyone can contribute here, so we can center all the informations about Less and keep up-to-date.

About
Getting Started
UI/Theme Frameworks and Components
Libraries and Mixins
Grid
Media Queries
Color
Animation
Miscellaneous
Style Guides
Ports of Less
Java
.Net
PHP
Python
Ruby
Go
GUIs, Editors and Plugins
Online Less Compilers
Online Web IDEs/Playgrounds with Less support
Translations
Articles
Books
Videos
Experiments
Community
Contributing
License

About

Less is a open source dynamic style sheet language that can be compiled into Cascading Style Sheets (CSS) and run on the client side or server side. Designed by Alexis Sellier, Less is influenced by Sass and has influenced the newer "SCSS" syntax of Sass, which adapted its CSS-like block formatting syntax. Less provides the following mechanisms: variables, nesting, mixins, operators and functions; the main difference between Less and other CSS precompilers being that Less allows real-time compilation via Less by the browser. Font: Wikipedia

Back to top

Getting Started

Back to top

UI/Theme Frameworks and Components

1pxdeep - Brings designing by relative visual weight, or designing with color schemes, to Bootstrap.
Ant Design - An enterprise-class UI design language and React-based implementation.
Bootstrap a11y theme - Makes web accessibility easier for Bootstrap developers.
Bootstrap 3 - Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Bootswatch - Collection of free themes for Bootstrap.
Cardinal - Small "mobile first" CSS framework for front-end developers who build responsive web applications.
CSSHórus - Library for development of responsive and mobile websites.
Flat UI Free - Theme and framework for Bootstrap.
JBST - Theme framework that can be used as a standalone website builder or to create WordPress themes.
Less Rails - Less for Rails.
Material Design for Bootstrap - Material Design for Bootstrap is a Bootstrap V3 compatible theme; it is an easy way to use the new Material Design guidelines by Google in your Bootstrap 3 based application.
Metro UI CSS - Set of styles to create a site with an interface similar to Windows 8.
Schema - Light, responsive, and lean frontend UI framework.
Semantic UI - UI component framework based around useful principles from natural language.
UIkit - Lightweight and modular front-end framework for developing web interfaces.
Wee - Lightweight front-end framework for logically building complex, responsive web projects.

Back to top

Libraries and Mixins

Grid

Bootstrap Grid Only - Bootstrap's responsive grid and responsive utility classes only, without any extras. Lightweight yet still powerful. Style to taste.
Framework - Less Framework is a CSS grid system for designing adaptive web sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.
Flexible Grid System - This framework will let you create your web applications in a flexible way that you've never experienced before.
Fluidable - Fluidable is a mobile first, responsive grid system. It is standalone, lightweight & built using Less.
Grid System - Super-easy to use, markup-independent grid system.
Less Zen Grid - Implementation of Zen Grids in Less.
Order.Less - Baseline alignment, column grids and modular scales.

Back to top

Media Queries

CSS and Media Query Strategies - Using Less CSS to develop a media query driven solution for modern and legacy browsers.
Media Queries Library - Really simple media queries in Less.
Media Query to Type - A method for creating an IE specific stylesheet that allows the content of media queries to become accessible to Internet Explorer 8 and below.

Back to top

Color

Brand Colors - 1100+ collection of popular brand colors available in Sass, Less, Stylus and CSS.
More-Colors - Variables for easier color manipulation while you design in the browser.
Open Color - Open color is a color scheme for UI design. Available in CSS, SCSS, Less, Stylus, Adobe library, Photoshop/Illustrator swatches and Sketch palette.

Back to top

Animation

Animate - A library of CSS3 keyframe animations authored using Less.
Animate Less - Port of Dan Eden's Animate.css to Less.
Cube Less - 3D (animated) cube using only CSS (Less), originally used by LeanCloud (aka. AVOS Cloud).
Hover - Collection of CSS3 powered hover animated effects to be applied to links, buttons, logos, SVG, featured images and so on.
Less Burguer - Port of Sass Burger to Less.

Back to top

Miscellaneous

3L - Mixins library.
Bidi - Set of mixins for creating bi-directional styling.
Clearless - Collection of mixins.
Css3LessPlease - Conversion of css3please.com to Less mixins.
CssEffects - Collection of CSS style effects.
Cssowl - Mixin library.
Dynamic Stylesheet - Set of useful mixins.
Est - Mixin library.
Hexagon - Generate CSS hexagons with custom size and color.
Homeless - Helpful functions.
Less Elements - Set of basic mixins.
Lesshat - Smart mixins library.
Lessley - A jasmine like testing suite written in pure Less.
Lessmore - Mixins library. Cross-browser support for the CSS3 features and more.
Normalize - Modularized famous normalize.css using Less.
Oban - Collection of mixins.
Preboot - Collection of mixins and variables for writing better CSS.
Retina.js - JavaScript, SCSS, Sass, Less, and Stylus helpers for rendering high-resolution image variants.
Shape - Collection of mixins for various shapes.
TRRtoolbelt - Mixins and functions for common actions.

Back to top

Style Guides

Handshake Style Guide - This guide presents a collection of best-practices and coding conventions.
WebMD Health Services Style Guide - This document outlines CSS/Less best practices at WebMD Health Services.

Back to top

Ports of Less

Java

JLessC - Less compiler written completely in Java.
Less Engine - Runs Less in the Rhino JVM-based JavaScript interpreter.
Less CSS Compiler for Java - Runs Less in the Rhino JVM-based JavaScript interprete.
Less4j - Native Java implementation.
Lesscss - Runs Less using Rhino, Nasshorn or node.js engine; 1.7.0 compliant.
Lesscss Gradle Plugin - Gradle plugin based on Less.

Back to top

.Net

BundleTransformer.Less - Compiler written in .Net.
Less CSS for .Net - Compiler written in .Net.

Back to top

PHP

ILess - PHP port written in Javascript.
Lessphp - Compiler written in PHP.
Less.php - PHP port.

Back to top

Python

Pyhton Compiler - Compiler written in Python.

Back to top

Ruby

Ruby Compiler - Less in Ruby's V8 Engine.

Back to top

Go

Go Compiler - Runs Less inside embedded Javascript engine.

Back to top

GUIs, Editors and Plugins

Atom Linter - Linter plugin in the Atom text editor.
CSS 2 Convert - Quick way to automatically convert CSS to Less, easy as copy and paste.
CSS Less(ish) - Sublime Text 2 & 3 plugin that implements a stripped down version of the functionality in css preprocessors (such as Less).
Crunch 2! - Crunch 2 is a cross-platform (Windows, Mac, and Linux) editor with integrated compiling. If you work with large Less projects, you should definitely try it out, as you only need the free version for Less files.
Diamond - Dependency management built for Sass, Less, and CSS.
Eclipse Less Plugin - This plugin extends the Eclipse IDE by providing handy features to edit and compile Less stylesheets.
Eclipse Transpiler Plugin - Eclipse plugin to automatically transpile your files (Less, SASS, CoffeeScript, etc.).
Emacs - Emacs mode with support for compile-on-save.
Grunt Contrib - Compile Less files to CSS using Grunt.
Grunt Lint - Lint your Less files using CSS Lint from Grunt.
Gulp Less - Plugin for Gulp.
Hayaky - Hayaku is a bundle of useful scripts aiming for rapid front-end web development.
Hyra Helper - CakePHP plugin that converts your Less files to CSS using only PHP.
Koala - Koala is a cross-platform GUI application for compiling Less, sass and coffeescript.
Less for Notepad++ - Syntax Highlighting for Notepad++.
Less Sublime - Syntax highlighting for Sublime Text.
Lesshint - Tool to aid you in writing clean and consistent Less.
LiveReload - CSS edits and image changes apply live. CoffeeScript, SASS, Less and others just work.
SimpleLess - SimpleLess is a minimalistic Less compiler. Just drag, drop and compile.
Sublime Less2CSS - Sublime Text 2 Plugin to compile Less files to css on save.
SublimeOnSaveBuild - Trigger a build the moment you save a file in Sublime Text 2. Works best with web projects that make use of Less, Compass and any other pre-processor or a makefile.
Vim Less - This vim bundle adds syntax highlighting, indenting and autocompletion.
Visual Studio Web Essentials - If you ever write CSS, HTML, JavaScript, TypeScript, CoffeeScript or Less, then you will find many useful features that make your life as a developer easier.
Winless - WinLess started out as a clone of Less.app, it takes a more feature-complete approach and has several settings. It also supports starting with command line arguments.

Back to top

Online Less Compilers

BeautifyTools Less Compiler - Online Less compiler with optional formatting and minification at BeautifyTools.
EstFiddle - Online Less compiler providing live demo for Less and est. Allowing users to switch among all versions of Less after 1.4.0 with optional est/Autoprefixer functionalities.
ILess - Live demo of ILess PHP compiler.
Leafo - Lessphp live demo.
Less2CSS - Online Integrated Development Environment (IDE) that is hosted in a browser allowing users to edit and compile Less to CSS in real-time.
LessPHP - Less.php live demo.
Lesstester - Online compiler for Less CSS.
Precess - A real time preprocesser compiler.
Winless - This Online Less Compiler can help you to learn Less. You can go through the examples below or try your own Less code.

Back to top

Online Web IDEs/Playgrounds with Less support

CodePen - CodePen is a playground for the front end side of the web..
CSSDeck Labs - CSSDeck Labs is a place where you can quickly create some experiments (or testcases) that involves HTML, CSS, JS code.
Fiddle Salad - An online playground with an instantly ready coding environment.
JS Bin - JS Bin is a webapp specifically designed to help JavaScript and CSS folk test snippets of code.
JsFiddle - Online Web Editor.

Back to top

Translations

Back to top

Articles

Back to top

Books

Back to top

Videos

Back to top

Experiments

Back to top

Community

Back to top

Contributing

Your contributions are always welcome! Click Here to read the guidelines.

Back to top

License

To the extent possible under law, Lucas Bassetti has waived all copyright and related or neighboring rights to this work.

Back to top

Awesome WebGL

This is a curated list of awesome WebGL libraries, resources and much more.

What is WebGL

WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D computer graphics and 2D graphics within any compatible web browser without the use of plug-ins. WebGL is integrated completely into all the web standards of the browser allowing GPU accelerated usage of physics and image processing and effects as part of the web page canvas.

WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background. WebGL programs consist of control code written in JavaScript and shader code that is executed on a computer's Graphics Processing Unit (GPU).

WebGL
WebGL 2
WebVR
Libraries
Community

WebGL

All things dealing with WebGL

Articles

WebGL articles and/or blog posts (non-tutorials)

Context Loss & Preloading - How to manage WebGL when you run into the dreaded context lost.
WebGL Off the Main Thread - How to use Web Workers in WebGL.
Optimizing Scenes for Better WebGL Performance - optimization techniques that proved to work well for creating WebGL-based interactives.
First steps in WebGL - Learn what WebGL is and how it works by drawing a triangle.

Blog Series

Blog series of WebGL topics

Codeflow - Many blogs on different tricks and techniques.
Real-Time Rendering - This is the blog for the book Real-Time Rendering.
WebGL Best Practices - Mozilla's offical set of best practices.
WebGL Insights - This is the blog for the book WebGL Insights.
WebGL Month – Daily WebGL tutorial for a month.

Books

Popular books about WebGL

Interactive Computer Graphics: A Top-Down Approach with WebGL by Edward Angel and Dave Shreiner - Suitable for undergraduate students in computer science and engineering, for students in other disciplines who have good programming skills, and for professionals interested in computer animation and graphics using the latest version of WebGL.
Professional WebGL Programming by Andreas Anyuru - Everything you need to know about developing hardware-accelerated 3D graphics with WebGL.
Programming 3D Applications with HTML5 and WebGL by Tony Parisi - Create high-performance, visually stunning 3D applications for the Web, using HTML5 and related technologies such as CSS3 and WebGL—the emerging web graphics standard.
WebGL Beginner's guide by Diego Cantor and Brandon Jones - For JavaScript developer who wants to take the plunge into 3D web development via WebGL.
WebGL Hotshot by Mitch Williams - For web designer looking to expand your knowledge of 3D graphics concepts and broaden your existing skill set.
WebGL Insights by Patrick Cozzi - Presents real-world techniques for intermediate and advanced WebGL developers by assembling contributions from experienced WebGL engine and application developers, GPU vendors, browser developers, researchers, and educators.
Book's Personal Site
WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL by Kouichi Matsuda and Rodger Lea - WebGL Programming Guide will help you get started quickly with interactive WebGL 3D programming, even if you have no prior knowledge of HTML5, JavaScript, 3D graphics, mathematics, or OpenGL.

Bug Reporting

Reporting bugs helps everyone in long run

Chrome Bug Report - Chrome related bugs
Khronos Github Issue Page - Spec or Conformance related bugs
Mozilla BugZilla - Firefox related bugs
WebKit Bugzilla - Safari related bugs

GLSL Editors

Online GLSL Editors

NOTE: WebGL must conform to The OpenGL ES Shading Language, Version 1.00

Official Specs for GLSL Version 1.00

Official Specs for Open ES Version 2.0.25

Fractal Lab - Online fractal explorer allowing you to explore 2D and 2D fractal.
GLSL Sandbox - Online live editor for fragment shaders.
GLSLbin - Fragment shader sandbox supporting glslify.
Shader Toy - Most popular live editor for fragment shaders.
ShaderFrog - WebGL Shader Editor and Composer.
SHDR Editor - Live GLSL shader editor, viewer and validator.
ShaderExpo - Dependency free shader editor featuring inline error logs, auto completions, models and textures loading.

References

WebGL references

Google Project ANGLE - Default WebGL backend for both Google Chrome and Mozilla Firefox on Windows platforms.
Khronos Official Wiki - The official wiki for WebGL.
WebVR Community Group - Group who's goal is to help bring high-performance Virtual Reality to the open Web.
WebGL Errata - Known bugs in graphics drivers affect the conformance suite, and consequently, portability of code.
WebGL Extensions - List of extensions for WebGL
WebGL Reference Card - WebGL 1.0 API Quick Reference Card for printing.
WebGL Source Code - Source code to both view and contribute.
WebGL Spec Sheet - All the detailed information about WebGL.

Talks

WebGL related talks

List of Presentations - List presented by Khronos of various WebGL related presentations.
Next-Generation 3D Graphics on the Web - Talk at Google I/O 19 from Ricardo Cabello (MrDoob).

Tools/Debugging

Tools for development and debugging WebGL

Khronos Dev Tools - Useful WebGL developer tools, intended to be used as an ES6 module.
Spector.js - Agnostic JavaScript framework for exploring and troubleshooting your WebGL scenes.
WebGL Inspector - Tool inspired by gDEBugger and PIX with the goal of making the development of advanced WebGL applications easier.
WebGl Playground - The editor lets you work on the JavaScript code and the GLSL vertex/fragment shaders (if you have any) at the same time in a convenient way. Everything is organized, formatted and highlighted properly, just as you would like.
WebGL Report - Way to view the details of what your browser supports for WebGL.
WebGL Support Stats - Interactive dashboard showing the support for WebGL features in different browsers and devices.
WebGL Texture Tester - Attempts to load one of every texture format supported by WebGL, intended to quickly show which formats your browser/device supports.
Web Tracing Framework - Set of libraries, tools, and visualizers for the tracing and investigation of complex web applications.

Chrome Specific Tools/Debugger

GLSL Shader Editor Extension - Chrome DevTools extension to help you edit shaders live in the browser.
Spector.js Extension - Explore and Troubleshoot your WebGL and WebGL2 scenes easily.
Webgl Insight - Chrome extension WebGL debugging toolkit providing a variety of capabilities.

Firefox Specific Tools/Debugger

Canvas Debugger - Quick tutorial how to use Firefox's developer tools to debug WebGL Shaders.
Firefox Developer Tools - The official list of all of Firefox's debugger tools.
Shader Editor - Quick tutorial how to use Firefox's developer tools to debug WebGL Shaders.

Tutorials

Online WebGL Tutorials (non-video)

Directional Shadow Mapping - Concepts behind real time directional light shadow mapping.
Get Started Tutorial - Khronos' tutorial how to get up and running with WebGL.
Getting Started with WebGL - Mozilla Foundation guide to getting started with WebGL.
Learn WebGL - Tutorials Point set of article to get you familiar with WebGL terms.
Learning WebGL - Tutorials from the author of WebGL Up and Running.
Multitexturing using a Blendmap - How to use a blendmap to multitexture a terrain.
Particle Effects via Billboards - Create particle effects by applying a technique called billboarding.
The Book of Shaders - Gentle step-by-step guide through the abstract and complex universe of Fragment Shaders.
WebGL Academy - Simplified online IDE with automatic indentation, syntax highlighting for HTML, Javascript, GLSL and Python. You can run your code and download your projects.
WebGL Fundamentals - Series of online tutorials with code samples and live demonstrations.
WebGL Workshop - Interactive workshop to get you up and running with WebGL.

Videos

WebGL Related Videos

An Introduction to WebGL Programming - 3 hour overview of WebGL by SIGGRAPH University.
WebGL Tutorials - YouTube - Series of lecture style video tutorials from Indigo Code on YouTube.

WebGL 2

Information about the upcoming WebGL 2 specs

Anything pertaining to WebGL in general is found in the WebGL section

WebGL 2 sub-categories

Articles
References
Tutorials
Videos

Articles

WebGL 2 articles and/or blog posts (non-tutorials)

WebGL 2 What's New - Look into the new features added in WebGL 2.
What's Coming in WebGL 2.0 - Look into the upcoming features of WebGL 2.
WebGL 2 SIGGRAPH Asia 2015 - Presentation by Zhenyao Mo, Ken Russell of Google during SIGGRAPH Asia 2015.
WebGL 2 Lands in Firefox - Information the support for WebGL 2 starting with Firefox 51.
WebGL 2 Basics - Blog post about getting started with WebGL 2.
WebGL 2 New Features - Blog post about whats new and cool in WebGl 2.

References

WebGL 2 references

WebGL 2 Spec Sheet (Editor Draft) - All the detailed information about WebGL 2.
WebGL 2 Reference Card - WebGL 2.0 API Quick Reference Card for printing.
WebGL 2 Compatible Chart - Chart to show current browsers supporting WebGL 2

Tutorials

WebGL 2 Fundamentals- Series of online tutorials with code samples and live demonstrations.
WebGL 2 Samples - Great source of many different WebGL 2 work with very good commenting.
WebGL 2 Examples - Rendering algorithms implemented in raw WebGL 2.

Videos

WebGL related Videos

Fun with WebGL 2.0 - Video tutorial series on getting started with WebGL 2, still actively adding videos.
WebGL 2.0 is Here: What You Need To Know - Khronos Webinar April 2017.
- Slides

WebVR

Information about different parts of the new and upcoming WebVR ecosystem

All items related to more developers and less on where to find WebVR content as entertainment

WebVR sub-categories

Articles
Blog Series
Platforms
References

Articles

WebVR articles and/or blog posts (non-tutorials)

Blog Series

Maintained blog series of WebVR focused topics

Mozilla VR Blog - WebVR focused blog from makers of Firefox.

Platforms

WebVR designed platforms to experience

JanusVR - Webpages as collaborative 3D webspaces interconnected by portals.

References

WebVR references

Browser Support - Shows support by browser, headset, and OS.
Mozilla VR - Mozilla's official WebVR page.
UX of VR - Curated list of resources to help create good UX in WebVR.
WebXR Device API - The W3C draft API for WebXR.
WebVR Spec - The official W3C WebVR spec (legacy).
How to read WebVR Specs

Libraries

More detailed information about the different libraries can be found in the Libraries directory.

2D

p2.js - 2D rigid body physics engine written in JavaScript.
Phaser - Open source HTML5 2D game framework for Canvas and WebGL, supports mobile web browsers.
PixiJS - powerful 2D Javascript renderer based on WebGL.
Planck.js - 2D physics engine for cross-platform HTML5 game development.
Stage.js - 2D Library for cross-platform HTML5 game development.

Compute (GPGPU)

Computer Vision

GammaCV - WebGL accelerated Computer Vision library for browser.

Particles

Phenomenon - Very small, low-level WebGL library that provides the essentials to deliver a high performance experience.

Maps and Visualizations

Cesium - Open-source library for world-class 3D globes and maps.
Deck.gl - WebGL overlay suite for React providing a set of highly performant data visualization overlays.
Luma.gl - WebGL2 powered framework for GPU-powered data visualization and computation.
xeogl - Data-driven 3D visualization engine on WebGL.

Math

glMatrix - Javascript matrix and vector library for high performance WebGL apps.
Sylvester - Sylvester is a vector, matrix and geometry library for JavaScript.
TWGL - Sole purpose is to make using the WebGL API less verbose.

Rendering

GLBoost - Rendering library for 3D graphic geeks.
GrimoireGL - Bridge between Web engineers and CG engineers.
Hilo3d - WebGL rendering engine for 3D games.

Physics

Ammo.js - Direct port of the Bullet physics engine to JavaScript using Emscripten.
Cannon.js - Lightweight and simple 3D physics engine for the web.

WebGL 2

PicoGL.js - Minimal WebGL 2-only rendering library.

WebVR

A-Frame - Web framework for building virtual reality experiences.
Awesome-AFrame
Hologram - Desktop app that let you create and prototype WebVR in interactive way needing no previous coding knowledge.
LÖVR - Simple framework for creating VR with Lua.
React 360 - Build VR websites and interactive 360 experiences with React.
Primrose - Rapidly prototype VR applications in your browser.

Others

Babylon.js - Complete JavaScript framework for building 3D games with HTML5, WebGL and Web Audio.
Blend4Web - Tool for interactive 3D visualization on the Internet.
ClayGL - WebGL graphic Library for building scalable Web3D applications.
CopperLicht - JavaScript library and WebGL 3D engine for creating games and 3D applications.
GLGE - Javascript library intended to ease the use of WebGL.
Lightgl.js - Lightweight and explict library to help prototype.
OSG.js - WebGL framework based on OpenSceneGraph concepts to interact with WebGL.
Pex-gl - JavaScript libraries for computational thinking in Plask/Node.js and WebGL.
PlayCanvas - Game engine platform to build interactive experiences.
Pocket.gl - Fully customizable webgl shader sandbox to embed in your pages.
Regl - Light declarative and stateless library, functional abstraction for WebGL.
Scene.js - Extensible WebGL-based engine for high-detail 3D visualisation.
Three.js - Aimed to create an easy to use, lightweight, 3D library.
Turbulenz - Modular 3D and 2D game framework for making HTML5 powered games for browsers, desktops and mobile devices.
Verge3D - an artist-friendly toolkit for creating 3D web experiences.
Whitestorm.js - Framework for developing 3D web apps with physics.

Community

Similar awesome lists

awesome - Curated list of awesome lists.
awesome-opengl - Curated list of awesome OpenGL libraries, debuggers and resources. Inspired by awesome-... stuff.
awesome-vulkan - Curated list of awesome Vulkan projects and ecosystem.
gamedev - Awesome list about game development.
glTF - Runtime 3D Asset Delivery designed for the web.
graphics-resources - List of graphic programming resources.

Contributing

Please see CONTRIBUTING for details.

Testing

Travis CI testing automation thanks to awesome_bot!

License

To the extent possible under law, Spencer Fricke has waived all copyright and related or neighboring rights to this work.

Awesome Preact

A curated list of amazingly awesome things regarding Preact ecosystem :star2:

Preact is a fast 3kb React alternative with the same ES6 API. Components & Virtual DOM.

Community
Toolkits
Boilerplates
Routing
Components
Libraries
Testing Utils
Articles
Example Apps
Real Apps
Related Libraries
Tips

Community

Slack (Discussion Forum)
Stack Overflow
Github
Twitter

Toolkits

Preact CLI - Build a Preact Progressive Web App in seconds.
Vite - Fast native-ESM powered web dev build tool for Preact, Vue or React.
nwb - Quick Development with React, Inferno or Preact.
React App Rewire Preact - Use Preact with create-react-app without ejecting.
Preact CLI PostCSS - It removes the default postcss config on Preact CLI, so you can use postcss.config.js.
Create Preact App - Create Preact apps with no build configuration.
Storybook Preact - Storybook for Preact is a UI development environment for your Preact components.

Boilerplates

Official Boilerplate - Ready-to-rock Preact starter project, powered by Webpack.
Preact Simple Starter - PWA Simple Starter with Preact, Preact-mdl and Webpack2.
Preact Offline Starter - Webpack2 boilerplate for building SPA / PWA / offline front-end apps with Preact.
TypeScript Preact Starter - Barebones starter project for Preact with TypeScript.
TypeScript PWA Preact Starter - PWA Starter with TypeScript and SASS (131kb)
Electron TypeScript Preact Boilerplate - Electron starter project with TypeScript and Preact support, powered by esbuild.
Preact Modern Startupper - PWA boilerplate with support for TypeScript, Goober, Unistore and Plop.
Preact Redux SSR Example - Server-side Rendering with Redux Example.
Preact PWA - PWA focused on raw performance, server side rendering, prerendering, redux, express, rollup.
Preact Chrome Extension - A Full Feature Preact Chrome Extension Starter Kit.
Preact Web Extension - ⚡️ WebExtension Vite Starter Template with Preact.

Routing

Preact Router - URL router for Preact.
Preact Route Async - A (440b gzip) route component that enables async loading of page-components.
Wouter - A tiny (1KB gzip) router for Preact/React with React Router-like API.

Components

Preact Material Components - Preact wrapper for "Material Components for the web".
Preact Scroll Header - A (800b gzip) header that will show/hide while scrolling for Preact.
Preact Progress - Simple and lightweight (~590 bytes gzip) progress bar component for Preact.
Preact Compat - Use any React library with Preact (full example).
Preact Render To String - Universal rendering.
Preact Markup - Render HTML & Custom Elements as JSX & Components.
Preact Portal - Render Preact components into (a) SPACE.
Preact Richtextarea - Simple HTML editor component.
Preact Token Input - Text field that tokenizes input, for things like tags.
Preact Virtual List - Easily render lists with millions of rows (demo).
Preact Cycle - Functional-reactive paradigm for Preact.
Preact Layout - Small and simple layout library.
Preact Socrates - Preact plugin for Socrates.
Preact Flyd - Use flyd FRP streams in Preact + JSX.
Preact I18nline - Integrates the ecosystem around i18n-js with Preact via i18nline.
Preact MUI - The MUI CSS Preact library.
Preact MDL - Use MDL as Preact components.
Preact Photon - Build beautiful desktop UI with photon.
Preact Classless Component - Create preact components without the class keyword.
Preact Hyperscript - Hyperscript-like syntax for creating elements.
Shallow Compare - Simplified shouldComponentUpdate helper.
Preact Codemod - Transform your React code to Preact.
Preact Helmet - A document head manager for Preact.
Preact Delegate - Delegate DOM events.
Preact No SSR - Skip Server Side Rendering of Components.
Preact Head - Standalone, declarative \<Head /> for Preact.
Preact Side Effect - Create components whose nested prop changes map to a global side effect.
Preact Tiny Atom - Preact Integration with Tiny Atom.
Preact Level List - Live updating leveldb list component for Preact.
Preact Country Picker - Country picker based on bootstrap 3 made for Preact.
Preact Fluid - A minimal UI kit for Preact.
Preact Feather Icons - Feather icons for Preact.
Preact Animate On Change - Add CSS3 animation when properties change.
Preact Async Route - Async route component for preact-router.
MU Forms - Dead simple form library for (P)React.
Pimg - Progressive Image Component; Used for lazy loading images.
Preact Component Console - Console Emulator. Simulates typing via dynamic delays.
Preact Translate - Minimalistic translate (i18n) library for Preact.
Preact Dock - Simple DnD and touch-enabled Dock for Preact apps.
Preact Particles - Lightweight component to easily add cool particles animations to websites.
Pant - Mobile UI Components built on Preact (docs and demos). Ported from awesome Vue components of Vant.
Preact Transitioning - Exposes Preact components for easily implementing basic CSS animations and transitions.
Preact Nominal Allocator - A numerical input element that can also manipulated with two buttons (-/+).

Libraries

Redux Zero - A lightweight state container based on Redux with a single store and no reducers.
Unistore - 350b / 650b state container with component actions for Preact & React.
FPreact - Provides an alternative api for creating preact components, heavily inspired by elm.
ProppyJS - A tiny library for functional props composition
ClearX - Fast & Effortless state management for React, Preact and Inferno with zero learning curve.
Preact-urql - Use urql with Preact core + hooks.
hooked-head - Hooks to manipulate the <head> section of the DOM. This has a subpackage with core preact support (using preact/hooks).
Teaful - Tiny (800B), easy and powerful (P)React state management.
Nano Stores - A tiny (199 bytes) state manager with many atomic tree-shakable stores.

Testing Utils

Preact JSX Chai - JSX assertion testing (no DOM, right in Node).
Preact Render Spy - Render Preact components with access to the produced virtual dom for testing.
Preact Test Utils - Mock react-test-utils enzyme in preact.
Preact Testing Library - Simple and complete Preact DOM testing utilities that encourage good testing practices.

Articles

Example Apps

Preact HN - Demonstration of Preact used to build Hacker News as a PWA.
TodoMVC - TodoMVC done in Preact. Under 6kb and fast.
Colors App - PWA for copying values from popular color palettes. Supports HEX, RGB, and HSL formats.
Tracks - PWA for tracking things in general. Gdrive Sync.
Hueify - Simple controller for your Philips Hue lights.
Golazon - Football data mnmlist way.
Shopping List - Progressive Web App Built Using Preact and PouchDB.
Code and Comment - The application to add the comments to a file in Github (demo).
Play.cash :notes: (GitHub Project)
Songsterr 🎼 Using Preact X in production since 10.0 alpha
BitMidi 🎹 Wayback machine for free MIDI files (GitHub Project)
Ultimate Guitar 🎸speed boosted by Preact.
ESBench is built using Preact.
BigWebQuiz (GitHub Project)
Nectarine.rocks (GitHub Project) :peach:
OSS.Ninja (GitHub Project)
GuriVR (GitHub Project)
Offline Gallery (GitHub Project) :balloon:
Periodic Weather (GitHub Project) :sunny:
Rugby News Board (GitHub Project)
Preact Gallery an 8KB photo gallery PWA built using Preact.
Rainbow Explorer Preact app to translate real life color to digital color (Github project).
YASCC Yet Another SoundCloud Client (Github project).
Journalize 14k offline-capable journaling PWA using preact. (Github project).
Proxx A game of proximity by GoogleChromeLabs using preact. (Github project).
Web Maker An offline and blazing fast frontend playground built using Preact. (Github project).
Intergram A live chat widget linked to your Telegram messenger built using Preact. (Github project).
Preact App in ES6 without Babel or JSX (GitHub Project).
GHFresh Monitor GitHub repository releases – Prerendering with Preact. Built with Preact Compat, TypeScript, Material-UI and Redux Toolkit. (GitHub Project).
Passwords Fountain - modern & performant password manager interface which works everywhere (Github project).
macOS Web - macOS Big Sur Desktop experience for Web, built with Preact and Vite (Github project).
Cinemate - Movie Recommender System built with Preact and TypeScript. Backend written in Rust.
Windows 11 Web - Awe-amazing Windows 11 clone for the web! ⚡ (Github project).

React - A declarative, efficient, and flexible JavaScript library for building user interfaces.
Inferno - An extremely fast, React-like JavaScript library for building modern user interfaces.
Rax - A universal React-compatible render engine.

Tips

Contribute some ;)

Contribution

Your contributions and suggestions are welcome anytime. Build great stuffs with Preact, share with us ;)
Make sure you follow the guidelines. Thank you!

License

Progressive Enhancement Resources

A comprehensive collection of resources on Progressive Enhancement. From concept and strategies to feature detection and testing methods. Complete with a list of (code) examples.

The Concept
Strategies
Feature Detection
Support Tables
Testing Methods
Examples
Related Articles

The Concept

Progressive Enhancement means gradually improving the user experience after verifying the target environment (e.g. browser) is capable of it. Start with content and ensure you maintain functionality & accessibility.

Progressive Enhancement: It's about the content - Sharing content is the core of the web. Progressive Enhancement ensures access to content.
The Role of Enhancement in Web Design - From the concept of enhancement to the criteria and rules for enriching the user interface.
Understanding Progressive Enhancement - Apply technologies in an intelligent way, layer-upon-layer, to craft an amazing experience.
Designing with Progressive Enhancement - The book (400+ pages) on Progressive Enhancement.
Adaptive Web Design - Book on Progressive Enhancement from content to design and interaction.
Detecting (HTML5) features - Intro to different feature detection techniques with examples and demos.
Progressive Web Apps - Enhancing web sites into native-like apps (progressive, not hybrid).

Strategies

You can apply Progressive Enhancement in different ways:

The Content-out Approach - Provide wide access to content without technological restrictions.
Make the page usable with only HTML - This sets the baseline for every device and browser.
Test Driven Progressive Enhancement - Core functional experience enhanced after testing capabilities.
Cut the mustard - Set a threshold for collection of enhancements.
Grade components, not browsers - Component level feature tests and enhancements.
Feature vs Browser vs Form factor detection - As different strategies to tune your app to its environment.
Server-side device detection - Use user-agent and other HTTP header info combined with a device database to conditionally serve files.
Writing polyfills - If your baseline is still too high for some browsers, consider polyfills (aka Regressive Enhancement).
Application Shell Architecture - Setup for instant loading web apps.

Feature Detection

Before you try to enhance the experience, you need to ensure the environment is capable of the enhancement. You test this by performing feature detections:

CSS feature queries (CSS.supports() & @supports()) - Natively test if specific CSS feature is supported using JS method or CSS declaration.
Feature Detect ES6 - Detect which ES2015 features are available.
SVG requiredFeatures - Render SVG elements only if their [requiredFeatures] evaluate to true.
Modernizr - Extensive feature detection suite (supports custom builds).
Feature.js - Lightweight feature detection suite.
Conditioner.js - Conditionally load JS modules based on directives in HTML attributes.
EnhanceJS - Lets you asynchronously load CSS & JS after a set pre-defined feature tests.

Support Tables

Different environments (platforms, browsers, versions) have different capabilities. Support tables tell you what capabilities each environment has. Knowing the level of support can help you weigh an enhancement against the effort and impact of its implementation.

The Web Platform - Overview of browser technologies with links to docs and test suites.
Can I use ...? - Compare feature implementations and limitations across desktop & mobile browsers.
I want to use ... - Figure out the browser support of combinations of features.
HTML5 Test - Test and compare HTML5 feature support across browsers.
CSS3 Test - Fine-grained tests for CSS3 feature support of your current browser.
Accessibility Support - Compare accessibility support of HTML elements and ARIA roles across browsers & assistive technologies.
State of Web Type - Support tables for type and typographic features on the web.
Font Family Reunion - Compatibility tables for default local (system) fonts.
HTML5 Accessibility - Compare feature support of HTML5 tags, input types and properties across major browsers.
WAI-ARIA Screen reader compatibility - ARIA roles and attributes support for different screen reader and browser combinations.
What web can do today - Lists and checks modern web APIs like access to device system, sensors and actuators.
HTML5 Worker test - Compare which APIs are supported in Web Workers and Service Workers across browsers.
HTML5 Please - Explore features with recommendations and links to polyfills.
API Catalog - Lets you compare implementation of API specifications in major desktop browsers.
Kangax's ECMAScript compatibility table - Overview of JavaScript feature support across browsers and other runtimes.
Node compatibility table - Overview of JavaScript feature support across NodeJS versions.
Is service worker ready? - Overview of support for all features involved in the core technology behind Progressive Web Apps.
Is PWA ready? - Overview of support for the core and related technologies behind Progressive Web Apps for both popular global and many Chinese browsers.
Is WebRTC ready yet? - Overview of support for the different browser features behind real time communication.
Is WebVR ready? - Overview of support of different browser features behind WebVR including display, gamepad, audio and speech APIs.
Is Houdini ready yet? - Overview of support for Houdini (low-level APIs exposing parts of the CSS rendering engine) across browsers.
Chrome Platform Status
Edge Platform Status
Firefox Platform Status
Webkit Platform Status (Safari)
MDN Compatibility tables - MDN's web technology documentation has a browser compatibility table end the end of each article.
MDN Browser Compat Data - npm module powering the MDN Compatibility tables.
Device Bugs & Quirks - Crowd sourced collection of weird HTML, CSS, and JS quirks in mobile devices, which you won't find in the other support tables.
Can I Email? - Support tables for HTML and CSS in emails. Inspired by Can I use.

Testing Methods

With progressive enhancement you support different experiences in different environments. These are some ways to test all these variations:

Open Device Lab - Lets you test manually on actual devices (for free).
Text browsers - Good way to test if your content is accessible at the baseline. Try Lynx for example.
Testing in Opera Mini - Download the app, emulate on desktop, setup to test local websites. (Opera Mini accounts for over 5% browser usage world wide)
cURL - Web page to see the pre-rendered source code of a page.
Browserling - Lets you manually test web pages in different versions of browsers on Windows and Android platforms.
Run Internet Explorer using Virtual Machines - To test IE browsers on other platforms.
Device emulators and simulators
Configure Desired Capabilities in Selenium - Run automated browser tests in different scenarios.
Continuously run automated tests in different browsers using BrowserStack, Saucelabs or other alternatives.
Lighthouse - Audit and meassure performance of Progressive Web Apps (via cli or Chrome extension).
Progressive Enhancement checklist (1st edition, HTML), Checklist of 2nd edition (PDF) - Actionable list to check you've applied Progressive Enhancement best practices. Part of Adaptive Web Design book.
CSS Feature Toggles - Chrome DevTools extension to toggle support of selected CSS features for testing progressive enhancement fallbacks.

Examples

Custom Form Elements

Fancy radio buttons - Based on HTML radio buttons, visually enhanced using CSS pseudo classes and elements.
Checkboxes & radio buttons - With custom focus, hover and checked state. Enhanced asynchronously.
Toggle switch - Checkbox or radios, visually enhanced to sliding toggle switches using CSS only.
5-star rating - Based on HTML radio buttons, visually enhanced using CSS pseudo classes and elements.
jQuery slider - Accessible, custom slider widget based on a standard HTML select.
jQuery custom file input - Article and library.
React isomorphic form - Set of React form components which can be pre-rendered & handled server-side. They are enhanced client-side without losing state.

Data Visualisations

Timeline - From definition list to SVG illustration (article with demos).
Charts - From data table to themed charts using HTML5 canvas (article and library).

Images

Responsive Carousel - List of images enhanced into responsive carousel with various behaviour options.
Lazy Progressive Enhancement - Lazy load images inside <noscript> tags. (note: Evergreen browsers only)

Menus

Progressive hamburger menu - List of links in footer enhanced to off-canvas menu.

Asynchronously fetch and transition between static pages using ajax and history.pushState:

Barba.js - Add page transitions with event hooks, cache and prefetch support.
SmoothState.js - Add page transitions with event hooks, cache and prefetch support. (requires jQuery).
jquery-pjax - Add page transitions with support for multiple containers / content slots (requires jQuery).
MoOx/pjax - Similar tot jquery-pjax, but without the jQuery dependency.
Turbolinks - Add page transitions with event hooks and cache support. Has adapters to bind to native navigation controls on iOS and Android.

Make the web work for everyone - Plea to developers to consider browser differences and build a resilient web.
How many people are missing out on JavaScript enhancement? - Research on why in 1.1% of page visits JavaScript isn't loaded.

License

Jasper Moelker waives all rights to this work worldwide under copyright law, including all related and neighboring rights, to the extent allowed by law.

You can copy, modify, distribute and perform the work, even for commercial purposes, all without asking permission.

Awesome Next.js

Curated list of resources: books, videos, articles about using Next.js.

Next.js: The React Framework.

List inspired by the awesome list thing. You might also like awesome-tdd.

Awesome Next.js
Contents
Community
Essentials
Articles
Boilerplates
Extensions
Apps
Books
Videos
Newsletters
Contributing
License

Community

Essentials

Articles

Boilerplates

Next.js Static Blog - Next.js static blog powered by the Cosmic Headless CMS
NextJS Headless CMS Powered Blog Starter
Next.js App with AWS Lambda - Deploy a Next.js App to AWS Lambda using Apex Up.
Nitro 🚀 - An Example of a PWA using Nextjs, Material-UI, Typescript and Auth0 💗
Next & Now 2.0 Typescript template - Serverless, Typescript, Jest, Github CI, SCSS, prettier boilerplate
Next Right Now - Flexible production-grade boilerplate with Next.js 9 and Vercel, with pre-configured Sentry, cookies, Amplitude, Emotion, FontAwesome, GraphQL/GraphCMS (Apollo), Bootstrap (Reactstrap), i18next (Locize), Jest, Cypress (E2E tests) and CI/CD (GH Actions), with full TypeScript support and support for B2B multi-tenants web apps (monorepo)
Next Graphql Apollo Typescript_Boostrap - Pobocha - React + GraphQL + Next.js + Apollo + Scss + Typescript + Prettier & EsLint boilerplate
Next & Vercel Typescript template - Serverless, Typescript, Jest, Github CI, SCSS, prettier boilerplate
NextJS in Firebase with Bootstrap - Hosting NextJS app with Bootstrap in Firebase with Cloud Functions.
Next Simple Starter - Simple PWA boilerplate with Next.js and Redux.
NextJS Starter - Starter project for Next.js with and email and oAuth authentication.
nextjs-starter - An SEO Optimized Next.js 10 starter kit template with React 17 + Typescript + Tailwind CSS 2 + React Query 3 + (GitHub Auth + Passwordless Auth) using (NextAuth.js and Fauna DB), ESLint, Prettier, Pre-commit hook with Husky. Can have different layouts for different pages.
RAN! - Production-ready boilerplate with support for GraphQL, SSR, Hot-reload, CSS-in-JS, caching, and more.
Next Simple Blog - Simple Markdown based blog built with Next.js with static exports.
phox - Create a static photo blog.
Next Express Bootstrap Boilerplate - Boilerplate for a full stack app built using Next, Express, react-bootstrap, SCSS and SSR with eslint.
Next Blog Firestore - Blog with simple CMS built with Next.js, Firebase Firestore, styled-components and mobx-state-tree.
Next Redux Starter - Next.js starter with Express, Redux, and PostCSS.
NextJS Redux-Wrapper Material-UI - 🤓 A boilerplate NextJS with Redux and Material UI.
Staart - 😎 Actively maintained Next.js components library and minimal boilerplate to rapidly get staarted with app with working user accounts based on Ooth.
NextJS TypeScript Starter Kit - :tada: TypeScript + NextJS, Styled-jsx, Redux, PostCSS, configurable SEO
Next Boilerplate - External CSS and Sass + Importing images from anywhere + Prettier and Eslint + Environment variables and many more features.
next-starter - A full and simple boilerplate with sass (.scss) and postcssbuilt in.
Typescript Monorepo Next Example - A minimalistic next.js + typescript monorepo.
tomimick/tm-nextjs-starter - A minimal starter/demo with basic CRUD, axios/localstorage, MobX, SASS, static site export, live demo
csprance/next-smrt - A minimal boilerplate with redux, styled-components, material-ui and typescript with a custom express server.
Nextron - An Electron with Next.js apps generator ⚡
next-boilerplate - A well-structured production ready Next.js boilerplate with Typescript, Redux, Express.js, Sass, Css, EnvConfig, Reverse Proxy, Bundle
Oh My Fullstack - Full stack web application skeleton (Next.js, Redux, RxJS, Immutable, Express)
Next-Postgres-With-Typescript - Forum-like fullstack web app with Next 7.0.2 + Sequelize 4/Postgres + Typescript + Redux + Passport Local Auth + Emotion
Next.js with Express and Babel - An application skeleton for those who want to transpile their Express as well as their Next.js code using Babel.
next-postgres-graphql - Create SSR Next.js websites using GraphQL with Postgres (Next.js, Postgres, GraphQL)
nextjs-mongodb-app - Full-fledged app made with Next.JS and MongoDB, with authentication and much more (Next.js 9, MongoDB)
react-next-boilerplate - :rocket: A basis for reducing the configuration of your projects with nextJS, best development practices and popular libraries in the developer community.
The-Nextjs-starter - typescript + redux + styled-components + react-testing-library + eslint + fontawesome
The Knests Stack - Full stack boilerplate/hackathon starter with: PostgreSQL, Knex.js, NestJS, Next.js (obviously), GraphQL, React (with hooks and typescript), Material-UI, Docker multistage images for, Docker compose and a Gitlab CI/CD pipeline fully configured.
Devii - A Medium-inspired dev blog starter built with Next.js, React, and TypeScript, with Markdown rendering, syntax highlighting, SEO/meta tags, and RSS feed generation out of the box.
Nextjs Blog Starter - 🚀 The perfect starter code for your blog based on Next.js framework. ⚡️ Made with Next.js, TypeScript, ESLint, Prettier, PostCSS, Tailwind CSS.
Next.js and Netlify Blogging Template - A perfect boilerplate for building a blog website on Netlify stacks with standard features like tagging, CMS, and shortcodes.
Nextjs Apollo Nexus - GraphQL Apollo Client-Server integration in Next.js with Nexus Schema (Code first approach).
Nextjs Starter Peacock - 🦚 Beautiful Nextjs portfolio starter for software engineers and designers to show work they're so proud of.
Nextatic - 🌍 Static website multi-language boilerplate with user-editable pages and navigation using Netlify CMS + Next.js + SCSS + Typescript.
Sitemap generator for NextJS & StrAPI - 🦾 An additional server on express that runs alongside nextjs and regenerates sitemap ( with index sitemap ) and robots.txt files on request from STR API.
superplate - superplate creates Next.js app in seconds with TypeScript, styled-components, SWR, Storybook, and 35+ plugin.

Extensions

Next universal language detector - Language detector that works universally (browser + server) - Meant to be used with a universal framework, such as Next.js DEMO
Next Routes - Universal named routes for Next.js.
Next-Pkg - Extended Next.js server with pkg support.
Next Plugin Graphql - Next.js plugin for .graphql and .gql files using graphql-tag
Next With Apollo - Apollo Graphql integration for Next.js
Next SEO - SEO made easy for Next.js
Next UserAgent - UserAgent parser for Next.js
Next Cookie - Cookie serializer and deserializer library for Next.js.
Nextein - A static site generator based in Next.js.
next-mdx-blog - Easily add a blog to any next.js based project
next-i18next - The easiest way to translate your NextJs apps.
next-routes-middleware - A NextJS routing middleware
Serverless Framework plugin for Next.js - Deploy serverless applications with ease.
Terraform For Next.js - Deploy your application using Terraform
next-session - Session middleware for Next.js
next-iron-session - Next.js stateless session utility using signed and encrypted cookies to store data
Next PurgeCSS - Easily integrate Purgecss, which helps you remove unused CSS from your bundle.
Next PWA - Zero config PWA plugin for Next.js with workbox
flow-middleware - Run any of Express middlewares on Next.js without polluting native objects.
next-connect - The Express/Connect-compatible router and middleware layer for Next.js.
next-img - a plugin for embedding optimized images with ease.
next-auth - Easy authentication for Next.js and Serverless
next-deploy - 🚀 Effortless deployment to AWS and GitHub Pages.
next-joi - Validate Next.js API Routes, with joi.
next-transpile-modules - Next.js plugin to transpile code from node_modules. Useful for monorepos.
Destack for Next.js - Next.js extension to visually build landing pages locally.

Apps

CourseLit - An open source alternative to Thinkific, Teachable etc.
Feednext - An open source social media application.
NextJS GOT - Simple Next.js application that showcases Game of Thrones Characters.
Relate - Mindfulness community - React, GraphQL, Next.js.
Next News - HackerNews written in Next.js.
Password - One password, right way.
Next Todos - Todo list written in Next.js.
Hacker News - Another Hacker News written in Next.js.
Jet Chat - Jet and Next.js powered Chat demo.
Nextgram - Sample Next.js v2 app for showing off its capabilities.
Rauchg Blog - Blog built by a Next.js core maintainer.
Next JPH - JsonPlaceholder sample app made with Next.js.
Mailto - HTML mailto's made easy.
Plate - The task management app to rule them all.
Dashboard - Create your own team dashboard with custom widgets.
Snape - A torrent client to search, stream and download torrents.
Trello Resume - Converts trello data into fast read information.
Server Authentication with JWT - Server authentication, prevent render before validation.
Alexander Kachkaev’s website – personal homepage built with Next.js, GraphQL, Docker and Kubernetes. Uses apollo client, react-intl, styled-components and recompose. Docker images are automatically built by GitLab CI.
Cookie handler with server render - Cookie handler with server render, access the cookie before render.
Gank - A Next.js App use gank-api, mobx and antd
Decoupled CMS example with GraphQL and Next.js
Mozilla VR Home - Mozilla VR Home
Elton John's website - Elton John's Website
IOTA's Data Market Place - IOTA Market Place
magicleap.com - Magic Leap
NPM.js Search Page - NPM's Search Page
Docker Success Center - Docker Success Center
Urteile & Gesetze - German Legal Information System licensed under GPLv3.
TikTok's HomePage - TikTok's Home Page
njt.now.sh - npm jump to 🐸 (package navigation shortcuts you dreamed about). Partially statically-rendered, partially deployed as lambda. Automatically updated on each commit to the github repo, thanks to Now integration.
caseconverter.pro - A text case converter.
Tottem - Bookmark manager on steroid built with NextJs / Auth0 / Apollo Tools / Prisma2
Slow TV Map - A fun way to discover relaxing virtual experiences. Next.js + Chakra UI + MySQL hosted on Vercel.

Books

Hands On Next.js - A practical fullstack book on universal (server) rendering for react applications.
Next.js Quick Start Guide - Create, build and deploy universal JavaScript applications using Next.js
The Next.js Handbook - Build a frontend React application that transparently handles server-side rendering for you.

Videos

Create your first ReactJS application with NextJS [Spanish]
React Server Side Rendering with NextJS
Guillermo Rauch - Next.js by Example
Guillermo Rauch - Next.js: Universal React Made Easy and Simple
Introduction to Next.js
Next.js in production
Parameterized Routing with Next.js
JSHeroes 2017 | Guillermo Rauch - Static and Dynamic Next.js
Programming the Universal Future with Next.js - Guillermo Rauch · JSConf China 2017
BPJS: Special - Introduction to Next.js
Next for Next.js
Data Management With Next.js and GraphQL
Next.js Register User
Next.js Crash Course - Server Side React
Mastering Next.js - 50+ lesson video course for building applications with Next.js and React.
Next.js Tutorial - In depth Next.js tutorials.
Next.js Conf 2020 - All the videos from the 2020 Next.js conference

Newsletters

Next.js News - Monthly Next.js newsletter showcasing new and upcoming features, best articles, tools, and plugins.
Next.js Notes - Monthly Next.js and JavaScript platform news.

Contributing

Found an awesome package, article, blog, video etc.? Send me a pull request! Just follow the guidelines. Thank you!

Check out my blog or say hi on Twitter.

License

Awesome Lit

A curated list of awesome Lit resources.

Lit — a simple library for building fast, lightweight web components.

At Lit's core is a boilerplate-killing component base class that provides reactive state, scoped styles, and a declarative template system that's tiny, fast and expressive.

General resources
Community
Overview
Starter Templates
Codelabs
Tutorials
Examples
Lit Labs
Extensions
Design Systems
Component Libraries
Standalone Components
Tools
Building
Linting
IDE Plugins
TypeScript Plugins
Other Tools
CDN
Integrations
Videos
Podcasts
Archive
Similar libraries
Other awesome resources

General resources

Community

Overview

Starter Templates

LitElement JavaScript starter - Sample component using LitElement with JavaScript.
LitElement TypeScript starter - Sample component using LitElement with TypeScript.
hello-web-components - Simple starter web component written in TypeScript using Lit.
Lit Sass JavaScript Starter - Project that has a simple setup for SASS + JS + Lit, using Rollup.
Lit Sass TypeScript Starter - Project that has a simple setup for SASS + TS + Lit, using Rollup.
Lit Webpack Starter - Starter for multipage apps with Lit and Typescript, using Webpack.
Open Web Components Generator - Starter app based on Open Web Components Recommendations.
pwa-starter - LitElement edition of the PWABuilder pwa-starter.
pwa-lit-template - Build Progressive Web Applications following the modern web standards.
Vite Lit Element TS SASS - Example Vite project using Lit 2, Typescript, and SASS.
Vite Lit Starter - Lit based template preset for Vite.
Vite Lit TS Starter - Lit and TypeScript based template preset for Vite.

Codelabs

Tutorials

Examples

Lit Basics - Overview of general Lit concepts with some examples.
Lit Native - Reuse Lit web components on native platforms.
Lit Node Editor - Node editor built with canvas API and simple graph data structure.
Lit 3D Piano - 3D Piano built with Lit, Three.js and Tone.js.
Open Web Components Examples - Code examples of common patterns using Lit.
Polymer → Lit Migration Guide - Code examples showing migration guidance from Polymer to Lit.
Vite + RxDB + Lit - Minimal example to get RxDB running with Vite.

Lit Labs

@lit/localize - Library and command-line tool for localizing web applications built using Lit.
@lit-labs/ssr - Package for server-side rendering Lit templates and components.
@lit-labs/motion - Lit directives for making things move.
@lit-labs/react - React integration for Web Components and reactive Lit controllers.
@lit-labs/scoped-registry-mixin - Mixin for LitElement that integrates with the speculative Scoped CustomElementRegistry polyfill to evaluate the proposal and facilitate feedback.
@lit-labs/task - Controller for Lit that renders asynchronous tasks.
@lit-labs/virtualizer - Package that provides virtual scrolling for Lit.

Extensions

@adobe/lit-mobx - Mixin and base class for using mobx with Lit.
@apollo-elements/lit-apollo - LitElement integrations with Apollo GraphQL.
@shoelace-style/localize - A micro library for localizing custom elements, providing directives for Lit.
@stefanholzapfel/lit-state - Lightweight reactive state management for Lit 2.
@vaadin/form - Set of utilities for building forms with TypeScript and Lit.
dark-theme-utils - Useful utilities for dark mode built with Web Components.
exome - State manager for deeply nested states that supports Lit.
pure-lit - Register your Lit elements as pure functions.
lit-element-effect - Effect hooks for LitElement.
lit-element-state-decoupler - Utility for state handling outside of the component for LitElement.
lit-redux-router - Declarative way of routing for Lit powered by pwa-helpers and Redux.
lit-svelte-stores - Lit controller to use svelte stores as state management.
lit-vaadin-helpers - Helpers for using Vaadin web components with Lit 2.
ullr - Build Web Components with functional programming using Lit.

Design Systems

AXA Pattern Library - AXA CH UI components library built with LitElement.
Brightspace UI core - Collection of web components for building Brightspace applications.
Carbon Custom Elements - Carbon Design System variant on top of Web Components.
Clarity Core Web Components - Suite of web components for Clarity Design System.
Kor - An open source Design System and lightweight UI Component Library.
Lion - Highly performant, accessible and flexible Web Components.
Material Web Components - Material Design implemented as Web Components.
Momentum UI Web Components - Set of UI components based on Momentum Design.
Outline Design System - Web component based design system starter kit.
Pharos Design System - JSTOR's design system to create cohesive, supportive, and beautiful experiences.
Shoelace - Collection of professionally designed UI components built on a framework-agnostic technology.
Spectrum Web Components - Adobe Spectrum design language implementation built with LitElement.
UI5 Web Components - Enterprise-flavored sugar on top of native APIs!

Component Libraries

Apollo Elements - Custom elements meet Apollo GraphQL.
Blackstone UI - Web components for creating interfaces built with lit-html and LitElement.
Chartjs Web Components - Web components for chartjs.
Clever components - Collection of Web Components made by Clever Cloud.
Curvenote - Web components for creating interactive scientific articles.
ESP Web Tools - Allow flashing ESPHome or other ESP-based firmwares via the browser.
Furo Webcomponents - Enterprise ready set of web components which work best with Eclipse Furo.
Fusion Web Components - Ser of web components used by Equinor Fusion.
Ignite UI Web Components - Complete library of UI components from Infragistics.
LRNWebComponents - ELMS:LN produced web components for any project.
Medblocks UI - Web Components for rapid development of openEHR and FHIR systems.
Microsoft Graph Toolkit - Collection of web components for the Microsoft Graph.
Mutation testing elements - A schema for mutation testing results with the web components to visualize it.
One Platform Components - Set of web components for Red Hat One Platform.
Playground Elements - Serverless code experiences with web components.
Stripe Elements - Custom Element Wrapper for Stripe.js v3 Elements.
Titanium Elements - Collection of lightweight web components used by Leavitt Group Enterprises.
Vidstack Elements - Spec-compliant customizable, extensible, accessible and universal media elements.
VSCode Webview Elements - Components for creating VSCode extensions which use the Webview API.
Web Components for TEI Publisher - Web components used by TEI Publisher and apps generated by it.
Webmarkets web components - Set of Webmarkets' public web components.
Wired Elements - Collection of elements that appear hand drawn.
Wokwi Elements - Web Components for Arduino and various electronic parts.

Standalone Components

<api-viewer> - API documentation and live playground for Web Components.
<app-datepicker> - Datepicker element built with LitElement and Material Design 2.
<burgton-button> - Simple to use, customizable and accessible burger-button element.
<code-block> - Web component that displays colorfully formatted code with Prism.js and LitElement.
<codesandbox-button> - Custom Element that shows a CodeSandbox demo when you click on it.
<granite-qrcode-generator> - Custom element to generate and render QR Codes, using qr.js library.
<helium-animated-pages> - Web component for creating CSS animations built with Lit.
<json-viewer> - Web Component to visualize JSON data in a tree view.
<light-gallery> - Full featured JavaScript image and video gallery for Lit.
<lit-datatable> - Material Design implementation of a data table, powered by LitElement.
<lottie-player> - Web Component for easily embedding and playing Lottie animations.
<model-viewer> - A web component for rendering interactive 3D models.
<rapi-doc> - Web Component to view OpenAPI 3.0 & Swagger 2.0 Spec.
<round-slider> - Simple round slider web component built with Lit.
<stl-part-viewer> - LitElement web component that utilizes Three.js to display an STL model file.

Tools

Building

babel-plugin-lit-property-types-from-ts - Babel plugin for setting type for reactive properties declared in Lit components based on TypeScript type annotations.
babel-plugin-template-html-minifier - Babel plugin for minifying HTML in tagged template strings.
esbuild-plugin-lit-css - ESBuild plugin to import css files as JavaScript tagged-template literal objects.
lit-css-loader - Webpack loader to import css files as JavaScript tagged-template literal objects.
lit-scss-loader - Webpack loader to import the CSS/SCSS into Lit components.
rollup-plugin-lit-css - Rollup plugin to import css files as JavaScript tagged-template literal objects.
rollup-plugin-minify-html-literals - Rollup plugin to minify HTML in tagged template strings.
rollup-plugin-postcss-lit - Rollup plugin to load PostCSS-processed stylesheets in Lit components.

Linting

eslint-plugin-lit - ESLint plugin for Lit template strings.
eslint-plugin-lit-a11y - Accessibility linting plugin for Lit templates.
lit-analyzer - CLI that type checks bindings in Lit templates.

IDE Plugins

vscode-lit-html - Syntax highlighting and IntelliSense for lit-html template strings.
vscode-lit-plugin - Syntax highlighting, type checking and code completion for lit-html.
es6-string-html - VSCode extension which provides syntax highlighting for HTML in ES6 multiline strings.
vim-html-template-literals - Syntax highlighting and indentation for HTML inside of tagged template literals.

TypeScript Plugins

ts-lit-plugin - Plugin that adds type checking and code completion for Lit templates.
typescript-lit-html-plugin - TypeScript server plugin that adds IntelliSense for Lit templates.

Other Tools

@custom-elements-manifest/analyzer - CLI tool to generate API documentation for web components.
Storybook for web-components - UI development environment for plain web-component snippets.
web-components-codemods - Codemods for Web Components compatible with lit-html template literals.
Web Component DevTools - Browser extension for developers working with Web Components.
Web Component Factory - CLI tool for generating, building, testing and publishing web components.

CDN

The following content delivery networks provide ES module versions of Lit:

See this issue where the static build for CDN distribution is discussed.

Integrations

Bridgetown Lit Renderer - SSR + hydration of Lit components for Bridgetown.
Fable.Lit - Collection of tools to embed HTML code into F# code with the power of Lit.
Ruby2JS - Minimal yet extensible Ruby to JavaScript conversion.

Videos

Podcasts

The Web Platform Podcast 159: lit-html - HTML Templates via JavaScript Template Literals - An episode with the lit-html creator Justin Fagnani.
ShopTalk Show 348: Getting lit-html with Justin Fagnani - Another episode with Justin Fagnani as a guest.

Similar libraries

These libraries are not related to Lit, but are built using similar concepts. They use html tagged template literal, and leverage the benefits of the same IDE Plugins for syntax highlighting.

haunted - React's Hooks API but for standard web components and hyperHTML or lit-html.
htm - Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support.
hybrids - UI library for creating Web Components with simple and functional API.
lit-ntml - Lightweight and modern templating for SSR in Node.js, inspired by lit-html.

Other awesome resources

If you want more awesome resources, check the awesome list!

License

Jamstack: noun \’jam-stak’\
Modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.

This is a carefully curated list of awesome Jamstack resources.

You might also like Awesome Static Generators.

Want to contribute with some resource? Great! Please, read the contribution guidelines before contributing.

General
Chats
Platforms
No-Code Platforms
Jamstack Sites Showcase
Static Site Generators
CMS
API
Authentication
Comments
Forms
E-commerce
Search
Database
Automation
Serverless
Videos
Tutorials / Articles
Podcasts
Books

General

Jamstack
Jamstack resources - Videos and articles about Jamstack.
the New Dynamic - Pick up tools in our Directory to work with the Jamstack. Browse our showcase and get inspired.

Chats

Platforms

Appernetic - Visual content management for static web sites, with Hugo and GitHub Pages.
Netlify - All-in-one platform for automating modern web projects.
Vercel - All-in-one serverless platform for modern web apps with config-free tools and workflows.
Azure Static Web Apps - Full-stack serverless hosting with integrated CI/CD workflow, authentication, CDN and more.
Stormkit - Powerful all in one infrastructure for modern javascript apps. It integrates with your git flow and builds, deploys and scales your apps seamlessly.

For more resources about Static Web Apps see (Awesome Static Web Apps)[https://github.com/staticwebdev/awesome-azure-static-web-apps].

No-Code Platforms

Jamstack.new - Create a new Jamstack website with 1 click, brought to you by Stackbit
Storipress - All-in-one publishing + blogging platform with integrated site builder and workflow management.
Draftbox - Lightning fast, secure front-end for your WordPress or Ghost blog, without coding.
Plasmic - Powerful design tool for building your React components and Jamstack websites visually.

Jamstack Sites Showcase

React - Built on Gatsby.
Squoosh.app - Hosted on Netlify, demonstrates advanced features from a modern Web Application.
Hopper - Built on Gatsby and hosted on Netlify.
VSCode Power User Course - PWA built on Gatsby and hosted on Netlify.
CloudyCam - PWA built on Next.js and hosted on Zeit Now v2 Serverless platform.
FbaMonthly - Hosted on Netlify, built with Jekyll, Netlify Functions and Netlify Forms.
Jarod Peachey - Built with Gatsby + MaterialUI and hosted on Netlify
ProtonDB - React/MaterialUI/Firebase hosted on Netlify since August 2018. Prominent in Linux gaming community.
Creative Designs Guru - Built on Eleventy.js hosted on Netlify and styled with Tailwind CSS
HandleDroid - Built with Next.js, MongoDB, Auth0, AWS CloudWatch, SendGrid, Stripe and hosted on Netlify.
Backlinko - Built with Next.js, headless WordPress and Netlify.

Static Site Generators

Gatsby - Blazing-fast static site generator for React.
Next.js - Lightweight framework for static and server-rendered applications.
Hugo - Hugo is a static site generator written in Go.
Jekyll - Jekyll is a simple, blog-aware, static site generator perfect for personal, project, or organization sites.
Hexo - A fast, simple & powerful blog framework, powered by Node.js.
Metalsmith - An extremely simple, pluggable static site generator.
Phenomic - A modular website compiler.
Gridsome - Vue-powered static site generator for building CDN-ready websites for any Headless CMS, APIs or Markdown-files.
Nuxt.js - Versatile vue-based framework for server-side-rendered, static and traditional single page applications.
eleventy - A simpler static site generator transforming various template files into HTML.
Nift - A cross-platform open source website generator developed in C++ that is lightning fast and extremely powerful.
Astro - Build faster websites, while shipping less to almost no Javascript.
FactorJS - Next-generation framework powered by Vite.

For a more complete list see StaticGen.

CMS

Cosmic - Headless CMS with REST and GraphQL API options.
Kentico Kontent - A cloud-native headless CMS that scales.
Contentful - Content infrastructure for digital teams.
NetlifyCMS - open source Git-based CMS.
ButterCMS - Headless CMS and Content API.
Scrivito - Cloud-based JavaScript CMS built for digital agencies and medium to large-sized businesses.
GraphCMS - The GraphQL Headless CMS.
Prismic - Headless API CMS for both developers and marketers.
Siteleaf - A friendly CMS for your static site.
DatoCMS - The API-based CMS your editors will love.
Prose - Prose is a content editor for GitHub designed for managing websites.
Tipe - Next Generation API-first CMS.
Forestry - Headless CMS for sites built with static site generators.
Coisas - A client-side CMS for editing GitHub Markdown (and other) files.
Cockpit - A self-hosted headless and api-driven CMS.
HeadlessCMS - A List of Content Management Systems for Jamstack Sites.
TakeShape - Headless GraphQL API CMS with 1-click deploy to Netlify.
Ghost - A headless CMS for online publications
Strapi - The open source Headless CMS Front-End Developers love.
Flotiq - An effortless headless CMS.
TreacleWP - WordPress API hosting.
Agility CMS - The best of both worlds for developers and content editors.
CloudCannon - The Git-based CMS for your Jamstack sites.

API

Authentication

Auth0 - Single sign on and token based authentication.
Netlify Identity - Brings a full suite of authentication functionality, backed by the GoTrue API.
Jexia UMS - REST API User management system for your webside with identy provider with JWT + extra functionality.

Comments

Disqus - Global comment system that improves discussion on websites and connects conversations across the web.
Facebook Comments - The comments plugin lets people comment on content on your site using their Facebook account.
Utterances - A lightweight comments widget built on GitHub issues. Use GitHub issues for blog comments, wiki pages and more.

Forms

Formcarry - Hassle-free HTML form endpoints for your form, powerful dashboard, reliable spam blocking, attachment uploads and Zapier integrations.
Formcake - A form backend built for developers: Zapier integrations, zero dependencies, a simple API, and unlimited forms.
Getform - Form backend platform for designers and developers. Setup your form endpoints for your static site within minutes and expand your data with Zapier integration and Webhooks support.
Netlify Forms - Built-in form handling on building time by parsing HTML files directly at deploy time.
StaticKit - Modern forms for static sites, with client libraries for React and HTML.
Arengu - Build signup and login forms with Arengu, enable social login, add 2FA or use passwordless flows to authenticate users with your API or identity provider.
Static Forms - Integrate HTML forms easily without any server side code. After user submits the form we'll send you content of the form to your registered email.

E-commerce

Flatmarket - Flatmarket is a free, open source e-commerce platform for static websites.
GoCommerce - A headless e-commerce for Jamstack sites.
Snipcart - A powerful shopping cart platform for developers.
Moltin - eCommerce API for developers.
Trolley - A shopping cart designed for the Jamstack.
Shopify - Shopify headless e-commerce solution.
Commerce.js - API-first eCommerce platform for developers.
CartQL - GraphQL Shopping Cart and Checkout API built for the Jamstack and to work with any framework and inventory.

Search

Algolia - The most reliable platform for building search into your business.
Lunr - Search made simple (on frontend).
CloudSh - Powerful search with a few lines of JavaScript.

Database

GraphQL - Query language for APIs and a runtime for fulfilling those queries with your existing data.
Graphcool - Open-source and self-hosted backend-as-a-service to develop serverless GraphQL backends.
FaunaDB - Relational NoSQL database with joins, indexes, and multi-region ACID transactions in the cloud or on-premise.
Jexia DataSet - REST API Schema & Schemaless cloud data storage with built-in validators, relations, aggregation functions.

File management

Jexia FileSet - REST API File manager for your application with indexing and extra functions.

Automation

Zapier - Trigger actions connecting more than 1000 apps together.
DataFire - DataFire is an open source framework for building and integrating APIs.

Serverless

Netlify Functions - Netlify lets you deploy Lambda functions without an AWS account, and with function management handled directly within Netlify.
Amazon Lambda - Lets you run code without provisioning or managing servers.
Microsoft Azure
Azure Functions - Serverless compute service that enables you to run code on-demand without having to explicitly provision or manage infrastructure.
Azure Logic Apps - Simplifies building automated scalable workflows that integrate apps and data across cloud services and on-premises systems.
Google Cloud
App Engine - Serverless application that completely abstracts away infrastructure so you focus only on code.
Cloud Functions - Serverless environment to build and connect cloud services.
Cloud Datastore - Highly-scalable NoSQL database with automatic sharding and replication.
Cloud Storage - Geo-redundant object storage for high QPS needs.
Cloud Pub/Sub - Geo-redundant real-time messaging for all message sizes and velocities.
Apigee - Enterprise API management for multi-cloud environments.
Endpoints - API management apps built on Google Cloud.
Cloud Dataflow - Serverless stream and batch data processing service.
BigQuery - Serverless data warehousing services that help you to deploy advanced cloud data warehousing solutions for your enterprise.
Cloud ML Engine - Serverless machine learning services that automatically scales built on custom Google hardware (Tensor Processing Units).
Serverless - Toolkit for deploying and operating serverless architectures.
Cloudinary - Serverless media (images/videos) management platform. Provides SDKs in every popular language and media widgets for Jamstack to make it easy to manage media, CDN, storage, transformations, and more.
imgix - Serverless image delivery and management service. imgix connects to where your images are stored (e.g. S3, GCS, web folder) and transforms, optimizes, and intelligently delivers your images using simple and robust URL parameters.
Elastictable - Backend as a Service solution built on AWS that's on a missing to increase the success rate of online businesses.

For a more complete list see Awesome Serverless.

Videos

The New Front-end Stack. JavaScript, APIs and Markup - Matt Biilmann.
Rise of the Jamstack - Mathias Biillman.
Jamstack: Silly name, serious stuff - Phil Hawksworth.
Git-based or API-driven CMS - Chris Macrae.
Jamstack Tutorial - Full site using Netlify & Hugo - freeCodeCamp.org.
Gatsby JS Crash Course - Traversy Media.
How We Got Here and The Future of the Web - Kyle Mathews.
Talks from all the Jamstack Conferences - Jamstack Conf.
How I Used React, Vue, & Node to Build a Single Jamstack App - Ahmad Awais.
React vs Vue, Gatsby vs Gridsome - building the same site - Ondrej Polesny.
WTF is Jamstack? - Ondrej Polesny.

Tutorials / Articles

Podcasts

Books

Modern Web Development on the Jamstack - By Mathias Biilmann & Phil Hawksworth (published by O'Reilly).
Hugo in Action
Jumpstart Jamstack Development - By Christopher Pecoraro and Vincenzo Gambino
The Jamstack Book - by Raymond Camden and Brian Rinaldi

License

A curated list of resources about WordPress as a headless CMS with Gatsby as a Static Site Generator (SSG).

A headless CMS is a back-end only content management system (CMS). Its purpose is to serve content and make it accessible via an API (e.g. REST or GraphQL).

A Static Site Generator (SSG) is a framework or setup, that helps you to generate static websites (HTML/CSS/JS). The source of your data can be anything from local files (e.g. text files or markdown) to APIs (e.g. REST, GraphQL).

Why Gatsby and WordPress?

WordPress is one of the most used CMS in the world and therefore many people already know how to work with it. The typical front-end approach with PHP-based templates is getting more and more problematic in an environment where performance is key. The approach to use WordPress as a headless CMS with normal API calls through JavaScript already exists, but also has the downside of having to make requests to the server and rendering depending on the response. This adds time to load. Gatsby instead, pre-renders the whole site at compile time and therefore the user gets a fully prepared static site on their first request, making it one of the best approaches for performance. Another huge benefit is security, as your WordPress instance can be anywhere, even locally and you don't need to expose any of it to the user. The static Gatsby site therefore, is not hackable. Find further arguments for pros and cons in the resources below.

Communities
Articles and Talks
Plugins
- WordPress
- Gatsby
Free Tutorials / Courses
- Written Tutorials
- Video Tutorials
Paid Tutorials / Courses
Starters
Themes

Communities

If you need help with anything, there are some highly active communities.

WPGraphQL - Slack Chat - Spectrum Chat - Twitter

Gatsby - Discord Chat - Reddit - Stack Overflow

Articles and Talks

List of articles and talks that elaborate on the technology stack in general.

2021.02: Announcing Gatsby’s New WordPress Integration
2021.02: Jason Bahl of WPGraphQL's role in the operating system for the web
2021.02: Torque News Drop: Jason Bahl and WPGraphQL
2021.02: Gatsby Launches New WordPress Integration, Expanding Support for Headless Architecture
2020.11: Announcing WPGraphQL v1.0
2020.07: My Long Journey to a Decoupled WordPress Gatsby Site
2019.06: Modern Web Development on the JAMstack - A report from Netlify about Modern Web Development on the JAMStack, published by O'REILLY.

Plugins

List of useful plugins to make WordPress and Gatsby work together. Ordered alphabetically.

WordPress

Essential Plugins

WPGraphQL - Documentation - WPGraphQL brings the power of GraphQL to your WordPress site.
WPGatsby - This plugin configures your WordPress site to be an optimized source for Gatsby.

WPGraphQL Extensions

WPGraphQL Cors - This FREE plugin from @kidunot89 and @byfunkhaus claims to enable authentication with WPGraphQL to “just work” by allowing you to set CORS headers that GraphQL will accept, which means WordPress default auth cookies can be accepted.
Total Counts for WPGraphQL - This FREE plugin from @builtbycactus exposes total counts to connections in the WPGraphQL Schema.
WPGraphQL Gutenberg - Exposes Gutenberg blocks to the WPGraphQL API.
WPGraphQL JWT Authentication - Extends the WPGraphQL plugin to provide authentication using JWT (JSON Web Tokens).
WPGraphQL Lock - Enables query locking for WPGraphQL by implementing persisted GraphQL queries.
WPGraphQL Meta - This FREE plugin from @robertorourke exposes meta registered via the WordPress register_meta API to WPGraphQL.
WPGraphQL Meta Query - Adds Meta_Query support to the WPGraphQL Plugin for postObject query args.
WPGraphQL Persisted Queries - This FREE plugin from @qz adds the ability to use Persisted Queries with WPGraphQL.
WPGraphQL Offset Pagination - This FREE plugin from @enshrined adds basic offset pagination as opposed to the standard Cursor based pagination that ships with WPGraphQL.
WPGraphQL Send Email - This FREE plugin from @Ash_Hitchcock allows you to send emails via a simple mutation. Includes the abilitty to restrict sending to trusted origins.

Extensions for that use other plugins with WPGraphQL

QL Search - An extension that integrates SearchWP into WPGraphQL.
WPGraphQL Content Blocks - This FREE plugin from the folks at QZ.com exposes a way to query HTML content from WordPress Posts and Pages as “Blocks” (not related to Gutenberg) to bring more structure to your queried content.
WPGraphQL Enable All Post Types (DalkMania) - This FREE plugin from @DalkMania automatically adds ALL registered post types to the WPGraphQL Schema.
WPGraphQL Enable All Post Types (TylerBarnes) - This FREE plugin from @tylbar automatically adds ALL registered post types to the WPGraphQL Schema.
WPGraphQL Google Schema - This FREE plugin from @izzygld261 adds Google Schema support to WPGraphQL.
WPGraphQL Gutenberg ACF - Exposes ACF blocks through GraphQL
WPGraphQL MB (MetaBox) - This FREE plugin from @DalkMania adds all registered metaboxes using metabox.io to the WPGraphQL Schema.
WPGraphQL MetaBox Relationships - This FREE plugin from @hsimah adds support for the metabox.io Relationships field to WPGraphQL (when also using his wp-graphql-metabox plugin).
WPGraphQL Polls - This FREE plugin from @andrenosouza allows you to interact with data from the WP-Polls plugin via GraphQL Queries and Mutations.
WPGraphQL Polylang Extension - Extends WPGraphQL schema with language data from the Polylang plugin.
WPGraphQL Tax Query - Adds Tax_Query support to the WPGraphQL Plugin for postObject query args (WP_Query).
WPGraphQL WPML - This FREE plugin from @rburgst extends the WPGraphQL schema with language data from the WPML plugin. In addition it turns off WPML default filters in order to be able to iterate over all posts regardless of language.
WPGraphQL for Advanced Custom Fields - Exposes Advanced Custom Fields to the WPGraphQL Schema.
WPGraphQL for BuddyPress - This FREE plugin from @RenatoNascAlves exposes BuddyPress data to WPGraphQL.
WPGraphQL for Carbon Fields - This FREE plugin from @matepaiva exposes fields registered using Carbon Fields to the WPGraphQL Schema.
WPGraphQL for Custom Post Type UI - This FREE plugin adds settings to Custom Post Type UI allowing you to set which Post Types and Taxonomies registered by CPTUI should display in the WPGraphQL Schema.
WPGraphQL for FacetWP - This FREE plugin from @hsimah exposes filters on WPGraphQL queries to allow for faceted search with FacetWP.
WPGraphQL for Gravity Forms - This FREE plugin from @KellenMace of @harness_up exposes @gravityforms data to WPGraphQL, allowing you to query for forms, fields, entries, and more.
WPGraphQL for Metabox - This FREE plugin from @hsimah exposes fields registered using the popular http://MetaBox.io to the WPGraphQL Schema.
WPGraphQL for Ninja Forms - This free plugin exposes forms created by the Ninja Forms plugin to the WPGraphQL Schema and allows for the forms to be submitted via GraphQL Mutations.
WPGraphQL for Posts 2 Posts - This FREE plugin from @KellenMace of @harness_up automatically creates GraphQL connections for all of your Posts 2 Posts connections.
WPGraphQL for SEOPress - This FREE plugin from @moon_meister exposes data managed by SEOPress to the WPGraphQL Schema, allowing for SEO data to be used in your headless applications.
WPGraphQL for WooCommerce - This FREE plugin exposes WooCommerce data to WPGraphQL allowing you to interact with your store’s data via GraphQL Queries and mutations.
WPGraphQl Yoast SEO Plugin - Exposes Yoast SEO data to the WPGraphQL Plugin.

Other helpful Plugins

Advanced Custom Fields - ACF PRO
Headless Mode - Headless mode sets up a redirect for all users trying to access the site. The only requests that are granted admission are ones that are either trying to access the REST API, the WP GraphQL API, or any logged-in user looking to access the headless install to edit or create posts.
Polylang
WP JAMstack Deployments - WordPress plugin for JAMstack deployments on Netlify (and other platforms).

Gatsby Plugins

Free Tutorials / Courses

Note: Since the release of gatsby-source-wordpress V4, it is the preferred over gatsby-source-graphql and therefore I will only list tutorials related to that approach.

Written Tutorials

2019.11: Guide to Gatsby WordPress Starter Advanced with Previews, i18n and more - A tutorial series starting with the basic setup of WordPress and Gatsby with WPGraphQL and then dives into more advanced subjects like deployments, previews, i18n and a page-builder like setup with ACF flexible cotent fields.
2019.08: Live Previews with WordPress and Gatsby - Tutorial showing how to use the theme’s higher order component to facilitate previews for WordPress posts and custom post types.
2019.08: Gatsby with WPGraphQL, ACF and Gatbsy-Image - A guide, that shows how to implement gatsby-image, so it can be used for WordPress media files.
2018.08: Headless WordPress + Gatsby + Netlify continuous deployment - Guide showing how to create a WordPress + Gatsby + Netlify setup in a few simple steps.

Video Tutorials

2019.11: 25+ Videos - Gatsby + WordPress (2019) Complete Course - The series focuses on how we can use WordPress as a headless CMS with a GraphQL schema to interface with. After setting up our WordPress site and theme, we'll move onto Gatsby and how we can use our new schema to generate content for our Gatsby site, programmatically generating pages, converting Gutenberg blocks to React components and finishing off the chapter with a focus on SEO in Gatsby.
2019.07: Gatsby + WordPress with WPGraphQL (with Jason Bahl) — Learn With Jason - In this stream, Jason Bahl teaches how to use WordPress with Advanced Custom Fields and WPGraphQL to create an powerful, flexible admin dashboard, then query and display that data in a Gatsby site.
2019.07: Crash Course: Headless WordPress with WPGraphQL, ACF, and React - In this video, Alex Young (WPCasts) goes over how to get a simple headless WordPress setup with WPGraphQL and React.
2019.06: Using WordPress with WPGraphQL - In this video you will learn how to use GraphQL with WordPress using an awesome plugin named WPGraphQL and some extra cool stuff like GraphQL + Advanced Custom Fields.
2019.04: WPGraphQL for ACF - Jason Bahl shows how to use WPGraphQL for Advanced Custom Fields.
2018.07: GraphQL with WordPress and Gutenberg - Jason Bahl - 2018 JavaScript for WordPress Conference - In this talk from the 2018 JavaScript for WordPress Conference, the Developer of the WP GraphQL Plugin, Jason Bahl, gives updated examples of how you can use GraphQL with WordPress and Gutenberg.

Paid Tutorials / Courses

List of paid courses.

2021.01: Building a Headless WordPress Site with Gatsby - This course is a step-by-step walk through using gatsby-source-wordpress plugin to create a fully functional headless Gatsby WordPress site with posts, pages, categories, tags, post navigation and other features.

Starters

List of project starters, that you can clone and start building upon.

Gatsby Starter - WordPress Twenty Twenty - A port of the WordPress Twenty Twenty theme to Gatsby using the new gatsby-source-wordpress@v4.
Gatsby + WPGraphQL Blog Example - Demo showing how to use WPGraphQL as the source for Gatsby Sites.
Gatsby + Headless WordPress + Netlify Starter - A Gatsby + WordPress starter for continuous deployment to Netlify.
Gatsby WordPress Starter Advanced - An advanced Gatsby + WordPress starter, that is built along a tutorial series and works with ACF flexible content fields to create content blocks/layouts.
Gatsby Starter Blog - Blog starter with enough features to be production ready out of the box.

Themes

List of gatsby-themes that work with WordPress as a source, which you can use in your Gatsby setup.

Twenty Nineteen Gatsby Theme - A port of the Twenty Nineteen WordPress Theme over to Gatsby.
Gatsby WordPress Publisher Theme - The Gatsby Publisher Theme allows you to create a headless (or decoupled) WordPress site. This theme will display all of your pages and posts in a static front-end built on React and Gatsby.

Contribute

Contributions welcome! Read the contribution guidelines first.

License

To the extent possible under law, Henrik Wirth has waived all copyright and related or neighboring rights to this work.

Awesome Mobile Web Development

All that you need to create a great mobile web experience.

Contribution Guidelines

Articles and Documentation
Books
Specifications from W3C for Enhancing Mobile Web Experience
Talks
Performance Auditing Tools
Platform Monitoring
Other Useful Tools and Libraries

Articles and Documentation

300ms Tap Delay, Gone Away - How to prevent 300 ms delay on tap.
60 FPS on Mobile Web - How to make a really fast mobile website (by Flipboard).
Adaptive loading: improving web performance on slow devices - How to optimize site for specific hardware and network constraints.
Animating the Mobile Web - A case study on achieving fast animations on mobile web (by Yelp).
Autofill: What web devs should know, but don’t - Everything you need to know about forms autofill.
Back/forward cache - How to optimize site for navigation through the history.
Benchmarking the global 5G experience - A case study on prolifiration of 5G networks.
Cache-Control for Civilians - How to setup Cache-Control to achieve the best reponse time.
CSS fix for 100vh in mobile WebKit - How to fix issue with 100vh in mobile WebKit.
Current Web on Galaxy Fold - An advices on web development for Galaxy Fold.
Designing a Dark Theme for OLED iPhones - On issues with dark themes on OLED displays and what to do with them.
Designing Websites for iPhone X - How to deal with "the notch" on iPhone X.
Developing Mobile Web Applications: When, Why, and How - The good high-level overview of mobile web development.
Enhance SMS-delivered code security with domain-bound codes - On additional security measures for 2FA.
Everyone has JavaScript, right? - A diagram that shows in which cases JavaScript can be unavailable.
Faster Web App Delivery with PRPL - On pattern for performant web applications.
Get Started with Remote Debugging Android Devices - Debug your web app on Adroid with Chrome DevTools.
Guidelines For Mobile Web Development - The compilation of good articles about mobile web development.
Hiding Videos on the Mobile Web - How to hide videos without an impact on mobile traffic.
How To Poison The Mobile User - An overview of negative practices on mobile sites.
How Web Content Can Affect Power Usage - What you can do with web app to achieve better battery life.
HTML attributes to improve your users' two factor authentication experience - On autocomplete attribute regarding 2fa.
Interaction Media Features and Their Potential (for Incorrect Assumptions - On detection of various input devices.
Learn AMP by Example - A hands-on introduction to Accelerated Mobile Pages focusing on code and live samples.
Loading web pages fast on a $20 feature phone - Best practices for building web pages for feature phones.
Measuring Network Performance in Mobile Safari - An advices on using Mobile Safari for measuring network performance.
Microbrowsers are Everywhere - On optimizing sites for messengers.
Mobile Performance Inequality Gap - Why you need to care of performance on cheap smartphones.
Mobile Search UX 8 Obstacles - Series of articles about mobile search UX.
Mobile Web Best Practices - A little bit out of date but still useful list of best practices for mobile websites from W3C.
Mobile Web Application Best Practices - The list of best practices for mobile web applications from W3C.
Mobile Web Development - Guideline (must read) from Mozilla about designing mobile websites.
Mobile Web Performance Checklist - Best practices for optimizing mobile web apps.
Observing Intersection Observers - An introduction to intersection observers.
Offline First (Awesome List) - The awesome list of offline-first stuff (Progressive Web Apps, Service Workers etc.)
Prevent Mobile Browser From Sleeping - How to prevent your phone from sleeping.
Responsive Web Design – What It Is And How To Use It - Overview of technics of responsive design.
Rules for Mobile Performance Optimization - An overview of techniques to speed page loading.
Self-Host Your Static Assets - Reason why you need to self-host your static assets.
The Impact of Web Performance - On performance as a key factor for the business.
The joy and challenge of developing for KaiOS - How to start developing for KaiOS.
Timing Out - A service worker strategy for dealing with lie-fi (a bad network connection).
Tips for making interactive elements accessible on mobile devices - List of advices on creating accessible mobile UI.
Touch Devices Should Not Be Judged By Their Size - Overview of interaction media features.
Web Content Accessibility Guidelines (WCAG) - Wide range of recommendations for making Web content more accessible.
Web Fundamentals - Guideline from Google about creating good mobile web experiences.
What Does A Foldable Web Actually Mean? - Musings on the impact of foldable phones on web.
Who Killed My Battery - An interesting paper about websites' power consumption.

Books

Brain Food Mobile Performance - Free small ebook on mobile performance from Awwwards.
Going Offline - Guide on building offline experience with service workers.
High-Performance Mobile Web: Best Practices for Optimizing Mobile Web Apps - Book about the performance of the web on mobile devices.
Mobile Design Pattern Gallery: UI Patterns for Smartphone Apps - UI patterns which can be useful for mobile web apps.
Mobile First - How to design sites for mobile devices (free online version).
Responsive Web Design - Book about responsive web design.

Specifications from W3C for Enhancing Mobile Web Experience

Battery API - On access to information about the battery.
Connection API - On access to information about connection.
Generic Sensor API - The spec for exposing sensor data.
Geolocation API - On access to geolocation.
HTML Media Capture - On user access to camera or microphone.
Payment Request API - On payment method with minimal integration.
Presentation API - On access to presentation displays.
Remote Playback API - On controlling remote playback of media from a web page.
Vibration API - On access to the vibration mechanism of the hosting device.
Visual Viewport API - On access to a visual portion of a screen excluding on-screen keyboards, areas outside of a pinch-zoom area etc..
Wake Lock Api - On access to wake lock request (prevents some aspect of a device from entering the power-saving state).
Web Bluetooth - On an API to discover and communicate with devices over the Bluetooth 4.
Web NFC API - On access to Near Field Communication capabilities of the device.
Web Notifications - On an API for end-user notifications.

Talks

Adaptive Loading - Improving web performance on slow devices - Overview of practices for adapting a site to hardware and network constraints, by Addy Osmani, Nate Schloss.
Fundamentals of Mobile Web Development - Overview of the best practices for mobile web development, by Matt Gaunt.
Future App Model: Advanced Service Worker - The glimpse on how to optimize web apps and sites using streams and service workers and other new APIs, by Jake Archibald.
Instant Loading: Building offline-first Progressive Web Apps - Introduction to service workers, by Jake Archibald.
Mobile Web Performance - What to do on your site to achieve the best possible mobile experience, by Estelle Weyl.
Mobile Web Performance Auditing - How to audit performance issues on the site, by Paul Lewis.

Auditing Tools

Lighthouse - Analyzing tool for web apps and web pages.
Mobile-Friendly Test - Tool for testing that your site is mobile-friendly.
PageSpeed Insights - The tool that analyzes your page and gives recommendations for increasing downloading speed.
PageSpeed - Web server modules that optimize your site automatically.
Site Speed Checker - Compare the speed of your mobile site to others.
Test Your Mobile Speed - The tool from Google that performs comprehesive speed check of the mobile site.
Webpagetest - Website speed test from multiple locations using real browsers and at real consumer connection speeds.

Platform Monitoring

Can I Use - State of support of various web features in browsers.
Mobile Browser Market Share - Market share between various platforms and countries.
Standards for Web Applications on Mobile - Current state of mobile-related W3C specifications.
What Web Can Do Today - What your browser capable of.

Other Useful Tools and Libraries

Browsersync - Time-saving synchronised browser testing.
Eruda - Console for mobile web browsers.
Interact.js - Drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers.
Fastclick - Removing of 300ms delay in old browsers.
Lozad.js - Highly performant, light and configurable lazy loader using IntersectionObserver API
React Dates - An easily internationalizable, mobile-friendly datepicker React library for the web.
Screen Sizes - A list of screen sizes of all popular smartphones.
Shiny - Shiny reflections for mobile websites.
Slideout - Standalone and lightweight navigation menu for your mobile web apps.
Swiper - The most modern mobile touch slider with hardware accelerated transitions.
Web Inspector Remote (Weinre) - Web inspector for debugging sites in non-mainstream browsers.
Web Starter Kit - A workflow for multi-device websites.
Workbox - JavaScript libraries for adding offline support to web apps.
WorkerDOM - Library to provide a full representation of the DOM inside of Web Workers.

License

To the extent possible under law, @myshov has waived all copyright and related or neighboring rights to this work.

Awesome Storybook

A curated list of awesome resources about Storybook's ecosystem :art:

Storybook is a frontend tool for building UI components faster and easier.

Contributions welcome. Add links through pull requests or create an issue to start a discussion.

Official resources
Community resources
Tutorials
Presentations
Blog posts
Examples
Addons

Official resources

Community resources

Twitter
Discord
Medium
DEV.to
Brand's materials - Materials for your articles and talks about Storybook.
Design system - Storybook's website design system.
Storybook Deployer - Package for deploying your storybook as a static site.
Documentation Primitives - Custom DocBlocks for Storybook Docs.

Tutorials

Learn Storybook - A set of tutorials to learn Storybook.
Practical Guide to Storybook-Driven Development - A tutorial on how to use the Storybook tool as a means of templating and driving forward your development efforts.
Adding Storybook Style Guide to a Create React App - A tutorial on how to add Storybook in an application generated with Create React App.
Build your components with Storybook - A tutorial on how to create your components and exposing them in a Storybook.
Storybook React with Full Dark Mode Integration - A tutorial on how to integrate Storybook’s dark mode toggle with your React components.

Presentations

Blog posts

How I manage to make my Storybook project the most efficient possible - A set of useful tips to help you manage a Storybook project.
Storybook 5.2 - World-class design systems infrastructure.
Storybook DocsPage - Beautiful documentation, instantly.
Storybook Docs sneak peek - Turning stories into living documentation.
Storybook 5.0 - A features' showcase about the biggest release to date.
Real-time accessibility testing with Storybook - A comprehensive overview of the accessibility testing tools offered in Storybook.
Using Storybook with VueJS - Learn how to build a component library with Vue and Storybook to create modular and reusable components.
Setting up Storybook for Preact - A handy guide allowing us to add storybook easily on a Preact project.
Setting up a Component Library with React and Storybook - Learn how to set up a component library with React and Storybook to create modular and reusable components that can be shared across projects.
Storybook - UI component development tool for React, Vue, and Angular (Article focusing on React) - A brief presentation of Storybook and how to setup on a React application.
Storybook vs Styleguidist - A comparison of the top UI component explorers.
Five Reasons to Use Storybook Tests - A complete walkthrough of different testing solutions for Storybook: Easy Cross-Browser Visual Checks, Interaction Testing and StoryShots for Snapshot Testing.

Examples

Addons

The official & community addons lists are available on the Storybook's Addon Page.

Contributing

Contributions welcome! Read the contribution guidelines first.

License

To the extent possible under law, Laurent Thiebault has waived all copyright and related or neighboring rights to this work.

Awesome Blazor

A collection of awesome Blazor resources.

Blazor is a .NET web framework using C#/Razor and HTML that runs in the browser with WebAssembly.

Contributions are always welcome! Please take a look at the contribution guidelines pages first. Thanks to all contributors, you're awesome and wouldn't be possible without you!

If you need to search on this list you can try this great website: Awesome Blazor Browser. Thanks @jsakamoto for this! Source code stars last commit .

Introduction
General
Templates
Sample Projects
Tutorials
Libraries & Extensions
Real-World applications
Videos
Articles
Podcasts
Presentations slides
Tooling
Books
E-Books
Courses
Community
Other Languages

C# Corner .NET Conference 2022 (January 24-26, 2022).

- Several session about Blazor, check out the schedule. - January 24-26, 2022 - Conference website.

Introduction

What is Blazor?

Blazor is a .NET web framework to build client web apps with C#.

Blazor lets you build interactive web UIs using C# instead of JavaScript. Blazor apps are composed of reusable web UI components implemented using C#, HTML, and CSS. Both client and server code is written in C#, allowing you to share code and libraries. More information on the official Blazor website.

Get started

To get started with Blazor, follow the instructions in the Blazor Get Started documentation.

Doing the Build a web app with Blazor learning session on Microsoft Learn can also be a good idea. Another great resource to start is the beginner serie by Jeff Fritz on Channel9 or YouTube.

General

ASP.NET Blog's archives - Archives of the ASP.NET blog about Blazor.
Blazor - Official website of Blazor, from Microsoft.
Blazor courses on Microsoft Learn - Blazor courses on Microsoft Learn.
Blazor-Dev gallery on .NET Foundation - Daily builds of the 'dev' branch of Blazor.
Blazor Extensions - Curated extensions for Microsoft ASP.Net Core Blazor.
Blazor University - Unofficial documentation website.
Demo - Official basic demo website.
Documentation - Official documentation, by Microsoft.
eShopOnBlazor - Migration of a traditional ASP.NET Web Forms app to Blazor, sample by Microsoft Architecture.
FAQ - FAQ.
GitHub repository - The official Blazor repository (which is the ASP.NET Core repository).
'Hello World' sample - 'Hello World' sample.
Introduction to ASP.NET Core - Introduction to ASP.NET Core.
Workshop - Build a complete Blazor app and learn about the various Blazor framework features along the way.
Blazor WebAssembly performance best practices - ASP.NET Core Blazor WebAssembly performance best practices, by Pranav Krishnamoorthy and Steve Sanderson.
themesof.net - .NET 6 planning process.
30 seconds of Blazor - Collection of useful snippets, inspired by the popular 30 seconds of JavaScript and React.

Templates

Blazor Hero - - Clean Architecture Solution Template for Blazor WebAssembly built with MudBlazor Components. This project will make your Blazor Learning Process much easier than you anticipate. Blazor Hero is meant to be an Enterprise Level Boilerplate, which comes free of cost, completely open sourced. Read the Quick Start Guide here.

Sample Projects

Authentication

BlazorBoilerplate - Real World Admin Dashboard / Starter kit with IdentityServer4 Material Design. Demo.
BlazorWithIdentity - A sample project showcasing a Blazor app using EF Core with Identity authentication.
Authentication with client-side Blazor - Authentication with client-side Blazor using WebAPI and ASP.NET Core Identity. Blog post.
TheIdServer - OpenID/Connect server base on IdentityServer4.
Blazor-WASM-Identity-gRPC - Blazor WASM, IdentityServer4 & gRPC with roles authorization.
Blorc.OpenIdConnect - The right way to use OpenID Connect on Blazor.
Blazor-WASM-AzureAD-gRPC - Blazor WASM, Azure AD, REST & gRPC.
Blazor-WASM-Auth0-gRPC - Blazor WASM, Auth0, REST & gRPC.
Quiz manager secured by Auth0 - This repository contains a Blazor WebAssembly application implementing a simple Quiz manager secured by Auth0. The implementation details are described in the following article: Securing Blazor WebAssembly Apps.
Blazor-WASM-Identity-gRPC-Alexa - Blazor WASM, IdentityServer4 , gRPC with roles authorization & Alexa Skill Backend.

Cloud

EventGrid Viewer Blazor - Blazor Server app that displays EventGrid messages in realtime & allows the ability to secure the app using Azure AD, KeyVault & Managed Identities.
FairPlayTube - Blazor Web Assembly app with .NET 5 Hosted API to teach how to create video sharing portals with Blazor, .NET and Azure.

CMS

Blogifier - ASP.NET Core Blogging application with Blazor Admin Dashboard. Demo.
eShopOnBlazor - Migration of a traditional ASP.NET Web Forms app to Blazor.
RapidCMS - A code-first, extensible Blazor app that generates a CMS for your own database.
JHipster.NET JHipster is a well-known platform for generating modern application in java world. JHipster provides a blueprints system that allows to override the default behavior of the generator. JHipster.NET is a blueprint that overrides the back-end part, originally generated in spring boot, by back-end in asp.net core. For the front-end all the common language can be used (angular, react), including Blazor.
BlazorShop - Simple shop application built with Blazor WebAssembly.
Atlas - A forum software built with ASP.NET Core Blazor WebAssembly.
StartBootstrap.Freelancer.Blazor - Freelancer is a bootstrap template ideal for small portfolio web sites. It's powered by Kentico Kontent - a headless CMS with a comprehensive ecosystem for .NET developers.
Umbraco9 & Blazor WASM Starter Site - A simple starter site for Umbraco v9, making use of Blazor WebAssembly with Tailwind CSS/UI. A project that I use to play around and experiment with Umbraco 9, Blazor WebAssembly, TailwindCSS, the Block List Editor, and several other concepts.

Games

BlazorGames - This project is a Blazor WebAssembly project where we design, model, implement, and play common board and card games. This website is deployed here: blazorgames.net.
AsteroidsWasm - Collection of .NET 5 C# applications consuming a single .NET Standard project running in: Blazor Client (WebAssembly), Blazor Server, Electron (via Blazor Server), WPF, WinForms, Xamarin. Demo.
Trains.NET - 2D game built with .NET and C# on a Twitch stream. Trains is available to play online at https://jamesformica.github.io/trains (Mirror at https://wengier.com/trains if that doesn't work).
DiabloBlazor - Blazor port of DiabloWeb, making it a double WebAssembly app: a WebAssembly (C#) PWA hosting a WebAssembly (C++) game. Demo.
Flappy Blazor Bird - Blazor Flappy Bird's port. [Wasm Demo] | [Multiplayer Demo].
Board Games - Fusion + Blazor sample and a fully functional web app allowing you to play real-time multiplayer board games. Demo.
BlazorPong - - Pong in Blazor server model and Wasm model using SignalR Core. Server Demo. Wasm Demo.
Minesweeper - Minesweeper using C# and Blazor WebAssembly.
ZXSpectrum - ZX Spectrum emulator running on Blazor WebAssembly. Demo.
SoccerPong - A soccer variant of classic Pong using Blazor WebAssembly. Demo.
ABlazorPong - A classic Pong in Blazor WebAssembly, with sounds, without a single line of Javascript. Demo.
Game of Life - Game of life.

Hybrid

Blazor + Electron - Host Razor Components inside an Electron shell. This allows for modern, high-performance cross-platform desktop apps built with .NET and web technologies.
Blazor + WebWindow - WebWindow is like Electron, but without bundling Node.js or Chromium, and without most of the APIs. WebWindow source code. Blazor + WebWindow sample here.
desktoploveblazorweb - desktoploveblazorweb is a cross-platform desktop application template (mobile support in the future) based on Blazor Server, which uses an in-process ASP.NET Core server + in-process OS WebView component.
Blazor + Umbraco Heartcore - Example of using Umbraco Heartcore with Blazor.
Blazorade Teams - A Blazor component library that is designed to be used when building applications for Microsoft Teams. Be sure to also check out the initial announcement for Blazorade Teams.
GraphQL in ASP.NET Core using HotChocolate - GraphQL in ASP.NET Core using HotChocolate. Source code of this tutorial: Consuming GraphQL API In ASP.NET Core.
RemoteBlazorWebView - RemoteBlazorWebView enables you to interact with the user interface of a program developed with either the BlazorWebView WPF control or WinForms control using a web browser.
Photino - Build native, cross-platform desktop apps that are lighter than light. Photino is a lightweight open-source framework for building native, cross-platform desktop applications with Web UI technology.

IoT

PresenceLight - PresenceLight is a solution to broadcast your various statuses to a Phillips Hue or LIFX light bulb. Some statuses you can broadcast are: your availability in Microsoft Teams, your current Windows 10 theme, and a theme or color of your choosing. Blog post. Demo video.
Meadow Weather - In this sample, a Meadow microcontroller polls data from a LM35 temperature sensor. That data is sent via HTTP request to an API controller endpoint and stored in a database where it can be visualized in a chart using a Blazor web app.

Logging

Logging.Samples - Samples for .NET Core and ASP.NET Core logging using various logger frameworks.

Machine Learning

Scalable sentiment analysis - A sample ables to make sentiment analysis prediction/detection of what the user is writing in a very UI interactive app (Blazor based) in the client side and running an ML.NET model (Sentiment analysis based on binary-classification) in the server side.
optimizer.ml - A "server-less" general purpose optimization suite for algorithm parameters. Also provides offline optimization of Quantconnect Lean trading algorithms. Demo (https://optimizer.ml).
Baseball Machine Learning Workbench - A web application that showcases performing what-if analysis using in-memory Machine Learning models. Live demo.
BlazorML5 - ML5 Machine Learning for Blazor with JSInterop mechanism.

Mobile

Mobile Blazor Bindings - Experimental Mobile Blazor Bindings - Build native mobile apps with Blazor.

Rapid Development Framework

WalkingTec.Mvvm (WTM) - A development framework based on .NET Core and EF. It supports Blazor, Vue, React and LayUI with one click code generation for CRUD, Import/Export, etc. Website.

ToDos

Bolero.TodoMVC - A TodoMVC clone using Bolero.

Others

Flight Finder - Flight Finder.
Oqtane Framework - Modular Application Framework for Blazor.
LinqToTwitter Blazor sample - LINQ Provider for the Twitter API (Twitter Library).
BlazorFileReader - Read-only File streams in Blazor. Demo.
eShopOnBlazor - Migration of a traditional ASP.NET Web Forms app to Blazor.
BlazorChatSample - Blazor chat demo using SignalR JS client with interop.
BlazorCRUD - Sample line of business application that illustrates key features of Blazor. Demo.
Money - A money manager implemented using CQRS+ES. Demo.
CleanArchitecture - Clean Architecture Template for Blazor WebAssembly Built with MudBlazor Components.
Blazor Weather - A Blazor Weather sample app that shows the current weather for your current location and a collection of pinned locations. Demonstrated at .NET Conf 2019 by Daniel Roth. Demo.
NethereumBlazor - Ethereum blockchain explorer and simple wallet.
BlazorDynamicList - Dynamic component binding for a generic list. Demo.
WebSocketPage - Web Socket in Blazor. demo.
Planetary Docs - This repository is intended to showcase a full application that supports Create, Read, Update, and Delete operations (CRUD) using Blazor (Server), Entity Framework Core and Azure Cosmos DB. This repository is upgraded to .NET 6 and EF Core 6.
FFmpegBlazor - FFmpegBlazor provides ability to utilize ffmpeg.wasm from Blazor Wasm C#. ffmpeg.wasm is a pure Webassembly / Javascript port of FFmpeg. It enables video & audio record, convert and stream right inside browsers.
Planning Poker – An app to play Planning Poker for distributed teams. The app is implemented using Blazor and shows how to switch between client-side and server-side mode with a configuration change. Demo.
C# Regex Tester online - Online tool for verify .Net regex syntax. (Demo).
C# Regex Online tool - Online tool for verify .Net regex syntax, see splits list, table etc. (Demo).
Blazor Tour of Heroes - Blazor Tour of Heroes, using Blazor-State(State Management architecture utilizing the MediatR pipeline) for the Redux style state.
Cognitive Studio - PWA enabled app used to showcase what Cognitive Services can do, built-in client-side Blazor. Demo.
Blazor Wake-on-LAN - Wake-on-LAN app for local networks. Blazor Server + EF Core + DI + CI.
Dcidr - Blazor WebAssembly decision-making app with PWA (offline), localstorage, and Excel export. Demo.
BlazingWaffles - A Blazor app that wraps Waffle Generator. The generator outputs readable gibberish that can be used in place of Lorum Ipsum. Demo.
Cærostris - A Blazor Spotify client.
Nethereum Playground - Compile and run Nethereum snippets on the browser. You can run it here: http://playground.nethereum.com/.
Realtime chat app with WebAssembly - Real-time chat application with SignalR, .NET and Blazor/WebAssembly.
BlazorConduit - The RealWorld example app written using Blazor. Demo.
Blazor MealPlanner - MealPlanner is developed in Blazor Web Assembly PWA (offline), The app is using local storage for storing the meal plans. (Demo AzureStaticWeb) (Demo Github Pages)
BlazorPowerHour - The Blazor Power Hour show index, by Ed Charbeneau.
BlazorTemplates - A collection of blazor templates, designed for common use cases for new projects.
Modulight - A light modular framework aimed to be low intrusive based on dependency injection for Blazor. Support lazy loading and prerendering for javascript, css stylesheets, and assemblies. Built with the new features introduced in .NET 5 such as WebAssembly Lazy Loading and Javascript Isolation.
Time Mage - A Blazor PWA which has Timers, a Stopwatch, and Interval Timers. Demo.
TypinExamples - A sample project that demonstrates the usage of Typin framework with a Blazor SPA application (Xterm.js and custom web workers implementation in C# to emulate terminal experience in browser). Live demo.
Unofficial eShopOnContainers - Unofficial Blazor WebAssembly client for eShopOnContainers.
Picat Language IDE - IDE for the Picat logic programming language based on the Monaco Editor. Demo.
UpBlazor - - Blazor Server integrating with Up bank (an Australian digital bank), to assist users with budgeting and to gain powerful future insights. Uses Clean Architecture and Marten DB.
WordTester - An application for learning foreign words using flashcards and spaced repetition.

Tutorials

Blazor workshop - Blazor app building workshop by .NET Foundation, Blazzing Pizza.
Build the Game of Life with Blazor - August, 2021 - Build the Game of Life with Blazor. Source code .
Blazor Meadow Web API Weather Chart.js - June 2021 - Display sensor data using Chart.js in a Blazor application. Source code .
Setup Blazor app using ASP.NET Core Empty project template - May, 2021 - Setup Blazor app using ASP.NET Core Empty project template.
Tetris in Blazor - April, 2021 - Part 1, Part 2, Part 3, Part 4, Part 5, Part 6. Source code .
Using MudBlazor to Create Reach and Functional Product’s Details Page - April 27, 2021 - Using MudBlazor to Create Reach and Functional Product’s Details Page.
Building a Dashboard - April 23, 2021 - Tutorial on how to build a dashboard.
Rendering dynamic content in Blazor Wasm using DynamicComponent - April 20, 2021 - Rendering dynamic content in Blazor Wasm using DynamicComponent.
Blazor Material Table – Server-Side Paging, Searching, Sorting - April 19, 2021 - Blazor Material Table – Server-Side Paging, Searching, Sorting.
Setting dynamic metadata for Blazor Web Assembly - March 23, 2021 - This post shows how HTML header meta data can be dynamically updated or changed for a Blazor Web assembly application routes hosted in ASP.NET Core. This can be usually for changing how URL link previews are displayed when sharing links. Source code .
How to use gRPC-Web with Blazor WebAssembly on App Service - March 15, 2021 - How to use gRPC-Web with Blazor WebAssembly on App Service.
How to deploy Blazor WebAssembly to Cloudflare - March 14, 2021 - How to deploy Blazor WebAssembly to Cloudflare. Source code .
Overriding components in Blazor - February 27, 2021 - If you use a component library in your project, you might want to override a component somewhere deep down in the component hierarchy without having to override the whole hierarchy.
Build a Blazor 'Copy to Clipboard' component with a Markdown editor - February 18, 2021 - Let's build a 'Copy to Clipboard' component, where we can copy Markdown content to the clipboard.
Blazor on Desktop - February 17, 2021 - This post explores how to make Blazor web apps run on Desktop.
Using source generators to generate a menu component in a Blazor app - February 16, 2021 - Using source generators to generate a menu component in a Blazor app.
The tablet app – part 1 - February 12, 2021 - Making an espresso machine smart, with .NET and Mobile Blazor Bindings.
Download Files from Azure with .NET Core Web API and Blazor WebAssembly - February 9, 2021 - In this article, we are going to learn how to download files from Azure using ASP.NET Core Web API as the server-side project and Blazor WebAssembly as the client-side. This article is a continuation of a previous one where we learned about uploading files to Azure. In that article, we also created Azure storage, so if you don’t have one created, you can do it following the instructions from the mentioned article. Source code .
Using source generators to find all routable components in a Blazor WebAssembly app - February 9, 2021 - The previous post described a way to find all the "routable" components in a Blazor app using reflection. This post shows an alternative approach using a source generator.
Custom Xamarin Controls with Blazor Mobile Bindings - February 8, 2021 - Blazor Mobile Bindings is exciting, but also encourages reusability. We take a look as how to wrap custom Xamarin.Forms UI as Blazor components.
Create a Blazor Server app that uses the Microsoft identity platform for authentication - October 2020 - Tutorial by Microsoft. Blazor Server provides support for hosting Razor components on the server in an ASP.NET Core app. In this tutorial, you learn how to implement authentication and retrieve data from Microsoft Graph in a Blazor Server app with the Microsoft identity platform.
Consuming GraphQL API In ASP.NET Core - January, 2021 - Consuming GraphQL API In ASP.NET Core: Part 1, Part2. Source code .
Prerending a Blazor WebAssembly app to static files, without an ASP.NET Core host app - January 26, 2021 - This post describes how you can prerender all the pages in a Blazor WebAssembly app, without requiring a host app. That means you can still host your Blazor WebAssembly as static files using GitHub Pages or Netlify, without requiring a backend server. Source code .
Authentication in Blazor WebAssembly Hosted Applications - January 22, 2021 - Authentication in Blazor WebAssembly Hosted Applications, by Code Maze. Source code .
Blast Off with Blazor: Build a search-as-you-type box - January 14, 2021 - This post shows how to build a quick search box that filters our images.
Boids in your Browser with Blazor - January 8, 2021 - How to model graphics in C# and render them on a HTML Canvas with JavaScript. Source code .
Blazor WebAssembly I18n from Start to Finish - January 7, 2021 - Blazor is a strong C#-based framework from Microsoft that allows us to create an interactive, client-side web user interface (UI) using .NET. In this tutorial, we will explore how to implement internationalization (i18n) in a Blazor WebAssembly app.
Pre-render Blazor WebAssembly at build time to optimize for search engines - January 3, 2021 - Pre-render Blazor WebAssembly at build time to optimize for search engines.
Archives - 2020,2019, 2018.

Libraries & Extensions

Reusable components like buttons, inputs, grids and more. See also the Blazor component bundles feature comparison chart.

Component bundles

FAST - FAST is a collection of technologies built on Web Components and modern Web Standards, designed to help you efficiently tackle some of the most common challenges in website and application design and development. FAST & Blazor documentation.
Ant Design Blazor - A set of enterprise-class UI components based on Ant Design and Blazor. (Docs as Demo).
MatBlazor - Material Design components for Blazor. (Demo).
Blazorise - Components for Blazor with support for Bootstrap, Bulma, AntDesign and Material CSS. (Bootstrap Demo), (Bulma Demo), (AntDesign Demo), (Material Demo).
MudBlazor - MudBlazor is an ambitious Material Design component framework for Blazor with an emphasis on ease of use and clear structure. It is perfect for .NET developers who want to rapidly build web applications without having to struggle with CSS and Javascript. MudBlazor, being written entirely in C#, empowers them to adapt, fix or extend the framework and the multitude of examples in the documentation makes learning MudBlazor very easy. Documentation. Demo.
Radzen.Blazor - Native UI components for Blazor. DataGrid, DataList, Tabs, Dialog and more. (Demo).
BootstrapBlazor - Reusable bootstrap components for Blazor. (Docs as Demo).
BlazorStrap - Material Design components for Blazor. Bootstrap 4 components for Blazor (Demo).
FAST Blazor - A lightweight wrapper around Microsoft's official FluentUI Web Components for use with .NET 6.0 Razor views & Blazor. (Samples & demo).
Element-Blazor - A blazor component library using Element UI. API imitates Element, CSS directly uses Element's style, HTML structure directly uses Element's HTML structure. Blazor WebAssembly Version demo. Blazor WebAssembly Version PWA Mode demo.
BlazorFluentUI - Simple port of FluenUI/Office Fabric React components and style to Blazor. Client-side demo (WebAssembly). Server-side demo (SignalR).
ComponentOne Blazor UI Components - External link. A fast datagrid, listview, input and other native Blazor components for server and client-side apps.
DevExpress Blazor UI Components - A set of native UI Blazor components (including a Data Grid, Pivot Grid, Scheduler, and Charts) for both Blazor server-side and Blazor client-side platforms.
BootstrapBalzor - Reusable bootstrap components for Blazor. (Docs as Demo).
Syncfusion Blazor UI Components - The most comprehensive native Blazor component library including Data Grid, Charts, Scheduler, Diagram and Document Editor components. (Demo).
ADMINLTE - ADMINLTE for Blazor is a collection of reusable components, with which you can easily develop digital services as a designer or developer. Think of buttons, form elements and page templates. This project adapts ADMINLTE 3 so the components can be used from dotnet core Blazor.
Blazority - Blazor component library based on the Clarity UI design. 30+ components including Datagrid and Tree-view (Docs & Demos).
Material.Blazor - An alternative Material Theme Razor Component Library. Material.Blazor focuses sharply on giving you pure markup from Google's material-components-web - we don't try to sit between you and your use of Google's CSS and SASS because they do it better than we ever could. We also have some cool "plus" components. See our demo and comprehensive documentation.
Majorsoft Blazor Components - Majorsoft Majorsoft Blazor Components is a set of UI Components and other useful Extensions for Blazor applications. All components are free and available on NuGet. The main goal of this project is to provide an easy to use, feature reach set of customizable components with other useful extensions. NuGet Demo app Docs.
LoreSoft.Blazor.Controls - Auto-complete (Typeahead) textbox with local and remote data source, for both Client-side and Server-Side Blazor. Also has DateTimePicker and ToggleSwitch. Demo.
MComponents - Open Source MIT Blazor Components: Grid, Select, Wizard etc.
PanoramicData Blazor UI Components - An open source library of Blazor components including Table, Tree, ToolBar and FileExplorer. Demo.
HAVIT Blazor - Bootstrap 5 components + additional components built on top of Bootstrap 5 (grid, autosuggest, message-boxes, atc.). Enterprise project template with gRPC code-first client/server communication, localization and more. Interactive documentation & Demos.
Blazority - Blazor component library based on the Clarity UI design. 30+ components including Datagrid and Tree-view (Docs & Demos).
Telerik UI for Blazor - External link (telerik.com). A native set of UI components for Blazor, including grid, charting, and calendar components.
Start Blazoring - A Blazor starter template built using your choice of Blazorise or MudBlazor, with more UI library integration coming. It offers a myriad of features such as user registration, login, password reset, two factor; user management, roles, permissioning; background workers, logging, caching, email templates, localization and many more.
jQWidgets Blazor UI Components - Feature-complete UI components including DataGrid, Scheduler, Charting, Pivot and more. Website.
Smart UI for Blazor - Component library for Blazor including Grid, Kanban, Gantt, Chart, Docking, Pivot and more. Website.
TabBlazor - Blazor Admin theme built on top of Tabler UI. Minimal javascript. Demo.
Blazor.Ionic - Ionic framework integration for Blazor.
Blazor Controls Toolkit - Complete toolset for implementing commercial business applications. It includes the equivalent of all Bootstrap JavaScript components, all html5 input types with widgets fallbacks, advanced editable components like DataGrid, TreeView, DetailView, ModalDetail, DetailList. All components have default customizable templates, and support virtualizazion and Drag & Drop. Component rendering is meta-data driven, so component configuration is in part automatic, and in part can be driven with data annotations. The toolset includes also query tools, to issue complex local or remote queries, changes-tracking tools to send only the changed records to the server, advanced validation attributes, globalization tools, "Behaviors" that modify existing components, state management and save, and more.

Individual components

API

Canvas - HTML5 Canvas API implementation for Microsoft Blazor.
Head Element Helper - <Title> and <Meta> components for changing the document titile and meta elements, with server-side prerendering support for SEO/OGP. (Demo).
Blazor.Canvas - Wrapper library around the HTML canvas API written in C# (no JS dependency) (Demo).
BlazorGooglePay - Blazor wrapper around Js Google Pay, library based on BrowserInterop.
BlazorIntersectionObserver - This is a wrapper around the Intersection Observer API.

Charts

ChartJs.Blazor - Brings ChartJs charts to Blazor.
GG.Net Data Visualization - Interactive and flexible charts for Blazor Web Apps. Taking its inspiration from the highly popular ggpplot2 R package, GG.Net provides natively rich features for your Data Analysis Workflow. Build publication quality charts with just a few lines of code. Website.
Blazor-ApexCharts - Blazor wrapper for ApexCharts. Demo.
Plotly.Blazor - Brings the charting library plotly.js with over 40 chart types to Blazor (Demo).

CSS

BlazorSize - BlazorSize is a JavaScript interop library for Blazor that is used to detect the Browser's current size, change in size, and test media queries.
BlazorAnimation - A Blazor component based on animate.css to easly animate your content. Demo.

Datagrids / tables

Grid.Blazor - Grid component with CRUD forms for Blazor and ASP.NET MVC, supporting filtering, sorting, searching, paging, subgrids and others (Demo).
BlazorGrid - Virtualized data grid component with lean markup, focused on displaying remote data. (Demo & documentation).
BlazorTable - A Table Control for Blazor with sorting, paging, filtering and more (Demo).
WpfGridLayout.Blazor - Provide a simple way to create a grid layout like WPF in Blazor.

Date & time

BlazorDateRangePicker - A date range picker component library for Blazor. Demo.
FlatpickrBlazor - Flatpickr Blazor interop.Demo.
Toast_UI.Blazor_Calendar - A fully featured calendar UI component for viewing and creating events, tasks, and milestones. Month, week, and daily views. Blazor Calendar wraps the fully featured Toast UI Calendar JS library. MIT License. Sample project.

Maps

BlazorGoogleMaps - Blazor interop for GoogleMap library.

Markdowns

RazorComponents.Markdown - A razor component for Markdown rendering which supports LaTeX, Mermaid diagram, code highlighting and extensions based on Markdig.
Blazor Markdown - A Blazor Markdown component that enables you to include Markdown files in your server-side Blazor apps.

Blazored.Modal - A JavaScript free modal library for Blazor and Razor Components applications.
Blazored.Toast - A JavaScript free toast library for Blazor and Razor Component applications.

Tabs

BlazorXTabs - An extended tabs component library providing various tab features for Blazor.

Testing

bUnit - a testing library for Blazor components - A testing library for Blazor Components. You can easily define components under test in C# or Razor syntax and verify outcome using semantic HTML diffing/comparison logic. You can easily interact with and inspect components, trigger event handlers, provide cascading values, inject services, mock IJsRuntime, and perform snapshot testing.
Verify.Blazor - a snapshot testing library for Blazor components - A snapshot testing library for Blazor Components. Supports rendering Blazor Components to a snapshot file via bunit or via raw Blazor rendering.

Others

Stl.Fusion - .NET Core and Blazor library that attempts to dramatically improve the way we implement real-time and high-load services by introducing a novel kind of "computed observables" - immutable, thread-safe, and most importantly, almost invisible for developers. Samples. Overview.
BlazorContextMenu - A context menu component for Blazor (Demo).
BlazorInputFile - A file input component for Blazor applications, by Steve Sanderson.
Blazored.Typeahead - Auto-complete textbox with local and remote data source, for both Client-side and Server-Side Blazor.
Blazor-DragDrop - Easy-to-use Drag and Drop library for Blazor.
Blazored.Menu - A JavaScript free menu library for Blazor and Razor Components applications.
Blazor LoadingBar - Loading bar UI for Client-Side Blazor application.
Z.Blazor.Diagrams - A fully customizable and extensible all-purpose diagrams library for Blazor, inspired by the popular react-diagrams library, with many additions. Demo.
Excubo.Blazor.Diagrams - Interactive diagram component (flowcharts, UML, BPMN, ...), customizable and extensible according to user needs (node types, styles). Demo.
BlazorDownloadFile - Blazor download files to the browser from c# without any JavaScript library or dependency.
Blazor.SignaturePad - A Blazor component library that utilizes Szymon Nowak's javascript library Signature Pad to implement smooth signature drawing on a HTML5 canvas.
Blorc.PatternFly - Blazor wrappers for PatternFly. To view the latest develop branch in action, visit the demo app.
BlazorTransitionableRoute - Allows current and previous route to exist enabling transition animations of UI/UX design systems.
Blazor-Dom-Confetti - Celebrate success with dom 🎉confetti🎉 on Blazor projects. Two versions, dom-confetti wrapper and native blazor 100% JS free.
TwitterShareButton - A Tweet Button component for Blazor.
Blazor.LoadingIndicator - Simple to use loading indicator helper library.
BlazorTypography - A powerful toolkit for building websites with beautiful design (Demo).
Razor.SweetAlert2 - Blazor component implementing the popular SweetAlert2 JavaScript Library.
BlazorMonaco - Blazor component for Microsoft's Monaco Editor which powers Visual Studio Code. (Demo).
Blazor.Grids - Component library for CSS grids with extra features, such as moving and resizing interactively. Create your own dashboard with ease. (Demo).
Blazor.TreeViews - Component library for tree views. (Demo).
DnetOverlay - Agular CDK Overlay implementation for Blazor.
GEmojiSharp.Blazor - GitHub Emoji for Blazor (Demo).
Texnomic.Blazor.hCaptcha - hCaptcha Component for Server-Side Blazor.
BlazorDialog - Dialog component as a service for Blazor. Demo.
BlazorWheelZoom - Zoom and move image with Blazor using mouse wheel and mouse drag - minimal javascript. Demo.
AdvancedBlazorSelect2 - Simple wrapper for Select2 with full support of databases and custom web APIs.
BlazorLocalizationSample The default project template localized using XLocalizer with online translation and auto resource creating.
TimeCalc - An app to help keep track of speed cubing averages on the fly using Blazor WebAssembly. Demo.
BlazorSliders - Create multiple panels separated by sliding splitters.
BlazorTimeline - Responsive, vertical timeline component.
BlazorTypewriter - A typewriter effect for Blazor.
BlazorMergely - An implementation of Blazor diff and merge component based on Mergely with server side support.
MetaMask.Blazor - A library that provides an easy helper to use MetaMask with Blazor WebAssembly.
Blazor File Drop Zone - Surround an "input type=file" element by this Blazor component to making a zone that accepts drag and drops files (Demo).

Tools & Utilities

Libraries and extensions for state management, cookies, local storage and other specific tools. * Fluxor - GitHub stars last commit Zero boilerplate Flux/Redux library for DotNet. * SignalR - SignalR Core implementation for Blazor. It uses the JavaScript client. * Blazored.LocalStorage - A library to provide access to local storage in Blazor applications. * Storage - HTML5 Storage API implementation for Microsoft Blazor. * Blazor-State - GitHub stars last commit Manage client side state in Blazor using MediatR pipeline. * bUnit - a testing library for Blazor components - A testing library for Blazor Components. You can easily define components under test in C# or Razor syntax and verify outcome using semantic HTML diffing/comparison logic. You can easily interact with and inspect components, trigger event handlers, provide cascading values, inject services, mock IJsRuntime, and perform snapshot testing. * Logging - GitHub stars last commit Microsoft Extension Logging implementation for Blazor. * TextCopy - A cross platform package to copy text to and from the clipboard. Supports Blazor via the Clipboard Browser API. * CssBuilder - CssBuilder is a Builder pattern for CSS classes to be used with Razor Components. * Notifications - GitHub stars last commit HTML5 Notifications API implementation for Microsoft Blazor. * Blazor.Polyfill - Polyfills for Blazor (for Internet Explorer 11 support and some other browsers). * Blazor I18n/Localization Text - stars Localizing contents text in Blazor (Demo). * BlazorGoogleMaps - stars Blazor interop for GoogleMap library. * BlazorWorker - stars last commit Library for creating DotNet Web Worker threads/multithreading in Blazor. Live demo. * MvvmBlazor - stars BlazorMVVM is a small framework for building Blazor and BlazorServerside apps. With it's simple to use MVVM pattern you can boost up your development speed while minimizing the hazzle to just make it work. * Blazor.BrowserExtension - stars last commit Develop browser extensions/addons with Blazor WebAssembly. Tested with Google Chrome, Mozilla Firefox and MS Edge. * Cortex.Net - GitHub stars State management like MobX for .NET and Blazor. Documentation. * Blazor Analytics - Blazor extensions for Analytics. * Blazor PDF - stars last-commit Generate de PDF document with iTextSharp from a Blazor Server App. * Blazor SVG Helper - stars last commit Create SVG elements with children (circle, rectangle, image, text, and others) and render with RenderTreeBuilder. * BlazorRouter - stars BlazorRouter is an awesome router inspired by react-router, providing declarative routing for Blazor. * DataJuggler.Blazor.FileUpload - stars Wrapper for Steve Sanderson's BlazorFileInput component. * BlazorPrettyCode - Blazor Code Component for documentation sites. Demo. * Blazor.EventAggregator - Lightweight Event Aggregator for Blazor (Razor Components). * Blazor Gamepad - Provides gamepad API access for Blazor. * Blazor Hotkeys - A library to provide configuration-centric keyboard shortcuts for Blazor. * BlazorRealm - Redux state management for Blazor. * Blazor.LocalFiles - Open files in your browser and load into Blazor. * Blazor.SpeechSynthesis - last commit A library to provide Speech Synthesis API access for Blazor. * Blazor BarCode – A barcode library for Blazor using barcode fonts. * BlazorState.Redux - Develop Blazor apps with Redux. * Howler.Blazor - A Blazor JSInterop wrapper for Howler.js, an audio library. * jsMind.Blazor - A Blazor JSInterop wrapper for jsMind, a MindMapping tool. * Blazor Highcharts - last commit A port of the popular Highcharts library. Demo. * Blazor.LazyStyleSheet - Lazy loading for CSS style sheets. * Blazor.ScriptInjection - stars Smart script tags in Blazor components, ideal for lazy loading of javascript files. * DnetIndexedDb - Blazor Library for IndexedDB DOM API. * BlazorIndexedDbJs - last commit BlazorIndexedDbJs is a wrapper arround IndexedDB DOM API, supports Blazor WASM and Server. * Blazor-Color-Picker - Opens a palette with the Material colors for Blazor application. * Blazor_EmojiFilePicker - Bootstrap Text-Input with Smiley- and File-Support for Blazor. * Blazor Library Asset Helper - last commit A VISX extension that can list all JS and CSS assets from Nuget package razor libraries you are using in your Blazor app. It will generate all the <script> and <link> tags for your HTML page for you to copy/paste. Available on the Visual Studio Marketplace. * Blazm.Bluetooth - A Blazor library for connecting to devices using Bluetooth. * WebBluetooth - last commit Blazor service for the experimental WebBluetooth functions. Based on Blazm.Bluetooth. * BlazorApplicationInsights - Application Insights for Blazor web applications. * BracketShow.BlazorNavigationManagerExtensions - Simple set of extensions for the Navigation Manager to simplify its usage for things we are likely to do in most of our Blazor applications. * BlazorX.NavigationState - last commit BlazorX.NavigationState provides a set of utilities that allow you to observe and bind query strings directly to Blazor components. * Blazor Printing - last-commit Print and save PDF documents with a native print dialog in a Blazor Server or client Application. * XLocalizer - GitHub Stars last commit Easily localize Asp.Net Core web applications with online translation and auto resource creating. * BlazorTemplater - Use .razor components to render HTML strings for email content. * MediaSession.Blazor - last-commit A Blazor JSInterop wrapper for Media Session API. The Media Session API provides a way to customize media notifications. (Demo).

Others

Blazor Extensions Home - Home for Blazor Extensions.
Bolero - Blazor for F# with hot reloaded templates, type-safe endpoints and routing, remoting, and much more.
BlazorFabric - Blazor port of Microsoft UI Fabric with fluent design. (Demo).
BlazorWebView - Blazor WebView control for WPF, Android, macOS, iOS. Run Blazor on .NET Core and Mono natively inside a Webview. Documentation.
WebSocketHelper - Helper for Web Socket in Blazor.
BlazorLazyLoading - Production ready lazy loading implementation. Full lazy loading support for WASM and Server (pages, components, dlls) with abstractions to implement modularization if you wish (custom endpoints, custom manifests, etc).
SpotifyService - A high-level Spotify API library for Blazor WebAssembly projects that enables Spotify playback in the browser, manages OAuth 2.0 authorization, provides easy access to the Spotify Web API and uses IndexedDB caching.
Bionic - An Ionic CLI clone for Blazor projects.
BlazorFileSaver - Blazor Component wrapper for FileSaver.js (Demo).
Blazor.DownloadFileFast - Fast download of files to the browser from Blazor without any javascript library reference or dependency. (Demo).
Blazor.DynamicJavascriptRuntime.Evaluator - Execute dynamic object expressions as Javascript in Blazor client-side apps.
Blazor.AdaptiveCards - Adaptive Cards for Blazor. Documentation.
EventHorizon Blazor TypeScript Interop Generator - This project takes in a TypeScript type definition file and creates a .NET Core project that will work with the provided Interop abstraction project.
Generators.Blazor - Generators.Blazor is a source generator for improving performance in Blazor. The project also contains analyzers to detect common issues in Blazor apps.
BlazorZXingJs - Barcode/QRCode Reader and QRCode writer components. This is a Blazor wrapper around zxing-js library. It supports variety of barcode and 2d code types.

Real-World applications

Try .NET - Try .NET provides developers and content authors with tools to create interactive experiences.

Videos

C# Corner .NET Conference Day 1 - January 24, 2022 - The first day of the conference kicks off with a keynote session by Scott Hunter. Day one is focused on front-end technologies (Blazor). Conference website.
ASP.NET Community Standup - Blazor WebAssembly on .NET 6 - January 11, 2021 - Join Blazor creator Steve Sanderson for a special look at Blazor WebAssembly on .NET 6. Community links.
Publish a Blazor WebAssembly app and .NET API with Azure Static Web Apps - December 6, 2021 - Automatically deploy and update a Blazor web application and its API from a GitHub repository. In this episode, you will clone and run an existing Blazor web app locally, create an API for the app with Azure Functions and publish the app and its API to Azure Static Web Apps.
Learn Live - Build a web app with Blazor - November 22, 2021 - Learn how to set up your development environment and build your first web app with Blazor, Visual Studio Code, and C#.
Web Wednesday: Recapping .NET Conf with Jon Galloway - November 17, 2021 - .NET Conf is a wrap, but all the goodness revealed during the conference is just getting started. Between Minimal APIs, performance improvements, and enhancements to some of your favorite features there's a lot to talk about. Jon Galloway joins us this week to cover some of the big updates, talk about his favorites, and how to start using some of the cool new toys today.
Host, deploy and scale ASP.NET Core Blazor Server - November 11, 2021 - Let's discuss Host configuration values, deployment, scalability, SignalR configuration, Azure SignalR Service and more.
Full-stack .NET with Blazor WebAssembly and Azure Static Web Apps - November 11, 2021 - With automatic global distribution, custom domains, and free SSL certificates, Azure Static Web Apps has everything you need to deploy modern web applications with serverless APIs. Join us to learn all about how to deploy Blazor WebAssembly apps with .NET Azure Functions to Azure Static Web Apps.
What’s new in bUnit for .NET 6 - November 11, 2021 - In this talk we will go through the latest additions and changes to bUnit that makes it simpler and easier than ever to test Blazor components. This includes the additions related to the new features that are part of the .NET 6 release of Blazor.
Blazor and GraphQL - November 11, 2021 - GraphQL is a powerful way of querying data. Creating loosely coupled clients using various JavaScript libraries to present data from a GraphQL API has been a popular architecture adopted by developers. How can we consume an GraphQL API in a Blazor WASM app to create rich apps? What if I can make it even better by using the content from a Headless CMS and present it using a Blazor App? In my session, I will make use of the GraphQL API from Umbraco Heartcore, a headless CMS, to create a Harry Potter themed Blazor App and present the data to the user in multiple ways.
Embedding Power BI Reports in your Blazor 6 site - November 11, 2021 - In this coding session, we will take a run-of-the-mill Blazor WebAssembly site, create a page with a report published in powerbi.com, we will then show how to use the ASP.NET Core identity services to protect reports from unauthorized eyes.
Responsive and Adaptive Tactics for Blazor Applications - November 11, 2021 - In this session you'll learn about CSS techniques like CSS Grid, Flexbox and media queries. We will also explore techniques for adaptive the user interface at runtime for maximum control. These tactics apply to Blazor WASM, Server, and Blazor Hybrid.
New Blazor WebAssembly capabilities in .NET 6 - November 10, 2021 - With .NET 6, the underlying .NET WebAssembly runtime supports entirely new kinds of functionality, and can be faster and more productive than ever before. "Native dependencies" enables embedding libraries from other tech stacks (e.g., a C/C++ database engine, or a Rust media processor). AOT compilation brings truly near-native performance to your .NET code in the browser, and the new build toolchain can now strip out unused native code to ship significantly smaller bundles. This talk explores how you can build new kinds of web apps, while having a more enjoyable and productive experience via instant hot reload and a better Razor editor.
Blazor Azure B2C Authentication and Authorization - November 10, 2021 - In this session we will cover how you can use Azure B2C authentication and authorization within your Blazor application to manage your users, and to allow your users to log in using their preferred social and enterprise logins.
Build cross-platform native apps with .NET MAUI and Blazor - November 9, 2021 - The power of Blazor is coming to native apps on desktop and mobile devices! Use existing Blazor web components and get the power of native apps, or supercharge your existing native apps with the power and reach of Blazor with the new BlazorWebView control for .NET MAUI, WPF, and WinForms.
Enterprise-grade Blazor apps with .NET 6 - November 9, 2021 - Blazor in .NET 6 gives you the functionality you need to build real world apps of any size and complexity. In this session we'll look at the new Blazor features in .NET 6 for practical web app development. We'll look at the new support for Hot Reload, error boundaries, state preservation during prerendering, faster file uploads, query string handling, adding page metadata, and integrating Blazor components into existing JavaScript based apps.
Next-generation Blazor components with .NET 6 - November 9, 2021 - Blazor in .NET 6 enables building even more powerful and flexible web UI components. In this session we'll look at the new improvements to the Blazor component model, including required component parameters, generic type inference from ancestor components, JavaScript initializers, and handling of static web assets.
Minimal APIs in .NET 6 - November 10, 2021 - In this talk, Safia and Stephen, developers from the ASP.NET team, will introduce you to minimal APIs, a new, low-ceremony way to build small HTTP APIs using ASP.NET Core. The demo includes a Blazor app.
Introduction to .NET MAUI - November 9, 2021 - .NET MAUI is the best way to build cross platform mobile and desktop apps with .NET and C#. Join Maddy Leger, .NET MAUI Program Manager, to get a first look of .NET MAUI in .NET 6 and learn how you can start using it today.
Blazor Hot Reload in .NET 6 - November 9, 2021 - With Blazor Hot Reload, you can save time by seeing your ASP.NET WebAssembly apps changes live! Here, Isadora will demo how to use this time and expense saving feature so you can make your WebAssembly apps even more awesome.
.NET Conf 2021 - Day 1 - November 9, 2021 - .NET Conf is a free, three day virtual developer event co-organized by the .NET community and Microsoft. This year .NET 6 will launch at .NET Conf 2021! Come celebrate and learn about the new release.
Smaller & Faster Blazor WebAssembly apps with Runtime Relinking in .NET 6 - November 9, 2021 - The new support for runtime relinking has made Blazor WebAssembly apps smaller and faster to download. In this demo, Daniel Roth will show how runtime relinking works while making the smallest WebAssembly app possible.
Blazor WebAssembly AOT on Azure Static Web Apps in .NET 6 - November 9, 2021 - Host your Blazor WebAssembly applications on Azure Static Web Apps. Anthony Chu will demo how to automatically build and deploy your app, utilize .NET 6, and improve your runtime performance with ahead-of-time compilation on Azure Static Web Apps.
.NET Conf 2021 Keynote - November 9, 2021 - Join Scott Hunter and team as they show you all the amazing things you can do with .NET 6.
ASP.NET Community Standup - Blazor Native Interop with SkiaSharp - October 26, 2021 - SkiaSharp is a cross-platform 2D graphics API for .NET platforms based on Google's Skia Graphics Library. It provides a comprehensive 2D API that can be used across mobile, server and desktop models to render images. In this edition of the Blazor community standup learn more about SkiaSharp, from Matthew Leibowitz. Community links.
Blazor Updates in .NET 6 - Hot Reload, Query Parameters, and More - October 25, 2021 - There are a lot of changes to Blazor in .NET 6. These are quality of life changes, not major shifts in how Blazor operates. In this video, we are going to look at a number of changes to Blazor that will directly impact and improve how you build Blazor apps.
Web Wednesday: Creating full stack web apps with Blazor - October 21, 2021 - Blazor provides an alternative option for building rich client-side web applications using .NET instead of JavaScript. The core of this framework is based on components, similar to JavaScript frameworks like Vue or React. In this session, we'll take a look at how this component model works.
ASP.NET Community Standup - Exploring MudBlazor - October 12, 2021 - In this edition of the Blazor community standup learn more about MudBlazor, a Material Design framework for Blazor with co-creators Jonny Larsson & Meinrad Recheis. Community links.
Web Wednesday: ASP.NET Razor tips and tricks with Jon Galloway - October 11, 2021 - Razor is a server-side, page-centric programming model for building webpages with ASP.NET Core. Razor has continued to mature over time, and has expanded to include numerous "quality-of-life" additions to make the developer's life easier. Jon Galloway joins us to talk about MVC and ASP.NET, and walks us through some of his favorite features, tips and tricks.
Blast off with Blazor - Supercharged Enterprise UIs using AntDesign - September 20, 2021 - AntBlazor is fully supported by the .NET Foundation and boasts an impressive following. The best part is the awesome documentation and code samples to get you up and running in no time.
ASP.NET Community Standup - Blazor in .NET 6 RC1 - September 14, 2021 - Find out what's new in Blazor in .NET 6 RC1. Community links.
The .NET Docs Show - Micro frontends with Blazor - August 31, 2021 - In this week's episode, Florian Rappl joins the panel to show us how to build websites using compositional UIs that grow naturally as your application scales.
Blazor ListView Component - August 27, 2021 - In this Blazor Components session, Fahad Mullaji aka @Curious Drive walks us through the various functionalities of the Telerik UI for Blazor ListView component. He explores the multiple List templates, focusing on the Header template which allows adding custom Blazor components, and footer template which shows the number of items in the list.
The .NET Docs Show - Blazor component testing with bUnit - August 23, 2021 - A new UI framework like Blazor means new unit testing scenarios! In this week's episode, community MVP Egil Hansen shows us bUnit, a unit testing library for Blazor components.
Getting Started with Blazor Components - August 26, 2021 - Join the amazing Fahad Mullaji a.k.a @Curious Drive in his "Getting Started with Telerik UI for Blazor" journey. In this video, he goes through five of the most practical and frequently used components – TextBox, DropDownList, AutoComplete, MultiSelect, and CheckBox.
Planning, designing, and coding a Blazor site from scratch part 6 - August 23, 2021 - In this episode, Jessica takes revenge on CSS, but the big question is.... Will she win? Adding responsiveness to the menu using only CSS.
ASP.NET Community Standup - Exploring Blazorise - August 17, 2021 - ASP.NET Community Standup - Exploring Blazorise with Mladen Macanović. Url list.
Using SignalR in your Blazor applications - August 19, 2021 - In this episode, David Pine joins Jeremy to show off this chat bot enabled demo that's powered by Blazor WASM and SignalR. Source code . Demo.
Building a face recognition app with #Blazor and Azure Cognitive Services - July 20, 2021 - Building a face recognition app with Blazor and Azure Cognitive Services. Source code .
What's new in Blazor in .NET 6 with Daniel Roth - July 16, 2021 - Blazor in .NET 6 makes client-side web development faster and more productive than ever before. Let's chat about all the new Blazor features in .NET 6: .NET Hot Reload, WebAssembly ahead-of-time (AOT) compilation, error boundaries, integration with .NET MAUI, and much more.
Visual Studio 2022 Preview 2 - Overview - July 14, 2021 - This video shows some the new features in Visual Studio 2022 preview 2.
ASP.NET Community Standup - Building with Blazor: Powered4.tv - July 13, 2021 - Powered4.tv is a video-on-demand service that leverages Blazor WASM. In this episode of the Blazor community standup, we'll talk with product engineer Steve Pierce about the successes and stories behind using Blazor WASM for Powered4.tv.
Building dynamic applications with blazor - July 10, 2021 - Blazor is a revolutionary single-page app framework for building interactive web apps with .NET Core. Underpinning Blazor's ability to create interactive web UIs using C# instead of JavaScript is a robust component model which offers exciting new opportunities for developers to create dynamic web applications. In this session we will demonstrate dynamic application development using an open source modular application framework for Blazor named Oqtane.
Intro to Blazing Web Accessibility - Empowered with AI - July 5, 2021 - This video shows how you make an accessible website in Blazor, Microsoft’s brand new front-end technology.
The .NET Docs Show - Scenario testing Blazor Single-Page Apps - June 28, 2021 - Cover all the bases and use test scenarios to improve the quality of your test coverage in Blazor applications.
Let's Learn .NET - Blazor - June 25, 2021 - Blazor lets you build interactive web UIs using C# instead of JavaScript. Blazor apps are composed of reusable web UI components implemented using C#, HTML, and CSS. Both client and server code is written in C#, allowing you to share code and libraries. Together, we will learn all about Blazor and why you would use it to build web apps, and then we will build our first client web app with Blazor and .NET.
On .NET Live - Building Reactive UIs with Blazor - June 24, 2021 - In this live session, Rodney Littles II shows us how to build Blazor applications with the ReactiveUI framework.
Web Wednesday: Blazor Web Apps using GraphQL and EF Core with Jeremy Likness - June 23, 2021 - Got data? Got Blazor? The “glue” between the client and server is often the weakest link in building enterprise web apps. What if you could use your domain model as the source of truth, generate a database that supports your design and easily move data between the server and your Blazor WebAssembly app with just a few lines of code? Jeremy will show you how to do this and more with the power of Entity Framework Core enhanced by GraphQL.
On .NET Live - Building Beautiful Blazor apps with Tailwind CSS - June 17, 2021 - In this session on On .NET Live, Chris Sainty(@chris_sainty) will be showing us how to style our applications using Tailwind CSS as well as how to integrated the Blazored component libraries.
BlazorDay 2021, full video - June 17, 2021 - Blazor Day is the online event around Blazor technologies. #BlazorDay is organized by 3 MVP friends. Their objective is to share their passion for .NET and more particularly Blazor. Joined by the famous Charline to upgrade the event to the next level.
Introduction to .NET MAUI Blazor | The Xamarin Show - June 17, 2021 - Blazor enables building client-side web UI with .NET, but sometimes you need more than what the web platform offers. Sometimes you need full access to the native capabilities of the device. You can now host Blazor components in .NET MAUI apps to build cross-platform native apps using web UI. The components run natively in the .NET process and render web UI to an embedded web view control using a local interop channel. This hybrid approach gives you the best of native and the web. Your components can access native functionality through the .NET platform, and they render standard web UI. .NET MAUI Blazor apps can run anywhere .NET MAUI can (Windows, Mac, iOS, and Android) although our primary focus for .NET 6 is on desktop scenarios.
ASP.NET Community Standup - Build apps for Microsoft Teams with Blazor - June 15, 2021 - Learn how to build apps for Microsoft Teams using the Teams Toolkit, .NET, and Blazor. Community links.
On .NET Live - Secrets of building Blazor Components - June 10, 2021 - This session with Ed Charbeneau is about building components for Blazor.
Next Generation UI with .NET 6 - June 9, 2021 - Tired of Angular, Vue, and React? Ready for the next generation of web user interface that runs everywhere and you can build with your favorite programming language? In this session, Jeff Fritz is going to introduce you to Blazor - the next generation UI framework from the .NET team. We'll see how Blazor works with Web Assembly, webservers, and hybrid applications to deliver a great experience for your users. Blazor is the framework that allows you to build once and run it everywhere.
Planning, designing, and coding a Blazor site from scratch part 1 - June 8, 2021 - Set up Azure DevOps, Builds, Release, and Blazor project.
Let's Learn .NET: Blazor - June 7, 2021 - Blazor lets you build interactive web UIs using C# instead of JavaScript. Blazor apps are composed of reusable web UI components implemented using C#, HTML, and CSS. Both client and server code is written in C#, allowing you to share code and libraries. Together, we will learn all about Blazor and why you would use it to build web apps, and then we will build our first client web app with Blazor and .NET.
Building Modern Applications with GraphQL and Blazor - May 14, 2021 - Building Modern Applications with GraphQL and Blazor at the JetBrains .NET Days Online. After having a fundamental understanding of how GraphQL improves our data fetching needs in web applications, we will move on and build a nice real-time application with Blazor and GraphQL. Let’s build a truly engaging next gen application and push Blazor to the limit. Slides. Source code .
Upgrading to .NET 6 - April 21, 2021 - This video shows you how to upgrade your existing .NET 5 Blazor application to .NET 6 Preview 3. It also shows how to upgrade your tests to use the latest release of bunit version 1.0.19 and demos the new hot reload feature in .NET 6 - which is a huge improvement to the engineering experience. Source code .
ASP.NET Community Standup - ASP.NET Core updates in .NET 6 - April 20, 2021 - There are a lot of exciting new features for ASP.NET Core developers in .NET 6! Come hear all about it from Daniel Roth, and ask your questions live in the chat. Community links.
WebAPI vs gRPC in Blazor Train - April 16, 2021 - Carl Franklin shows you how to use gRPC in your Blazor apps as an alternative to a more common API layer. You can download all files atblazortrain.com.
ASP.NET Community Standup - Exploring Oqtane with Shaun Walker - April 13, 2021 - In this edition of the Blazor community standup, we sit down with Shaun Walker to discuss all things Oqtane. Community links.
Blazor WebAssembly : Cookie Expiration & API Authorization - April 7, 2021 - This video shows how you can set authentication properties for cookie authentication. You can set it's IsPersistent to keep the cookie alive even after the browser is closed. You can also set it's ExpiredUtc property to set expiry date for your cookies.
Deploying Blazor WebAssembly to GitHub Pages - March 30, 2021 - The .NET Docs Show - Deploying Blazor WebAssembly to GitHub Pages. What's better than Blazor? How about Blazor and a free place to host your Blazor app? In this episode, community member Niels Swimberghe shows the panel how to deploy Blazor apps to GitHub Pages.
Testing Blazor Apps & Components - March 26, 2021 - Blazor Train, episode 43: Testing Blazor Apps & Components.
Steve Sanderson at the NDC Manchester 2021 - March 25, 2021 - Blazor in 2021: .NET 5, .NET 6 and beyond.
Blazor WebAssembly : Creating Chat Application Using SignalR - March 25, 2021 - Blazor WebAssembly : Creating Chat Application Using SignalR.
Introduction to Dynamic Components in Blazor - March 22, 2021 - This video shows how you can use one of the most interesting features in Blazor w/ .NET 6.0 preview which is Dynamic Components. Dynamic Components can help you load content from multiple components dynamically in Blazor without too much hassle. Source code .
Building a Blazor WebAssembly chat using SignalR - March 8, 2021 - Building a Blazor WebAssembly chat using SignalR, by Coding After Work.
Multiple Panels with Sliding Splitters - March 5, 2021 - Blazor Train, episode 40: Multiple Panels with Sliding Splitters.
Blazor WebAssembly : JavaScript Isolation - March 1, 2021 - Blazor WebAssembly : JavaScript Isolation, by Curious Drive. This video is about how you can isolate JavaScript files in Blazor applications. With JavaScript isolation you can load your JavaScript files only when needed. Source code .
.NET Conf 2021 - Focus on Windows: Building .NET Hybrid Apps with Blazor - February 25, 2021 - .NET Conf: Focus on Windows, session "Building .NET Hybrid Apps with Blazor", by Daniel Roth.
.NET Conf 2021 - Focus on Windows: Real-Time Desktop Apps with Azure SignalR Service - February 25, 2021 - .NET Conf: Focus on Windows, session "Real-Time Desktop Apps with Azure SignalR Service".
.NET Conf 2021 - Focus on Windows - February 25, 2021 - .NET Conf: Focus on Windows is a free, one-day livestream event that features speakers from the community and Microsoft teams working on Windows desktop apps and making them fantastic on the latest .NET 5. Learn why and how to upgrade WPF and Windows Forms apps to .NET 5, see Visual Studio tooling improvements, learn how to leverage cloud services from your client apps, and a whole lot more. You'll also see what the future of native device development with .NET will look like in .NET 6. Full schedule: dotnetconf.net.
Blazor WebAssembly : Virtualize Component - February 22, 2021 - Blazor WebAssembly : Virtualize Component, by Curious Drive. This video shows how you can use Virtualize component and load thousands of records in efficient way. We will first check how it actually works then we will map to a web API which gets records which are visible to the users.
Blazor Train: Options for Mobile Apps - February 19, 2021 - Carl Franklin welcomes back Microsoft’s Dan Roth to discuss options for building mobile apps with Blazor.
Advanced Blazor experiences with Carl Franklin - February 10, 2021 - Advanced Blazor experiences with Carl Franklin, by Coding After Work. Carl Franklin will share a bit more advanced scenarios like using SignalR together with Blazor for cross user communication and data synchronization.
ASP.NET Community Standup - A Blazor Conversation with Chris Sainty - February 9, 2021 - In this standup, we chat with Blazor aficionado and open source community member Chris Sainty about Blazor, his open source work, and more.
Blazor Power Hour: FAQ show #1 - February 3, 2021 - Blazor Power Hour: FAQ show 1, with ed Charbeneau.
Blazor Train: Ask the Engineer - January 29, 2021 - Carl Franklin answers your questions and solves your Blazor puzzlers.
.NET Frontend day 2021 - January 28, 2021 - .NET Frontend Day 2021 sessions.
Blazor Train: Progressive Web Applications - January 15, 2021 - Carl Franklin shows you how to create a Blazor PWA and how to configure it for offline access and cached content.
.NET Community Standup: Meet the Blazor Team - January 12, 2021 - "Meet the Blazor Team"'s .NET Community Standup. Meet the people behind the code! Join us for a fun livestream with members of the Blazor team.
Archives - 2020, 2019, 2018, 2017.

Articles

Umbraco 9 & Blazor WebAssembly Starterkit on GitHub - November 24, 2021 - A simple starter site for Umbraco v9, making use of Blazor WebAssembly with Tailwind CSS/UI. A project that I use to play around and experiment with Umbraco 9, Blazor WebAssembly, TailwindCSS, the Block List Editor, and several other concepts. Source code .
Announcing ASP.NET Core in .NET 6 - November 8, 2021 - .NET 6 is now released! ASP.NET Core in .NET 6 includes everything you need to build rich modern web UI and powerful back-end services.
Full-stack .NET 6 Apps with Blazor WebAssembly and Azure Static Web Apps - November 8, 2021 - .NET 6 is the latest version of .NET and it’s generally available today. The Azure Static Web Apps team is excited to announce that you can now run full-stack .NET 6 apps on Static Web Apps.
Microsoft Publishes New Documentation for Blazor, ASP.NET Core - November 4, 2021 - Microsoft published new documentation for its .NET 6 web-dev component, ASP.NET Core, including the red-hot Blazor framework.
Blazor Hybrid Web Apps with .NET MAUI - October 29, 2021 - Blazor Hybrid Web Apps with .NET MAUI.
As .NET 6 Nears GA, Blazor WebAssembly Can Now Use Native Dependencies - October 15, 2021 - Less than a month before .NET 6 ships, Microsoft announced Blazor WebAssembly apps can now use native dependencies, allowing developers to tap into native C code, for example, upon jumping through a few hoops.
ASP.NET Core updates in .NET 6 Release Candidate 2 - October 12, 2021 - .NET 6 RC2 is very close to the final build of .NET 6 that we expect to ship in November this year in time for .NET Conf 2021. It’s also a “go live” release, so you’re welcome to use it in production. .NET 6 RC2 primarily contains quality improvements and bug fixes, although it does also include a few new features as well.
Custom deployment layout for Blazor WebAssembly apps - September 28, 2021 - Custom deployment layout for Blazor WebAssembly apps.
Blazor updates for .NET 6 using Visual Studio 2022 - September 16, 2021 - Blazor updates for .NET 6 using Visual Studio 2022.
ASP.NET Core updates in .NET 6 Release Candidate 1 - September 14, 2021 - .NET 6 Release Candidate 1 (RC1) is now available and includes many great new improvements to ASP.NET Core.
BabylonJS and Blazor - Simple Game State - September 2, 2021 - Build a simple game with BabylonJS and Blazor. Source code . Demo.
So Why Doesn't Microsoft Provide Its Own Blazor Component Library? - August 13, 2021 - Did you ever wonder why Microsoft doesn't provide a component library for Blazor, its red-hot ASP.NET Core framework for creating web apps primarily with C# instead of JavaScript?
Blazor Debugging Improvements in Rider 2021.2 - July 27, 2021 - The EAP versions of Rider 2021.2 have been released with a major improvement for Blazor developers: debugging WebAssembly (WASM) apps. This has been one of the top requested features since Blazor itself was released. In Rider 2021.2, you can now debug both Blazor Server apps and Blazor WASM apps.
The .NET Stacks #57: Taking a look at Blazor Error Boundaries - July 18, 2021 - Let's take a look at Blazor Error Boundaries and Minimal API improvements.
What's New for Blazor/ASP.NET Core in .NET 6 Preview 6 - July 15, 2021 - What's New for Blazor/ASP.NET Core in .NET 6 Preview 6.
Blazor Server apps in MVC subfolders - July 15, 2021 - Were you ever bored and thought to yourself: how could I ruin this perfectly fine evening for me and turn it into a frustrating nightmare? Well, seek no more, I have the best idea for you. Just try to host a Blazor Server app in a sub folder of an existing MVC application, and you're in for some really nerve-wrecking "fun". Admittedly, once you know the solution it's not so hard to understand, but finding a working solution was a rabbit-hole experience for me.
ASP.NET Core updates in .NET 6 Preview 6 - July 14, 2021 - .NET 6 Preview 6 is now available and includes many great new improvements to ASP.NET Core.
How to Localize Error Messages for Blazor WebAssembly Forms - July 12, 2021 - Want to localize form validation error messages in a Blazor WebAssembly app? Follow this guide to learn everything you need to know.
How to use the button onclick event in Blazor WebAssembly - July 9, 2021 - This article from RoundTheCode explains how to implement the button onclick event in a Blazor Wasm application. We will demonstrate how to set up a Blazor onclick call method and bind it to a HTML element.
Blazor Anchor Tag Scroll To - July 9, 2021 - This article goes over an issue with Blazor applications and scrolling to a hash anchor on the current page.
Thoughts on Microsoft, and Blazor - July 2, 2021 - Thoughts on Microsoft, and Blazor, by Peter Kuhn aka Mister Goodcat.
ML.NET Now Works on ARM Devices and Blazor WebAssembly - June 29, 2021 - ML.NET now works on ARM64 and Apple M1 devices, and on Blazor WebAssembly, with some limitations for each.
Why build Single Page Apps in Blazor - June 16, 2021 - This post addresses some common Blazor questions. Specifically, the "what?", but more importantly the "why?". Why should I care about Blazor when we've already got Angular, React, Vue, or some other JavaScript framework? Why choose Blazor, and what is WebAssembly all about? We'll cover the history of Microsoft's web application development frameworks and what we see for its bright future.
Modular Blazor App Framework Oqtane Boosts Templates - April 29, 2021 - Modular Blazor App Framework Oqtane Boosts Templates.
Sands of MAUI: Issue #6 - April 26, 2021 - Sands of MAUI: Issue #6. BlazorWebView for WPF/WinForms.
Setting Up Sass with Blazor - April 24, 2021 - Setting Up Sass with Blazor, by Ed Charbeneau.
IntersectionObserver WebApi - April 24, 2021 - This article will go over the IntersectionObserver WebApi and how to use it within the context of a Blazor application. Source code . Demo.
Introducing KlipTok - April 20, 2021 - Introducing KlipTok – Social Media fun for Twitch Clips.
Will .NET 6 fix Blazor Prerendering? - April 19, 2021 - Will .NET 6 fix Blazor Prerendering?
An Easier Blazor Debounce - April 12, 2021 - Tick-free bouncing. Source code .
.NET 6 Gets Blazor WebView Controls for WPF, WinForms - April 9, 2021 - .NET 6 Gets Blazor WebView Controls for WPF, WinForms.
ASP.NET Core updates in .NET 6 Preview 3 - April 8, 2021 - .NET 6 Preview 3 is now available and includes many great new improvements to ASP.NET Core.
Excluding Files from PWA Asset Cache - March 24, 2021 - This article shows how to exclude a files from the Progressive Web Application asset cache.
AWS Previews Deployment Tool for .NET Web Apps, Blazor WebAssembly - March 19, 2021 - Amazon Web Services (AWS) announced a developer preview to ease the process of deploying .NET web apps on the cloud platform, which has become more complex with the advent of tech like Docker and serverless joining the ever-growing .NET ecosystem.
Display a Docker Build Version - March 19, 2021 - This article shows one way to show the Build or Application version, passing it down through a Docker build.
The path to .NET 5 and Blazor WebAssembly with some fun sprinkled in - March 17, 2021 - The path to .NET 5 and Blazor WebAssembly with some fun sprinkled in.
.NET 5 Blazor Powers 'Rock, Paper, Scissors, Lizard, Spock' Game - March 17, 2021 - .NET 5 Blazor Powers 'Rock, Paper, Scissors, Lizard, Spock' Game. Source code .
.NET 6 Preview 2 Boosts Razor/Blazor in ASP.NET Core - March 12, 2021 - Razor and Blazor received some dev attention in the second preview of Microsoft's .NET 6 landmark release, coming in November to wrap up formerly disparate .NET components into one cross-platform, open source framework for just about any kind of application.
ASP.NET Core updates in .NET 6 Preview 2 - March 11, 2021 - .NET 6 Preview 2 is now available and includes many great new improvements to ASP.NET Core.
Securing Blazor Web Assembly using cookies - March 8, 2021 - Securing Blazor Web Assembly using cookies. Source code .
ASP.NET Core docs: What's new for February 1, 2021 - February 28, 2021 - March 3, 2021 - Welcome to what's new in the ASP.NET Core docs from February 1, 2021 through February 28, 2021. This article lists some of the major changes to docs during this period.
Razor Pages has Components too don't you know - March 2, 2021 - Razor Pages has Components too don't you know.
Blazor hosting models - mind map - February 26, 2021 - Blazor hosting models - mind map update after .NET 6 preview 1 announcement by Konrad Kokosa on Twitter.
Blazor Layout Components - February 22, 2021 - Blazor Layout Components, by Ed Charbeneau.
ASP.NET Core updates in .NET 6 Preview 1 - February 17, 2021 - ASP.NET Core updates in .NET 6 Preview 1.
Announcing .NET 6 Preview 1 - February 17, 2021 - Announcing .NET 6 Preview 1.
Blazor on Desktop - February 17, 2021 - Blazor on Desktop. This article explores how to make Blazor web apps run on Desktop.
Blazor Component Testing - February 16, 2021 - Blazor Component Testing, by Ed Charbeneau.
Blash: Twitter Dashboard Using Blazor Wasm, Web API, SignalR & Twitter API (Part 1) - February 5, 2021 - Blash: Twitter Dashboard Using Blazor Wasm, Web API, SignalR & Twitter API (Part 1), by Round The Code.
.NET 6 Desktop Dev Options: WPF, WinForms, UWP, .NET MAUI, Blazor ... - February 3, 2021 - .NET 6 Desktop Dev Options: WPF, WinForms, UWP, .NET MAUI, Blazor ...
Improvements to the new Razor editor in Visual Studio - January 26, 2021 - Improvements to the new Razor editor in Visual Studio, by Daniel Roth from Microsoft.
Signed HTTP Exchanges: A path for Blazor WebAssembly instant runtime loading - January 26, 2021 - This article explores Signed HTTP Exchanges, which may help when loading the .NET runtime in Blazor WebAssembly apps.
Enabling prerendering for Blazor WebAssembly apps - January 19, 2021 - This post describes the steps to enable server-prerendering for a Blazor WebAssembly application. This post serves as an introduction to some more interesting prerendering approaches I'll be looking at in future posts. Source code .
How Blazor performs against other Frameworks - January 18, 2021 - How Blazor performs against other Frameworks, by David Grace for Telerik.
Blackjack in Blazor Part 1 - Rules and Modeling the Game - January 2021, 18 - Blackjack in Blazor Part 1 - Rules and Modeling the Game, on Exception Not Found.
Persisting your users preferences using Blazor and Local Storage - January 14, 2021 - Persisting your users preferences using Blazor and Local Storage.
Microsoft Teams App With Blazor Made Easy Using Blazorade Teams - January 10, 2021 - Microsoft Teams App With Blazor Made Easy Using Blazorade Teams. Source code .
How to Use Query Strings in Blazor WebAssembly - January 7, 2021 - In this article, we are going to learn how to use query strings in Blazor WebAssembly. We are going to show you how to send query strings to the Blazor component and also how to read them inside the component. Source code .
Displaying lists efficiently in Blazor - January 6, 2021 - Blazor's Virtualize component will let you display long lists faster without writing a lot of code. If you want to take full advantage of the component, however, you'll need a relatively smart repository to back it up.
Introducing Online GZIP de/compressor, built with Blazor WebAssembly - January 1, 2021 - Introducing Online GZIP de/compressor, built with Blazor WebAssembly.
Archives - 2020, 2019, 2018, 2017.

Podcasts

The Future of Blazor, with Daniel Roth - December 23, 2021 - NET 6 was huge for Blazor - what's next? Carl and Richard talk to Daniel Roth about how Blazor continues to evolve as a C#-centric way to build web applications. Daniel talks about a bunch of the key features from .NET 6, including smaller runtime, Hot Reload, and rending components from JavaScript. The conversation also digs into the evolution of Blazor Fluent UI and MAUI - which also leads to the futures conversation, taking advantage of multithreading, and other great features you can see in the road map on GitHub. More Blazor is coming. Duration: 60 minutes.
OpenSilver Ships with Giovanni Albani - December 9, 2021 - OpenSilver reaches V1! Carl and Richard talk to Giovanni Albani about OpenSilver - an open-source, plug-in-free implementation of Silverlight. Giovanni talks about how the client-side of OpenSilver is different from Silverlight, using Web Assembly to eliminate the need for the plug-in. But the developer SDK side is as close to identical as possible. The conversation explores going beyond compatibility with Silverlight 5 from 2011 to more modern capabilities, including the latest versions of .NET and C#. OpenSilver is not just a migration solution - it's a cross-platform development platform that is continuing to grow. Duration: 49 minutes.
Michael Washington on Blazor in .NET 6 - November 22, 2021 - Hot off the heels of .NET Conf, there is tons to discuss regarding Blazor and .NET 6! Michael shares the key announcement that developers should be looking out for, the announcements he was personally most excited for, and his advice for those looking to just get started with Blazor. He also speaks about some of his recently published books on the topics of Blazor Oqtane and Blazor WebAssembly, speaks about the current state of third-party UI controls and components, and where you can go to take an even deeper dive into everything he discusses today. Duration: 34 minutes.
.NET 6 and Visual Studio 2022 are here - November 15, 2021 - Conversation about the latest in .NET 6, VS 2022, and all of .NET Conf 2021. Duration: 42 minutes.
Eilon Lipton on Blazor Desktop - November 8, 2021 - In this episode, Eilon is discussing the ins and outs of Blazor Desktop — which is currently 100% of what he’s been working on. He takes listeners on a deep-dive of Blazor Desktop, sharing what they need to know in anticipation of .NET 6 and the GA drop of Visual Studio 2022 coming out. He also touches on WPF, WinForms, MAUI, and the 2021 DEVintersection Conference. Duration: 50 minutes.
Real World Blazor With Steve Peirce - November 5, 2021 - .NET Core Show, Episode 86 - Real World Blazor With Steve Peirce. Duration: 62 minutes.
Daniel Roth on Web Development with .NET 6 - September 13, 2021 - Azure DevOps Podcast, episode 158: Daniel Roth on Web Development with .NET 6. Daniel was last on the podcast over two years ago in episode 47 to discuss Blazor DevOps. In this episode, he and Jeffrey discuss web development with .NET 6.0. He shares the high points of what’s coming next for .NET 6.0, the major differences between .NET 5.0 and 6.0, what to look forward to with regards to Blazor, and his insights on WASM tooling, minimal APIs and hosting, and hot reload within .NET 6.0. Duration: 45 minutes.
Dean Guida on the Future of .NET Components - August 16, 2021 - Dean Guida shares his insights on the future of .NET components; lessons he has learned having run a software company for over 30 years; his top recommendations when it comes to managing software teams, DevOps toolchains, preparing for the release of .NET 6, server-side vs. Web Assembly, what .NET developers should be doing today for full system testing, and more! He also gives advice to aspiring entrepreneurial software engineers, an overview of Infragistics’ tools, and what to be looking out for as a software developer today. Duration: 34 minutes.
bUnit, TDD, and Sci-fi with Egil Hansen - July 18, 2021 - In this episode, Jimmy and Jessica talk to Egil Hansen about bUnit, test-driven development, and Sci-fi. Duration: 72 minutes.
Blazor with Chris Sainty - July 13, 2021 - In this episode, I was thrilled to be joined by Chris Sainty to chat all about Blazor! Blazor is a new .NET technology allowing you to build SPA-like frontend web UIs in C#! Very focused on developer productivity and componentisation - Blazor is certainly going to become my go-to for frontends moving forward! And chatting with Chris in this episode, has shown me even more reasons why Blazor is becoming so immensely popular.
React, writing a book, and Blazor with Carl Rippon - March 22, 2021 - Coding after work, episode 57: React, writing a book, and Blazor with Carl Rippon. Duration: 35 minutes.
.NET 6 with Daniel Roth - March 11, 2021 - What's next for .NET? Carl and Richard chat with Dan Roth about all the good things coming this November for .NET. The conversation starts out with some discussion around Blazor, which is no longer an experimental project, but now a key part of .NET. Dan talks about the role of MAUI bringing together UI elements for smartphones, tablets, PCs, and more. There's a lot to look forward to by the end of 2021. Duration: 58 minutes.
Blazor Keeps Getting Better with Daniel Roth - March 9, 2021 - .NET 059: Blazor Keeps Getting Better with Daniel Roth. Blazor has come a long way since 2018. Blazor WebAssembly was released in 2020 and Blazor was integrated as a full-fledged member of .NET 5. Daniel Roth joins us to discuss the progress and improvements the Blazor team has made over the last year. We also discuss a number of updates coming in 2021 like the new Razor editor. The future of Blazor is bright, indeed. Duration: 61 minutes.
Blazor in Action with Chris Sainty - January 8, 2021 - Blazor in Action with Chris Sainty in the .NET Core Show, episode 67. Duration: 67 minutes.
Archives - 2020, 2019, 2018, 2017.

Presentations slides

Using .NET 5 with the Raspberry Pi - January 28, 2021 - Using .NET 5 with the Raspberry Pi, on Slideshare.
Focus on Blazor - January 2020 - All the materials of the .NET Conf "Focus on Blazor". The videos are on YouTube.
Blazor, a new framework for browser-based .NET apps - January 29, 2020 - Source code of the session by Steve Sanderson at the NDC London, "Blazor, a new framework for browser-based .NET apps".
Blazor in more depth - January 28, 2020 - Blazor in more depth by Steve Sanderson and Ryan Nowak at the NDC London 2020. Presentation of Steve Sanderson. Presentation of Ryan Nowak.
Archives - 2020, 2019, 2018.

Tooling

Blazor Dev Server with CSS Live Reloader - Alternative Blazor Dev Server to be available CSS live reloading.
LiveSharp - Update .razor files and see the updates instantly without reloading the page. Your application state is preserved because there is no need to reload anything. livesharp.net.
BlazorFiddle - Blazor .Net Developer Playground and Code Editor in the Browser.
Blazor Minimum Project Templates - A project templates package of Blazor apps without JavaScript and CSS libraries.
Blazor REPL - Write, compile, execute and share Blazor components entirely in the browser - https://blazorrepl.com.
Blazor Snippets Visual Studio Code extension - A Visual Studio Code extension that offers Blazor and Razor snippets.
BlazorSourceMangler - A console app to mangle Blazor DLLs. Check this YouTube video for more details. You can also check this Blazor TODO app to see result of this app (downloaded blazortodos.dll is mangled and decompilation shows uglyfied code).
Publish-time Pre-render for Blazor Wasm - When you publish your Blazor WebAssembly app, this package pre-renders and saves the app as static HTML files in your public folder.
Publish SPA for GitHub Pages - Add this NuGet package to your Blazor WebAssembly project to easily publish it to GitHub Pages.
WebCompiler - A dotnet global tool for compilation, minification, and compression of scss, css and js.
.NET Core - .NET Core.
Razor+ Visual Studio Code extension - A Visual Studio Code extension that offers improved Razor support.
Tracetool - Tracetool viewer, client Api for Dotnet, Java, Javasvript, C++ , Python, Delphi.
Visual Studio - Latest preview of Visual Studio.
Visual Studio Code - Visual Studio Code, free, open source and cross-platform code editor.

Books

Blazor WebAssembly by Example - Blazor WebAssembly by Example: A project-based guide to building web apps with .NET, Blazor WebAssembly, and C# (1st edition published the July 9th, 2021).
Blazor in Action - An example-driven guide to building reusable UI components and web frontends—all with Blazor, C#, and .NET. (Manning Early Access Program began October 2020).
Microsoft Blazor: Building Web Applications in .NET - Microsoft Blazor: Building Web Applications in .NET (Second edition published in May 2020).
Blazor Revealed - Blazor Revealed, Building Web Applications in .NET (Published February, 2019).
Blazor Quick Start Guide: Build web applications using Blazor, EF Core, and SQL Server - Blazor Quick Start Guide: Build web applications using Blazor, EF Core, and SQL Server (Published October 31, 2018).

E-Books

Blazor WebAssembly Succinctly - August 31, 2020 - Blazor is a framework for creating SPA webpages with either client-side or server-side architectures, using Razor technology written with the C# language. Because client-side Blazor with WebAssembly executes entirely on a user's browser, it’s very fast for many applications. In Blazor WebAssembly Succinctly, Michael Washington will take readers through the core elements of Blazor and then explore additional features by building a sample application. Free e-book.
Blazor Succinctly - April 16, 2020 - A free e-book for starting with the Blazor framework.
Blazor, A Beginners Guide - March 18, 2020 - A free e-book for getting started with the Blazor framework. Examples source code.
Blazor for ASP.NET Web Forms developers - Blazor for ASP.NET Web Forms developers, a free e-book from Microsoft.
Using CSLA 5: Blazor and WebAssembly - This book covers the new Blazor UI framework, including how to create server-side and client-side WebAssembly projects, how to implement authentication and authorization, and how to use data binding. It then covers how CSLA .NET supports Blazor, including walking through a complete sample app.
An Introduction to Building Applications with Blazor - August 24, 2019 - An Introduction to Building Applications with Blazor: How to get started creating applications using this exciting easy to use Microsoft C# framework
Archives - 2018.

Courses

Build a web app with Blazor WebAssembly and Visual Studio Code - Build a web app with Blazor WebAssembly and Visual Studio Code, on Microsoft Learn.
DevOps and Docker Support for .NET Core Blazor Applications - June 2020 - DevOps and Docker Support for .NET Core Blazor Applications, on Udemy. This Docker Support Course with DevOps concepts using ASP.NET Core Blazor will teach you Dockerisation of Blazor Apps.
Programming in Blazor - ASP.NET Core 3.1 - Create interactive web applications with C#, on Udemy.
Creating Blazor Components - December, 2019 - Building a Blazor app is building components. This course is essential for gaining a good understanding of components. On Pluralsight.
Authentication and Authorization in Blazor Applications - December, 2019 - Learn how to secure your Blazor application using a variety of best practice techniques for authentication and authorization. On Pluralsight.
Blazor: Getting Started - December, 2019 - Learn how to build your first application in a hands-on way using Blazor, Microsoft's solution to use C# to write interactive web UIs without JavaScript. On Pluralsight.
Blazor In-Depth Workshop (Blaze Invaders) - December 2019 - Blazor In-Depth Workshop (Blaze Invaders), on C# Academy. Learn serious Blazor concepts while building a working browser based game.
Blazor and Razor Components in a nutshell - October 2019 - Learn how to use a framework that allows you to run your compiled code directly in the browser on top of WebAssembly, a course on Udemy.
Blazor on ASP.NET Core 3.0 - October 2019 - Blazor on ASP.NET Core 3.0, a course on SkillShare.
Blazor First Look on LinkedIn Learning - Blazor First Look on LinkedIn Learning. Source code .
Free Blazor Training Course - DevExpress Blazor free training course Source code .
Getting Started with Blazor - June 2021 - Discover the Core Concepts of Blazor and learn to create web applications with ease.

Community

Awesome Blazor on Twitter - This repository's Twitter feed.
Gitter - Blazor discussion on Gitter.
Learn Blazor - Community documentation on Blazor.
Blazor Help Website - Blogs and code samples primarily covering server-side Blazor.
Practical samples of Blazor - Practical samples of Blazor.
Practical samples of Blazor Server-Side - Practical samples of Blazor Server-Side.
Stack Overflow - Blazor questions feed on Stack Overflow.
Twitter - Hashtag on Twitter.
WebAssemblyMan - Man page for Blazor and WebAssembly.

Other Languages

Blaze of Code - [Portuguese] Blog about Blazor.
Blazor.ru - [Russian] Old official documentation website translated in Russian.
DevApps.be's podcast #44 - [French] DevApps.be's podcast #44: "Blazor et WebAssembly vont-ils tuer JavaScript ?".
DevApps.be's podcast #47 - [French] DevApps.be's podcast #47: "Actualités : TypeScript, Uno, Angular, DocFX, Database".
Modern web apps with Blazor - [Italian] Video about Blazor.
Playlist - Programando en Blazor - [Spanish] Series of videos about Blazor.
Insights from the oracle - [German] Blog about Blazor.
ASP.NET Core Blazor 5.0: Blazor WebAssembly und Blazor Server: Moderne Single-Page-Web-Applications mit .NET, C# und Visual Studio - German book on Blazor (Published September 15, 2020 with montly Updates).

License

To the extent possible under law, Adrien Torris has waived all copyright and related or neighboring rights to this work.

Awesome Page Speed Metrics

Metrics to help understand page speed and user experience.

If you're just getting started check out web.dev/metrics first.

Concepts
Lab Data (Synthetic Measurements)
Field Data (Real User Monitoring - RUM)
Critical rendering path
Long tasks
User-centric metrics
Rendering metrics
First Contentful Paint (FCP)
Largest Contentful Paint (LCP)
Cumulative Layout Shift (CLS)
Visually Complete
Speed Index
(Hero) Element Timing
Interactivity metrics
Time to Interactive (TTI)
Total Blocking Time (TBT)
First Input Delay (FID)
Max Potential First Input Delay
Network metrics
DNS latency
TCP and SSL/TLS latency
Time to First Byte (TTFB)
Transferred bytes
Other metrics
Google PageSpeed Insights score
User Timing
Server Timing
Frame rate
DOMContentLoaded
window.load

Concepts

Lab Data (Synthetic Measurements)

Make a request to your page with a tool and evaluate performance. Be sure to make it realistic (e.g. by throttling network and CPU) and reduce noise (e.g. by running multiple times).

Lighthouse - A tool built on Google Chrome to audit web pages. You can run it from Chrome DevTools, a Chrome Extension or from the command line (even with headless Chrome).
Google PageSpeed Insights - Free and hosted Lighthouse reporting (and more) by Google.
WebpageTest - Free and hosted web performance testing (also an open source project).
Sitespeed.io - A set of open source performance monitoring tools.
Calibre - Web performance monitoring SaaS.
treo.sh - Web performance monitoring SaaS.
SpeedCurve - Web performance monitoring SaaS.
AwesomeTechStack - Website awesomeness monitoring Tool.

Field Data (Real User Monitoring - RUM)

Collect performance data from real users visiting your page. Be mindful of the actual overhead, as it runs in your user's browser and watch out for browser support of more recent metrics (e.g. compared to your user-base).

Performance tracking with Google Analytics (GA)
Chrome User Experience Report (CrUX)
Load abandonment - Track visibilitychange to account for survivorship bias.
SpeedCurve LUX - Real User Monitoring SaaS.
Akamai mPulse - Real User Monitoring SaaS.
Sematext Experience - Real User Monitoring SaaS.
Perfume.js - Open Source Library to collect Field Data.
Web Vitals - Open Source Library to collect Field Data.
Vercel Analytics - Real User Monitoring based on Web Vitals.

Critical rendering path

The critical rendering path is everything that happens between receiving network bytes and rendering something on the screen. To optimize any rendering metrics like First Contentful Paint (FCP) or Speed Index you have to understand how the critical rendering path works.

Critical rendering path

Long tasks

The browser Main Thread that handles user input is also the one executing JavaScript (among many other things). Blocking the Main Thread for too long can make your page unresponsive.

A user perceives any visual change within 100ms as instant. Any task blocking the Main Thread by taking longer than 50ms is considered a long task (as it might make the browser unresponsive to user input).

To optimize interactivity metrics like Total Blocking Time (TBT) and First Input Delay (FID) you have to understand long tasks and how to avoid them as much as possible.

User-centric metrics

It's important to track metrics relevant to users and their experience. To measure the perceived performance we can choose metrics by framing them around a few key questions.

Docs - User-centric Performance Metrics - web.dev
Is it happening? - Did the navigation start successfully? Has the server responded? (e.g FCP)
Is it useful/meaningful? - Has enough content rendered that users can engage with it? (e.g. LCP)
Is it usable - Can users interact with the page, or is it still busy loading? (e.g TBT)
Is it delightful/smooth? - Are the interactions smooth and natural, free of lag and jank?

Rendering metrics

First Contentful Paint (FCP)

The First Contentful Paint (FCP) metric measures the time from when the page starts loading to when any part of the page's content is rendered on the screen. For this metric, "content" refers to text, images (including background images), <svg> elements, or non-white <canvas> elements.

Lab: Lighthouse
Field: Chrome 60+, CrUX
Docs - FCP - web.dev
Spec - Paint Timing - W3C

Largest Contentful Paint (LCP)

The Largest Contentful Paint (LCP) metric reports the render time of the largest content element visible within the viewport.

Lab: Lighthouse/WPT
Field: Chrome 77+
Docs - LCP - web.dev
Spec - LCP - W3C

Cumulative Layout Shift (CLS)

A layout shift occurs any time a visible element changes its position from one frame to the next. CLS measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page.

Lab: Lighthouse/WPT
Field: Chrome 77+
Docs - CLS - web.dev
Spec - Layout Instability API - W3C

Visually Complete

The Visually Complete is the time from the start of the initial navigation until the visible (above the fold) part of your page is no longer changing. (e.g. WPT measures this using a color histogram of the page based on video/screenshots recording).

Lab: WPT
Field: N/A
Docs - Visually Complete - WPT

Speed Index

Speed Index shows how quickly the contents of a page are visibly populated (lower numbers are better). This is done by frequently measuring visual completeness during loading. The quicker the page is more visually complete the lower the value.

Lab: Lighthouse, WPT (but slightly different spec)
Field: N/A
Docs - Speed Index - web.dev
Docs - Speed Index - WPT
Talk - Speed Perception and Lighthouse

(Hero) Element Timing

Element Timing captures when specific elements are painted by the browser. Hero elements can be defined as the largest h1, img or background image (or custom ones using the Element Timing API)

Lab: WPT
Field: Chrome 77+
Docs - Last Painted Hero - WPT
Spec - Element Timing API
Blogpost - Hero Element Timing - SpeedCurve

Interactivity metrics

Time to Interactive (TTI)

Time to interactive is the time it takes for the page to become fully interactive (as in Main Thread quiet for 5s). Sometimes called Consistently Interactice and not to be confused with First Interactive or First CPU Idle. (Warning: one of the most confusing and misunderstood metrics).

Lab: Lighthouse, WPT
Field: Not recommended as users interacting with your page can skew field measurements of TTI
Docs - TTI - web.dev
Spec - TTI - Lighthouse
Blogpost - TTI

Total Blocking Time (TBT)

The Total Blocking Time (TBT) metric measures the total amount of time between First Contentful Paint (FCP) and Time to Interactive (TTI) where the main thread was blocked for long enough to prevent input responsiveness.

Lab: Lighthouse
Field: N/A
Docs - TBT - web.dev

First Input Delay (FID)

First Input Delay (FID) measures the time from when a user first interacts with your site to the time when the browser is actually able to respond to that interaction. An interaction can be when users click a link, tap on a button, or use a custom, JavaScript-powered control.

Lab: N/A (as it requires the user to interact with the page)
Field: IE9+ (and Safari, Chrome, Firefox) (with polyfill - 0.4KB)
Docs - FID - web.dev
Polyfill - FID

Max Potential First Input Delay

The maximum potential First Input Delay that your users could experience. Basically equals to the duration of the longest long task on the browser Main Thread.

Lab: Lighthouse
Field: N/A
Docs - Max Potential FID - web.dev

Network metrics

Network timing field data can uncover a non-optimized TLS setup, slow DNS lookups or server side processing and issues with CDN configuration. See also a separate section about measuring transferred bytes.

DNS latency

Lab: DNS performance testing tools
Field: IE9+, Safari 9+

js // Measuring DNS lookup time var pageNav = performance.getEntriesByType("navigation")[0]; var dnsTime = pageNav.domainLookupEnd - pageNav.domainLookupStart;

TCP and SSL/TLS latency

Lab: See Qualys SSL Labs for an audit
Field: IE9+, Safari 9+

```js // Quantifying total connection time var pageNav = performance.getEntriesByType("navigation")[0]; var connectionTime = pageNav.connectEnd - pageNav.connectStart; var tlsTime = 0; // <-- Assume 0 by default

// Did any TLS stuff happen? if (pageNav.secureConnectionStart > 0) { // Awesome! Calculate it! tlsTime = pageNav.connectEnd - pageNav.secureConnectionStart; } ```

Time to First Byte (TTFB)

Lab: most server load testing tools report this
Field: IE9+, Safari 9+

js var ttfb = pageNav.responseStart - pageNav.requestStart;

Transferred bytes

You can measure the byte weight of your assets with a number of tools. You would normally track these Lab only as the numbers are usually the same in the Field (but be mindful of device type or geographical location specific pages).

Measuring own (and third-party) JavaScript bytes is crucial as JavaScript is the main cause of high TTI or FID values.

Lab: Lighthouse (budgets), Sitespeed.io, custom tools
Field: N/A - but numbers usually the same as in Lab
Sitespeed.io PageXray
Lighthouse Performance Budgets
Can You Afford It?: Real-world Web Performance Budgets
Which third party scripts are most excessive

Other metrics

Google PageSpeed Insights score

User Timing

The User Timing API allows the developer to create application specific timestamps that are part of the browser's performance timeline. e.g. you can create a user timing mark to measure when your JS has loaded for a specific component on the page.

Lab: Lighthouse, WPT
Field: IE 10+, Safari 11+ (and Chrome, Firefox of course)
Spec - User Timing

Server Timing

Surface any backend server timing metrics (e.g. database latency, etc.) in the developer tools in the user's browser or in the PerformanceServerTiming interface.

Docs - Server Timing

Frame rate

The frame rate is the frequency at which the browser can display frames. A frame represents the amount of work a browser does in one event loop iteration such as processing DOM events, resizing, scrolling, rendering, CSS animations, etc. A frame rate of 60 fps (frames per second) is a common target for a good responsive user experience. This means the browser should process a frame in about 16.7 ms.

Lab: Chrome and FF Devtools
Field: No browser implements the Frame Timing API yet but you can roll your own fps meter using requestAnimationFrame
Docs - Frame Timing API
Docs - Chrome Devtools - FPS
Docs - Firefox Developer Tools - Frame rate

DOMContentLoaded

Docs - DOMContentLoaded

window.load

Docs - window.load

License

To the extent possible under law, Csaba Palfi has waived all copyright and related or neighboring rights to this work.

Awesome Tailwind CSS

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces.

Useful Links
IDE Extensions
Plugins
Tools
UI Libraries, Components & Templates
Starters & Themes
Open-Source Projects
Learning

Useful Links

Legend: 💙 Official resource

💙 Website - Official Tailwind CSS website.
💙 Repository - Official Tailwind CSS repository.
💙 Discussions - Official place to connect with other community members about Tailwind.
💙 Tailwind UI - Component library made with Tailwind CSS.
💙 Headless UI - Completely unstyled, fully accessible UI components.
💙 Heroicons - Beautiful, hand-crafted SVG icons.
💙 Play - Advanced online playground for Tailwind CSS.
💙 Just-in-time - Just-in-time compiler for Tailwind CSS.
Tailwind Weekly - Weekly newsletter about all things Tailwind CSS.
Built With Tailwind - Community-driven collection of awesome websites built with Tailwind CSS.

IDE Extensions

Legend: 💙 Official resource

💙 IntelliSense for Code - IntelliSense extension for Visual Studio Code.
Styled Snippets for Code - Snippet extension for Visual Studio Code.
Headwind for Code - Class sorter extension for Visual Studio Code.
Shades for Code - Color palette generator extension for Visual Studio Code.
IntelliSense for Neovim - IntelliSense extension for Neovim.
Tailwind CSS Explorer for Code - Explore the classes available in your project's Tailwind CSS setup.

Plugins

Legend: 💙 Official plugin · 🎨 Theming · 💼 Utilities · 🧬 Variants · 🧩 Components · 🛑 Deprecated

💙🧩 Typography - Adds a prose class for beautiful typographic defaults.
💙💼 Aspect Ratio - Adds composable aspect ratio utilities.
💙💼 Line Clamp - Provides utilities for visually truncating text after a fixed number of lines.
💙 Forms - Adds better default styles to form elements.
🎨🧬 Theming - Theming using CSS variables, with dark mode support.
🎨🧬 Theme Variants - Adds theme variants based on media queries and/or CSS selectors.
🎨🧬 Multi Theme - Adds theme variants based on a single theme property.
🎨🧬 Theme Swapper - Theming using CSS variables, with media queries support.
🎨🧬 Themeable - Adds multiple themes support for Tailwind CSS.
🎨🧬 Themer - Adds theming support for Tailwind CSS with CSS variables and variants.
💼🧬 Radix - Adds utilities and variants for styling Radix UI state.
💼 Custom Native - Leverages Tailwind CSS's configuration to allow the creation of utilities.
💼 Image Rendering - Adds image-rendering utilities.
💼 Elevation - Adds Material UI elevation utilities.
💼 Writing Mode - Adds writing-mode utilities.
💼 Hyphens - Adds hyphens utilities.
💼 Border Gradients - Adds border-image gradient utilities.
💼 RFS - Adds RFS utilities.
💼 List Reset - Adds back the list-reset class that was removed prior to Tailwind CSS 1.0.
💼 Fluid - Adds fluid sizing utilities.
💼 Typography - Adds typography utilities.
💼 Triangle After - Adds CSS triangles utilities.
💼 Scrims - Adds scrims utilities.
💼 Truncate Multiline - Adds utilities to truncate multi-line text elements.
💼 CSS Logical Properties - Generate utilities for CSS Logical Properties.
💼 Tooltip Arrows After - Adds CSS utilities for tooltip arrows with configurable border and background.
💼 Bidirectional - Adds utilities for creating multilingual bidirectional layouts.
💼 Bidirectional - Replace the core utilities to be bi-direction compatible.
💼 Background SVG - Inject SVGs as background images with color variants.
💼 Background Unsplash - Apply unsplash.com images as background.
💼 Brand Colors - Adds various brand colors for background, border and text.
💼 Bootstrap Grid - Generates Bootstrap's style flexbox grid system.
💼 Leading Trim - Adds utilities to trim text whitespace, using Capsize.
💼 Scrollbar Hide - Adds scrollbar-hide class for visual hide scrollbar.
💼 Downwind CSS Easings - Extends transition-timing-function utilities.
💼 Content Placeholder - Adds utilities for content placeholder images.
💼 No Scrollbar - Exposes scrollbar-none to visually hide a scrollbar.
💼 Fluid Type - Adds fluid type (font-size) utilities.
🧬 Touch - Adds touch variants.
🧬 Localized - Adds variants based on the HTML lang attribute, to use utilities only with certain languages.
🧬 Padded Radius - Adds variants for matching nested border radii.
🧬 Fluid - Generates fl: variants.
🧬 Marker - Provides utilities for styling lists and <summary> markers.
🧬 Pseudo selectors - Adds variants for the pseudo-classes and pseudo-elements that Tailwind CSS doesn't have by default.
🧬 Container Queries - Adds CSS Container Query variants.
🧬 FormKit - Adds variants for input and form states for FormKit.
🧩 Debug Screens - Adds a component that shows the currently active screen (responsive breakpoint).
🧩 Heropatterns - Adds Hero Patterns components.
🧩 Responsive Embed - Adds a responsive-embed component.
🧩 Bootstrap Tables - Adds table components based on Bootstrap's tables.
🧩 Card - Adds card components.
🧩 Skip link - Adds a Skip to main content accessible component.
🧩 Colors to CSS Variables - Exports color configuration to CSS Custom Properties.
🧩 CSS Variables - Exports configuration to CSS Custom Properties.
🧩 CSS Variables - Exports custom CSS variables (Dark Mode supported).
🧩 Perspective - Adds perspective utilities.

🛑 - The plugins below offer functionalities that are now fully or partially implemented in Tailwind CSS.

🛑💼 Caret Color - Adds caret color utilities.
🛑💼 Caret Color - Adds caret color utilities.
🛑💼 benface's gradients - Adds gradient utilities.
🛑💼 lorisleiva's gradients - Adds background gradient utilities.
🛑💼 Visually Hidden - Adds screen reader utilities.
🛑💼 Object Fit - Adds object-fit utilities.
🛑💼 Object Position - Adds object-position utilities.
🛑💼 Accessibility - Adds screen reader utilities.
🛑💼 Layout - Adds some layout utilities.
🛑💼 Grid - Adds CSS grids utilities.
🛑💼 Transforms - Adds transform utilities.
🛑💼 benface's transitions - Adds configurable transition utilities, with or without CSS variables.
🛑💼 webdna's transitions - Adds configurable transition utilities.
🛑💼 glhd's transitions - Adds basic transition utilities.
🛑💼 Cursor Extended - Extends cursor utilities.
🛑💼 Font Variant Numeric - Adds font-variant-numeric utilities.
🛑💼 Filters - Adds filter utilities.
🛑💼 CSS Filters - Adds filter and backdrop-filter utilities with defaults.
🛑💼 Blend Mode - Adds blend-mode utilities.
🛑💼 Colorize - Adds filter utilities.
🛑💼 Scroll Snap - Adds scroll-snap utilities.
🛑💼 Scroll Behavior - Adds scroll-smooth and scroll-auto classes to control smooth scrolling.
🛑💼 Accent Color - Adds accent color utilities.
🛑💼 Text Indent - Adds text-indent utilities.
🛑💼 Text Decoration Color - Adds text-decoration-color utilities.
🛑💼 Downwind CSS Text Decoration - Adds composable text-decoration utilities.
🛑💼 Capitalize first letter - Adds capitalize-first utilities.
🛑💼 Aspect Ratio - Adds aspect-ratio utilities.
🛑💼 Shadow Outline Colors - Adds box-shadow utilities based on configured colors.
🛑💼 Alpha - Adds alpha color variant utilities.
🛑🧬 Direction - Adds RTL and LTR variants.
🛑🧬 Important - Adds an important variant.
🛑🧬🎨 Prefers Dark Mode - Adds variants based on the prefers-color-scheme media query.
🛑🧬🎨 Dark Mode - Adds dark variants based on CSS classes.
🛑🧬🎨 Dark Mode - Adds dark variants based on the prefers-color-scheme media query.
🛑🧬 CSS Alpha Colors - Adds opacity variants to existing colors.
🛑🧬 Pseudo - Adds custom variants to Tailwind CSS's configuration.
🛑🧩 Spinner - Adds a spinner component.
🛑🧩 Spaced Items - Adds spaced components that add fixed margins to all container items.
🛑🧩💙 Custom Forms - Adds better default styles to form elements.

Tools

Legend: 🌍 Accessible online · 🔼 Conversion or upgrade tool · 🔧 Generator · 🅰 Typing/enforcement · 💼 Plugins/Tools/Extensions for external services · 🎨 Color-related · 🚀 Framework

🎨🌍🔧 Tailwind Color Shades - Color shades generator for Tailwind CSS.
🎨🌍🔧 Palette generator - Color palette generator that outputs Tailwind CSS configuration files.
🎨🌍🔧 Tailwind Colors - Color configuration generator for Tailwind CSS.
🎨🌍🔧 Tailwind Color Explorer - Color explorer for Tailwind CSS.
🎨🌍🔧 TailwindInk - AI palette generator, trained with the Tailwind CSS palette.
🎨🌍🔧 Gradient Designer - Generate gradients for Tailwind 2.0+.
🎨🌍🔧 Grayscale Design - A Luminance-based color palette generator.
🎨🌍🔧 Hypercolor - Collection of pre-configured Tailwind CSS gradients with directional options.
🎨🌍🔧 Palettolithic - Generates harmonius color palettes based on one color.
🎨🌍🔧 Tailwind Gradient Generator - Create perfect Tailwind CSS gradients with zero lines of code.
🎨🌍💼 Tailwind CSS v2 colors - Figma library with Tailwind CSS v2 colors.
🎨🔧💼 Colorkraken - Color shades generator for Tailwind CSS.
🎨🔧💼 babel-plugin-tailwind-dark - A Babel plugin to add custom dark class when compiling your code using Babel.
🌍🔧💼 Twind - Compiler functions that turn Tailwind's classes into CSS at run, serve and build time.
🌍🔧 GPT-3 Tailwind CSS code generator - OpenAI GPT-3 powered Tailwind CSS code generator.
🌍🔧 Stitches - Template generator with Tailwind (online).
🌍🔧 tail-animista - Configurable custom animation utilities generator for Tailwind CSS.
🌍🔧 brands-tail-color - Configuration generator using various brands' colors.
🌍🔧 Windframe - Tailwind CSS drag and drop builder to rapidly build and prototype websites.
🌍 Typography Playground - Tool for trying different Google Fonts combinations with the Tailwind CSS Typography Plugin.
🌍💙 Play - Advanced online playground for Tailwind CSS.
🌍 Updrafts.app - Advanced online no-code drag and drop editor for Tailwind CSS.
🌍 tailwind.run - Tailwind CSS fiddle with built-time features (online).
🌍 tailzilla.app - Online playground for Tailwind CSS.
🌍 Flowrift - Beautifully designed Tailwind CSS UI blocks.
🔼🌍 Tailwind Automatic Prefix Applicator - Tailwind classes' prefixer tool.
🔼🌍 CSS to Tailwind CSS Converter - Converts CSS to Tailwind CSS by suggesting classes that best match.
🔼 Tailwindo - Bootstrap to Tailwind CSS converter.
🔼 Tailupgrade - Conversion tool for upgrading HTML files from Tailwind CSS v0.x to v1.0.
🔼 Tailwind Shift - Upgrade tool for upgrading from Tailwind CSS v0.7 to v1.0.
🔼 RustyWind - CLI tool for sorting Tailwind CSS classes.
🔼 Windy - Browser extension to convert HTML elements to Tailwind CSS.
🅰 react-native-tailwindcss - React Native typing system.
🅰 typed-tailwind - TypeScript typings for Tailwind CSS.
💼 Gatsby Plugin - Tailwind CSS integration for Gatsby.
💼 Gridsome Plugin - Tailwind CSS integration for Gridsome.
💼 Alfred Workflow - Fast Tailwind CSS documentation search application.
💼 ng-tailwindcss - CLI tool for integrating Tailwind CSS into Angular-CLI projects.
💼 vue-cli-plugin-tailwind - Vue CLI plugin that adds Tailwind CSS to a project.
💼 Tailwind CSS Figma Kit - Figma Kit for Tailwind CSS.
💼 Tailwind CSS Figma UI Design Kit - Figma UI Design Kit for Tailwind CSS.
💼 Tailwind CSS Figma Plugin - Figma plugin that integrates Tailwind CSS.
💼 @nuxtjs/tailwindcss - Tailwind CSS module for NuxtJS with PurgeCSS and modern CSS (preset env 1).
💼 preact-cli-tailwind - Tailwind CSS integration for Preact.
💼 tailwind-classes-sorter - NPM library which provides a utility to sort Tailwind CSS classes.
💼 prettier-plugin-tailwind - Prettier plugin that sorts class lists.
💼 tailwindcss-rails - Gem for using Tailwind CSS with Rails' asset pipeline.
💼🔧 Zeplin Config & Class generator - Zeplin extension that generates Tailwind configurations.
💼🔧 @tailwindcssinjs/macro - Babel macro that transforms Tailwind CSS classes into objects for CSS-in-JS libraries.
💼🔧 twin.macro - Use Tailwind classes within any CSS-in-JS library.
💼🔧 Tailwind Config Viewer - Local UI tool for visualizing your Tailwind CSS configuration file.
💼🔧 Laravel Form Components - Blade form components using Tailwind CSS Custom Forms.
💼 @ngneat/tailwind - Tailwind CSS integration for Angular.
💼 Gust - Drag and drop page builder for WordPress.
💼 clb - clb (class list builder) is a utility function that builds a class list based on a Stitches like API.
💼🌍 Inspect Flow - The complete developer tool for Tailwind CSS.
💼 twined-components - Extended component of a styled-components that prioritizes class names for use in Tailwind CSS.
🔧 re-tailwind - ReasonML utility that generates Tailwind classes.
🔧 Protoship Codegen - Code generator that creates Tailwind CSS based HTML & CSS from Sketch designs.
🔧 create-tailwind-plugin - Plugin scaffolder for Tailwind CSS.
🚀 Maizzle - Framework for rapid email prototyping with Tailwind CSS.
🌍 Tailwind Cheat Sheet - Tailwind CSS class names cheat sheet.
🌍 Tailwind Cheat Sheet - Tailwind CSS class names in one single file.
🌍 Tailwind Cheat Sheet - Tailwind CSS class names, variants and directives cheat sheet.
🌍 Tailwind Cheat Sheet - Tailwind CSS class names in a searchable page.
🌍 Tailwind Cheat Sheet - Tailwind CSS utility class names in a searchable interface.

UI Libraries, Components & Templates

Legend: 💙 Official resource · 📚 Library · 🧩 Components · 📁 Templates

💙🧩 Tailwind UI - Component library made with Tailwind CSS.
💙📚 Headless UI - Completely unstyled, fully accessible UI components.
📚 VueTailwind - Vue.js UI library using Tailwind CSS.
📚 Tailwind Elements - Huge collection of free components, mobile-friendly thanks to Bootstrap 5.
📚 Vechai UI - High-quality accessible React components with the built-in dark mode using Tailwind CSS.
📚 Flowbite - Open-source component library built with Tailwind CSS.
📚 a17t - Atomic design toolkit built to extend Tailwind CSS.
📚 tails-ui - React UI library using Tailwind CSS.
📚 tails - Hand-crafted templates and components using Tailwind CSS.
📚 Svelte Headless UI - Unofficial Svelte port of Headless UI.
🧩 TailBlocks - 60+ different ready to use Tailwind CSS blocks.
🧩 Tailwind Components - Community-driven Tailwind CSS component repository.
🧩 Tailwind Toolbox - Templates, components and resources.
🧩 Meraki UI Components - Beautiful Tailwind CSS components that support RTL languages.
🧩 Tailwind Cards - Growing collection of text/image cards.
🧩📁 Tailwind Templates - Collection of templates and components.
🧩📁 Treact - React UI templates and components built using Tailwind CSS.
🧩📁 Jakarta LTE - Admin template using Tailwind CSS.
🧩📁 themes.dev - Handcrafted, free and premium Tailwind CSS themes and components.
🧩 Kutty - Accessible and reusable components that are commonly used in web applications.
🧩 Sail UI - Collection of basic UI components built on Tailwind CSS.
🧩 jQuery Toggler - Switches using jQuery and Tailwind CSS.
🧩 Tailwind Kit - Framework-agnostic, Vue.js, React and Angular components.
🧩 lofi ui - Low-fidelity Tailwind CSS components.
🧩 Gust UI - Sleek Tailwind CSS components for web applications in React and HTML.
🧩 Windstrap - Tailwind CSS with Bootstrap JS.
🧩 WickedBlocks - Collection of more than 120 layout blocks and components built with Tailwind CSS.
🧩 Daisy UI - UI Components for Tailwind CSS.
🧩 Kometa UI Kit - Free multi-purpose UI kit, built with Tailwind CSS.
🧩 Mamba UI - Free Tailwind CSS components, sections and templates.
🧩 Litepie Date picker - A date range picker component for Vue.js and Tailwind CSS.
🧩 Tailwind Datepicker - Adds a datepicker component built with Tailwind CSS and vanilla JavaScript.
🧩 Tailwind Typeahead - Typeahead/Autocomplete component built with Vue.js and Tailwind CSS.
🧩 Material Tailwind - Easy to use components library for Tailwind CSS and Material Design.
🧩 Layouts for Tailwind - Layouts and UI Patterns for Tailwind CSS.
🧩 HyperUI - Open source marketing and ecommerce Tailwind CSS components.
🧩 Snippets - Open source collection of animation snippets made for Tailwind CSS.
🧩 Fancy Tailwind - Large collection of Tailwind CSS UI components (700+).
🧩 Myna UI - Open source UI Components and Marketing Elements made with Tailwind CSS.
📁 Vue Notus - Open-source Tailwind CSS and Vue.js UI kit.
📁 Red Pixel Themes - Paid, developer-friendly templates made with Tailwind CSS.
📁 EasyTailwind - Freemium, easily customizable templates made with Tailwind CSS.
📁 Windmill Dashboard - Multi theme, completely accessible dashboard template.
📁 Tailwind Admin - Administration panel template with Tailwind CSS.
📁 Landing Gradients - Landing page template using gradients (1.7+).
📁 Resume - Simple resume with Tailwind CSS.
📁 Resume - A stylized resume template built with Tailwind CSS, featuring a nifty hero-pattern background and custom font.
📁 Simple Light - Free landing page template built with React & Tailwind CSS.
📁 V-Dashboard - Dashboard starter template built with Vue 3 and Tailwind CSS.
📁 Petra - Free landing page template built with Nuxt.js & Tailwind CSS.
📁 Tailmin - Admin dashboard built with Vue.js and Tailwind CSS.
📁 OhMySMTP Templates - Set of Transactional HTML Email Templates, built with Maizzle
📁 Material Tailwind Kit React - Free Tailwind CSS and React UI kit.
📁 Material Tailwind Dashboard React - Free Tailwind CSS and React admin template.
📁 Admin One Vue 3 - Free Vue.js 3 Tailwind CSS admin template with Vite & Vue CLI support.
📁 Cruip - Beautifully designed HTML, React, and Vue.js templates.

Starters & Themes

Legend: 💼 Package · 📟 Command line tool/generator · 🚀 Cloneable

📟 Create React App with PurgeCSS - CRA script that adds Tailwind CSS and PurgeCSS.
📟 Laravel Preset - Adds Tailwind CSS to the Laravel framework.
📟💼 Laravel Front-end Preset - Front-end preset using Tailwind CSS for Laravel.
📟💼 Laravel Dark Front-end Preset - Dark-themed front-end preset using Tailwind CSS for Laravel.
🚀 Create React App with EmotionJS - CRA boilerplate using Tailwind CSS and Emotion JS.
📟 Create React App with TypeScript - CRA template with support for Tailwind CSS and TypeScript.
📟 Next.js PWA – CLI that generate boilerplate code of Next.js PWA along with Tailwind CSS integration.
📟 new-tailwind-app - Creates React.js, Next.js, Gatsby.js, Vue3, Laravel, and basic Tailwind CSS apps.
🚀 Tailwind CSS Boilerplate - Tailwind CSS boilerplate using Parcel.
🚀 Jekyll Starter - Jekyll starter using Tailwind CSS.
🚀 Jekyll Starter - Jekyll starter using Tailwind CSS.
🚀 Jekyll Starter - Jekyll starter using Tailwind CSS
🚀 Gulp Starter - Gulp starter using Tailwind CSS.
🚀 Gatsby Starter - Gatsby starter using Tailwind CSS.
🚀 Gatsby Starter Simplicity - Gatsby starter using Tailwind CSS.
🚀 Gatsby Starter + TypeScript - Gatsby starter using Tailwind CSS and TypeScript.
🚀 Gatsby Starter + Emotion JS - Gatsby starter using Tailwind CSS and Emotion JS.
🚀 Gatsby Starter Opinionated - Gatsby starter using Tailwind CSS and opinionated goodies.
🚀 Create React App Boilerplate - CRA boilerplate using Tailwind CSS.
🚀 Create React App with PurgeCSS + Autoprefixer + CSSNano - CRA boilerplate using CSS Nano.
🚀 Dogpatch - WordPress starter using Webpack, Vue, Babel and Tailwind CSS.
🚀 Next.js Starter - Next.js boilerplate using Tailwind CSS.
🚀 Sapper & Svelte Starter - Svelte boilerplate using Sapper, Tailwind CSS, Purge CSS, Prettier and ESLint.
🚀 Netlify Lambda Starter - Netlify Lambda boilerplate using Tailwind CSS.
🚀 Hugo Theme Starter with Tailwind CSS - Hugo theme starter using Tailwind CSS.
🚀 Eleventy Web Starter - Starter kit using Eleventy, Tailwind CSS, Webpack and PostCSS.
🚀 Nanoc Starter - Nanoc starter using Tailwind CSS.
🚀 PostCSS and Browsersync Boilerplate - Boilerplate using CSS Nano.
🚀 ParcelJS + TypeScript Boilerplate - Boilerplate using Tailwind CSS, ParcelJS bundler and TypeScript.
🚀 VuePress Tailwind CSS Starter - A VuePress starter using Tailwind CSS.
🚀 Gatsby Serif - Gatsby's serif theme using Tailwind CSS.
🚀 Seminyak Hugo Theme - Hugo theme using Tailwind CSS.
🚀 Eleventy Starter - Production-ready, SEO-friendly blog starter using Tailwind CSS.
🚀 Vite + React + Tailwind Starter - Boilerplate using Vite, React and Tailwind CSS.
🚀 Vite + React + TypeScript + Tailwind 3.x starter - GitHub Template for Vite, React + Tailwind 3.x + TypeScript.
🚀 Vite + Vue 3.x + Tailwind 2.x Starter - Starter template using Vite, Vue, Vue Router and Tailwind CSS.
🚀 Shopify Theme Lab - Shopify theme development starter using Vue and Tailwind CSS.
🚀 Starter Dashboard Layout - Dashboard layout using Tailwind CSS and Alpine JS.
🚀 Jekyll Landing Website Starter - Production ready, SEO-friendly, performant landing website boilerplate using Jekyll and Tailwind CSS.
🚀 Next JS Boilerplate - Boilerplate for Next.js and Tailwind CSS.
🚀 Vitailse - Opinionated Vite starter template with Vue 3, TypeScript and Tailwind CSS.
🚀 Vite-Boot - Vite + Vue3 + TypeScript + Vue-Router4 + Pinia + Tailwind CSS + VueUse Template.

Open-Source Projects

Goodwork - Project Management & Collaboration tool.
Statusfy - Status page system using Tailwind CSS.
Todolist - To-do list application using Tailwind CSS.
LeagueStats - Statistics website for League of Legends players.
SapperCommerce - E-commerce storefront using Svelte & Tailwind CSS.
Misiki Books - Book shop using Vue + Moltin + Tailwind CSS.
Ubuntu 20.04 - An Ubuntu desktop using React.js + Tailwind CSS.
Angular Spotify - Spotify client built with Angular, Nx Workspace and Tailwind CSS.

Learning

Legend: 💙 Official resource · 🧪 Sample · 🔧 Setup Tutorial · 🎬 Video Tutorial · 🎓 Component or Page Tutorial · 🎥 Cast

💙🧪 Plugin Examples - Official plugin examples.
🧪 Tailwind Dark Mode Theme Switcher - Switching themes with CSS Custom Properties and Tailwind CSS.
🧪 Acquia - Acquia's hosting dashboard rebuilt with Vue.js and Tailwind CSS.
🧪 Navbar - Navbar made with Vue.js and Tailwind CSS.
🧪 Toggle switch - Switch using Tailwind CSS.
🧪 “Open” landing page - “Open” landing page template by Cruip built with Tailwind CSS Boilerplate.
🔧 Testing Tailwind CSS plugins with Jest - How to test Tailwind CSS plugins with Jest.
🔧 Tailwind CSS with Webpack 4 and PostCSS - How to setup Tailwind CSS with PostCSS and Webpack.
🔧 Tailwind CSS with CSS-in-JS - How to use Tailwind CSS with CSS-in-JS.
🔧 Tailwind CSS in a Laravel Project - How to setup Tailwind CSS in a Laravel project.
🔧 Tailwind CSS with Ember - How to add Tailwind CSS to an Ember application.
🔧 Sage WordPress theme and Tailwind CSS - How to setup Tailwind CSS in Sage.
🔧 Tailwind CSS with GatsbyJS - How to use Tailwind CSS with Gatsby.
🔧 Tailwind CSS with Phoenix 1.4 - How to setup Tailwind CSS in Phoenix 1.4.
🔧 Extend Tailwind CSS - How to Extend Tailwind CSS.
🔧 Web2Tailwind - How to build web components with Tailwind CSS with AlpineJS.
🎬 Rebuilding Laravel.io - Rebuilding Laravel.io with Tailwind CSS.
🎬 Rebuilding Coinbase - Rebuilding Coinbase with Tailwind CSS [see the Codepen].
🎬 Rebuilding Twitter - Rebuilding Twitter with Tailwind CSS [see the CodePen].
🎬 Rebuilding YouTube - Rebuilding YouTube with Tailwind CSS.
🎬 Rebuilding Netlify - Rebuilding Netlify with Tailwind CSS.
🎬 Rebuilding Resolute - Rebuilding Resolute with Tailwind CSS.
🎬 Let's Build: Movie Production Landing Page - Building a movie production landing page with Tailwind CSS.
🎬 Lets Build: Responsive Navbar - Building a responsive navbar with Tailwind CSS.
🎬 Let's Build: Dribbble Shot - Dribbble shot with Tailwind CSS.
💙🎬 Tailwind CSS: From Zero to Production - Complete walkthrough of Tailwind CSS, from installation to optimization for deployment.
🎬 Let's Build: Tweet component - Building a Tweet component with Tailwind CSS.
🎓 Modal Dialog - Creating a modal dialog with Tailwind CSS.
🎓 Building real-world UIs using Tailwind CSS - Building UIs of Shopify, Spotify, Netlify and Atlassian.
🎓 Rebuilding FreshBooks - Rebuilding FreshBooks with Tailwind CSS.
🎓 Login Page (PingPing) - Creating a login page with Tailwind CSS.
🎓 Login Page - Creating a login page with Tailwind CSS.
🎓 Vue.js Component with Tailwind and Laravel - Building a Vue.js component in a Laravel project.
🎓 Vue.js Modal - Building a customizable modal with Tailwind CSS and Vue.js.
🎓 Navigation - Building a navigation with Tailwind CSS.
🎓 Forms with Tailwind CSS - How to style a form with Tailwind CSS.
🎓 Photo gallery with CSS grids - Building a photo gallery with CSS grids and Tailwind CSS.
🎓 Rebuilding Bartik - Rebuilding Bartik (Drupal's default theme) with Vue.js and Tailwind CSS.
🎓 Rebuilding Airbnb's Home Page - Rebuilding Airbnb's Home Page with Tailwind CSS.
🎓 Typographic defaults in Tailwind CSS
🎓 Create a responsive navigation menu in Tailwind CSS
🎥 Laracasts Weekly Stream: Tailwind
🎥 More experimentation with Tailwind CSS
🎥 Rebuilding Spotify
🎥 Rebuilding Discord
🎥 Rebuilding Meetup

·

_{Contributions welcome! Read the contribution guidelines first.}

Awesome Seed RS

A curated list of awesome things related to Seed

Seed is an open-source Rust framework for creating fast and reliable web apps running in WebAssembly.

Contributions welcome. Add links through pull requests or create an issue to start a discussion.

Official Resources
Books
Quickstarts
Bundlers
Examples
Projects Using Seed
Libraries
Contribute

Official Resources

Books

Engineering Rust Web Applications - Diesel, Rocket and Seed.
Porting a JS app to Rust - Porting a JavaScript App to WebAssembly with Rust (blog series).

Quickstarts

Default quickstart - Contains only Rust libraries.
Quickstart with Webpack - Main features: Auto-reload, Prerendering, Minification, TailwindCSS, Typescript.

Bundlers

Trunk - WASM web application bundler for Rust.
Web Bundler - Bundles a Seed SPA for publishing.
Seeder - Set up Seed app and start dev server by running one command.

Examples

RealWorld example - "The mother of all demo apps" — Exemplary fullstack Medium.com clone.
Dark lang Realworld - Seed Realworld example on Quickstart with Webpack with integrated Dark lang Realworld.
Official examples - Smaller examples included in official repo.
ERWA mytodo - Rust full-stack example. Diesel, Rocket, Seed.
Template for GUIs with seed+gotham - Electron like template for local/desktop GUIs with Gotham, rust-embed, web-view and Seed.
Seeded Game of Life - Game of life with tutorial in pure Rust inspired by wasm tutorial.
Dota Underlord Perfect Build - An app to help build optimal deck in Dota Underlord.
Play Seed - Playground with several default examples.

Projects Using Seed

AdEx Explorer - Shows curated information about the payment channel network of the AdEx advertising protocol.
Kavik.cz - Open-source personal website.
benxu.dev/blog - A relatively simple open source personal blog. Built on Seed, maud, Rocket, and Diesel.
seed-rs.org - Seed's official website.
WeightRS - Minimalistic and privacy friendly progressive web app for tracking your weight.
Music composer - A basic music composition app.
Play Seed - Website about Play Seed, playground to demo Seed apps.
Typesync - Test your typing speed on song lyrics. Uses Seed, Rocket, and Diesel.
CalcuPi - A beautiful Monte Carlo simulation for approximating the value of pi.
Love Letter Tracker - A knowledge tracker for the card game Love Letter.
Whatlang.org - An interactive demo for whatlang (language recognition library).
Pslink - An URL-shortener page focused on use in publications (demo (user, password: demo)). Uses Seed, actix-web, and sqlx.

Libraries

Savory - Library for building user interface based on Seed.
seed-icons - Library with collections of icons to include in Seed-based application.
Seed Bootstrap - A collection of the Bootstrap CSS components.
seed_heroicons - Library providing Heroicons to include into Seed-based applications.

Contribute

Contributions welcome! Read the contribution guidelines first.

Awesome Web Performance Budget

Web Performance Budget is a group of limits to certain values that affect site performance that should not be exceeded in the design and development of any web project. By setting up the performance budget, we can focus more towards performance which can improve the speed and overall user experience of our websites. This list help us to provide link to various articles, projects, tools and techniques to maintain performance budget.

Articles
Tools to measure Performance Budget
Open source tools
Build Tools to set up performance budget
Bundle Analyzers
Website Analyzers
Blogs
Podcasts
Videos
Books
Case Studies

Articles

JavaScript Start-up Performance - Performance Budget by Addyosmani.
Performance Budget - Performance Budget by Addyosmani.
Your first performance budget - Explained how to define your first performance budget in a few simple steps.
Designing for Performance - How performance is important for designers.
Web Performance for Designers and developers - Front-end performance for web designers and front-end developers.
Performance as design - Best practise to see performance as an essential design feature.
Inside Design - Setting a web performance budget - Setting a performance budget by Invision.
Real-world Web Performance Budgets By Alex Russel - Can You Afford It?: Real-world Web Performance Budgets.
Performance Budget using Angular CLI - Implementing Performance Budget in Angular projects.
Performance budgets 101 - How to start a journey by setting up the performance budget.
Incorporate performance budgets into your build process - Set up performance budget into your build process.
How to make Performance Budget - Instructions for developing the performance budget.
Impact of Page Weight on Load Time - Impact of Page Weight on Load Time.

Tools to measure Performance Budget

Performance Budget Calculator - Calculate A Performance Budget For Your Site.
Web Page Test - Test your performance.
lightest app - Visualize web performance against competitors.
Speed Curve - Measuring web performance, get today's performance metrics.
Yellow Lab Tools - Online test to help speeding up heavy web pages.
Sitespeed.io - Easy to monitor and measure the performance of your web site.
Perf Track - Tracking framework performance at scale.

Open source tools

Perfume.js - Tiny, web performance monitoring library that reports field data back to your favorite analytics tool.
Falco - Helps you monitor, analyze, and optimize your websites.

Build Tools to set up performance budget

Bundle Size - Keep your bundle size in check.
Webpack Perf Budget - If you are using Webpack in your project then you can prefer this.
Lighthouse - How to set up a performance budget using lighthouse and automate using Lighthouse bot.
Grunt-perfbudget - Grunt task for performance budgeting.
Size Limit - Calculate the real cost to run your JS app or lib to keep good performance. Show error in pull request if the cost exceeds the limit.
Size Plugin - Track compressed Webpack asset sizes over time.
Performance Budget Builder - Lay out your template types, set a size budget for each template type, then plug in the sizes for each asset category that will load in the template.
Progressive Web Metrics - Lay out your template types, set a size budget for each template type, then plug in the sizes for each asset category that will load in the template.
rollup-plugin-size-snapshot - CLI tool and lib to gather performance metrics via Lighthouse.
ImportCost - VS Extension - Extension to display inline in the VS code editor the size of the imported package.

Bundle Analyzers

Bundlephobia - Find the cost of adding a npm package to your bundle.
bundle-buddy - A tool to help you find source code duplication across your JavaScript chunks/splits.
webpack-bundle-analyzer - Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap.
Disc - Visualise the module tree of browserify project bundles and track down bloat.
lasso-analyzer - Analyze and Visualise project bundles created by Lasso.
Rollup Visualizer - Visualize and analyze your Rollup bundle to see which modules are taking up space.
Parcel plugin Visualizer - A plugin for the parcel bundler to visualise bundle contents.
CSS Analyzer - CSS selectors complexity and performance analyzer.

Website Analyzers

Lighthouse Metrics - Lighthouse Metrics provides easy insights for your site's performance. Save your time by running tests from multiple locations to get the valuable insight you need.
UITest.com Site Check - Test your website in more than 80 tools (web-based and free).

Blogs

Web Performance Calender - Speed geek's favorite time of the year.

Podcasts

Chasing Waterfalls - Conversation with people to make web faster by Tim kadlec
Shoptalk Show - A podcast about building websites.

Videos

Concept of Performance Budget - Performance Budget with Tim Kadlec.
Implementing Performance Budgets - How to implement performance budgets to avoid regression - Google Chrome Developers.
Design Decisions Through The Lens Of A Performance Budget - How we can make smarter design decisions, from the beginning of a project, to ensure that our sites perform well.

Books

Case Studies

Web Performance Optimization case studies - Case studies and experiments demonstrating the impact of web performance optimization (WPO) on user experience and business metrics.
BBC - Cutting the mustard - Optimizations while building responsive websites.
Casper.com Self-hosting Optimization - How we shaved 1.7 seconds off casper.com by self-hosting Optimizely.
Netflix Performance Improvement by shipping less JS - A Netflix Web Performance Case Study.
Pinterest Web App Optimization - A Pinterest Progressive Web App Performance Case Study.
Smashing Magazine's Web Performance - Improving Smashing Magazine's Web Performance Case Study.
Tinder Web App Performance - A Tinder Progressive Web App Performance Case Study.
Treebo PWA Case Study - Treebo - React And Preact PWA Performance Case Study.
Twitter Lite - A Twitter Lite Web App at Scale.
Telegraph - Creating a web performance culture - Improving third-party web performance at The Telegraph.
Zillow's Performance Budget - A true story of how Zillow uses performance budgeting.

License

Awesome Web Animation

This list contains the most useful tools and data for creating web animations. * Any libraries that help animate anything in the browser - Canvas, SVG, text, scroll etc. * Books about animation in the browser. * GUI tools for animation that can be exported to the browser.

SVG
Common
CSS
Canvas
Animate on scroll
Text
GUI tools
React
Books
Videos

SVG

Snap.svg - The JavaScript library for modern SVG graphics.
Svg.js - The lightweight library for manipulating and animating SVG.
Vivus - Library to make drawing animation on SVG.
Walkway - An easy way to animate SVG elements.
Raphael - JavaScript Vector Library.
Bonsai - BonsaiJS is a graphics library and renderer.

Common

GSAP - JavaScript animation library.
TweenJS - A simple but powerful tweening / animation library for JavaScript. Part of the CreateJS suite of libraries.
Anime.js - JavaScript animation engine.
Mojs - The motion graphics toolbelt for the web.
Animo.js - A powerful little tool for managing CSS animations.
Move.js - CSS3 backed JavaScript animation framework.
Velocity - Accelerated JavaScript animation.
Animateplus - A+ animation module for the modern web.
Animatic - CSS animations engine.
Just Animate - Making Animation Simple.
Haiku Core - Interactive UI animation engine for the Web. Core renderer for Haiku Animator.
Between.js - Lightweight JavaScript (ES6) tweening engine.
Progressbar.js - Responsive and slick progress bars.
Bezier easing - Cubic-bezier implementation for your JavaScript animation easings.
Glsl easings - Easing functions in GLSL.
ES6-tween - ES6 version of tween.js.
Weeee.js - Tiny Javascript tweening engine.

CSS

Animate.css - A cross-browser library of CSS animations. As easy to use as an easy thing.
Motion-ui - The powerful Sass library for creating CSS transitions and animations.
Magic - CSS3 Animations with special effects.
Css-loaders - A collection of loading spinners animated with CSS.
SpinKit - A collection of loading indicators animated with CSS.
Bounce.js - Create beautiful CSS3 powered animations in no time.

Canvas

EaselJS - EaselJS is a library for building high-performance interactive 2D content in HTML5.
Fabric.js - JavaScript canvas library with animation support.
Paper.js - The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas.
Konva - Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
Two.js - A renderer agnostic two-dimensional drawing api for the web with animation support.
Ocanvas - JavaScript library for object-based canvas drawing.
Curtainsjs - Lightweight vanilla WebGL JavaScript library that turns HTML DOM elements into interactive textured planes.
Hover-effect - JavaScript library to draw and animate images on hover.
Pts.js - Pts is a typescript/javascript library for visualization and creative-coding.
tsParticles - tsParticles is a lightweight typescript/javascript library for creating easily particles animations.

Animate on scroll

AOS - Animate on scroll library.
Laxxx - Simple & light weight (3kb minified & zipped) vanilla JavaScript plugin to create smooth & beautiful animations when you scrolllll!
Wow - Reveal CSS animation as you scroll down a page.
Scrollreveal - Animate elements as they scroll into view.
ScrollMagic - The JavaScript library for magical scroll interactions.
Motus - Animation library that mimics CSS keyframes when scrolling.
Sal - Performance focused, lightweight scroll animation library.

Text

Malarkey - Simulate a typewriter effect in vanilla JavaScript.
Typed.js - A JavaScript Typing Animation Library.
Shuffle-text - Shuffle-text is JavaScript text effect library such as cool legacy of Flash.
Typebot - JavaScript library for typing animation.
Blotter - A JavaScript API for drawing unconventional text effects on the web.

React

Motion - Open source, production-ready animation and gesture library for React.
SVGR - Transform SVGs into React components.
React tsParticles - ReactJS wrapper for tsParticles
React spring - Open source, spring-physics based animation library for React that supports interpolations. Fast and easy to use.

GUI tools

Svgartista - SVG Artista is a tool that helps you animate stroke and fill properties in your SVG images with plain CSS code. It should work fine with path, line, polyline, rect, circle, ellipse and polygon elements. It cannot animate SVG gradients though, so please keep that in mind.
Mantra - Mantra is a timeline editing tool for web animations. It is inspired by tools such as Adobe Flash and After Effects.
Animista - Animista is a place where you can play with a collection of pre-made css animations, tweak them and get only those you will actually use.
Cssanimate - Welcome to CssAnimate.com, tool for easy and fast creating CSS3 keyframes animation, right in your browser without using any desktop software. If you want to render complex and consistent CSS3 animation on your site this tool is made for you! You can create complex CSS3 keyframe animation without any coding and to get ready made css styles for using on your site.
Ceaser - Now that we can use CSS transitions in all the modern browsers, let's make them pretty. I love the classic Penner equations with Flash and jQuery, so I included most of those. If you're anything like me*, you probably thought this about the default easing options: “ease-in, ease-out etc.” The mysterious cubic-bezier has a lot of potential, but was cumbersome to use. Until now. Also, touch-device friendly!
Cubic Bezier - A great utility for creating Bezier curves. You can import and export curves to/from your library to share them with others.
Keyframer - Tool that help visualize animation components and output the code required.
CSS Animation Kit - Select any predefined samples from top panel. Below samples there is a timeline of @keyframes. Timeline has 101 keyframes ( 0% to 100%) direction from left to right. Highlighted keyframe indicate that some style is assigned to that point. You can add new style at selected point.

Books

SVG animation

SVG is extremely powerful, with its reduced HTTP requests and crispness on any display. It becomes increasingly more interesting as you explore its capabilities for responsive animation and performance boons. When you animate SVG, you must be aware of normal image traits like composition, color, implementation, and optimization. But when you animate, it increases the complexity of each of these factors exponentially.

Creating Web Animations: Bringing Your UIs to Life

Thanks to faster browsers, better web standards support, and more powerful devices, the web now defines the next generation of user interfaces that are fun, practical, fluid, and memorable. The key? Animation. But learning how to create animations is hard, and existing learning material doesnt explain the context of the UI problem that animations are trying to solve. Thats where this book comes in.

Transitions and Animations in CSS: Adding Motion with CSS

Add life and depth to your web applications and improve user experience through the discrete use of CSS transitions and animations. With this concise guide, you'll learn how to make page elements move or change in appearance, whether you want to realistically bounce a ball, gradually expand a drop-down menu, or simply bring attention to an element when users hover over it.

Designing Interface Animation: Meaningful Motion for User Experience

Effective interface animation deftly combines form and function to improve feedback, aid in orientation, direct attention, show causality, and express your brands personality. Designing Interface Animation shows you how to create web animation that balances purpose and style while blending seamlessly into the users experience. This book is a crash course in motion design theory and practice for web designers, UX professionals, and front-end developers alike.

Web Animation using JavaScript: Develop & Design

We\'ve come a long way since the days of flashing banner ads and scrolling news tickers. Today, the stunning motion design of iOS and Android dramatically improves a users experience — instead of detracting from it. The best sites and apps of today leverage animation to improve the feel and intuitiveness of their interfaces. Sites without animation are starting to feel antiquated. This book provides you with a technical foundation to implement animation in a way thats both visually stunning and programmatically maintainable.

CSS Animations and Transitions for the Modern Web

Modern websites use a variety of animated effects not only to improve usability but also to delight and surprise users. Some of these effects require complex scripting or programming skills, but many are within the grasp of designers who are already familiar with CSS and HTML. CSS Animations and Transitions for the Modern Web shows designers how to add movement to web pages over time using CSS3 style definitions.

Animation in HTML, CSS, and JavaScript

This book will help you create practical / usable / wickedly-cool animations in HTML, CSS, and JavaScript. Each chapter is filled with cleanly explained concepts, beautifully illustrated diagrams, colorific code snippets, and cringeworthy one-liners guaranteed to make your friend who laughs at everything groan. You will start by learning how to create animations and transitions in CSS. Towards the end, you will learn how to create animations in JavaScript by manipulating DOM elements as well as pushing pixels on the canvas.

Foundation HTML5 Animation with JavaScript

Foundation HTML5 Animation with JavaScript covers everything that you need to know to create dynamic scripted animation using the HTML5 canvas. It provides information on all the relevant math you'll need, before moving on to physics concepts like acceleration, velocity, easing, springs, collision detection, conservation of momentum, 3D, and forward and inverse kinematics. Foundation HTML5 Animation with JavaScript is a fantastic resource for all web developers working in HTML5 or switching over from Flash to create standards-compliant games, applications, and animations that will work across all modern browsers and most mobile devices, including iPhones, iPads, and Android devices.

Videos

Yuri Artyukh youtube channel - This man creates amazing web animations using various technologies for this, and recording it all in steam format.

✨ See also web page version of this list ✨

Awesome Yew

A curated list of awesome things related to Yew.

Yew is a modern Rust framework inspired by Elm and React for creating multi-threaded frontend apps with WebAssembly.

Contributions welcome! Read the contribution guidelines first.

Official
Projects
Templates
Crates
Component Libraries
Components
Hooks
Utils
Wasm
Tooling
Articles
Books
Alternatives
Related lists

Official

Yew - Rust / WebAssembly framework for building client web apps.
Live demo - A todomvc demo.
Examples - Smaller examples included in official repo.
API Docs - Docs on docs.rs.
Website - Official website.
Chatroom - It is pretty active and is a great place to ask questions.
Reddit - Dedicated Sub Reddit.
Financial Contribute - Become a financial contributor and help us sustain our community.
Yewtify - Vuetify components for Yew Framework.

Projects

Realworld example - Exemplary real world app built with Rust + Yew + WebAssembly. It utilizes Yew's latest function components and hooks. It also supports desktop application powered by Tauri.
webapp.rs - A web application completely written in Rust, frontend is built with Yew.
Rust-Full-Stack - Easily testable and working Rust codes with blog posts to explain them.
Bucket Questions - A webapp written entirely in Rust for a dumb party game.
web-view todomvc desktop app - Demo how to use yew for a todomvc that compiles to WebAssembly and is bundled as a lightweight(~2mb) desktop app by web-view, as an alternative to Electron, web-view also has a demo.
yew-react-example - This project shows how to create a web app using a React component inside a Yew component.
Kirk - Just A Rust WebAssembly Blog.
rust-async-wasm-demo - Toy project to learn Rust and async that can be deployed to the web.
karaoke-rs - A simple, network enabled karaoke player in Rust.
I Love Hue! (rs) - A clone of the mobile game I Love Hue in Yew (Rust).
yew-styles-page - This is an initial project of a framework style for yew.
caniuse.rs - Rust feature search.
Rust electron yew demo - An example of building a Rust based web app (Yew) into a native app using electron.
covplot - Live graphs of worldwide CoVID-19 data.
Tanoshi - Tachiyomi-like web manga reader. Front-end for tanoshi.
Minesweeper - Minesweeper built with Rust, Yew and WebAssembly.
Freecell - A patience game written in Rust and Yew.
Daydream - A small Matrix web client written in Rust.
Yew-WebRTC-Chat - A simple WebRTC chat made with Yew.
Yew Fullstack Boilerplate - Highly opinionated boilerplate for creating full stack applications with Rust.
Chord Quiz - Practice recognizing chords in this Rust/Yew/WebAssembly app.
RustMart - Single Page Application (SPA) written using Rust, Wasm and Yew.
DevAndDev - A website where developers can find pair-programming partners. Written in Rust, Yew frontend.
yew-octicons - An easy interface for using Octicons in Yew projects.
Pipe - This is a Rust / Wasm client web app which is a task control center.
note-to-yew - Convert your markups into Yew macro online, which is also made by Yew.
ASCII-Hangman - Configurable Hangman game for children with ASCII-art rewarding.
dotdotyew - Dot-voting using Yew, with Rust powering the backend API.
wasm-2048 - 2048 game implemented with Rust and Yew and compiled to Wasm.
website-wasm - My personal website written in Rust via Yew/Wasm.
KeyPress - A Rust WebAssembly Website example for practising english for chinese.
yew-train-ticket - A Rust WebAssembly Webapp example basing Yew newest hooks and functional API, the code style is extremely like React Function Component.
yew-d3-example - Showing a d3 chart with Yew.
Oxfeed - A feed reader written in Rust with a Yew frontend.
Flow.er - A notebook app integrated with todo lists utility. Developed with Rust, WebAssembly, Yew and Trunk.
Fullstack-Rust - A Full Stack Rust application (Connect5 game) with Actix-web, Yew, Bulma CSS and Diesel.
Sea_battle - A simple example of a sea battle game. Rust + Yew.
tide-async-graphql-mongodb - Clean boilerplate for graphql services, with wasm/yew frontend.
surfer - A blog built on yew + graphql, with live demo site. Backend for graphql services, and frontend for web application.
qubit - A handy calculator, based on Rust and WebAssembly, Live Demo.
Paudle - A reimplementation of the excellent word game Wordle by Josh Wardle.
Rust algorithms - A website with interactive implementations of various algorithms (only sorting algorithms for now).
Marc Portfolio - A software developer portfolio, Live Demo.
zzhack - A personal blog, based on Rust & Yew, Live Demo.
Rquote - Rquote is a web application built using Rust and WebAssembly. It fetches Anime quotes from the Animechan API. Live Demo.
yew-ssr-tide - The example demonstrates Yew server-side rendering with tide & surf, it needs the development version of Yew.
yew-ssr-actix-web - The example demonstrates Yew server-side rendering with actix-web & reqwest, it needs the development version of Yew.
PixelGuesser - PixelGuesser is a real life party gam where players try to guess the contents of an image as quickly as possible.

Templates

Create Yew App - Set up a modern Yew web app by running one command, npx create-yew-app my-app.
yew-wasm-pack-template - A template for starting a Yew project to be used with wasm-pack.
yew-wasm-pack-minimal - A minimal template for starting a Yew project using wasm-bindgen and wasm-pack.
yew-parcel-template - Awesome Yew with Yew-Router and Parcel application.

Crates

Component Libraries

yew-mdc - Material Design Components for the Yew framework.
muicss-yew - MUI-CSS Components for Yew framework.
yew-bulma - A Rust library providing components based on the bulma css library for projects using Yew.
material-yew - Yew wrapper for Material Web Components.
Yewprint - Port of blueprintjs.com to Yew.
ybc - A Yew component library based on the Bulma CSS framework.
patternfly-yew - Patternfly components for Yew.
yew-feather - Feather Icons components for Yew.
tailwind-yew-builder - Builds Tailwind CSS for Yew using docker-compose. Also supports Trunk.
yew-components - Material Design Components for the Yew framework.
yew-chart - A Yew-based charting library that provides SVG based components for rendering charts.

Components

Yew Form - Components to simplify handling forms with Yew.
yew-component-size - A Yew component that emits events when the parent component changes width/height.
yew-virtual-scroller - A Yew component for virtual scrolling / scroll windowing.

Hooks

yew-hooks - Custom Hooks library for Yew, inspired by streamich/react-use and alibaba/hooks.
yew-side-effect - Reconcile Side Effects in Yew Applications, inspired by react-side-effect and react-helmet.
Bounce - The uncomplicated state management library for Yew, inspired by Redux and Recoil.

Utils

Yewdux - Redux-like state containers for Yew apps.
reacty_yew - Generate Yew components from React components via Typescript type definitions.
styled-yew - CSS in Rust, similar to styled-components, but for Yew.
stylist-rs - A CSS-in-Rust styling solution for WebAssembly Applications.
Yew Interop - Load JavaScript and CSS asynchronously in Yew.
Tailwind RS - Tailwind style tracer in rust, JIT + AOT interpreter.
yew-style-in-rs - Scoped CSS in Rust for Yew.

Wasm

wasm-bindgen - Facilitating high-level interactions between WebAssembly modules and JavaScript.
stdweb - Provides Rust bindings to the Web APIs and to allow a high degree of interoperability between Rust and JavaScript.

Tooling

wasm-pack - Your favorite Rust -> WebAssembly workflow tool.
wasm-pack-action - Github action to install wasm-pack by downloading the executable to speed up CI/CD.
wasm-bindgen-action - Github action to install wasm-bindgen by downloading the executable to speed up CI/CD.
cargo-web - A Cargo subcommand for the client-side Web.
Trunk - Build, bundle & ship your Rust Wasm application to the web.
trunk-action - Github action to install Trunk by downloading the executable to speed up CI/CD.
wabt - The WebAssembly Binary Toolkit, for the wasm-strip and wasm-objdump tools to reduce .wasm file size.
binaryen - Compiler infrastructure and toolchain library for WebAssembly, for the wasm-opt tool to reduce .wasm file size.

Articles

Books

The WebAssembly Book - Working with the web and producing .wasm files.
The wasm-bindgen Guide - How to bind Rust and JavaScript APIs.
The wasm-pack Guide - How to build and work with rust-generated WebAssembly.
Programming WebAssembly with Rust - Includes a chapter Advanced JavaScript Integration with Yew on creating an app with Yew.
Creative Projects for Rust Programmers - Chapter 5, Creating a Client-Side WebAssembly App Using Yew.

Alternatives

Yew team love to share ideas with other projects and believe we can all help each other reach the full potential of this exciting new technology.

Draco - A Rust library for building client side web applications with WebAssembly.
Percy - A modular toolkit for building isomorphic web apps with Rust + WebAssembly.
Sauron - Sauron is an HTML web framework for building web-apps.
Seed - A Rust framework for creating web apps.
Smithy - A framework for building WebAssembly apps in Rust.
Dioxus - Elegant React-like library for building user interfaces for desktop, web, mobile, SSR, liveview, and more.
Sycamore - A reactive library for creating web apps in Rust and WebAssembly.

Awesome Rust and WebAssembly - A list of awesome Rust and WebAssembly projects, libraries, tools, and resources.
Awesome WebAssembly - Collection of awesome things regarding WebAssembly ecosystem.
Awesome Rust - A curated list of Rust code and resources.

Awesome Material-UI

Material-UI is a React components library for faster and easier web development. It follows Material Design from Google.

Resources
Articles
Tools
Theming
Related Projects
Components
Applications
Boilerplates

Resources

Official projects and resources of Material-UI Design.

Material-UI - React components for faster and easier web development. Build your own design system, or start with Material Design.

Articles

Getting started with Material-UI - How to setup and use Material-UI in your React web application.
How to autogenerate forms in React and Material-UI with MSON - A guide to auto generate forms using JSON in Material-UI.
Let's Create a COVID-19 Tracker using React.js - A guide to develop covid 19 tracker application using Material-UI
Serverless Material UI contact form - A guide to develop Material-UI contact form
Embed Medium as a blog on your React Website — Part 2 - A guide to embed medium as a blog on your react website using Material-UI

Tools

These are tools and utilities to help build apps using Material-UI Design.

Material-UI Snippets - VSCode extension providing snippets.
Material-UI Codemorphs - VSCode extension providing codemods.

Theming

Here are utilities that can help you customize your theme and ability to change it in browser.

Create Material-UI Theme - Online tool for creating Material-UI themes via Material Design Color Tool.
Material-UI Theme Generator - Material-UI theme/palette generator.
Material-UI Theme Editor - A tool to generate themes for your Material-UI applications by just selecting the colors and having a live preview.

Material-UI Design family of projects.

Material Theme Editor - Create and customize your Material theme.
Components Extra - Provides a set of "molecule" components built on top of Material-UI such as a Footer, a CookiesBanner, a BackToTop button and other complex elements highly customizable to help developers build the macro parts of their UI very quickly. Those components are often duplicated across sites - this library solves this exact problem.
React Admin - A frontend Framework for building admin applications running in the browser, on top of REST/GraphQL APIs, using ES6, React and Material Design.
React Github Repo Cards - 8 best GitHub repositories of Sabesan Sathananthan.
Material-UI Medium Blog - Sabesan Sathananthan's last 10 Medium blogs.

Components

A list of UI components built with Material-UI Design.

Material-UI Pickers - Date and time pickers built for @material-ui/core.
Material-UI Chip Input - Material-UI chip input inspired by Angular Material chip input.
Material-UI Password field - A password field using Material-UI.
Fullscreen Dialog - A fullscreen dialog for Material-UI.
Material-UI Upload - Upload controls made in Material-UI using FileAPI.
Super Select Field - Multi-selection autocomplete dropdown component for Material-UI.
Material JSON Schema Form - Material-UI form generated from json.
Notistack - Easy snackbars for Material-UI (so you don't have to deal with open/close state of them).
Material-UI Dropzone - Material-UI component built on top of react-dropzone.
Formik-Material-UI - Bindings for using Material-UI with formik.
Redux-Form-Material-UI - Wrapper components to facilitate using Material-UI with Redux Form.
Final-Form-Material-UI - Wrapper components to facilitate using Material-UI with Final Form.
Material-UI Auto Rotating Carousel - Material style carousel.
Material-UI Image - Material style image with loading animation.
Material-UI Flat Pagination - A flat design pagination component for Material-UI.
Dx-react-scheduler-Material-UI - A scheduler/calendar component for Material-UI.
Dx-react-chart-Material-UI - Charts for Material-UI that visualizes data using a variety of series types, including bar, line, area, scatter, pie, and more.
Material-UI Medium Blog - Extended Material-UI Card component to show the Medium blogs.
React Github Repo Cards - Extended Material-UI Card component to show the GitHub repositories.
React molecule-components - React molecule-components based on Material-UI.
Material-UI NestedMenuItem - Drop-in replacement for MUI's MenuItem with infinitely nested menus, and open on hover.
React-planet - Create circular menus which looks like planets.

Applications

A list of mature apps built with Material-UI Design.

bethesda.net - The official site for Bethesda, publisher of Fallout, DOOM, Dishonored, Skyrim, Wolfenstein, The Elder Scrolls, more.
NEO Tracker - NEO blockchain explorer and wallet.
TagSpaces - An offline, open source, file manager.
Builder Book - Books that teach you how to build full stack, production-ready web apps.
NPM registry browser - An open source web app that lets you search the npm registry and browse packages details.
Serverless Permission Policy Generator - An Online Application to generate AWS IAM permissions required for deploying a Serverless stack.

Boilerplates

A list of starter projects and boilerplates built with Material-UI Design.

Create React App example (mui-org/material-ui) - Create React App example from official Material-UI repo.
create-react-app-material-ui - Simple Create React App with Material-UI form submit example.
react-materialui-boilerplate - A starter kit for react and Material-UI.
gatsby-starter-material-ui - A starter template for Gatsby using Material-UI.
saas - Boilerplate for building your own SaaS product; built with TypeScript, React, Express, Material-UI.
create-react-app-material-typescript-redux - A ready to use boilerplate for starting big react projects.

Contributing

Your contributions are always welcome! Click Here to read the guidelines.

Awesome Building Blocks for Web Apps

Curated list of standalone features to be integrated into web applications: Get full features built by others instead of having to write everything yourself.

If you like these building blocks, check out componently.com, a marketplace where developers can search, compare and integrate web application building blocks.

UI Elements
Exit Intent Popup
Auth
Booking
Notification
Social
Chat Bot
Chat
Monitoring
Content Management
Consent Management
Media
Form
Marketing
Changelog
Telecommunication
Social Media
Search
Feature flags
Reviews
Related awesome-lists

UI Elements

Tailwind UI - UI components, by the creators of Tailwind CSS.
Webix - JavaScript UI library and framework for displaying data in different ways.
Highcharts - Interactive charts for web.
Webatoms - JavaScript bridge for Xamarin.Forms.
Creative Tim - Themes for React, Angular, Vue, Lavarel and HTML5.
Syncfusion - Data visualization components and PDF Viewer.
CoreUI - Vue admin template.
UIfort - UI design systems for all major frontend frameworks.
Semantic UI - Open source UI component library for React, Meteor, Ember and Angular.
Design Revision's Shards Pro - Design blocks for web or mobile apps.
Themesberg - Bootstrap templates, themes and UI kits.
Treact - React templates for landing pages, built on Tailwind CSS.
Creative Designs Guru - Themes for React, Nextjs and Eleventy, built with Tailwind CSS.

Wisepops - Contextual popups, banners and bars for mobile and desktop visitors.
Listagram - Interactive opt-in form for collecting email addresses.
Poptin - Popups and forms that can be integrated anywhere in the website.

Auth

Auth0 - Authentication management with native support for Angular, React and VueJS.
Firebase - PaaS from Google, including authentication management.
Okta - Authentication and Authorization solution with support for Angular, React and VueJS.
Onelogin - Authentication focussed on company internal applications.
Microsoft Azure Active Directory - Authentication management in Azure, based on Microsoft accounts.
AWS Cognito - AWS authentication management. Frontend integration is part of AWS Amplify.

Booking

Calendly - Stand-alone booking solution.
Zoho Bookings - Online scheduler integrated into Zoho Suite.
Acuity Scheduling - Appointment scheduling with extensive API.
10to8 - Booking tool with many features in the free tier.
SuperSaaS - Appointment scheduling with focus on group scheduling.
SimplyBook.Me - Booking tool with its own booking directory.
OnceHub - Scheduling via ScheduleOnce and meeting management via InviteOnce.
YouCanBookMe - Online scheduling for teams.
OnSched - Scheduling API for marketplaces & applications.
AppointmentPlus - Appointment scheduling with coupons.
Booxi - Booking and online directory components.
Cogsworth Scheduler - Online Scheduler for business with a powerful API.

Notification

OneSignal - Mobile and web notifications.
Notific - Notifications including a PHP SDK.
WonderPush - Notifications focused on speed.
VWO Engage - Notifications as part of a larger marketing suite.
Signalize - Free notifications with paid analytics add on.

Stream - Activity feed & chat APIs.
EmbedSocial's embedfeed - Social media aggregator.

Chat Bot

Fresh chat - Chatbot in Freshworks support suite.
Tiledesh - AI-powered live chat.

Chat

Daily.co - Video chat.

Monitoring

Sentry - Full-stack error monitoring with release management included.
Raygun Crash Reporting - Error monitoring as part of the Raygun suite.
Honeybadger - Error, uptime and check-in monitoring.
Rollbar - Error monitoring with the ability to replay HTTP requests that caused errors.

Content Management

Contentful - Headless content management system.

Cookiefirst - Cookie consent manager.
usercentrics - Compliance manager that can be implemented as part of existing pages.
Sourcepoint - Compliance management as part of a suite including also ad blocker recovery.
PiwikPro - Compliance management as part of an analytics tool.
Consent Management Provider - German management tool for Cookie Consent.
UniConsent - Consent management platform for GDPR, CCPA, COPPA compliance.
TrustArc - Privacy management for the CCPA, GDPR, LGPD and 900+ other global regulations.
Cookiebot - Cookie tracking manager.
iubenda - Consent management and terms and conditions generator.
Civic Cookie Control - Smaller Cookie and GDPR compliance product.
CCM19 - German cookie consent manager.
CookieInformation - Focus on compliance reporting via a dashboard.
CookiePro - Cookie management as part of a privacy management solution.
React Cookie Consent - A small and customizable cookie consent bar for React applications.
React Cookie Banner - React cookie banner which can be automatically dismissed with a scroll.

Media

Mux - Stream hosted and live videos.
Spotify web playback SDK - Client-side JavaScript library which allows you to create a new player in Spotify Connect and play any audio track from Spotify in the browser via encrypted media extensions.

Form

Static Forms - Form that sends its results to your email.
FlyingForms - Building, versioning and managing forms.

Marketing

TrustPulse - Shows recent buyers on your website.

Changelog

Beamer - Combination of push notifications and changelog management.
Changelogfy - A product release notes tool.
Changefeed - Changelog as stand-alone page or embeddable widget.
Canny's Changelog - Combines changelog with product roadmaps.
ProductFlare's Changelog - Changelog widget around a product team task management system.
Changes - Changelog building kit.

Telecommunication

Vonage - Voice, messaging, video and data capabilities across unified communications, contact centers and communications APIs.

AddThis - Social sharing buttons, available on AMPs.
ShareThis - Social sharing buttons.
AddToAny - Sharing buttons for many different target services.

Search

Algolia - Search for your application.
Search UI - UI integration for ElastiSearch.

Feature flags

Optimizely's Rollouts - Feature flags combined with A/B testing.
LaunchDarkly - Feature management with multiple integrations in CI servers and ticketing systems.
Split - Another feature management with multiple integrations in CI servers and ticketing systems.
Rollout - Feature management focusing on segmented roll-out of features.

Reviews

JustReview - Collect reviews from e-commerce, social media and review service providers and embed on a website.
ReviewsOnMyWebsite - Collect, monitor and display customer reviews.

awesome-svelte logo

Awesome Svelte

⚡ A curated list of awesome Svelte resources

Svelte is a new way to build web applications. It's a compiler that takes your declarative components and converts them into efficient JavaScript

Contributions welcome. Add links through pull requests or create an issue to start a discussion.

Resources
Official Resources
Community
Conferences
Podcasts
YouTube Channels
Tutorials
Studies
Integrations
Preprocessing
Mobile
UI Libraries
UI Components
Table
Notification
Grid
Icons
Calendar
Maps
Form
Charts
Miscellaneous
Scaffold
Client
Universal
Utilities
Animations
Form
WebGL
Portal
Fonts
Internationalisation
Routers
Frameworks
Dev Tools
Lint
Docs
Test
Editors

Resources

Official Resources

Community

Twitter
Discord
Reddit
Japan Discord - Svelte日本.

Conferences

Svelte Summit

Podcasts

Svelte Radio

YouTube Channels

Tutorials

Getting Started with Svelte 3 - DigitalOcean.
Building My First Svelte App - Scotch.io.
Develop a complete application with Svelte and TypeScript - MDN Web Docs.
An Introduction to Actions - Svelte School.
Svelte Tutorial for Beginners - The Net Ninja (YouTube).
Sapper Tutorial (Crash Course) - The Net Ninja (YouTube).
SvelteJS Series - tutorials and talks - SpinSpire (YouTube).
Svelte Stores - @lihautan (YouTube).
Svelte Actions - @lihautan (YouTube).
Svelte 101 - @lihautan (YouTube).
Learn Svelte by building a habit tracker app - RadDevon.
Meet Svelte 3, a Powerful, Even Radical JavaScript Framework - SitePoint, by Chrome DevTools engineer @Jack_Franklin.
Create your blog with SvelteKit - @zhuzilin (Github).

Studies

Studies and research on the Svelte framework.

SvelteScaling - Does Svelte Scale?
Will it Scale? - Finding Svelte's inflection point.
JavaScript Frameworks Performance Comparison - Performance of Svelte and other top javascript frameworks.

Integrations

Preprocessing

svelte-preprocess - A preprocessor for PostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript, Pug and much more.
MDSveX - Preprocessor for MDX markdown.
svelte-preprocess-markdown - Write Svelte components in markdown syntax.
svelte-preprocess-less - Preprocessor for less.
modular-css - Preprocessor support for modular-css.
svelte-preprocess-postcss - Use PostCSS to preprocess your styles in Svelte components.
svelte-preprocess-sass - Preprocessor for sass.

Mobile

UI frameworks for mobile.

Svelte Native - Svelte controlling native components via Nativescript.
Framework7 - Full featured HTML framework for building iOS & Android apps.

UI Libraries

AgnosticUI - Accessible Svelte Component Primitives (that also work with React, Vue 3, and Angular).
Svelte Materialify - A Material UI Design Component library heavily inspired by vuetify.
Sveltestrap - Bootstrap 4 & 5 components.
Smelte - UI framework with material components built with Tailwind CSS.
Svelte Material UI - Material UI Components.
carbon-components-svelte - Svelte implementation of the IBM Carbon Design System.
attractions - A pretty cool and modern UI kit
svelte-chota - Component library built with Chota, a super light-weight CSS framework

UI Components

Table

Tables and data grids.

svelte-simple-datatables - A Datatable component for Svelte
svelte-table - A table implementation that allows sorting and filtering.
svelte-generic-crud-table - Agnostic web-component for object-arrays with CRUD functionality. Sort and resize columns. Multiple tables per page.
svelte-generic-table-pager - Svelte-generic-crud-table with paginator.

Notification

Toaster / snackbar - Notify the user with a modeless temporary little popup.

svelte-notifications - Toast notifications component that can be used in any JS application.
svelte-favicon-badge - A custom component that adds a favicon and a badge that you can use to show for example number of unread messages, etc.
@zerodevx/svelte-toast - Simple elegant toast notifications.

Grid

svelte-grid-responsive - Bootstrap-inspired responsive grid system.
svelte-flex - A simple and reusable flexbox component for Svelte.

Icons

svelte-fa - Tiny FontAwesome 5 component.
svelte-simple-icons - Simple Icons component.
svelte-awesome - Awesome SVG icon component, built with Font Awesome icons.
svelte-icons - Icon components.
svelte-heroicons - Icons, crafted by the creators of Tailwind CSS.

Calendar

Display non-editable events in a calendar.

svelte-fullcalendar - A component wrapper around FullCalendar.
svelte-calendar - A lightweight datepicker with neat animations and a unique UX.

Maps

svelte-googlemaps - Google Maps component.
svelte-mapbox - MapBox map and autocomplete components.
leaflet-svelte - Svelte wrapper for Leaflet.

Form

Lets the user create and edit data.

Checkbox

Switch / on/off toggle / checkbox.

svelte-checkbox - A checkbox component (cool animation, customizable).
svelte-toggle - Basic toggle component with styling.

Charts

svelte-frappe-charts - Svelte bindings for frappe-charts.

Miscellaneous

svelte-tree-viewer - A lightweight component to render tree views.
svelte-copyright - A Svelte component to format and display a copyright notice.

Scaffold

Templates / boilerplate / seed / starter kits / stack ensemble / Yeoman generator.

Client

Render Svelte application in the browser only.

sveltejs/template - Template for building basic applications with rollup.
component-template - A base for building shareable components.
svelte-component-template - A base for building shareable components.
svelte-pwa-template - A starter template for PWAs based in the official Template.
svelte-redux-toolkit - A starter template integrating Redux-Toolkit.
svelte-ts-eslint-prettier-template - Starter template with TS activated, and ESLint and Prettier working together.
svelte-typescript-jest - Starter template with Typescript activated and Jest working.

Universal

SSR framework.

sapper-template#rollup - The default Sapper template, available for Rollup.
sapper-template#webpack - The default Sapper template, available for Webpack.
sapper-firebase-typescript-graphql-tailwindcss-actions-template - Template that includes Sapper, Firebase functions and hosting, TypeScript and TypeGraphQL, Tailwind CSS, ESLint, and automatic building and deployment with GitHub Actions.
sapper-mdsvex-template - The default Sapper template with mdsvex.
sapper-tailwindcss-template - The default Sapper template with Tailwind CSS.
sapper-typescript-graphql-template - Template that includes Sapper, TypeScript preprocessing, and a GraphQL server through TypeGraphQL.
sapper-start - Sapper Rollup template with opinionated defaults such as SCSS support, shorthand paths, less boilerplate files and more.

Utilities

Animations

svelte-typewriter - A simple and reusable typewriter effect for your Svelte applications.

Form

svelte-forms-lib - A lightweight library for managing forms.
felte - Extensible form library, with built-in Yup, Zod, Vest, and Superstruct validation.
vest - 🦺 Declarative form validation framework inspired by unit testing.

WebGL

svelthree - Component library for declarative construction of reactive and reusable three.js scene graphs.

Portal

svelte-portal - Component for rendering outside the DOM of parent component.
svelte-teleport - A component to teleport elements across the DOM.

Fonts

svelte-web-fonts/google - Tiny component for easily loading Fonts via the Google Fonts API including autocompletion.

Internationalisation

svelte-fluent - Components for easy integration of Fluent localization.
svelte-i18n - Internationalization library for Svelte.
sveltekit-i18n - For integrating i18n style localization in SvelteKit.
@tolgee/svelte - Web-based localization tool enabling users to translate directly in the Svelte app they develop.

Routers

For Single Page Applications (SPAs) and more.

svelte-router-spa - Router adds routing to your Single Page Applications (SPA). Includes localisation, guards and nested layouts.
svelte-routing - A declarative Svelte routing library with SSR support.
tinro - A tiny, dependency free and highly declarative router.
svelte-spa-router - Optimized for Single Page Applications (SPA) with hash based routing and support for parameters.
svelte-client-router - Svelte Client Router is everything you need and think when routing SPA's.

Frameworks

SvelteKit - The fastest way to build Svelte apps.
Sapper - The next small thing in web development, powered by Svelte.
Elder.js - Opinionated static site generator and web framework for Svelte built with SEO in mind.
Routify - Routes for Svelte, automated by your file structure.
JungleJS - The Jamstack framework for Svelte with GraphQL.

Dev Tools

Lint

Lint and format your code.

eslint-plugin-svelte3 - An ESLint plugin for components.
prettier-plugin-svelte - Format your components using prettier.
svelte-check - Check your code.
eslint-plugin-svelte - An ESLint plugin for Svelte using AST.

Docs

Create documentation.

svelte-docs - A rapid way to write documentation for your Svelte components.
sveltedoc-parser - Generate a JSON documentation for your component.
svelte-docster - Generate metadata about your Svelte files from jsdoc.

Test

svelte-jester - A Jest transformer to compile your components before importing them into tests.
@testing-library/svelte - Simple and complete Svelte DOM testing utilities that encourage good testing practices.
jest-transform-svelte - Jest Transformer for Svelte components.

Editors

Text editor plugins.

Visual Studio Code

Svelte for VS Code - Provides syntax highlighting and rich intellisense for your components.
Svelte 3 Snippets - Svelte 3 Snippets for VS Code.

Atom

ide-svelte - Provides syntax highlighting and rich intellisense for your components.
language-svelte - Provides syntax highlighting for components, directives and other Svelte specific syntax in Atom.

Sublime Text

Svelte - Syntax highlighting and support for Sublime Text.

Vim

vim-svelte - Vim syntax highlighting and indentation for Svelte 3 components.
vim-svelte-plugin - Syntax highlighting and support for Vim.
coc-svelte - Syntax highlighting and support for (Neo)Vim.

JetBrains

Svelte - Syntax highlighting and support for JetBrains.

Awesome Design Systems

A curated list of bookmarks, resources and articles about design systems focused on developers.

Design systems
UI Design tools
Design tokens
Pattern library
Testing
Books
Talks

Design systems

A Design System is an ever evolving collection of reusable components, guided by rules that ensure consistency and speed, by being the single source of truth for any product development.

Design systems of some "known" companies

Atlassian Design Guidelines - End-to-end design language to create straightforward and beautiful experiences.
Firefox Photon Design System - Launch recognizable, enjoyable Firefox products and features faster.
GitHub Primer - Open-source it to allow the community to design and build their own projects.
GitLab Design System - Pajamas - Resources, components, and design guidelines behind GitLab.
Google Material Design - Create intuitive and beautiful products with Material Design.
IBM Carbon - Carbon is IBM's open-source design system for products and experiences.
Shopify Polaris - Our design system helps us work together to build a great experience for all of Shopify's merchants.

See more design systems here!

Design systems articles

More resources

Design system checklist - Build better design systems. An open-source checklist to help you plan, build and grow your design system.
Design.system - Resources for the design systems community.
Super friendly - We help in-house teams make better digital products with design systems.

UI Design tools

Design tools

Figma - Helps teams create, test, and ship better designs from start to finish (cross-platform).
InVision - The digital product design platform powering the world's best user experiences.
Sketch - A design toolkit built to help you create your best work from your earliest ideas, through to final artwork (for macOS).
AdobeXD - Share your story with designs that look and feel like the real thing. Wireframe, animate, prototype, collaborate, and more — it’s all right here, all in one UI/UX design tool.
Marvel - Marvel has everything you need to bring ideas to life and transform how you create digital products with your team. Placing the power of design in everyone’s hands.
UXPin - Design and manage your entire UX/UI project in one tool.

See design tools plugins here!

Integrations

Abstract - Design collaboration without the chaos (for Sketch and XD on macOS).
Avocode - Helps you share design files, discuss changes, and code websites, mobile apps, & newsletters faster.
InVision Design System Manager - Powers creative and consistent design at scale with a central place to manage design and coded components.
Zeplin - The better way to share, organize and collaborate on designs—built with developers in mind.

Accessibility for developeres - 5 simple ways developers can help improve and enforce website accessibility.
Stark - Empowers you to design with accessibility in mind from conception of brand to fruition of product. Contrast checker, colorblind simulation and color suggestions.
The A11Y Project - A community-driven effort to make web accessibility easier. See resources section.

Design tools articles

Adobe XD vs Sketch vs Figma vs InVision - How to Pick the Best Design Software in 2020

Design tokens

Design Tokens W3C Community Group - View repository on GitHub here!
DesignTokens.dev - Ship your design tokens without managing infrastructure.
Diez - Free & open-source developer toolkit for expressing visual styles that can be shared across codebases, native platforms, and teams.

Plugins

Abstract Connect - A Design tokens extractor for devs using Abstract & JavaScript.
Zeplin JSON export tokens - Design tokens Zeplin extension to generate your tokens in JSON format.

Tools

Figmagic - Generate design tokens, export graphics, and extract design token-driven React components from your Figma documents.
Style Dictionary - A Style Dictionary uses design tokens to define styles once and use those styles on any platform or language.
Superposition - Extract design tokens from websites and use them in code and in your design tool. Use the design system you already have.
Theo - Theo is an abstraction for transforming and formatting Design Tokens.

Articles

See more design tokens info here!

Pattern library

Styleguides and documentation

Stencil - Toolchain for building reusable, scalable Design Systems.
Zeroheight - Create beautiful living styleguides and document all your design system resources in one place. Learn about this.

Develop isolated components

Pattern Lab - Pattern Lab helps you and your team build thoughtful, pattern-driven user interfaces using atomic design principles.
React Styleguidist - Isolated React component development environment with a living style guide.
Storybook - Build bulletproof UI components faster. Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.
Styled System - Styled System is a collection of utility functions that add style props to your React components and allows you to control styles based on a global theme object.

Storybook addons

Accessibility - Test component compliance with web accessibility standards.
Actions - Get UI feedback when an action is performed on an interactive element.
Backgrounds - Switch backgrounds to view components in different settings.
Console - Show console output like logs, errors, and warnings in the Storybook.
Docs - Document component usage and properties in Markdown.
Knobs - Interact with component inputs dynamically in the Storybook UI.
Links - Link stories together to build demos and prototypes with your UI components.
Source - View a story's source code to see how it works and paste into your app.
Storyshots - Take a code snapshot of every story automatically with Jest.
Viewport - Build responsive components by adjusting Storybook's viewport size and orientation.

More info to Storybook here!

Pattern libraries articles

Testing

Unit & Regression test

Chromatic - Visual testing for React, Angular and Vue. Chromatic ensures consistency in UI components, down to the pixel. Every commit is automatically tested for visual changes in the cloud.
Testing library - Simple and complete testing utilities that encourage good testing practices.

Books

Atomic Design - Atomic design methodology for creating design systems by Brad Frost.
Building Design Systems - Unify user experiences through a shared design language by Sarrah Vesselov and Taurie Davis.
Design systems - A practical guide to creating design languages for digital products by Alla Kholmatova (Smashing Magazine).
Front-End Style Guides - Creating and maintaining style guides for websites by Anna Debenham.
Frontend Architecture for Design Systems - A modern blueprint for scalable and sustainable websites by Micah Godbolt.
Introduction to Design Systems - A practical introduction to design systems by using React, Figma and Storybook by Emma Bostian
Modular Web Design - Creating Reusable Components for user experience design and documentation by Nathan Curtis.

Talks

Building Accessible Interfaces: Patterns And Techniques - Will be building and refactoring common UI components, and share a couple of techniques she often uses to build with accessibility in mind by Sara Soueidan.
Design Processes & Systems in Craft - Design shouldn't be a siloed practice, but a collaborative effort rooted in process. How do we get there? In this session, we'll look at how we can reframe our design approach to be more human-centric and systems-minded by Courtney Bradford.
Design Systems - The State of the Web - Conversation about the role of design systems in modern web development and how they can change the dynamics between designer and developer by Adam Argyle (Design Advocate at Google).
Design Systems - Women of React conf by Neha Sharma.
How To Build a Design System | UXPin - Will teach you how to build a UX Design System using the UX Pin prototyping & design platform.
Introducing Design Systems Into Chaos - Shares practical examples on where to begin to set up a design system, what to prioritize, and how to make a big impact to customers and colleagues, to help you introduce systems that bring order to chaos by Diana Mounter (Design Systems Lead at GitHub).
Jina Anne - Designing a Design System - Will share strategies for how to approach, design and build an effective design system; how to successfully maintain the system to ensure ongoing usefulness by Jina (Lead Designer on the Design Systems team at Salesforce UX).
Level up your Design System with styled-system - Women of React conf by Taley'a Mirza.
Maintaining Design Systems - Helps you learn how to keep your system and the products it serves in sync and understand how to maintain and evolve your design system to give your users get the best possible experience by Brad Frost (Front-end designer).

Contributing

Contributions welcome! Read the contribution guidelines first.

Awesome Inertia.js

A tool for building single-page applications using classic server-side routing and controllers.

Useful Links
Adapters
Client-side
Server-side
Resources
Presets
Packages
Articles
Examples
Other

Useful Links

Legend: 💜 Official · ⭐ Featured

Documentation - Official website and documentation.
Twitter - Official Twitter account.
Discord - Official Discord server.
Organization - Official GitHub organization.

Adapters

Client-side

💜 Vue.js
💜 React
💜 Svelte
Mithril
Preact

Server-side

Resources

Presets

⭐ Laravel Inertia Preset - One-command Laravel preset with Tailwind CSS, Vite, Inertia.js and Vue.js.
💜 Laravel Breeze - Laravel's official authentication scaffolding, with Tailwind CSS and Inertia.js.
💜 Laravel Jetstream - Laravel's official application scaffolding, with Tailwind CSS, Inertia.js and Vue.js.
Laravel front-end preset - Laravel front-end preset for Inertia.js.
Laravel Moonlight - Laravel front-end preset with Tailwind CSS, Inertia.js and Vue.js.
Titanium - Laravel front-end preset with Tailwind CSS, Inertia.js and Vue.js.
Breeze React - Laravel Breeze fork with Tailwind CSS, Inertia.js and React.

Packages

Kakunin - Laravel package for real-time form validation.
Resource Links - Laravel package for adding links to API resources.
Navigation - Laravel package for generating menus, breadcrumbs and other navigational elements.
Tables for Laravel - Provides a DataTable component with integration for Laravel Query Builder.

Articles

Examples

💜 Ping CRM / Laravel - Demonstration application made with Laravel and Vue.js.
💜 Ping CRM / Svelte - Demonstration application made with Laravel and Svelte.
Ping CRM / Django - Demonstration application made with Django and Vue.js.
Ping CRM / Rails - Demonstration application made with Ruby on Rails and Vue.js.
Ping CRM / CakePHP - Demonstration application made with CakePHP and Vue.js.
Ping CRM / Masonite - Demonstration application made with Masonite and Vue.js.
Ping CRM / React - Demonstration application made with Laravel React.
Ping CRM / Clojure - Demonstration application made with Clojure and Reagent.
Ping CRM / Flask - Demonstration application made with Flask and Vue.js.
Ping CRM / Echo - Demonstration application made with Echo and Vue.js.

Other

Built with Inertia - Showcase of products built with Inertia.js.
Jetbrains plugin - PhpStorm/Intellij Ultimate plugin for Inertia.js.

·

_{Contributions welcome! Read the contribution guidelines first.}

Awesome MDBootstrap

A curated list of the best resources in the MDBootstrap community.

MDBootstrap is a set of slick, responsive page templates, layouts, components, and widgets to rapidly build web pages.

Resources
Community
Useful Links
Articles
Tools
CLI & hosting
Education

Resources

Official projects and resources of MDBootstrap.

Free

MDB Standard Free - Free to download, open-source Bootstrap 5 UI Kit.
MDB Angular Free - Bootstrap 5 & Angular 11 Free UI KIT with Material Design.
MDB React Free - Bootstrap 5 & React 17 Free UI KIT with Material Design.
MDB Vue Free - Bootstrap 5 & Vue 3 Free UI KIT with Material Design.

Pro

MDB Standard Pro - Premium UI Kit for the latest Bootstrap 5. Lifetime usage of 5000+ premium components, thousands of templates, plugins, design blocks.
MDB Angular Pro - Material Design for Bootstrap 5 with Angular.
MDB React Pro - Material Design for Bootstrap 5 with React.
MDB Vue Pro - Material Design for Bootstrap 5 with Vue.

Mobile

MDB Angular Mobile - Based on the latest NativeScript-Angular version.
MDB React Mobile - Based on the latest React Native 0.61 version.
MDB Vue Mobile - Based on the latest NativeScript-Vue 2.4.0 version.

Community

Projects created with MDBootstrap.

Useful Links

Official projects and resources of MDBootstrap.

Snippets - Best source of Bootstrap code examples & plugins.
LAB - Inspirational concepts & experiments created by the community of MDB.
Visual Studio Code snippets - An extension that allows you to add useful snippets of the most popular MDB 5 components to Visual Studio Code.
Angular Visual Studio Code snippets - This extension adds snippets for MDB Angular - Angular Bootstrap UI KIT.
Webpack starter - This guide describes in detail the capabilities of Webpack Starter.
Reviews - User feedback on mdbootstrap.

Articles

Contribute to the community and share your technical knowledge - or just read the articles written by others.

Technology comparision - What will be the best JavaScript framework in 2021?
Articles - Contribute to the community and share your technical knowledge - or just read the articles written by others.

Tools

Tools and utilities to help build apps using MDBootstrap.

Logo generator - Create an elegant and stylish logo in 5 minutes.
CSS Masks & Glassmorphism Generator - Generate the perfect masks for your design.
Instagram filters CSS generator - Use famous Instagram filters via CSS and apply them to your project.
CSS gradients generator - Generate the perfect gradient for your design.
Fancy border radius generator - Generate unusual shapes with our border-radius generator.
Meta tags generator - Take care of your SEO generate the most accurate meta data for Google and social media.
Cards generator - Create bootstrap cards with custom shapes, buttons, colors, sizes.
Buttons generator - Create bootstrap buttons with custom icons, text, shapes, colors, sizes.
Charts creator - Easy to use chart builder (pie charts, line charts, bar charts).
Shadows generator - Generate the perfect shadow for your design.
SVG waves generator - Easily generate beautiful SVG shapes and apply them to your design.
Datatables builder - Create an elegant and stylish logo in 5 minutes.
Alerts generator - Create bootstrap alerts with custom shapes, buttons, colors, sizes.
Modals generator - Create bootstrap modals with custom shapes, sizes, animations.
Icons generator - 1600+ icons. Create bootstrap icons custom with sizes, colors, animations.
Table generator - Create bootstrap table custom with sizes, colors, animations.
Flexbox generator - The easiest and fastest way to create and test flexbox in Bootstrap 5.
Footer generator - Create bootstrap footer with custom coprytight, buttons, forms, links colors, sizes.
Navbar generator - Create bootstrap navbar with custom colors, brand, icons, forms, placement.

CLI & hosting

Powerful tool which allows you to create different projects. No more difficult configuration and deployment.

MDB CLI - Create, deploy and host your project with a single command.
Quick Start - Get started with MDB CLI easily and quickly and how to use its full potential.
Getting Started - Step by step on how to create your project and deploy.
Overview - Guide which will take you on how to perform different actions.

Education

Well-organized, up-to-date series of tutorials for the latest Bootstrap, Material Design, HTML, CSS, JavaScript.

ECMAScript 6 Tools

Transpilers

Build-time transpilation

Gulp Plugins

Grunt Tasks

Broccoli Plugins

Brunch Plugins

Webpack plugins

Duo plugins

Connect plugins

Gobble plugins

Jade plugins

Jest plugins

Karma plugins

Sprockets plugins

Browser plugins

Mocha plugins

Module Loaders

Boilerplates

Code generation

Polyfills

Editors

Parsers

Other

Awesome WPO

Categories

Table of Contents

Articles

Blogs

Books

Case studies

Documentation

People

Events

Conferences

Meetups

Talks

Tools

Analyzers

Analyzers - API

Application Performance Monitoring

Bundle Analyzer

Benchmark - CSS

Benchmark - JavaScript

Benchmark - PHP

Bookmarklets

CDN

CDN - Monitor

CDN - Utilities

Extensions

Image Optimizers

Lazyloaders

Loaders

Metrics Monitor

Metrics Monitor - API

Metrics Monitor - EMAIL

Minifiers - HTML

Minifiers - JS & CSS

Miscellaneous

Generators

SVG

Web Components

Web server Benchmarks

Web server Modules

Specs

Stats

Other Awesome Lists

Contributing

Web Tools

Response

Placeholder

Favicon

CDN

CSS

Image compression

JavaScript

Pagespeed

Color

Font

API Debugging