diff --git a/docs/api.js b/docs/api.js
new file mode 100644
index 00000000..20c3aee8
--- /dev/null
+++ b/docs/api.js
@@ -0,0 +1,181 @@
+/***
+    OxUI Documentation
+***/
+var app =  {};
+$(function() {
+    app.$body = $('body');
+    app.$document = $(document);
+    app.$window = $(window);
+
+    app.$ui = {};
+    app.docs = getDocsJSON();
+    app.$ui.actionList = constructList();
+    app.$ui.actionInfo = Ox.Container().css({padding: '8px'});
+            
+
+    var $main = new Ox.SplitPanel({
+        elements: [
+            {
+                element: app.$ui.actionList,
+                size: 160
+            },
+            {
+                element: app.$ui.actionInfo
+            }
+        ],
+        orientation: 'horizontal'
+    });
+
+    $main.appendTo(app.$body);
+});
+
+function constructList() {
+    return new Ox.TextList({
+        columns: [
+                {
+                    align: "left",
+                    id: "name",
+                    operator: "+",
+                    title: "Name",
+                    unique: true,
+                    visible: true,
+                    width: 140
+                },
+        ],
+        columnsMovable: false,
+        columnsRemovable: false,
+        id: 'actionList',
+        request: function(data, callback) {
+            var items = [];
+            app.docs.forEach(function(v) {
+              items.push({'name': v.name});
+            });
+            items.sort(function(a, b) { if(a.name < b.name) { return -1 } else if( a.name == b.name) { return 0 }else { return 1 } })
+            if(!data.keys) {
+                var result = {'data': {'items': items.length}};
+            } else {
+                var result = {'data': {'items': items}};
+            }
+            Ox.print("items", items);
+            callback(result);
+        },
+        sort: [
+            {
+                key: "name",
+                operator: "+"
+            }
+        ]
+    }).bindEvent({
+       select: function(event, data) {
+           var info = $('<div>');
+           var ids = data.ids;
+           ids.forEach(function(v) {
+             var docObj = getObjectByName(app.docs, v);
+             var html = getDocHtml(docObj);
+             info.append(html);
+           });            
+            app.$ui.actionInfo.html(info);
+       }
+    });
+}
+
+function getDocHtml(doc) {
+  var wrapper = $('<div>');
+  var title = $('<h2>').html(doc.name).appendTo(wrapper);
+  var $options = $('<div>').html("Options: ").css({'marginBottom': '20px'}).appendTo(wrapper);
+  Ox.keys(doc.options).forEach(function(k) {
+    var $option = $('<div>');
+    var optionKey = $('<b>').html(k + ": ").appendTo($option);
+    var optionVal = $('<span>').html(typeof doc.options[k]).appendTo($option);
+    $('<span>').html(' <b>' + doc.options[k].toString() + '</b>').appendTo($option);
+    $option.appendTo($options);
+  });
+  var methods = Ox.keys(doc.methods);
+  if (methods.length > 0) {
+    var $methods = $('<div>').html("Methods: <br>").appendTo(wrapper);
+    methods.forEach(function(m) {
+        var $m = $('<div>').appendTo($methods);
+        var f = $('<pre>').html(doc.methods[m]).hide();
+        var title = m;
+        var options = /function \((.*?)\)/.exec(doc.methods[m]);
+        if(options) {
+            title = title + '('+options[1]+')';
+        }
+        var lable = new Ox.Label({
+                                title: title, 
+                                width: 190
+                            })
+                            .css({'float': 'left', 'margin-right': '4px'})
+                            .addClass("margin")
+                            .appendTo($m);
+        var b = new Ox.Button({
+            title: [
+                {id: "one", title: "expand"},
+                {id: "two", title: "collapse"},
+            ],
+            type: "image"
+        })
+          .addClass("margin")
+          .appendTo($m)
+          .click(function() { f.toggle()});
+      f.appendTo($m);
+    });
+  }
+  var $functionString = $('<pre>').html(doc.functionString).appendTo(wrapper);
+  return wrapper;
+}
+
+function getObjectByName(obj, name) {
+  var ret = false;
+  obj.forEach(function(o) {
+    if (o.name == name) {
+      ret = o;
+    }
+  });
+  return ret;
+}
+
+function getDocsJSON() {
+  var ret = [],
+    keys = Ox.keys(Ox);
+  keys.forEach(function(v) {
+    if (doc = getDoc(v)) {
+      ret.push(doc);
+    } else {
+      $.noop();
+    }    
+  });
+  return ret;
+
+  function getDoc(key) {
+    var standardElement = new Ox.Element();
+    var standardMethods = Ox.filter(Ox.keys(standardElement), function(m) { return typeof standardElement[m] === 'function' });
+    var firstLetter = key.substring(0,1);
+    if (firstLetter != firstLetter.toUpperCase() || typeof Ox[key] != 'function') {
+      return false;
+    }
+    try {
+      var o = new Ox[key]();
+    }
+    catch(err) {
+      return false;
+    }
+    if ('options' in o && typeof o['options'] == 'function') {
+      var functionString = Ox[key].toString();
+      var opts = o.options();
+      var _methods = Ox.filter(Ox.keys(o), function(m) { return (functionString.indexOf('that.'+m+' =') > -1 && typeof o[m] === 'function')});
+      var methods = {};
+      $.each(_methods, function(i, m) { methods[m] = o[m].toString() });
+    }
+    else {
+      return false;
+    }
+    return {
+      'name': key,
+      'options': opts,
+      'methods': methods,
+      'functionString': functionString
+    }
+  }
+}
+
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 00000000..8b9bd955
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>oxjs API</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+
+        <link rel="stylesheet" type="text/css" href="../build/css/ox.ui.css"/>
+
+        <script type="text/javascript" src="../build/js/jquery-1.4.2.js"></script>
+        <script type="text/javascript" src="../build/js/ox.js"></script>
+        <script type="text/javascript" src="../build/js/ox.ui.js"></script>
+        <script type="text/javascript" src="api.js"></script>
+    </head>
+    <body>
+    </body>
+</html>