10 JavaScript Web UI Libraries, Frameworks and Toolkits

Sam Deering

Not all libraries are suited for every project, but most developers will still rely on a single UI framework, a faithful friend they will always turn to in times of need. Currently, there are a wide varied range of Web UI frameworks covering varied languages – for today we will focus on JavaScript Web UIs.

Related Posts:

Below you will find the best 10 JavaScript Web UIs, all offering, to different degrees, solutions. Enjoy!

1. XUI: JavaScript Micro-Framework

Is “a lightweight, dead simple, microtiny, super modular JavaScript framework for building mobile web applications”. The reason why XUI is so light weight is due to all of the cross browser compatibility code being stripped out and deemed non-essential for mobile app development.


XUI

Source + Demo

2. iUI: iPhone User Interface Framework

Consists of a JavaScript library, CSS, and images. It is a light weight and minimal UI framework for developing uniform iPhone apps.


iUI

Source + Demo

3. AlloyUI

Is a feature rich UI frameworks, built on YUI 3 and to some degree on YUI 2, that comprises a wide array of components – more than 60 in all – that range from utilities to sugar layers to full-blown UI widgets. Its contols include: Image Gallery, Dialog, Treeview, Panel, AutoComplete, Button, Calendar, Toolbar… and much more.


AlloyUI

Source + Demo

4. Qutensil JavaScript Toolset

Is still under development but is showing some very promising stuff in its roadmap. It has been built on Prototype and Scriptaculous libraries and features a growl-like user messaging system, color picker (based on raphaël), slider, tooltip system, draggable window and alert / confirm / prompt windowing systems.


Qutensil

Source + Demo

5. Prototype UI

Is an extensive and easy to use JavaScript library of UI components based on Prototype and Script.aculo.us. Prototype UI provides such modules as Carousel, Modal window, Shadow and Context menu which can be used as one package or independently.


Prototype UI

Source + Demo

6. jQuery UI

Provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.


jQuery UI

Source + Demo

7. jQuery TOOLS – The missing UI library for the Web

jQuery Tools is a very light weight (2.5kb) collection of the most popular user-interface components that offers functionality over load time. It provides libraries for the following jQuery elements: Tabs, Tooltip, Scrollable, Overlay, Forms and Flashembed.


jQuery TOOLS

Source + Demo

8. Dijit – The Dojo Toolkit

Dijit is a widget system layered on top of Dojo. If you are new to the whole Dojo experience, Dijit is a good place to start. You can build amazing Web 2.0 GUI’s with very little, or no, JavaScript experience (although it helps).


Dijit – The Dojo Toolkit

Source
Demo

9. JxLib based MooTools

JxLib is a JavaScript UI framework built on MooTools. It provides the basic components most applications need such as buttons, tabs, menus, trees, and dialogs, as well as a few more capabilities. JxLib also incorporates a mechanism for selecting a look and feel, or skin, based on a set of images and CSS.


JxLib based MooTools

Source + Demo

10. Sigma Ajax UI Builder

Written in Javascript and PHP, SigmaVisual is web based visual WYSIWYG AJAX UI builder that has more than 40 common components, including tabs, dialog, tree grid, time Line and so on.


Sigma Ajax UI Builder

Source
Demo

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.