Javascript UI Framework for Single Page Applications

Declarative UI model

Hover the mouse over the elements to see how they are related
    "windows": [
            "name": "CustomerDataWindow",
            "title": "Customer Data",
            "width": 280,
            "height": 250,
            "controls": [
                    "name": "firstNameTextBox",
                    "type": "textbox",
                    "label": "First Name",
                    "bindsTo": "firstName"
                    "name": "lastNameTextBox",
                    "type": "textbox",
                    "label": "Last Name",
                    "bindsTo": "lastName"
                    "name": "OKButton",
                    "type": "button",
                    "text": "OK",
                    "isDialogButton": true,
                    "dialogResult": "OK"
                    "name": "CancelButton",
                    "type": "button",
                    "text": "Cancel",
                    "isDialogButton": true,
                    "dialogResult": "Cancel"
Customer Data

Full set of ready-to-use controls

Click on the image to go to the demo application and see all controls in action

Easy and intuitive programming model

Hover on the code blocks and click to see the illustrations
"use strict";

$(function () {
    // RedUI will render the window that you described in the UI model
    var myWindow = redui.createNewWindow("CustomerDataWindow");

    // You decide when it will appear on the screen;

    // Binding to the view model is as easy as calling bind
    var customerData = {
        firstName: "Claudio",
        lastName: "Lucchesi",  

    // You can access controls by names...
    var firstNameControl = myWindow.firstNameTextBox;

    // ...or by index
    var firstControl = myWindow.controls[0];

    // From control you can access...

    // ...the element
    var element = firstNameControl.getElement();
    // ...model properties
    var label = firstNameControl.model.label;
    // ...view model bound to the control
    var dataObject = firstNameControl.bindingContext;

    // Controls generate events you can handle
    myWindow.closed(function (target, dialogResult) {
        if (dialogResult === "OK") {
            // Save the updated model view

2-way data binding

When you update the data in the view, view model updates automatically.

Built-in validation

Required fields, pattern match, maximum length, custom validation (in case view model has validate function). See Live Examples to learn how to configure the validation rules.

Localizable controls

Leverages globalize.js without direct dependency. See Live Examples to learn how it works.

Supports ko.observable

Leverages knockout.js without direct dependency. See Live Examples to learn how it works.

Open to add custom controls

In case you need the control that is not yet implemented. See Live Examples to learn how to create a custom control.

Free, open source

The MIT License (MIT).

Copyright Artem Kondratyev 2014