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 UI libraries.
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 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 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 A Web Application User Interface Library javascript web ui

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

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 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 The Dojo Toolkit javascript web ui

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 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 widget and interaction library built on top of the jQuery core

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 an extensive and easy to use Javascript library of UI components

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 Rich Web Application Framework javascript web ui

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 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 a popular UI kit that extends the Prototype Framework

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

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: 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 - 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

feature rich and very popular 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.

Author: (582 Posts)

Paul Andrew is the editor and founder of Speckyboy Design Magazine.

Comments