JS libs
Jump to navigation
Jump to search
Twitter
General
oooolldd
headings need a real good rearrange
Repos and listings
- JSter Javascript Catalog - a catalog of frontend JavaScript libraries. We also maintain a blog and publish a monthly newsletter.
- Microjs - Fantastic Micro-Frameworks and Micro-Libraries for Fun and Profit!
- Echo JS - JavaScript News
- Unheap - A tidy Repository of jQuery Plugins & JavaScripts
- JavascriptOO - every javascript project you should be looking into, with examples, categories, install commands, CDN links, project and author stats, and more.
- JSAN - JavaScript Archive Network is a comprehensive resource for Open Source JavaScript libraries and software.
- JSwiki - indexes libraries and resources available for JavaScript. In addition it provides some starting points for newbies in form of Beginner's Resources. In case you want to contribute, do take a look at Meta first for some extra pointers. Happy hacking!
- https://github.com/moklick/frontend-stuff - A continuously expanded list of frameworks, libraries and tools I used/want to use for building things on the web. Mostly JavaScript.
CDN
- cdnjs - Everyone loves the Google CDN right? Even Microsoft runs their own CDN. The problem is, they only host the most popular libraries. We host it all - JavaScript, CSS, SWF, images, etc!
- jsDelivr - A free, fast, and reliable Open Source CDN for npm & GitHub
- Google Libraries API - a content distribution network for the most popular, open-source JavaScript libraries. The Libraries API provides access to a growing list of the most popular, open-source JavaScript libraries, including: AngularJS, Chrome Frame, Dojo, Ext Core, jQuery, jQuery UI, MooTools, Prototype, script.aculo.us, SWFObject, WebFont Loader
- irc.geekshed.net, #googleapis
- Microsoft Ajax Content Delivery Network | Microsoft Docs - Microsoft Ajax Content Delivery Network
Scripts
- https://github.com/jed/140bytes - was an exercise in code golfing.
Modules and loading
- 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. Using a modular script loader like RequireJS will improve the speed and quality of your code.
- https://github.com/tildeio/rsvp.js - provides simple tools for organizing asynchronous code. Specifically, it is a tiny implementation of Promises/A+ and a mixin for turning objects into event targets.
- https://github.com/auchenberg/dependo - Visualize your CommonJS or AMD module dependencies in a force directed graph report - powered by D3.js.
- Spin.js - dynamically creates spinning activity indicators that can be used as resolution-independent replacement for AJAX loading GIFs.
- NProgress.js - Small nanoscopic progress bar. Featuring realistic trickle animations to convince your users that something is happening!
- InstantClick - a JavaScript library that dramatically speeds up your website using preloading on hover, making navigation effectively instant in most cases. [1]
- NW.js - Call all Node.js modules directly from DOM/WebWorker and enable a new way of writing applications with all Web technologies.
- Browserify - lets you require('modules') in the browser by bundling up all of your dependencies.
- Modernizr - feature detection library for HTML5/CSS3
- https://github.com/dasdom/BreakOutToRefresh - Play BreakOut while loading - A playable pull to refresh view using SpriteKit [2]
Utility
- Lo-Dash - A low-level utility library delivering consistency, customization, performance, and extra features.
- Augment.js - Enables use of modern JavaScript by augmenting built in objects with the latest JavaScript methods. Never overrides any native implementations; it only adds what is missing.
- Prototype is a JavaScript Framework that aims to ease development of dynamic web applications. Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere.
- Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects. It's the tie to go along with jQuery's tux, and Backbone.js's suspenders.
- underscore-contrib The brass buckles on Underscore's utility belt - a contributor library for Underscore.
- Lazy.js it a utility library for JavaScript, similar to Underscore and Lo-Dash but with one important difference: lazy evaluation (also known as deferred execution). This can translate to superior performance in many cases, especially when dealing with large arrays and/or "chaining" together multiple methods. For simple cases (map, filter, etc.) on small arrays, Lazy's performance should be similar to Underscore or Lo-Dash.
- wu.js - A lazy, functional Javascript library that ain't nuthin' ta f*ck wit.
- Functional is a library for functional programming in JavaScript. It defines the standard higher-order functions such as map, reduce (aka foldl), and select (aka filter). It also defines functions such as curry, rcurry, and partial for partial function application; and compose, guard, and until for function-level programming. And all these functions accept strings, such as 'x -> x+1', 'x+1', or '+1' as synonyms for the more verbose function(x) {return x+1}.
- Udon is a library providing basic support for functional programming idioms in JavaScript.
- OxJS is Ox.js, a general-purpose utility library. It embraces functional programming, supports modules, provides lots of tools to deal with dates, has all the missing math methods (plus some more for geographic coordinates) and helper functions for strings and regular expressions, fixes type detection and equality testing, includes utilities to handle HTML, the DOM and remote requests, can tokenize and minify JavaScript, comes with its own documentation format, including inline tests, and does many other cool things. Then there are modules, most notably Ox.UI, which provides a simple but flexible model to write complex, desktop-class web applications for HTML5-compliant browsers.
- funkjs is a pure functional immutable library without side effects. It consists of: list library (good to have functional list library). stream library (lazy list), tuple (immutable tuple implementation), semigroup (basic semigroup library + 11 predefined semigroups), monoid (basic monoid library + 9 predefined monoids)
- allong.es is a collection of functions designed to facilitate writing JavaScript and/or CoffeeScript with functions as first-class values. The emphasis in allong.es is on composing and decomposing functions using combinators and decorators. allong.es is designed to complement libraries like Underscore, not compete with them.
- Behave.js - Less-than-pure Functional Reactive Programming for Javascript
- Valentine provides you with type checking, functional iterators, and common utility helpers such as waterfalls, queues, and parallels; all utilizing native JavaScript methods (when available) for optimal speed. Inspired by Underscore.
- Sugar is a Javascript library that extends native objects with helpful methods. It is designed to be intuitive, unobtrusive, and let you do more with less code.
- Matches.js brings the power and expressiveness of pattern matching to Javascript.
- Sweet.js brings hygienic macros from languages like Scheme and Rust to JavaScript. Macros allow you to sweeten the syntax of JavaScript and craft the language you've always wanted.
- objgrep Find strings inside complicated javascript objects
- Prevel - a lightweight (~5 Kb) JavaScript library with strong functionality. Dom and Ajax.
- Minified.js is a client-side JavaScript library, comparable to jQuery and MooTools in scope. Its features include DOM manipulation, animation, events, cookies and HTTP requests. [4]
- WebActors is a simple library for managing concurrency in JavaScript programs. It's heavily based on Erlang's interpretation of the Actor Model.
- https://gist.github.com/leudanielm/a49535053fd30274183e - Fire events between different browser windows using localStorage. [5]
Type checking
jQuery
See also jQuery
to sort
Templating
See also JavaScript#Templating
- mustache.js is an implementation of the mustache template system in JavaScript. Mustache is a logic-less template syntax. It can be used for HTML, config files, source code - anything. It works by expanding tags in a template using values provided in a hash or object.
- Handlebars.js is an extension to the Mustache templating language created by Chris Wanstrath. Handlebars.js and Mustache are both logicless templating languages that keep the view and the code separated like we all know they should be.
- Hogan.js is a 2.5k JS templating engine developed at Twitter. Use it as a part of your asset packager to compile templates ahead of time or include it in your browser to handle dynamic templates.
- Walrus is a templating library inspired by mustache, handlebars, ejs and friends, but with a couple of important differences in philosophy and style
- jQuery Template is a jQuery plugin that makes using templates easy and quick. The plugin supports loading HTML files as templates, or taking a jQuery object as the template (usually using script tags to hold the template).
- t.js - A tiny javascript templating framework in ~400 bytes gzipped
- Dust is a JavaScript templating engine designed to provide a clean separation between presentation and logic without sacrificing ease of use. It is particularly well-suited for asynchronous and streaming applications.
- Icanhaz.js - Simple & powerful client-side templating
- Nunjucks is a full featured templating engine for javascript.
- dōmo lets you write HTML markup CSS styles in JavaScript syntax, in the browser and on the server. At less than 1.4kb of minizipped JavaScript, dōmo is a simpler, easier, and more reliable alternative to template engines and CSS pre-processors. And it works well with all the tools you already use, from jQuery to Backbone.js to CoffeeScript.
- templayed.js - The fastest and smallest Mustache compliant Javascript templating library written in 1806 bytes (uncompressed)
- Pithy.js - An internal DSL for generating HTML in JavaScript.
- json2html is an open source javascript library that uses on JSON templates to convert JSON objects to HTML.
- X-Tag - X-Tag is a small JavaScript library, created and supported by Mozilla, that brings Web Components Custom Element capabilities to all modern browsers.
- pajama.js is a serverside and clientside templating engine which makes use of model-view data bindings to remove all HTML from your Javascript project
- Teddy is an easy-to-read, HTML-based, mostly logic-less DOM templating engine with support for both server-side and client-side templating.
DOM
- Laconic DOM Library - Laconic offers an intuitive approach to generating DOM content in JavaScript. Laconic adds a method to the $.el namespace for all known HTML Elements. These methods should be invoked with a variable-length list of child elements, strings, numbers, or arrays containing these types. An optional attributes object may be passed as the first argument.
- rangy - A cross-browser JavaScript range and selection library. It provides a simple standards-based API for performing common DOM Range and Selection tasks in all major browsers, abstracting away the wildly different implementations of this functionality between Internet Explorer up to and including version 8 and DOM-compliant browsers.
- uiji is jQuery in reverse. Instead of using CSS selectors to find elements, you use the same syntax to create elements.
- List.js makes your plain HTML lists/tables super flexible, searchable, sortable and filterable. Add, edit and remove items by dead simple templating.
- fasterDOM.js - Fast DOM manipulation with "jquery-like" syntax and ~1.8Kb code. Operations that are supported: .css(), .attr(), .html(), .append(), .prepend(), .show(), .hide() , .get() (returns elements)
- QuoJS is a micro, modular, Object-Oriented and concise JavaScript Library that simplifies HTML document traversing, event handling, and Ajax interactions for rapid mobile web development. It allows you to write powerful, flexible and cross-browser code with its elegant, well documented and micro coherent API.
Ajax
- Phonebook.js is a lightweight wrapper for your jQuery.ajax calls. It makes your code more readable and more maintainable.
- intercooler.js - AJAX With Attributes: There is no need to be complex
Data binding
- Mavo - A new, approachable way to create Web applications]
Typography
Lettering.js
- Lettering.js - a jQuery plugin for radical Web Typography
FitText
- FitText - Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.
$("#responsive_headline").fitText(); $("#responsive_headline").fitText(1.2); // Turn the compressor up (text shrinks more aggressively) $("#responsive_headline").fitText(0.8); // Turn the compressor down (text shrinks less aggressively) $("#responsive_headline").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' })
jquery.textFit
Hatchsow
slabText
- http://www.frequency-decoder.com/demo/slabText/ - scaling headline text
BalanceText
- BalanceText - A jQuery plugin to provide an alternate text wrapping algorithm.
to sort
- Circletype.js is a tiny (2.7kb) jQuery plugin that lets you set type on a circle
- strokeText.js is an unobtrusive javascript library working in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. The library provides cross API text stroking capability for Canvas and VML.
- http://tutorialzine.com/2011/09/shuffle-letters-effect-jquery/
- http://demo.tutorialzine.com/2011/09/shuffle-letters-effect-jquery/
Layout
- http://xoxco.com/projects/code/breakpoints/
- http://responsive-slides.viljamis.com/
- http://www.zurb.com/playground/responsive-tables
- http://codepen.io/sol0mka/full/Jsyxq - jelly menu [13]
Text
- https://github.com/algolia/autocomplete - A JavaScript library that lets you quickly build autocomplete experiences
Textarea
Lists
Tables
- DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table
Forms
- http://harvesthq.github.com/chosen/ - A library for making long, unwieldy select boxes more user friendly, for jQuery and Prototype
- FormValidation - The best validation library for JavaScript. Written in ES6Type safety using TypeScript. Zero dependenciesNo jQueryCan be used as AMD, ES6 modules and global scripts.
Interface
- Create.js is a comprehensive web editing interface for Content Management Systems. It is designed to provide a modern, fully browser-based HTML5 environment for managing content. Create can be adapted to work on almost any content management backend.
- pjax loads html from your server into the current page without a full page load. It's ajax with real permalinks, page titles, and a working back button that fully degrades.
- djax - Dynamic pjax, responds to layout changes across requested pages
- sizzle - A pure-JavaScript CSS selector engine designed to be easily dropped in to a host library.
- http://facebook.github.io/react/
- http://jlongster.com/Removing-User-Interface-Complexity,-or-Why-React-is-Awesome
- https://reactjsnews.com/isomorphic-javascript-with-react-node/
- http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-to-get-by/ [16]
- http://braddenver.com/blog/2015/react-static-site.html [17]
- Tuxedo.js - Tuxx is a feature complete framework built on the React view layer, Flux Architecture, and CommonJS modules [19]
- jsblock - Better MV-ish Framework. From simple user interfaces to complex single-page applications using faster, server-side rendered and easy to learn framework. [20]
- https://github.com/sindresorhus/ora - Elegant terminal spinner
jQuery UI
- jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.
Scroll to anchor
$('body').plusAnchor({ easing: 'swing', // The easing method, defaults are 'swing' and 'linear'. // Anything else requires the easing.js plugin speed: 1000 // The amount of time, in milisecons, it takes to complete a transition });
$("#someDiv").slideto({ highlight_color: 'blue', highlight_duration: 'slow', slide_duration: 500 });
- http://webdesignerwall.com/tutorials/scrollto-posts-with-jquery [21]
- https://github.com/litera/jquery-scrollintoview
$("some_selector").scrollintoview({ duration: 2500, direction: "vertical", complete: function() { // highlight the element so user's focus gets where it needs to be } });
$(...).scrollTo( 'li:eq(15)', 1000, {offset: {top:-5, left:-30} });
$('a').smoothScroll(); $('#container a').smoothScroll(); $('#container a').smoothScroll({excludeWithin: ['.container2']}); exclude links if they are within a containing element: $('a').smoothScroll({exclude: ['.rough','#chunky']}); exclude links if they match certain conditions $('.backtotop').smoothScroll({offset: -100}); adjust where the scrolling stops $('a').smoothScroll({afterScroll: function() { alert('we made it!'); }}); add a callback function that is triggered after the scroll is complete
{ offset: 0, direction: 'top', // one of 'top' or 'left' scrollTarget: null, // only use if you want to override default behavior afterScroll: null, // function to be called after scrolling occurs. "this" is the triggering element easing: 'swing', speed: 400 }
Scroll with page
- http://css-tricks.com/scrollfollow-sidebar/
- http://stackoverflow.com/questions/2177983/how-to-make-div-follow-scrolling-smoothly-with-jquery
Scrolling and parallax
- http://joelb.me/scrollpath/ - define custom scroll paths
- http://markdalgleish.com/projects/stellar.js - not so good in chrome?
Popup
ToC
- https://github.com/timaschew/auto-toc.js - book minimal 1KB on-the-fly TOC generator for markdown and HTML
- https://github.com/CodeHimBlog/autoToc.js - jQuery plug-in to auto generate Table of Contents based on the h2 headings available in the article tag of HTML document.
- https://github.com/gajus/contents - Table of contents generator.
- https://github.com/jgallen23/toc - jQuery Table of Contents Plugin
Tooltips
- qTip2 - Pretty powerful tooltips
- http://trentrichardson.com/Impromptu/ - for tutorials
Lightbox
Carousel
$("ul#roundabout").roundabout({ autoplay: true, autoplayInitialDelay: 2000 });
The above works only for the first instance. Use window.setTimeout to alter further IDs. [26]
URL
- url() A simple, lightweight url parser for JavaScript (~1.6 Kb minified, ~0.6Kb gzipped).
Events / calendar
- FullCalendar
- https://github.com/fullcalendar/fullcalendar - provides a highly performant React component that accepts JSX for rendering nested content
Dates
Viewport
- Keep in View - Don't allow elements to scroll out of view by having them stick to the top or bottom of a window.
- retina.js is an open source script that makes it easy to serve high-resolution images to devices with retina displays
Fullscreen
Scrollbars
Keyboard
- Mousetrap - A simple library for handling keyboard shortcuts in Javascript.
- Whatthekeycode.com - quickly find a js keycode for any key [28]
Mouse
- https://github.com/mozilla/pointer.js - mouse+touch
Media
- MediaElement.js - a blazingly fast and amazingly powerful HTML5 audio and video library that creates a unified feel for for all media files (MP4, WebM, MP3, FLV), streaming content (HLS, M(PEG)-DASH, RTMP), and embeddable players like YouTube, Vimeo, DailyMotion, Facebook, and SoundCloud.
- jPlayer - the completely free and open source (MIT) media library written in JavaScript. A jQuery plugin, (and now a Zepto plugin,) jPlayer allows you to rapidly weave cross platform audio and video into your web pages. jPlayer's comprehensive API allows you to create innovative media solutions while support and encouragement is provided by jPlayer's active and growing community.
- Amplitude.js - a Javascript library that allows you to control the design of your media controls in your webpage -- not the browser. No dependencies (jQuery not required)
- Projekktor - a self-hosted, open source video (and audio) player for the web, written in Javascript, released under GPLv3. It simplifies the way you implement and work with web video by solving tons of cross browser- and compatibility- issues, adding eye candy and by providing extremely powerful non standard features.
- https://github.com/mozilla/popcorn-js - Mozilla's HTML5 video and media library for the open web. It allows web developers, filmmakers, artists, designers and others to easily create timeline based web productions. Popcorn.js helps simplify media API and implementation differences between browsers and includes a powerful event system and a rich plugin architecture and plugins. This project is no longer maintained.
- Player.js - A JavaScript library that allows developers to programmatically control video and audio within IFrames across a number of services.
- Wimpy Player - a javascript HTML5 audio player & video player that's easy to set up, design, configure and customize. Works on all devices, Custom Skins, Fluid + Responsive, Extensive Javascript API, No Dependencies (doesn't require jQuery or similar), Built on pure Javascript, CSS & HTML5, Playlists supported: JSON, XML, RSS, Text & more, Works with any CMS template or platform. $$
- Clappr - An extensible media player for applications
Audio
See also Audio#Web players
- riffwave.js - HTML5 sound synthesis via PCM encoding
- browserLoop - An attempt to replicate ableton-like loop playing in the browser
- audio.js - a drop-in javascript library that allows HTML5’s <audio> tag to be used anywhere. It uses native <audio> where available and an invisible flash player to emulate <audio> for other browsers. It provides a consistent html player UI to all browsers which can be styled used standard css.
- https://github.com/kolber/audiojs - A cross-browser javascript wrapper for the html5 audio tag
- http://kolber.github.io/audiojs/demos/test6.html
- https://github.com/greghub/green-audio-player - Audio Player javascript library
- https://github.com/torcado194/scritch-player - a simple HTML media player designed for ease of creation and customization. If you have a collection of audio files, simply drop them in and upload to a website to get a player to listen to it! The original intention was to create a media player for musicians to use to upload their albums to itch.io. Something for them to easily copy/migrate their existing albums from sites like bandcamp.
- https://github.com/blackle/blamscamp - lets you create a bandcamp-style audio player for an individual album. The player is an entirely self-contained website, and can be hosted on a variety of platforms, but was designed specifically for itch.io.
- https://github.com/goldfire/howler.js - an audio library for the modern web. It defaults to Web Audio API and falls back to HTML5 Audio. This makes working with audio in JavaScript easy and reliable across all platforms.
MIDI
Video
- Video.js - a web video player built from the ground up for an HTML5 world. It supports HTML5 and Flash video, as well as YouTube and Vimeo (through plugins). It supports video playback on desktops and mobile devices. This project was started mid 2010, and the player is now used on over 400,000 websites.
- https://github.com/brianchirls/Seriously.js - compositing
- https://gitlab.com/agrahn/ABLoopPlayer - A media player based on HTML5, jQuery and JavaScript, with A-B repeat, fast/slow motion and bookmarking functionality for online video (YouTube) and local video and audio files in the MP4/H.264, WebM, Ogg, MP3, WAV formats
Images
- http://srobbin.com/jquery-plugins/backstretch/ - a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element
- Gradify is a module which finds the most prominent colors in any image, and produces a scalable, responsive CSS gradient. This can provide a less jarring experience as image placeholders.
- Galleria - Responsive JavaScript Image Gallery
- https://github.com/aiaio/galleria-facebook - Display Facebook Photos on Your Website with Galleria in a responsive layout.
- https://github.com/ytiurin/jsphotocradle - image gallery that delivers photos you store on services like Flickr or Picasa to your personal website or blog
- Pannellum - a lightweight, free, and open source panorama viewer for the web. Built using HTML5, CSS3, JavaScript, and WebGL, it is plug-in free.
Transforms
Animation
- jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It's great to use as a hover effect or a way to direct attention to an element.
- anime.js • JavaScript animation engine - a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects. [35]
Canvas
- goo.js is a microlibrary intended to make it easy to draw and handle mouse and keyboard events with the HTML5 canvas library.
- https://github.com/samizdatco/skia-canvas - a browser-less implementation of the HTML Canvas drawing API for Node.js. It is based on Google’s Skia graphics engine and, accordingly, produces very similar results to Chrome’s element. The library is well suited for use on desktop machines where you can render hardware-accelerated graphics to a window and on the server where it can output a variety of image formats.
While the primary goal of this project is to provide a reliable emulation of the standard API according to the spec, it also extends it in a number of areas to take greater advantage of Skia's advanced graphical features and provide a more expressive coding environment.
Graphics
- Datavisualization.ch Selected Tools is a collection of tools that we, the people behind Datavisualization.ch, work with on a daily basis and recommend warmly. This is not a list of everything out there, but instead a thoughtfully curated selection of our favourite tools that will make your life easier creating meaningful and beautiful data visualizations.
D3
- D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.
- http://christopheviau.com/d3_tutorial/
- http://bost.ocks.org/mike/d3/workshop/#0
- http://www.recursion.org/d3-for-mere-mortals/
- http://alignedleft.com/tutorials/d3
- http://eyeseast.github.com/visible-data/2012/12/14/mapping-with-d3/
- https://github.com/vogievetsky/IntroD3
- http://lws.node3.org/
- http://christopheviau.com/d3list/
- https://docs.google.com/spreadsheet/lv?key=0AqMEGBUNwXeHdHpQNlVuY29SUE5BSXVtS3JueGlNYVE&toomany=true#gid=0 - all examples
Graphs
- Springy - A force directed graph layout algorithm in JavaScript. -
- Sigma is a JavaScript library dedicated to graph drawing. It makes easy to publish networks on Web pages, and allows developers to integrate network exploration in rich Web applications.
Colours
- http://bebraw.github.io/colorjoe/ - picker
- chroma.js - a small-ish zero-dependency JavaScript library (13.5kB) for all kinds of color conversions and color scales.
- Color.js - Color conversion & manipulation library by the editors of the CSS Color specifications
Textures
Shapes
Other
- Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library. Uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later.
- gRaphaël’s goal is to help you create stunning charts on your website. It is based on Raphaël graphics library. Check out the demos to see static and interactive charts in action.
- Donatello is a pure-CSS drawing library for the browser. The API is inspired in part by Raphael.js. All graphical elements are rendered using HTML DOM and CSS.
- Dojo GFX is a cross-browser 2D vector graphics API that enables development of rich graphic web application on desktop and mobile without having to deal with the browsers native graphics technologies.
- Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.
- Bonsai - A lightweight graphics library with an intuitive graphics API and an SVG renderer.
- Two.js is a two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same api to draw in multiple contexts: svg, canvas, and webgl.
- svg.js - A lightweight library for manipulating and animating SVG.
- glfx.js - Adjust photos in your browser in realtime with glfx.js, an image effects library powered by WebGL. It uses your graphics card for image effects that would be impossible to apply in real-time with JavaScript alone.
- Processing.js is the sister project of the popular Processing visual programming language, designed for the web. Processing.js makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins. You write code using the Processing language, include it in your web page, and Processing.js does the rest. It's not magic, but almost.
Snap.svg
- http://learnjs.io/blog/2013/11/30/snapsvg-resources/
- http://svg.dabbles.info/ Snap.svg examples and tutorials
- https://www.youtube.com/watch?v=hyaiFapVOek
- http://www.i-programmer.info/programming/javascript/6537-getting-started-with-snapsvg.html
- http://webdesign.tutsplus.com/articles/how-to-manipulate-and-animate-svg-with-snapsvg--cms-21323
VVVV.js
Isometric
Ray trace
anypixel.js
Diagrams
Presentation
- h5slides - basic presentation system, in chinese
- Impress.js - It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.
- Strut - Presentation editor for Impress.js
- jmpress.js - jQuery and Impress.js, a jQuery plugin to build a website on the infinite canvas
- dizzy.js is a Javascript library that enables you to create nonlinear presentations similiar to Prezi without using Flash. The presentation data is stored in the SVG-format, the navigation and animation is done via Javascript.
- reveal.js - A framework for easily creating beautiful presentations using HTML. reveal.js comes with a broad range of features including nested slides, markdown contents, PDF export, speaker notes and a JavaScript API. It's best viewed in a browser with support for CSS 3D transforms but fallbacks are available to make sure your presentation can still be viewed elsewhere.
Scrolling
- https://github.com/Prinzhorn/skrollr - Parallax* scrolling lib with zero dependencies (seriously, you don't need jQuery) in just under 5.5k minified (2.6k gzipped). No JavaScript skills needed.
- ScrollMagic ♥ Demo - The javascript library for magical scroll interactions.
Deep Zoom like
- http://www.akademy.co.uk/software/canvaszoom/ - js deep zoom
- https://github.com/openzoom - dead
Mapping
Maths
- Numeric Javascript library allows you to perform sophisticated numerical computations in pure javascript in the browser and elsewhere.
- jStat is a statistical library written in JavaScript that allows you to perform advanced statistical operations without the need of a dedicated statistical language
- Simple statistics is a JavaScript library that does descriptive statistics, regression, and classification. It can tell you basic things like minimum and maximum, but it can also compute tricky things like standard deviation and sample correlation.
- MathJax is an open source JavaScript display engine for mathematics that works in all modern browsers.
3D
Three.js
Polygon.js
- Polygonjs - WebGL Design & Animation Tool, Node-Based Design & Animation Tool for the Web
Physics
Menu / tabs
Alerts and tooltips
Notifications
Reading
- Fokus uses JavaScript to emphasize anything you select by covering the rest of the page with semi-transparent black.
- https://github.com/clu3/bootstro.js - intro.js for bootstrap
- http://usehook.com/ - refresh by scrolling up, like some mobile
WYSIWYG
- Create.js is a comprehensive web editing interface for Content Management Systems. It is designed to provide a modern, fully browser-based HTML5 environment for managing content. Create can be adapted to work on almost any content management backend.
RSS
- zRSSFeed - will read RSS feeds from any website URL using the Google Feeds API. It produces structured HTML with in-built CSS classes for styling.
- FeedEk is a RSS/ATOM Feed Reader/Importer/Parser that is written with jQuery. You can obtain feeds easily from any domain.
Webcam
Voice
- Artyom.js - Voice commands and speech synthesis made easy. Artyom.js is an useful wrapper of the speechSynthesis and webkitSpeechRecognition APIs. Besides, artyom.js also lets you to add voice commands to your website easily, build your own Google Now, Siri or Cortana!
- annyang! Easily add speech recognition to your site - a tiny javascript library that lets your visitors control your site with voice commands. annyang supports multiple languages, has no dependencies, weighs just 2kb and is free to use.
Floating overlay
Search
Networking
Concurrency
Injection
- DiceJS (dynamically injected css engine) is a jQuery extension that allows you to store your CSS in JavaScript objects to dynamically manipulate and inject as you please.
Feedback
Introduction overlay
Taxonomy
Time
- Timeago is a jQuery plugin that makes it easy to support automatically updating fuzzy timestamps (e.g. "4 minutes ago" or "about 1 day ago").]
Waypoints
Actions on certain areas of the page.
Footnotes
Shadows
Audio
File upload
- Dropzone.js - one of the most popular drag and drop JavaScript libraries. It is free, fully open source, and makes it easy for you to handle dropped files on your website. It's meant to look good by default, and is highly customizable.
- http://tus.io/ - protocol
Github widget
Cryptography
Humour
- Vanilla JS - a fast, lightweight, cross-platform framework for building incredible, powerful JavaScript applications. [50]
- https://github.com/madrobby/vapor.js - a new amazing JavaScript framework.
- https://github.com/madrobby/semicolon.js - A more secure. stable and reliable version of vapor.js
- HTML9 Responsive Boilerstrap JS - a flexible, dependency-free, lightweight, device-agnostic, modular, baked-in, component framework MVC library shoelacestrap to help you kickstart your responsive CSS-based app architecture backbone kitchensink tweetybirds.
- https://github.com/kleampa/not-paid - Client did not pay? Add opacity to the body tag and increase it every day until their site completely fades away [51]
Mobile
Responsive
jQuery Mobile
- jQuery Mobile - Touch-Optimized Web Framework for Smartphones & Tablets. A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.
See JQuery#Mobile
Other
- iUIweb - framework for smartphones & high-end devices. supports iOS, Android, Rim OS6, MeeGo, Bada, WebOS, ... smartphones and tablets
- dhtmlxSuite is a rich JavaScript library that delivers a complete set of UI components
- Sencha Touch, a high-performance HTML5 mobile application framework, is the cornerstone of the Sencha HTML5 platform. Built for enabling world-class user experiences, Sencha Touch is the only framework that enables developers to build powerful apps that work on iOS, Android, BlackBerry, Windows Phone, and more.
- jQT - A Zepto/jQuery plugin for mobile web development on the iPhone, Android, iPod Touch, and other forward-thinking devices.
- Titanium SDK - Create native, hybrid, and mobile web appsthrough a JavaScript-based SDK
- Jo - The simple app framework for HTML5. For iOS, Android, webOS, BlackBerry, Chrome OS & anything else with HTML5. Widgets, lists and scrolling goodness using JavaScript & CSS3. Make native mobile apps or web apps with the same code. Works great with PhoneGap
- Kendo UI - Mobile apps that run everywhere with HTML5 and JavaScript. Build apps that look and feel native to end-users on: (NEW!) WinPhone8, iOS, Android and BlackBerry. Target multiple phone and tablet platforms with a single UI codebase, using only HTML5 and JavaScript.
Libraries and frameworks
- YouTube: JavaScript Frameworks: Why and How?
- Journey Through The JavaScript MVC Jungle - July 27th, 2012
- Rich JavaScript Applications – the Seven Frameworks (Throne of JS, 2012)
- Client-side JS MV* Framework Roundup
- The Battle of Modern Javascript Frameworks
- TodoMVC - Developers these days are spoiled with choice when it comes to selecting an MV* framework for structuring and organizing their JavaScript web apps. Backbone, Ember, AngularJS, Spine... the list of new and stable solutions continues to grow, but just how do you decide on which to use in a sea of so many options?
- http://www.nebithi.com/2013/04/28/knockoutjs-vs-angularjs/
- http://eviltrout.com/2013/06/15/ember-vs-angular-its-not-even-close.html
- http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-emberjsor-other-client-mvc-framework-if-i-have-a [52]
- https://vimeo.com/68215606 Tom Dale, Peter Cooper and Rob Conery; Cage Match - EmberJS vs. Angular
YUI
- YUI is a free, open source JavaScript and CSS framework for building richly interactive web applications.
MooTools
- MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.
Google Closure
- The Closure Library is a broad, well-tested, modular, and cross-browser JavaScript library. You can pull just what you need from a large set of reusable UI widgets and controls, and from lower-level utilities for DOM manipulation, server communication, animation, data structures, unit testing, rich-text editing, and more.
Dojo Toolkit
- Dojo saves you time and scales with your development process, using web standards as its platform. It’s the toolkit experienced developers turn to for building high quality desktop and mobile web applications.
Knockout
- Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably. Simplify dynamic JavaScript UIs by applying the Model-View-View Model (MVVM) pattern.
Backbone.js
- Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
Articles
- Step by step from jQuery to Backbone - Jul 23, 2012
- Backbone.js: Hacker's Guide - 19 Jul, 2012
- Putting some MVC meat into your app: Backbone.js
- How to build fast HTML5 mobile apps using backbone.js, zepto.js and trigger.io - March 2, 2012
- http://floatleft.com/notebook/backbone-has-made-me-a-better-programmer
- http://news.ycombinator.com/item?id=4434553
- http://lazywithclass.posterous.com/backbone-and-pinocchio
- http://www.crashlytics.com/blog/crashlytics-labs-is-proud-to-announce-the-release-of-backbone-statemanager/
- http://www.ofbrooklyn.com/2012/11/13/backbonification-migrating-javascript-to-backbone/
- http://codeartists.com/post/38153430040/how-to-start-with-backbone-js-a-simple-skeleton-app
- https://github.com/kjbekkelund/writings/blob/master/published/understanding-backbone.md
Docs
- Developing Backbone.js Applications - Welcome to my (in-progress) book about the Backbone.js framework for structuring JavaScript applications.
Related
- Backbone UI provides a simple way to represent your Backbone Models and Collections as UI components. The need to shuffle data in and out of your UI is replaced with simple data binding techniques. All components are skinnable with CSS, and will render consistently accross browsers.
- Recline.js - Building on Backbone, Recline supplies components and structure to data-heavy applications by providing a set of models (Dataset, Record/Row, Field) and views (Grid, Map, Graph etc).
- Btapp.js provides access to a browser plugin version of uTorrent/BitTorrent via a tree of Backbone Models and Collections. The intent of this project is to allow access to the extensive functionality of a torrent client, from web apps that are as simple as a single Backbone View.
- Chaplin is an architecture for JavaScript applications using the Backbone.js library. The code is derived from moviepilot.com, a large single-page application.
Ember
- https://github.com/stefanpenner/ember-app-kit
- https://github.com/ebryn/ember-model
- https://github.com/zendesk/ember-resource
- http://epf.io/
- https://github.com/endlessinc/ember-restless
- https://github.com/charlieridley/emu/
AngularJS
- AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.
- http://stephanebegaudeau.tumblr.com/post/48776908163/everything-you-need-to-understand-to-start-with
- http://www.quora.com/Ember-js/Which-one-of-angular-js-and-ember-js-is-the-better-choice
- http://news.ycombinator.com/item?id=5230636
- https://github.com/jmcunningham/AngularJS-Learning
- http://198.199.117.192/#/step-1
- http://glennstovall.com/blog/2013/06/27/angularjs-an-overview/
- https://docs.google.com/presentation/d/1Gv-dvU-yy6WY7SiNJ9QRo9XayPS6N2jtgWezdRpoI04/preview#slide=id.p
- http://www.mean.io/ - stack
- http://famo.us/ Famo.us is the only JavaScript framework that includes an open source 3D layout engine fully integrated with a 3D physics animation engine that can render to DOM, Canvas, or WebGL.
Meteor
- Meteor is an open-source platform for building top-quality web apps in a fraction of the time, whether you're an expert developer or just getting started.
Fizzygum
- Fizzygum - Tired of stringing libraries together? Try a new web framework that handles complex things, easily. Fizzygum is designed from the ground up to: make dashboards and visualise data (plots, maps, …), author, organise and navigate documents, insert dynamic calculations anywhere, via simple drag & drop, make custom utilities visually (no coding required), use internal development tools to customise anything, as it runs, do all of the above, concurrently
Other
- Aura is an event-driven architecture for developing scalable applications using reusable widgets. It works great with Backbone.js, but is framework-agnostic, adapts many best-practice patterns for developing maintainable apps and has first-class support for modern tools like Bower, Grunt and Yeoman.
- Batman.js is a framework for building rich web applications with CoffeeScript. App code is concise and favors convention over configuration, and packs a powerful system of view bindings and observable properties. The API is designed with developer and designer happiness as its first priority, and while it has no real dependencies, it works quite well with Rails.
- Bone.io allows you to build realtime HTML5 apps using websockets to deliver "hot" data to the browser. This enables you to easily construct rich, highly responsive user interfaces. In a lot of ways, Bone.io can be viewed as a much improved version of Backbone.js. Backbone, Angular and other older frameworks rely primarily on AJAX and model bindings to get data to the DOM. The problem with this approach is that AJAX has no method for handling bi-directional communication. In the world of modern data-driven HTML5 applications, Bone.io strives to pickup where these other frameworks have left off.
Flutter
- Flutter - Build apps for any screen. Flutter transforms the app development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single codebase. Get started Notification Flutter 3.13 is here! Learn more. Flutter is an open source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase.
HTMX
- https://htmx.org/ - allows you to access AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertexthtmx is small (~9k min.gz'd), dependency-free, extendable & IE11 compatible [62] [63]
- Hypermedia Systems [64] - A simpler approach to building applications on the Web and beyond with htmx and Hyperview. Enhancing web applications without using SPA frameworks. [65]
Mavo
- Mavo - Create complex, reactive, persistent web applications by just writing HTML & CSS, without a single line of JavaScript and no server backend. Developed in the Haystack Group at MIT CSAIL and led by Lea Verou.
Storage
Games
to sort
- cujo is an architectural framework for next generation JavaScript applications. It encourages highly modular development, declarative application assembly, and embraces the asynchronous nature of JavaScript and its fusion of object-oriented and functional programming styles. cujo’s extensible architecture and use of industry standards allows it to work seamlessly with your current application framework -- and adapt easily to your next.
- curl (cujo resource loader) - A small, fast module and resource loader with dependency management. (AMD, CommonJS Modules/1.1, CSS, HTML, etc.)]
- CanJS is a MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy
- Cappuccino is built on top of standard web technologies like JavaScript, and it implements most of the familiar APIs from GNUstep and Apple's Cocoa frameworks. When you program in Cappuccino, you don't need to concern yourself with the complexities of traditional web technologies like HTML, CSS, or even the DOM.
- Seed is a library and interpreter, dynamically bridging (through GObjectIntrospection) the WebKit JavaScriptCore engine, with the GNOME platform. Seed serves as something which enables you to write standalone applications in JavaScript, or easily enable your application to be extensible in JavaScript.
- Montage simplifies rich HTML5 application development by providing modular components, real-time two-way data binding, CommonJS dependency management, and more.
- Enyo is an open source object-oriented JavaScript framework emphasizing encapsulation and modularity for mobile or web application.
- Opa is an advanced application framework for JavaScript. All aspects are directly written in Opa: Frontend code, backend code, database queries and configuration. And everything is strongly statically typed.
- DoubleDollar is a new kind of JavaScript Framework, that enables you to create pure JavaScript applications with beautiful Zen-like code. Built on jQuery, DoubleDollar is lightning fast, requires no compiler, and is infinitely extendable.
- Sammy.js is a tiny JavaScript framework developed to ease the pain and provide a basic structure for developing JavaScript applications.
- hexagonal.js is JavaScript’s implementation of Alistair Cockburn’s Hexagonal architecture, but with some unusual solutions and additional philosophy. Let’s focus on philosophy first, because it’ll let you judge if you’re still interested in this idea.
- Kendo UI has it all: rich jQuery-based widgets, a simple and consistent programming interface, a rock-solid DataSource, validation, internationalization, a MVVM framework, themes, templates and the list goes on.
- JavaScriptMVC is a MIT licensed, client-side, JavaScript framework that builds maintainable, error-free, lightweight applications as quick as possible. It packs best-of-breed libraries and tools that are guaranteed to work together. It supports every browser that jQuery supports.
- component - modular framework; client package management
- ColtJS is a simple framework allowing for easy deployment of JavaScript Applications using Asynchronous Module Definition (AMD). It's only dependency is RequireJS. The central concept behind behind Colt is simplicity. The framework is built to be lightweight, flexible, and highly efficient.
- https://github.com/gotdibbs/Imposter - local files
Caching
- jStorage is a simple wrapper plugin for Prototype, MooTools and jQuery to cache data (string, numbers, objects, even XML nodes) on browser side. Note that functions, DOM nodes, host objects and such can not be saved. jStorage was first developed under the name of DOMCached but since a lot of features were dropped to make it simpler (like the support for namespaces and such) it was renamed. DOMCached had separate files for working with Prototype and jQuery but jStorage can handle both in one go.
- locache.js is a simple framework to help you cache objects on the client-side. It's not a replacement for HTTP caching, and often that is a better idea. Rather it allows you to cache JavaScript objects ( anything that is JSON serialisable) for re-use or offline usage. You can optionally provide an expiration time for cached objects.
- AES.io offers online tools for secure data storage and collaboration. We use client-side encryption to ensure all information is safe - both private and shared.
Sharing
- Sharrre is a jQuery plugin that allows you to create nice widgets sharing for Facebook, Twitter, Google Plus (with PHP script) and more.
- https://github.com/heiseonline/shariff - enables website users to share their favorite content without compromising their privacy.
Syntax highlighting
- Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s a spin-off from Dabblet and is tested there daily by thousands.
- https://github.com/phoboslab/jQuery-JSH
- http://softwaremaniacs.org/soft/highlight/en/
- http://craig.is/making/rainbows
- http://code.google.com/p/google-code-prettify/
Emulation
- n64js - A work-in-progress n64 emulator.
Code visualisation
- Violin - Instrumenting JavaScript. This is an experimenting in instrumenting JavaScript applications. Object and Function graph.