diff --git a/docs/api.js b/docs/api.js
index 20c3aee8..e98b04b5 100644
--- a/docs/api.js
+++ b/docs/api.js
@@ -7,6 +7,25 @@ $(function() {
     app.$document = $(document);
     app.$window = $(window);
 
+    app.docstrings = {};
+    $("<div>").load('../build/js/ox.ui.js', function(data) {
+        app.source = data;
+        var docstrings = app.source.match(/\/\*\*\n([\s\S]+?\*\/\n.*?)\n/gm)
+        docstrings.forEach(function(doc) {
+            doc = Ox.trim(doc);
+            var name = doc.match(/Ox\.(.+) = function/);
+            if(name) {
+                doc = doc.split('\n');
+                doc.splice(0, 1);
+                doc.pop();
+                doc.pop();
+                //remove whitespace
+                var offset = /^\s+/.exec(doc[0]);
+                if(offset)
+                    doc = Ox.map(doc, function(line) { return line.substring(offset[0].length)});
+                app.docstrings[name[1]] = Ox.trim(doc.join('\n'));
+            }
+        })
     app.$ui = {};
     app.docs = getDocsJSON();
     app.$ui.actionList = constructList();
@@ -27,6 +46,7 @@ $(function() {
     });
 
     $main.appendTo(app.$body);
+    });
 });
 
 function constructList() {
@@ -48,8 +68,14 @@ function constructList() {
         request: function(data, callback) {
             var items = [];
             app.docs.forEach(function(v) {
-              items.push({'name': v.name});
+              items.push(v.name);
             });
+            Ox.keys(app.docstrings).forEach(function(v) {
+              if(!$.inArray(v.name, items)) {
+                items.push(v.name);
+              }
+            });
+            items = Ox.map(items, function(i) { return {name: i}});
             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}};
@@ -80,49 +106,81 @@ function constructList() {
 }
 
 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]+')';
+    function cell(content) {
+        return $('<td>').css({'padding-right': '4px'}).html(content);
+    }
+
+    var $div = $('<div>');
+    var title = $('<h2>').html('Ox.'+doc.name)
+                         .appendTo($div);
+
+    if(app.docstrings[doc.name])
+        $('<pre>').html(app.docstrings[doc.name]).appendTo($div);
+
+    var $options = $('<div>').html("Options: ")
+                             .css({'marginBottom': '20px'})
+                             .appendTo($div);
+    var $table = $('<table>').attr({'cellpadding': '4'})
+                             .appendTo($options);
+    Ox.keys(doc.options).forEach(function(k) {
+        var $option = $('<tr>');
+        cell(k).appendTo($option);
+        if(typeof(doc.options[k]) != 'undefined') {
+            cell(typeof doc.options[k]).appendTo($option);
+            if(Ox.isNull(doc.options[k]))
+                cell(' <b>null</b>').appendTo($option);
+            else
+                cell(' <b>' + doc.options[k].toString() + '</b>').appendTo($option);
+        } else {
+            cell('&nbsp;').appendTo($option);
+            cell('<b>required, no default value</b>').appendTo($option);
         }
-        var lable = new Ox.Label({
-                                title: title, 
-                                width: 190
-                            })
-                            .css({'float': 'left', 'margin-right': '4px'})
-                            .addClass("margin")
-                            .appendTo($m);
-        var b = new Ox.Button({
+        $option.appendTo($options);
+    });
+
+    var methods = Ox.keys(doc.methods);
+    if (methods.length > 0) {
+        var $methods = $('<div>').html("Methods:").appendTo($div);
+        methods.forEach(function(m) {
+            var $method = $('<div>').appendTo($methods);
+            var $code = $('<pre>').html(doc.methods[m]).hide();
+            var options = /function \((.*?)\)/.exec(doc.methods[m]);
+            var lable = new Ox.Label({
+                                    title: m + '('+options[1]+')', 
+                                    width: 190
+                                })
+                                .css({'float': 'left', 'margin-right': '4px'})
+                                .addClass("margin")
+                                .appendTo($method);
+            var $button = new Ox.Button({
+                    title: [
+                        {id: "one", title: "expand"},
+                        {id: "two", title: "collapse"},
+                    ],
+                    type: "image"
+                })
+                .addClass("margin")
+                .appendTo($method)
+                .click(function() { $code.toggle()});
+          $code.appendTo($method);
+        });
+    }
+
+    var $methodcode = $('<pre>').html(doc.functionString.replace(/</g, '&lt;'))
+                                .hide();
+    var $button = 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;
+        .addClass("margin")
+        .click(function() { $methodcode.toggle()})
+        .appendTo($div)
+    $('<span>').html(' View Source').appendTo($div)
+    $methodcode.appendTo($div);
+    return $div;
 }
 
 function getObjectByName(obj, name) {