an Interactive App Framework for HTML5

built with Canvas & JavaScript

The iio Engine (pronounced 'ee-oh') is an extensive application framework that helps with the creation and deployment of HTML5 applications. The framework provides a feature rich SDK, an advanced debugging system, and a cross-platform deployment engine. The iio Engine has no dependencies and can be interfaced with Box2D. The core platform is open source and totally free.

Free & Open Source

The free download includes both minified and production versions of the entire core iio class library. Mess around under the hood as much as you want - collaboration and community additions to the engine and its extensions are always encouraged.

Setup is easy, just download the SDK
then follow the quick start guide.


Built for Speed and Efficiency

iio was designed from the ground up to be as lightweight as possible. Most data is 'undefined' by default, so your app will never be carrying any extra weight. No application is too simple to benefit from utilizing iio.

Only 56KB of Data

The iio Engine is not a bulky framework - its about 1/70th the size of an average mp3 file.


How Easy is it? Here's Tic-Tac-Toe in 10 lines of code

TicTacToe = function(io){

  var grid = io.addObj(new iio.Grid(0,0,3,3,120)
                 .setStrokeStyle('white'));
  var xTurn=true;
  io.canvas.addEventListener('mousedown', function(event){
    var c = grid.getCellAt(io.getEventPosition(event),true);
    if (typeof grid.cells[c.x][c.y].taken == 'undefined'){
      if (xTurn) 
        io.addObj(new iio.XShape(grid.getCellCenter(c),80)
              .setStrokeStyle('red',2));
      else 
        io.addObj(new iio.Circle(grid.getCellCenter(c),40)
              .setStrokeStyle('#00baff',2));
      grid.cells[c.x][c.y].taken=true;
      xTurn=!xTurn;
    }
   });
}; iio.start(TicTacToe,'canvasId');

See the Tic-Tac-Toe Tutorial for a step by step walkthrough.

Please update your browser to a version that supports canvas

The Future of Application Development

Device support for HTML5 is rapidly increasing and 2013 will see the launch of an entirely Web based mobile operating system: Firefox OS. Coming with this new OS is brand new HTML5 App Marketplace that will soon be ubiquitous on 'low-cost operating systems in emerging markets'.

Of course, iOS, Android, and Windows 8 already have their own respective HTML5 application stores as well. Like Mozilla, Google is also betting on the future of web applications with the launch of its new Web based Pixel laptop.

Think about this future - instead of having to constantly monitor your app's functionality across multiple platforms with every new OS change, the creators of those platforms will be scrambling to make their OS's compatible with your app.

Now is the time to invest in HTML5 software... let's get started with iio.

Why HTML5 & JS?

Web applications are inherently cross-platform.

Deploy one script, and your users will be able to access your app on their desktops, laptops, tablets, smartphones, e-books, ipods, xboxs, televisions, playstations, nintendo handhelds, cars, digital signs - the list goes on and it will continue to rapidly grow.

See mobileHTML5 for a current update on HTML5 feature support for web browsers and mobile devices.


The Easiest Way to Work with Box2D

iio attaches a graphics engine to Box2D by giving its Joint and Shape classes new methods and properties. This makes the Box2D workflow easier than ever. Check out this code sample - if you're familiar with Box2D, it should be very exciting. See the iio-Box2D Docs for more info.

//Adding graphics with the iio Engine
io.addObj(world.CreateBody(bodyDef))
   .CreateFixture(fixDef)
   .GetShape()
   .prepGraphics(io.b2Scale)
   .addImage('myImg.png')
   .setStrokeStyle('black',2)
   .setShadow('rgb(150,150,150)',10,10,4);