15 Javascript Web UI Libraries, Frameworks and Toolkits

Almost all of the rich web applications that we currently see on the web today rely on a subtle set of UI controls, libraries or frameworks (or toolkits) that not only greatly simplify application development, they also provide a consistent, reliable, and highly interactive User Interface. What more could you ask for?

Currently, there are a wide varied range of Web UI frameworks covering varied languages – for today we will focus on Javascript Web UIs.
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…

…so, if you are looking for a fresh UI outlook, below you will find the best 15 Javascript Web UIs, all offering, to different degrees, solutions.

LivePipe: UI Components for Prototype

LivePipe UI is a suite of widgets and controls for applications that has been built using the Prototype Javascript Framework. Each control is well tested, highly extensible, well documented and all of them will degrade gracefully for non JavaScript compatible browsers.
Available Controls: Tabs, Windows, TextArea, SelectMultiple, Rating, ProgressBar, ScrollBar and ContextMenu.

UKI – Simple UI Kit for Complex Web Apps

UKI is a simple JavaScript UI toolkit has been written in plain JavaScript, built to speed-up desktop-like web applications and comes with a rich view-component library ranging from a Slider to List and SplitPane (view the control browser below). It leverages well-known DOM and JS idioms such as CSS selectors, events and attributes. So, if you’ve ever used jQuery, learning UKI won’t take very long.
The keyword to UKI is simplicity: No frameworks to install, no dependencies to manage and no CSS to include.

MochaUI – A Web Application User Interface Library

MochaUI is a popular extension to the MooTools Javascript Framework and ExplorerCanvas, to develop quick Web Applications, Web Desktops, Web Sites, Widgets, Standalone Windows, Modal Dialogs and much more.

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.

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.

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).
Everything in Dijit is designed to be globally accessible – to accommodate users with different languages and cultures as well as those with different abilities. Language translations, bi-directional text, and cultural representation of things like numbers and dates are all encapsulated within the widgets.

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 UI

jQuery UI is a widget and interaction library built on top of the jQuery core that allows you to animate different elements giving you impressive front-end interactions, all with relative ease.
The UI package is basically a collection of user interface-related functions that and can be broken into 3 main modules: the widgets, which contain prebuilt and customizable user interfaces; the effects, which are very simple and straightforward animations you can do to a page element (shake it, explode it, and so on); and expanded mouse interaction with page elements (dragging and dropping).

Prototype UI

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.

Jitsu – Rich Web Application Framework

Jitsu features an XML markup language, page compiler, animation engine, Ajax, and runtime inspector, among other things. Its implementation of Ajax makes it designer friendly, which is crucial for building consumer web applications. It’s got client-side data binding to make for rapid iterations, meaning changes are easy to achieve without having to rebuild everything from the ground up.
Other features include a compiler which converts markup to javascript, javascript runtime, cross platform library and backbutton support. Jitsu works best with Firefox and IE. It doesn’t require any particular back-end server solution.

Qutensil JavaScript Toolset

Qutensil is still under development but is showing some very promising stuff in its roadmap. It ihas 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.

Script.aculo.us

script.aculo.us is a popular UI kit that extends the Prototype Framework by adding visual effects, user interface controls, and utilities via the DOM.

Alloy UI

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.

iUI: iPhone User Interface Framework

IUI, consists of a JavaScript library, CSS, and images. It is a light weight and minimal UI framework for developing uniform iPhone apps. With such controls as navigational menus (iPhone-style), phone orientation changes and iPhone style on/off toggle it can give a more "iPhone-like" experience to your web apps.

XUI – Javascript Micro-Framework

XUI 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. Thus XUI.
It aims to be a framework for first class mobile device browsers such as WebKit, Fennec and Opera, with future support under consideration for IE Mobile and BlackBerry.

Yahoo! YUI Library

If all of the above UI frameworks, kits and libraries don’t suit your needs, maybe you should try the Daddy of UI frameworks, the very reliable, feature rich, and very popular Yahoo! YUI Library. YUI, currently in its third edition, is a constantly updated (by its large team of developers) UI library thats choc-full of features, tools, and packs a multitude of components, utilities, modules and controls. As far as finding the most complete UI library, you would be hard pushed to find any better than YUI.

You might also like…

50 Fundamental jQuery Controls, Components and Plugins »
HTML5 video Libraries, Toolkits and Players »
How to build a Cool Animated CSS3 Menu with no Javascript »
15 CSS3 Navigation and Menu Tutorials and Techniques »
20 CSS3 Tutorials and Techniques for Creating Buttons »
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials »
22 CSS Button Styling Tutorials and Techniques »
CSS References, Tutorials, Cheat Sheets, Conversion Tables and Short Codes »
50 Useful Tools and Generators for Easy CSS Development »
50 Essential Web Typography Tutorials, Tips, Guides and Best Practices »
The Blueprint CSS Framework – Tutorials, How-to Guides and Tools »
20+ Resources and Tutorials for Creative Forms using CSS »

About the Author: Paul Andrew (552 Articles)

Paul Andrew is the editor and founder of Speckyboy Design Magazine. You can follow Speckyboy on Twitter, on Facebook, on Digg or you can subscribe via RSS.

Comments and Reactions

Partners