diff --git a/dart_filament/examples/web_wasm/bin/index.html b/dart_filament/examples/web_wasm/bin/index.html
index edcca4fc..4ac2c178 100644
--- a/dart_filament/examples/web_wasm/bin/index.html
+++ b/dart_filament/examples/web_wasm/bin/index.html
@@ -1,27 +1,127 @@
 <html>
+    <head>
+        <script src="dart_filament.js"></script>
+        <style>
+            html, body { 
+                margin:0;
+                padding:0;
+            }
+            canvas {
+                position:absolute;
+                left:0;
+                right:0;
+                top:0;
+                bottom:0;
+                width:100%;
+                height:100%;
+            }
+        </style>
+    </head>
 <script type="module">
-    
-    import { dart_filament } from "./dart_filament.js";
-    
-    let dart2wasm_runtime;
-    let moduleInstance;
-
-    const dartFilamentModulePromise = await WebAssembly.compileStreaming(fetch('dart_filament.wasm'));
-    var df = await dart_filament(dartFilamentModulePromise);
-    console.log(df);
-
-    const dartModulePromise = WebAssembly.compileStreaming(fetch('example_web.wasm'));
-    const imports = {"dart_filament":df};
-    dart2wasm_runtime = await import('./example_web.mjs');
-    moduleInstance = await dart2wasm_runtime.instantiate(dartModulePromise, imports);
-
-    if (moduleInstance) {
-        try {
-            await dart2wasm_runtime.invoke(moduleInstance);
-        } catch (exception) {
-            console.error(`Exception while invoking test: ${exception}`);
+    window.resolveCallback = (cb, data) => {
+        const fn = window.df.wasmTable.get(cb);
+        if(data) {
+            fn(data);
+        } else { 
+            fn();
         }
     }
+    window.createVoidCallback = () => { 
+        let res; //placeholder for resolver callback, outside of promise
+        const promise = new Promise((resolve, reject) => {
+            res = resolve;
+        });
+        try {
+            const callback = () => { 
+                try {
+                    res({});
+                } catch(err) {
+                    console.log(err);
+                }
+            }
+            const fnPtr = window.df.addFunction(callback, 'v');
+            return [promise, fnPtr];
+        } catch(err) {
+            console.log(err);
+            return null;
+        } 
+    }       
+    window.createIntCallback = () => { 
+        let res; 
+        const promise = new Promise((resolve, reject) => {
+            res = resolve;
+        });
+        try {
+            const callback = (val) => { 
+                try {
+                    res(val);
+                } catch(err) {
+                    console.log(err);
+                }
+            }
+            const fnPtr = window.df.addFunction(callback, 'vi');
+            return [promise, fnPtr];
+        } catch(err) {
+            console.log(err);
+            return null;
+        } 
+    }       
+    window.createVoidPointerCallback = () => { 
+        let res; //placeholder for resolver callback, outside of promise
+
+        const promise = new Promise((resolve, reject) => {
+            res = resolve;
+        });
+        try {
+            const callback = (voidPtr) => { 
+                try {
+                    res(voidPtr);
+                } catch(err) {
+                    console.log(err);
+                }
+            }
+            const fnPtr = window.df.addFunction(callback, 'vi');
+            return [promise, fnPtr];
+        } catch(err) {
+            console.log(err);
+            return null;
+        }        
+    }   
+
+    window.createBoolCallback = () => { 
+        let res; //placeholder for resolver callback, outside of promise
+
+        const promise = new Promise((resolve, reject) => {
+            res = resolve;
+        });
+        try {
+            const callback = (val) => { 
+                try {
+                    res(val);
+                } catch(err) {
+                    console.log(err);
+                }
+            }
+            const fnPtr = window.df.addFunction(callback, 'vi');
+            return [promise, fnPtr];
+        } catch(err) {
+            console.log(err);
+            return null;
+        }        
+    }   
+  
+    const df = await dart_filament();   
+    window.df = df;
+    
+    const dartModulePromise = WebAssembly.compileStreaming(fetch('example_web.wasm'));
+    const imports = {"dart_filament":df};
+    const dart2wasm_runtime = await import('./example_web.mjs');
+    const moduleInstance = await dart2wasm_runtime.instantiate(dartModulePromise, imports);
+    window.example = moduleInstance;
+    await dart2wasm_runtime.invoke(moduleInstance);
 
   </script>
+  <body>
+    <canvas id="canvas"></canvas>
+</body>
 </html>
\ No newline at end of file
