an Interactive App Framework for HTML5

built with Canvas & JavaScript

iio engine (pronounced 'ee-oh') is a framework that speeds the creation and deployment of HTML5 Canvas applications. The engine has no dependencies, can be interfaced with Box2D, includes an online IDE, features a new scripting language that minimizes syntax, and is linked to a free publishing platform at iioApps.com. The core platform is open source and free to use for any purpose.

Free & Open Source

The download includes minified and production versions of the core iio library. Collaboration and community additions to the engine and its extensions are always encouraged. Submit additions, questions, and bugs on Github. General inquires may be sent to iio interactive.

v1.3 features improved syntax
but currently lacks Box2D.

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


Built for Speed and Efficiency

iio was designed to be as lightweight as possible. Objects have a simple mode, to prevent them from carrying any extra weight from unused data. No application is too simple to benefit from utilizing iio.

Only 40KB 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

//using iio 1.3
TicTacToe = function(app,s){

  var grid = app.add('center 340 outline 6 grid 3 white');
  var xTurn = true;

  grid.click = function(event,ePos,cell){

    if(!cell.taken){

      if(xTurn) cell.add('height/1.3: x red 6');
      else cell.add('height/1.3: o outline #00baff 6');
      xTurn=!xTurn;

    } cell.taken=true;
  }

}; iio.start( TicTacToe, 'canvasId' );
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 iio Engine 1.2
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);