diff --git a/asterix-examples/src/main/resources/html/example.html b/asterix-examples/src/main/resources/html/example.html
index 0a3af38..01f6ed0 100644
--- a/asterix-examples/src/main/resources/html/example.html
+++ b/asterix-examples/src/main/resources/html/example.html
@@ -1,15 +1,56 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <script src="http://localhost:19101/sdk/static/js/asterix-api-core.js"
-            type="text/javascript"></script>
+        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
+        <script src="../js/easyXDM/easyXDM.debug.js" type="text/javascript"></script>
+        <script src="http://localhost:19101/sdk/static/js/asterix-api-core.js" type="text/javascript"></script>
         <script src="../js/example.js" type="text/javascript"></script> 
         <script>
-            var a = new AsterixAPI();
-            a.test();
+            $(function () {
+                var as = new AsterixSDK();
+                var c = new CreateExpression(tinySocialCreate.join("\n"));
+                as.send(c);
+
+                $('#ddl').html(tinySocialCreate.join("<br/>"));
+            });
         </script>
     </head>
     <body>
-         
+        <div>
+            Example: DDL
+            <div class="syntax-box" id="ddl">
+                Query:
+            </div>
+            <button>Run</button>
+            <hr>
+        </div>
+
+        <div>
+            Example: 
+            <div class="syntax-box">
+                Query:
+            </div>
+            <button>Run</button>
+            <hr>
+        </div>
+
+        <div>
+            Example: 
+            <div class="syntax-box">
+                Query:
+            </div>
+            <button>Run</button>
+            <hr>
+        </div>
+        
+        <div>
+            Example: 
+            <div class="syntax-box">
+                Query:
+            </div>
+            <button>Run</button>
+            <hr>
+        </div>
+
     </body>
 </html>