Jo HTML5 Mobile App Framework

Support Docs Downloads Demos Home

The simple open source app framework for HTML5

For iOS, Android, Windows 8, BlackBerry 10, Tizen, 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

Fork on GitHub

New 0.5.0 Release "Pumpkin Spice"

Jo was made for web apps

Your HTML5 app lives in a single page and Jo helps you create a more app-like experience. Build your app with JavaScript, tweak some CSS and then deploy to your server or build into an app either standalone (Chrome OS, Windows 8, Tizen 2.2) or with PhoneGap or Cordova (iOS, Android, BlackBerry 10).

Native-like widgets and UI controls

Code the way you want.

Jo gives you most of the benefits of some of the big frameworks out there without all the fuss (and the bloat). Jo doesn't need a complex build system because all the JavaScript compresses down to about 16K. That's about the same footprint as a typical website logo image. Jo doesn't care if you dig rigid MVC, like object literals, wrap your apps with a module pattern, or prefer pure functional programming.

Here's one way to go, for code ninja types:

// nested and chained goodness
var main = new joCard([
    new joTitle("Hello, Jo!"),
    new joMenu([
        "Yes",
        "No",
        "Maybe"
    ]).selectEvent.subscribe(function(i) {
        console.log("You picked " + i);
    }),
    new joDivider(),
    new joButton("Awesome!").selectEvent.subscribe(function() {
        console.log("You clicked a button");
    })
]);

Prefer more regimented code? Jo can roll with that, too:

// all neat and tidy
var title   = new joTitle("Hello, Jo!");
var menu    = new joMenu([ "Yes", "No", "Maybe" ]);
var divider = new joDivider();
var button  = new joButton("Awesome!");

// dump the controls into a card
var main    = new joCard([ title, menu, divider, button ]);

// hook up the event handlers below
menu.changeEvent.subscribe(menuhandler, this);
button.selectEvent.subscribe(buttonhandler, this);

function menuhandler(i) {
    console.log("You selected " + i);
}

function buttonhandler() {
    console.log("You clicked a button");
}

Jo doesn't judge or tell you how to code. Use it like you would any built-in language features. Plus, it's one of the few frameworks around that doesn't break handy things like instanceOf.

Jo lets CSS3 do the heavy lifting

With a couple minor exceptions, Jo manipulates the DOM by setting CSS className properties. This means you can dramatically change not only the look of your app in CSS, but all of the animated bits as well. If you want a branded look for your app across platforms, tweak the CSS once and you're done.

Ultra-tweakable with CSS3

If you want to customize your app's look and feel for each platform, most if not all of your customization will be in the CSS. If you're lucky enough to have CSS-savvy designer types on hand, this means you can more easily split up that work, too.

200K of functionality in a 16K package

Jo has a small footprint. Did we mention the 16K thing?

Jo is Open Source and free to use

And you're free to contribute as well. Just fork it, add some goodness, and make a pull request.

Source Hosted on GitHub

Docs

Contents Quick Start Class Reference Index License

Support

Forums Bug Tracker YouTube Blog Twitter @JoAppNews