Frontend stuff

A continuously expanded list of frameworks, libraries and tools I used/want to use for building things on the web. Mostly Javascript stuff.

Table of Contents

• CSS/UI Frameworks
• Frontend Frameworks/UI Component Libraries
• Allrounder (jQuery like)
• Charts
• Maps
• Tables & Spreadsheets
• Selects
• Loaders
• UI Elements
• Content Slider/Carousels
• Typography/Text
• Video
• Audio
• Canvas and SVG
• 3D/WebGL Frameworks
• Image Processing
• Scrolling
• Touch Gestures
• Animations
• Templating
• HTTP Requests
• Events
• Icons
• Colors
• Databases/Storage
• Validation
• Dates
• Internationalization
• Numbers & Currencies
• Statistics & data analysis
• Module Loaders
• Lazy Loading
• Neural Networks
• Social
• Utility Libraries
• General

CSS/UI Frameworks

• bootflat - Bootstrap with a flat design theme
• Bootswatch - A collection of themes for Bootstrap
• bulma - CSS framework based on Flexbox
• cardinal - Cardinal is a small mobile first CSS framework
• caramel - A simple, beautiful, responsive, modern CSS framework
• corpus - A collection of CSS things
• HTML Starterkit - HTML5 template to kick off your responsive websites
• kube - Minimalistic Web framework
• Material Design Lite - Material Design Lite Components in HTML/CSS/JS
• materialize - A modern responsive front-end framework based on Material Design
• Metro UI - A front-end framework for developing website in Windows Metro Style
• milligram - Minimal setup of styles for a fast starting point.
• mini.css - A minimal, responsive, style-agnostic CSS framework/toolkit
• mui - A Lightweight HTML/CSS/JS Framework implementing Material Design
• NES.css - NES-style CSS Framework
• paperCSS - The Less Formal CSS Framework
• papier - Material design like minimal CSS framework
• pavilion - Unopinionated CSS framework
• picnicss - Lightweight UI library
• pure - A set of small, responsive CSS modules
• semantic-ui - UI Kit with lots of themes and elements
• Tailwind CSS - A utility-first CSS framework
• tachyons - Modular UI framework
• tacit - CSS framework without classes
• uikit - A lightweight and modular front-end framework
• wing - Minimal CSS framework

back to top

Frontend Frameworks/ Ui Component Libraries

• Angular - HTML enhanced for web apps
• Aurelia - UI framework for the browser, mobile or desktop apps
• choo - Isomorphic, single state, functional frontend framework
• deku - Library for rendering interfaces using pure functions and virtual DOM
• DisplayJS - A simple JavaScript framework for building ambitious UIs
• hyperapp - Micro-framework for building web applications
• inferno - Isomorphic library for building high-performance user interfaces
• jsblocks - MV-ish framework for single page apps
• mercury - Modular frontend framework
• mithril - Client-side MVC framework
• Moon - Minimal UI library
• preact - React ES6 API + Components & Virtual DOM
• React - Library for building user interfaces
• RE:DOM - Library for creating user interfaces
• react-lite - Implementation of React that optimizes for small script size
• riot - User interface micro-library
• skatejs - Web component library
• Solid - declarative and flexible library for building user interfaces
• svelte - The magical disappearing UI framework
• vue - Library for building web interfaces

back to top

Allrounder (jQuery like)

• bliss - A collection of helpers and light syntactic sugar over Vanilla JS
• cash - Library that provides jQuery style syntax to wrap modern Vanilla JS features
• jQuery - Feature-rich JavaScript library
• nanoJS - Minimal standalone JS library for DOM manipulation
• NodeList.js - Use the Native DOM APIs as easily as jQuery
• Selector - Lightweight library used as a replacement for jQuery
• umbrella - DOM, Event and AJAX library
• zeptojs - Library with a largely jQuery-compatible API

back to top

Charts

• chartist - Simple responsive charts
• charts - SVG Charts with zero dependencies
• chartjs - Simple, clean and engaging charts for designers and developers
• chart.xkcd - Chart library for "sketchy" or "cartoony" styled charts
• Cytoscape.js - Graph theory / network library for analysis and visualisation
• c3 - D3-based reusable chart library
• dc - For heavy amounts of data
• dimple - An object-oriented API for business analytics powered by d3
• D3xter - Straight forward plotting built on D3
• ECharts - Charting library and interactive data visualization tool
• epoch - A general purpose, real-time visualization library
• f2 - Interactive and flexible charting library for mobile
• flowchart.js - Draws flow charts from textual representation of the diagram
• Frappe - SVG charts for the web with zero dependencies
• ggraph - Graph visualization of big messy data
• jsplumb - Visual connectivity for webapps (flowcharts, sequence diagrams, etc)
• metricsgraphics - Optimized for visualizing time-series data
• morrisjs - SVG charts based on jquery and Raphael
• muze - Composable data visualisation lib with a data-first approach
• nvd3 - Re-usable charts and chart components for d3.js
• peity - Progressive mini <svg> pie, donut, bar and line charts
• taucharts - Charts with a focus on design and flexibility
• timesheet.js - HTML5 & CSS3 time sheets
• tui.chart - Data visualization library with IE8 support
• uPlot - Canvas based chart for time series, lines, areas, ohlc & bars
• uvCharts - Simple, robust, extensible charting library built using d3
• vis.js - A dynamic, browser based visualization library
• VivaGraph - Extensible graph drawing library
• Z3d - 3d plots with three.js

back to top

Maps

• Cesium - Library for creating 3D globes and 2D maps in a web browser without a plugin
• harp.gl - Web map rendering engine
• leaflet - Library for Mobile-Friendly Interactive Maps
• leaflet plugins - Notable Leaflet Plugins
• Mapbox GL JS - Interactive WebGL maps from vector tiles
• mapmap.js - A data-driven API for interactive thematic maps
• mapsicon - Collection of maps for nearly every country in the world in PNG and SVG
• osmbuildings - Library for visualizing buildings as pseudo 3D objects on interactive maps
• openlayers3 - Mapping library that supports different projections
• planetary - Interactive globes for the web
• smallworld - A small utility for generating a small world
• Tangram - WebGL based map renderer
• topojson - An extension to GeoJSON that encodes topology
• turf - A modular geospatial engine

back to top

Tables & Spreadsheets

• Clusterize.js - Vanilla plugin to display large data sets
• DataTables - jQuery plugin which adds sorting, paging and filtering abilities to plain HTML tables with minimal effort
• dynatables - Semantic and interactive table plugin using jQuery, HTML5, and JSON
• handson table - Minimalist Excel-like data grid editor
• ListJS - Adds search, sort, filters and flexibility to plain HTML lists, tables, or anything
• sortable - Makes tables sortable
• tablesaw - A group of plugins for responsive tables
• tui-grid - Widget to visualize and edit data via its table representation
• x-spreadsheet - A web-based spreadsheet

back to top

Selects

• awesomplete - Lightweight autocomplete
• chosen - Library for making long, unwieldy select boxes more friendly
• select2 - JQuery based replacement for select boxes

back to top

Loaders

• Loaders.css - Delightful, performance-focused pure css loading animations
• MProgress.js - Google Material Design Progress Linear bar
• NProgress - Slim progress bars for Ajax'y applications. Inspired by Google, YouTube, and Medium
• nanobar - Lightweight progress bars without jQuery
• PACE - Automatic page load progress bar. Needs zero config. Easy themeable.
• PleaseWait.js - A simple library to show your users a beautiful splash page while your application loads

back to top

UI Elements

• button concepts - List of CSS button variations
• countUp.js - Count up or down animation effects for numbers
• Flipside - A button that seamlessly transitions from action to confirmation with flipping animation
• Messenger.js - Client-side growl-like notifications with actions and auto-retry.
• nouislider - Range slider
• nudge - Provides simple on-screen nudges / notifications
• Slideout.js - A touch slideout navigation menu for mobile web apps
• Sortable.js - Reorderable drag-and-drop lists
• SweetAlert - An awesome replacement for JavaScript's alert
• Toastr - Simple toast notifications
• vex - A modern dialog library which is highly configurable and easy to style

back to top

Content Slider/Carousels

• Glide - A dependency-free slider and carousel
• Glider.js - A minimal carousel with momentum scrolling
• lory - Minimalistic slider written in vanilla JavaScript
• ItemSlide.js - Touch carousel (needs jquery)
• Siema - Carousel with no dependencies
• slick - Fully responsive carousel (needs zepto or jquery)
• swipe - Touch slider with React and Angular support
• swiper - Slider with touch support

back to top

Typography/Text

• Blotter - Unconventional text effects for the web
• fitty - Scales text so it fits to its parent container
• flowtype - Responsive typography
• RoughNotation - Library to create and animate annotations
• shave - Plugin for truncating text within an html element
• Typeset.js - HTML pre-processor for web typography

back to top

Video

• medialementjs - Video and audio handling
• Plyr - A simple HTML5 media player with custom controls
• talkie - Combines audio and animations
• Videojs - Open source HTML5 video player

back to top

Audio

• abcjs - javascript for rendering abc music notation
• audio5js - The HTML5 Audio Compatibility Layer
• bap - Toolkit for making beats and composing sequences
• howler - Audio library
• soundjs - Audio library + simple interface
• timbre.js - Library for Objective Sound Programming
• tone.js - Framework for interactive music
• tonal - A functional music theory library
• vexflow - Library for rendering music notation
• wavesurfer.js - Navigable waveform

back to top

Canvas and SVG

• canvas-sketch - Framework for making generative artwork
• D3 - A JavaScript visualization library for HTML and SVG
• Easeljs - Library for building canvas based interactive 2D content
• Fabric.js - Canvas Library, SVG-to-Canvas (& Canvas-to-SVG) Parser
• GraphicsJS - Graphics library with an intuitive API, based on SVG/VML technology
• Konva - Framework that extends the 2d context by enabling canvas interactivity
• panzoom - Pan and zoom SVG elements
• Paper.js - Canvas based vector graphics scripting framework
• Paths.js - Generate SVG paths for geometric shapes
• pixi.js - 2D WebGL rendering engine with Canvas fallback
• p5js - Processing for Javascript
• Raphael - Library that simplify your work with vector graphics on the web
• Rough.js - Create graphics with a hand-drawn, sketchy, appearance
• rune.js - A Library for programming graphic design systems with SVG
• svg.js - A Library for manipulating and animating SVG
• svg-3d-builder - Tool to create 3d model with svg
• two.js - A two-dimensional drawing api
• vizflow - Interactive visualization engine
• Zdog - Pseudo-3D engine for canvas & SVG

back to top

3D/WebGL Frameworks

• babylonJS - Framework for building 3D games with HTML5, WebGL and Web Audio
• sceneJS - WebGL-based 3D visualization engine
• three.js- 3D Library which makes WebGL simpler
• voxel.js - Voxel game building toolkit
• WhitestormJS - Framework for developing 3D web apps with physics

back to top

Image Processing

• camanjs - Combination of a simple-to-use interface with advanced and image/canvas editing techniques
• grafijs - Library with basic image processing functions
• smartcrop - Content aware image cropping

back to top

Scrolling

• basicScroll - Standalone parallax scrolling for mobile and desktop with CSS variables
• emergence.js - Detect element visibility in the browser
• headroom - Hide your header until you need it
• in-view - Get notified when a element enters/exits the viewport
• moveTo - Scroll animation library
• scroll-scope.js - Keep parent element still when scrolling an element to its boundary
• ScrollMagic - Library for scroll interactions
• scrollMonitor - API to monitor elements as you scroll
• scrollreveal - Scroll animations for web and mobile browsers
• verge - Get viewport dimensions, detect elements in the viewport

back to top

Touch Gestures

• AlloyFinger - Multi-touch gestures library
• Hammer.js - Add support for touch gestures and remove 300ms delay from clicks

back to top

Animations

• animate.css - A cross-browser library of CSS animations
• Animate Plus - Tiny (2 KB minified and gzipped) animation library
• Anime - Anime is a flexible yet lightweight animation library
• bounce.js - CSS3 powered animations
• choreographer - Library to take care of complicated css animations
• Dynamics.js - Library to create physics-based CSS animations
• GSAP - Fast animation library
• Hover.css - CSS3 Hover Effects
• impulse - Dynamic physics interactions for the mobile web
• KUTE.js - animation engine, memory efficient & modular code
• mojs - Motion for the web
• popmotion - Motion Engine. Use for animation, physics and input tracking.
• rebound - Library that models Spring dynamics for driving physical animations
• repaintless - Animation library that consists of animations that don't cause reflows and repaints
• Scene.js - Timeline-based animation library
• semantic ui - transition - Simple CSS3 Animations and transitions
• Sequence.js - Responsive CSS animation framework
• shifty - Tweening engine
• snabbt - Animations with JavaScript and CSS transforms
• snapsvg - Library for animating and manipulating SVG's
• tween.js - Tweening engine
• velocity - Accelerated JavaScript animations
• vivus - Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn

back to top

Templating

• dotjs - Fast templating engine
• Handlebars - Minimal Templating on Steroids
• Hogan - JavaScript templating
• marko - Fast and lightweight HTML-based templating engine that compiles templates to CommonJS modules and supports streaming, async rendering, custom tags and a concise syntax
• mustache - Minimal templating with {{mustaches}} in JavaScript
• nunjucks - A rich and powerful templating language
• paperclip.js - Reactive DOM template engine built for speed and extensibility
• vdo - Minimal JSX compatible html focused templating engine

back to top

HTTP Requests

• aja - Asynchronous JavaScript and JSON(P)
• axios - Promise based HTTP client
• d3-request - A convenient alternative to XMLHttpRequest
• fetch - A window.fetch javascript polyfill
• intercooler-js - Making AJAX as easy as anchor tags
• qwest - Ajax library with XHR2, promises and request limit
• reqwest - Browser asynchronous HTTP requests
• superagent - Client-side HTTP request library

back to top

Events

• bean - Events api
• gator.js - Simple event delegation
• EventEmitter2 - Events API with wildcards
• mitt - Tiny functional event emitter / pubsub

back to top

Icons

• elegant - Elegant Icon font
• eva-icons - Icon pack with SVG, Sketch, Web Font and animation support
• evil icons - Lightweight SVG icons
• Feather - Simply beautiful open source icons
• flaticon - Tens of thousands of free monochromatic icons in SVG, font, PNG.
• fontawesome - Gives you scalable vector icons that can instantly be customized
• fontello - Icon fonts generator
• foundation icon font 3 - Foundation Zurb Icon Font 3
• Icomoon - Website to custom build icon fonts
• ikonate - Fully customisable & accessible vector icons
• ionicons - The icon font for Ionic Framework
• material-design-icons - Material Design icons by Google
• octicons - Github icons
• the nounproject - Icon search
• weloveiconfonts - A free & open source icon fonts hosting service

back to top

Colors

• bootflat color picker - Color picker for flat design
• Brand Colors - Official color codes for the world's biggest brands
• chromajs - Library for all kinds of color manipulations
• chromajs color scale helper - Tool to help us mastering multi-hued, multi-stops color scales
• coolors - Super fast color scheme generator
• color - Intuitive color picker
• colorbrewer2 - Color advice for cartography
• ColorHexa - Color encyclopedia : Information and conversion
• colourco - Color scheme tool
• colormind - Deep learning AI that knows color theory and creates color schemes
• Colors - Smarter Default colors on the web
• hcl-picker - Colorpicker for data
• kewler - Functional and immutable color manipulation library
• khroma - AI color tool for designers
• polychrome - Color manipulation helper
• uiGradients - A handpicked collection of beautiful colour gradients for design and code
• vibrant.js - Extract prominent colors from an image

back to top

Databases/Storage

• basil.js - Persistence layer
• Dexie.js - Wrapper for IndexedDB
• ForerunnerDB - Database with mongo-like query language and data-binding support
• idb - IndexedDB with Promises
• localForage - Library like a localStorage API with fallback store for browsers with no IndexedDB or WebSQL support
• LokiJS - Embeddable / in-memory database
• lovefield - SQL-like, relational query engine for the browser
• pouchdb - Created to help developers build applications that work as well offline as they do online
• rxdb - Reactive, serverless, client-side, offline-first database
• store.js - Cross-browser storage using localStorage, globalStorage or userData

back to top

Validation

• is.js - Micro check library
• Parsley - Easy Form validation
• validate.js - Form validation library inspired by CodeIgniter
• validator.js - String validation and sanitization
• yup - Yup is a schema builder for runtime value parsing and validation.

back to top

Dates

• dateformat - Library for formatting dates
• date-fns - Toolset for manipulating dates
• flatpickr - Lightweight date time picker without dependencies
• instadate - A minimal date library
• luxon - A library for working with dates and times
• moment.js - Parse, validate, manipulate, and display dates
• Pikaday - A lightweight Datepicker
• sugar - Parse, create, manipulate, compare, format and display dates
• tinytime - Light date and time formatter

back to top

Internationalization

• l10ns - Internationalization workflow and formatting
• globalize - A library for internationalization and localization that leverages the official Unicode CLDR JSON data

back to top

Numbers & Currencies

• Numbro.js - Formatting and manipulating numbers in more than 30 languages
• accounting.js - Number, money and currency formatting
• money.js - Currency conversion library
• cleave.js - Format input text content when you are typing

back to top

Statistics & Data Analysis

• datakit - Framework for data analysis
• datalib - Data utility library
• gauss - Statistics, analytics, and data library
• jstat - Javascript Statistical Library
• science.js - Scientific and statistical computing in JavaScript
• simple-statistics - simple statistics for node & browser javascript
• statkit - Statistics toolkit
• stdlib - Library with an emphasis on numerical and scientific computing applications
• TheoremJS - A Math library for computation

back to top

Module Loaders

• Browserify - Lets you require('modules') in the browser
• RequireJS - A file and AMD module loader
• Rollup - ES6 module bundler with tree shaking abilities
• stealjs - Dependency loader and builder
• Systemjs - ES6, AMD and CommonJS loader
• webpack - CommonJs and AMD module loader

back to top

Lazy Loading

• Aload - Asynchronously loads images, scripts, styles and more
• echo - Standalone lazy loading image micro-library
• Lazy Progressive Enhancement - A lazy image loader designed to enforce progressive enhancement and valid HTML
• layzr.js - Dependency-free library for lazy loading images
• lazysizes - fast and self-initializing lazyloader for images, iframes and more
• loadXT - Lazy loading for any elements
• Unveil - Lightweight plugin to lazy load images for jQuery or Zepto.js

back to top

Neural Networks

• brain - Neural networks in JavaScript
• ConvNetJS - Library for training Deep Learning models
• deeplearn.js - Hardware-accelerated machine intelligence library
• dn2a-javascript - Digital Neural Networks Architecture
• Mind - Flexible neural networks
• neurojs - Deep learning and reinforcement learning library
• synaptic.js - Architecture-free neural network
• Tensor Fire - Neural networks in the browser using WebGL

back to top

Social

• js socials - Social network sharing jQuery plugin
• rrssb - Ridiculously Responsive Social Sharing Buttons
• share-button - Fast, beautiful, and painless social shares
• sharingbuttons - Social media sharing buttons without JavaScript
• socialcount - Custom sharing buttons with share count
• Social Likes - Single-style sharing buttons with counters for jQuery
• whatsapp button - Creates a whatsapp sharing button

back to top

Utility Libraries

• lazy.js - A functional utility library
• lodash - Utility library delivering modularity, performance & extras.
• moutjs - Collection of modular JavaScript utilities
• pareto.js - Functional utility library
• ramdajs - A practical functional library
• Sugar - Utility library for working with native objects
• underscore - Library that provides functional programming helpers

back to top

General

• dat.GUI - Minimal interface for live control of variables in JS
• embed.js - Automatically embeds emojis, media, maps, tweets, code and services
• formstone - Collection of handy useful scripts
• golden-layout - A multi-screen layout manager for webapps
• interact.js - Drag and drop, resizing and multi-touch gestures with inertia and snapping
• jwerty - Handling of keyboard events
• keymaster - Simple key listener
• modernizr - Feature Detection Library
• tether - Marrying UI Elements (dropdown, tooltips, guide, selects)
• UpUp - Offline First library. Let users visit your site, even without a connection.
• bro-fs - Promise-based wrapper over HTML5 Filesystem API allowing to work with sandboxed filesystem in Chrome

back to top