diff --git a/README.md b/README.md
new file mode 100644
index 0000000..1730dce
--- /dev/null
+++ b/README.md
@@ -0,0 +1,90 @@
+<h1 align="center">Exokit Studio</h1>
+<p align="center"><b>An interface for the <a href="https://github.com/exokitxr/exokit">Exokit Engine</a>.</b></p>
+
+<p align="center">
+  <a href="https://github.com/exokitxr/studio/releases"><img src="https://img.shields.io/github/downloads/exokitxr/studio/total.svg"></a>
+  <a href="https://www.npmjs.com/package/exokit-studio"><img src="https://img.shields.io/npm/v/exokit-studio.svg"></a>
+  <a href="https://github.com/exokitxr/studio/issues"><img src="https://img.shields.io/github/issues/exokitxr/studio.svg"></a>
+  <a href="https://github.com/exokitxr/studio"><img src="https://img.shields.io/github/forks/exokitxr/studio.svg"></a>
+  <a href="https://github.com/exokitxr/studio"><img src="https://img.shields.io/github/stars/exokitxr/studio.svg"></a>
+  <a href="https://twitter.com/exokitxr"><img src="https://img.shields.io/twitter/follow/exokitxr.svg?style=social"></a>
+</p>
+
+<div align="center">
+  <a href="https://exokit.org">Site</a>
+  &mdash;
+  <a href="https://exokit.org/docs/">Docs</a>
+  &mdash;
+  <a href="https://discordapp.com/invite/Apk6cZN">Discord</a>
+  &mdash;
+  <a href="https://twitter.com/exokitxr">Twitter</a>
+  &mdash;
+  <a href="http://eepurl.com/dFiLMz">Email List</a>
+</div>
+
+## Examples
+
+<a href="https://youtu.be/cd_DEwCDF6U"><img alt="Hands Reality Tab" target="_blank" src="https://user-images.githubusercontent.com/29695350/58765576-07fb0700-853a-11e9-9d16-42abbef42014.PNG" height="190" width="32%"></a>
+<a href="https://youtu.be/b-UKSg0QCRE"><img alt="Live Reload Magic Leap" target="_blank" src="https://user-images.githubusercontent.com/29695350/58765576-07fb0700-853a-11e9-9d16-42abbef42014.PNG" height="190" width="32%"></a>
+<a href="https://youtu.be/O1xA1r5SZUM"><img alt="Tutorial Reality Tab" target="_blank" src="https://user-images.githubusercontent.com/29695350/58765576-07fb0700-853a-11e9-9d16-42abbef42014.PNG" height="190" width="32%"></a>
+
+<a href="https://www.youtube.com/watch?v=m_QntqZmd_Q"><img alt="Reality Projection with HTC Vive and Magic Leap" target="_blank" src="https://user-images.githubusercontent.com/29695350/58765577-09c4ca80-853a-11e9-8db2-46e26a9aad8b.PNG" height="190" width="32%"></a>
+<a href="https://youtu.be/i0MXRCNkdB4"><img alt="Emukit" target="_blank" src="https://user-images.githubusercontent.com/29695350/58765577-09c4ca80-853a-11e9-8db2-46e26a9aad8b.PNG" height="190" width="32%"></a>
+<a href="https://exokit.org/"><img alt="Various Exokit Apps" target="_blank" src="https://user-images.githubusercontent.com/29695350/58765577-09c4ca80-853a-11e9-8db2-46e26a9aad8b.PNG" height="190" width="32%"></a>
+
+*Find more examples on [YouTube](https://www.youtube.com/channel/UC87Q7_5ooY8FSLwOec52ZPQ).*
+
+
+## Overview
+
+Exokit Studio **enables developers to build XR experiences with ease** by having a seamless interface to the Exokit Engine. Studio prefers using GUIs instead of command lines with difficult to remember arguments to use the functionality you want.
+
+Studio uses the [Exokit Engine](https://github.com/exokitxr/exokit), which is written on top of Node and emulates a web browser, providing native hooks for WebGL, WebGL2, WebVR, WebXR, WebAudio, and other APIs used in immersive experiences.
+
+:eyeglasses: **Exokit Engine currently targets the following platforms**:
+* OpenVR Desktop VR (Steam compatible)
+* HTC Vive
+* Valve Index *
+* Oculus Desktop (Oculus Rift, Oculus Rift S)
+* Oculus Mobile (Oculus Quest, Oculus Go, GearVR)
+* Magic Leap
+* iOS ARKit *
+* Android ARCore *
+* Google VR (Daydream / Cardboard / Mirage Solo) *
+* Hololens / Hololens 2 *
+* any XR device, start a [pull request](https://github.com/exokitxr/exokit/compare) to the Exokit Engine with a native binding if it isn't listed here! *
+
+\* not supported yet
+
+:electric_plug: **Exokit Engine powers experiences built with**:
+* Three.js
+* Unity
+* Pixi.js
+* Babylon.js
+* A-Frame
+* Custom WebGL frameworks
+* WebAssembly, TypeScript, and any language that transpiles to JavaScript
+* Unity WebVR export *
+* SteamVR *
+* any 3d web framework, start a [pull request](https://github.com/exokitxr/exokit/compare) to the Exokit Engine if a 3d web framework isn't currently supported! *
+
+\* not supported yet
+
+## Quickstart
+
+### Desktop
+<h4><a href="https://get.exokit.org">Download and install Studio for current OS</a></h4>
+
+### Local Development
+
+```sh
+git clone https://github.com/exokitxr/studio.git
+cd studio
+npm install
+npm build
+```
+
+## Stay in Touch
+
+- [Join our Discord](https://discord.gg/Apk6cZN) for discussions.
+- [Follow @exokitxr on Twitter](https://twitter.com/exokitxr) for updates.
diff --git a/exobot.html b/exobot.html
new file mode 100644
index 0000000..1930185
--- /dev/null
+++ b/exobot.html
@@ -0,0 +1,149 @@
+<html>
+  <head>
+   <meta charset="utf-8">
+   <meta http-equiv="X-UA-Compatible" content="IE=edge">
+   <meta name="viewport" content="width=device-width, initial-scale=1">
+   <meta name="theme-color" content="#008000"/>
+   <title>exobot</title>
+   <link rel="manifest" href="exobot_manifest.json">
+   <script>
+    if('serviceWorker' in navigator) {
+      navigator.serviceWorker.register('/exobot_sw.js')
+        .then(function() {
+              console.log('Service Worker Registered');
+        });
+    }
+   </script>
+    <style>
+      body {
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+  <h1>exobot</h1>
+  <script src="three.js"></script>
+  <script src="GLTFLoader.js"></script>
+  <script>
+    let container, scene, camera, session, model;
+
+    function init() {
+      container = document.createElement('div');
+      document.body.appendChild(container);
+
+      scene = new THREE.Scene();
+      scene.matrixAutoUpdate = false;
+      // scene.background = new THREE.Color(0x3B3961);
+
+      camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
+      // camera.position.set(0, 1, 0);
+      camera.lookAt(new THREE.Vector3());
+      scene.add(camera);
+
+      const ambientLight = new THREE.AmbientLight(0x808080);
+      scene.add(ambientLight);
+
+      const directionalLight = new THREE.DirectionalLight(0xFFFFFF, 1);
+      directionalLight.position.set(1, 1, 1);
+      scene.add(directionalLight);
+
+      {
+        const loader = new THREE.GLTFLoader(); // .setPath( 'models/' );
+        loader.load( 'exobot.glb', function ( o ) {
+
+          o = o.scene;
+
+          // o.position.z = -1;
+          o.rotation.order = 'YXZ';
+          o.scale.set(0.2, 0.2, 0.2);
+          /* o.traverse(e => {
+            e.castShadow = true;
+          }); */
+
+          /* o.quaternion.setFromUnitVectors(
+            new THREE.Vector3(0, 0, -1),
+            new THREE.Vector3(0, 0, 1)
+          ); */
+          o.updateMatrixWorld();
+          // o.frustumCulled = false;
+          for (let i = 0; i < o.children.length; i++) {
+            o.children[i].frustumCulled = false;
+          }
+
+          model = o;
+
+          scene.add(o);
+          // scene.add(o.children[0]);
+          // scene.add(o.children[0]);
+
+        }, undefined, function ( e ) {
+
+          console.error( e );
+
+        } );
+      }
+
+      renderer = new THREE.WebGLRenderer({
+        antialias: true,
+        alpha: true,
+      });
+      renderer.setPixelRatio(window.devicePixelRatio);
+      renderer.setSize(window.innerWidth, window.innerHeight);
+
+      // window.browser.magicleap.RequestDepthPopulation(true);
+      // renderer.autoClear = false;
+
+      container.appendChild(renderer.domElement);
+
+      renderer.setAnimationLoop(animate);
+    }
+
+    function animate(time, frame) {
+      if (model) {
+        const animationTime = 4000;
+        const f = ((Date.now() % animationTime) / animationTime) * (Math.PI * 2);
+        model.position.y = Math.sin(f) * 0.05;
+        model.rotation.y = Math.sin(f*2) * Math.PI*2*0.05;
+        model.rotation.z = Math.cos(f*2) * Math.PI*2*0.05;
+        model.updateMatrixWorld();
+      }
+
+      renderer.render(scene, renderer.vr.enabled ? renderer.vr.getCamera(camera) : camera);
+    }
+
+    init();
+
+    (async () => {
+      console.log('request session');
+      session = await navigator.xr.requestSession({
+        exclusive: true,
+      }).catch(err => Promise.resolve(null));
+
+      if (session) {
+        // console.log('request first frame');
+        session.requestAnimationFrame((timestamp, frame) => {
+          renderer.vr.setSession(session, {
+            frameOfReferenceType: 'stage',
+          });
+
+          const {views} = frame.getViewerPose();
+          const viewport = session.baseLayer.getViewport(views[0]);
+          const width = viewport.width;
+          const height = viewport.height;
+
+          renderer.setSize(width * 2, height);
+
+          renderer.setAnimationLoop(null);
+
+          renderer.vr.enabled = true;
+          renderer.vr.setAnimationLoop(animate);
+
+          console.log('running!');
+        });
+      } else {
+        console.log('no xr devices');
+      }
+    })();
+  </script>
+  </body>
+</html>
diff --git a/graffiti_ml.html b/graffiti_ml.html
index f18989e..c59404f 100644
--- a/graffiti_ml.html
+++ b/graffiti_ml.html
@@ -331,7 +331,7 @@ <h1>graffiti_ml</h1>
     scene.add(controllerMesh);
   });
 
-  const cubeGeometry = new THREE.BoxBufferGeometry(0.02, 0.02, 0.001);
+  const cubeGeometry = new THREE.BoxBufferGeometry(0.05, 0.05, 0.05);
   const hitMeshMaterial = new THREE.MeshPhongMaterial({
     color: 0x673ab7,
   });
diff --git a/index.html b/index.html
index 9011030..3d8bf7f 100644
--- a/index.html
+++ b/index.html
@@ -11,9 +11,14 @@
     <script src="xrmp.js"></script>
     <script src="xrmp-three.js"></script>
     <script>
-let display, fakeXrDisplay, tabs = [], tabId = 0, xrmp, lastPresseds = [false, false], lastAxes = [[0.5, 0.5], [0.5, 0.5]], lastPadToucheds = [false, false], scrollFactors = [0, 0], scaleFactors = [1, 1], viewport = new THREE.Vector4(), menuOpen = false, orbitControls, transformControls;
+let display, fakeXrDisplay, tabs = [], tabId = 0, xrmp, lastPresseds = [false, false], lastAxes = [[0.5, 0.5], [0.5, 0.5]], lastPadToucheds = [false, false], scrollFactors = [0, 0], scaleFactors = [1, 1], viewport = new THREE.Vector4(0, 0, 1, 1), menuOpen = false, orbitControls, transformControls;
 
 const links = [
+  {
+    id: 'webXrSample',
+    name: 'WebXR Sample',
+    url: 'https://rawcdn.githack.com/exokitxr/webxr-samples/a8e2c94eba0ee5c9215f20d13057b6c25675d9b0/xr-presentation.html',
+  },
   {
     id: 'kitchenSink',
     name: 'Kitchen sink',
@@ -869,6 +874,7 @@
   antialias: true,
 });
 // renderer.setSize(window.innerWidth, window.innerHeight);
+document.body.appendChild(renderer.domElement);
 
 const layers = [renderer.domElement];
 
@@ -892,162 +898,241 @@
       });
   }
 };
-const {
-  canvas: composeCanvas,
-  ctx: composeContext,
-  iframe: uiIframe,
-} = (() => {
-  const canvas = document.createElement('canvas');
-  canvas.width = window.innerWidth;
-  canvas.height = window.innerHeight;
-  const ctx = canvas.getContext('webgl', {
-    desynchronized: true,
+
+const uiIframe = document.createElement('iframe');
+uiIframe.width = window.innerWidth;
+uiIframe.height = window.innerHeight;
+uiIframe.devicePixelRatio = window.devicePixelRatio;
+uiIframe.d = 2;
+uiIframe.inline = false;
+uiIframe.src = 'ui/build/index.html';
+uiIframe.onload = () => {
+  uiIframe.contentWindow.addEventListener('resize', e => {
+    const {x, y, width, height} = e;
+
+    // console.log('got resize', {x, y, width, height});
+
+    const sceneCanvas = renderer.domElement;
+    sceneCanvas.setPosition(x, y);
+    sceneCanvas.setSize(width, height);
   });
-  ctx.readFbo = ctx.createFramebuffer();
-  document.body.appendChild(canvas);
+  uiIframe.contentWindow.onmessage = m => {
+    switch (m.data.method) {
+      case 'viewport': {
+        const {viewport: vp} = m.data;
 
-  const iframe = document.createElement('iframe');
-  iframe.width = window.innerWidth;
-  iframe.height = window.innerHeight;
-  iframe.devicePixelRatio = window.devicePixelRatio;
-  iframe.d = 2;
-  iframe.src = 'ui/build/index.html';
-  iframe.onload = () => {
-    iframe.contentWindow.onmessage = m => {
-      switch (m.data.method) {
-        case 'viewport': {
-          viewport.set(m.data.viewport[0], m.data.viewport[1], m.data.viewport[2], m.data.viewport[3]);
-          break;
-        }
-        case 'click': {
-          const {target} = m.data;
-          if (target === 'fakeXr') {
-            renderer.domElement.requestPointerLock();
-            _bindEventTarget('xr');
-          } else if (target === 'xr') {
-            console.log('xr click');
-          } else if (target === 'transform') {
-            console.log('transform click');
-          }
-          break;
-        }
-        case 'menu': {
-          menuOpen = m.data.open;
-          /* if (m.data.open) {
-            composeScene.remove(composeScreenQuad); // XXX can elide the render entirely
-          } else {
-            composeScene.add(composeScreenQuad);
-          } */
-          break;
-        }
-        case 'open': {
-          const {url, d} = m.data;
-          const {position, quaternion, scale} = _getFrontOfCamera();
-          _openUrl(url, position, quaternion, scale, d);
+        // console.log('got viewport', vp);
+        // viewport.fromArray(vp);
 
-          break;
-        }
-        case 'add': {
-          const {template} = m.data;
-          const url = links.find(link => link.id === template).url;
-          const {position, quaternion, scale} = _getFrontOfCamera();
-          _openUrl(url, position, quaternion, scale, 3);
-
-          break;
-        }
-        case 'eval': {
-          let err, result;
-          try {
-            result = eval(m.data.jsString);
-          } catch(e) {
-            err = e;
+        break;
+      }
+      /* case 'viewportMouseDown': {
+        const {x, y, button} = m.data;
+        window.dispatchEvent(new MouseEvent('mousedown', {
+          clientX: x,
+          clientY: y,
+          button,
+        }));
+
+        break;
+      }
+      case 'viewportMouseUp': {
+        const {x, y, button} = m.data;
+        window.dispatchEvent(new MouseEvent('mouseup', {
+          clientX: x,
+          clientY: y,
+          button,
+        }));
+
+        break;
+      }
+      case 'viewportClick': {
+        const {x, y, button} = m.data;
+        window.dispatchEvent(new MouseEvent('click', {
+          clientX: x,
+          clientY: y,
+          button,
+        }));
+
+        break;
+      }
+      case 'viewportMouseMove': {
+        const {x, y} = m.data;
+        window.dispatchEvent(new MouseEvent('mousemove', {
+          clientX: x,
+          clientY: y,
+        }));
+
+        break;
+      }
+      case 'viewportMouseWheel': {
+        const {x, y, deltaX, deltaY} = m.data;
+        window.dispatchEvent(new MouseEvent('mousewheel', {
+          clientX: x,
+          clientY: y,
+          deltaX,
+          deltaY,
+        }));
+
+        break;
+      } */
+      case 'click': {
+        const {target} = m.data;
+        if (target === 'fakeXr') {
+          renderer.domElement.requestPointerLock();
+          for (let i = 0; i < 1000; i += 100) {
+            if (i > 0) {
+              setTimeout(() => {
+                renderer.domElement.setFocus();
+              }, i);
+            } else {
+              renderer.domElement.setFocus();
+            }
           }
-          if (!err) {
-            iframe.contentWindow.postMessage({
-              method: 'terminal',
-              output: browser.inspect(result),
-            });
-          } else {
-            iframe.contentWindow.postMessage({
-              method: 'terminal',
-              output: err.stack,
-            });
+
+          _bindEventTarget('xr');
+        } else if (target === 'xr') {
+          console.log('xr click');
+          if(fakeXrDisplay){
+            _endFakeVrDisplay()
+              .then(() => _startVrDisplay())
+              .catch(err => {
+                console.warn(err.stack);
+              });
+          } else if(display){
+             _endVrDisplay()
+              .then(() => _startFakeVrDisplay())
+              .catch(err => {
+                console.warn(err.stack);
+              });
           }
-          break;
-        }
-        case 'edit': {
-          browser.applyDomEdit(document.body.parentNode, m.data.keypath, m.data.edit)
-            .then(() => {
-              _pushDomUpdate();
-            })
-            .catch(err => {
-              console.warn(err.stack);
-            });
-          break;
-        }
-        case 'setting': {
-          const {key, value} = m.data;
-          window.browser.setSetting(key, value);
-          break;
-        }
-        case 'fakeVrMetrics': {
-          const {width, height} = m.data;
-          _endFakeVrDisplay()
-            .then(() => _startFakeVrDisplay(width, height))
-            .catch(err => {
-              console.warn(err.stack);
-            });
-          break;
-        }
-        default: {
-          console.warn(`got unknown ui iframe message: ${m.data.method}`);
-          break;
+        } else if (target === 'transform') {
+          console.log('transform click');
         }
+        break;
       }
-      /* switch (m.data.action){
-        case 'launch':
-          launch(m.data.flags, m.data.url);
-          break;
-        case 'update':
-          update();
-          break;
-      } */
-    };
+      case 'menu': {
+        menuOpen = m.data.open;
+        /* if (m.data.open) {
+          composeScene.remove(composeScreenQuad); // XXX can elide the render entirely
+        } else {
+          composeScene.add(composeScreenQuad);
+        } */
+        break;
+      }
+      case 'open': {
+        const {url, d} = m.data;
+        const {position, quaternion, scale} = _getFrontOfCamera();
+        _openUrl(url, position, quaternion, scale, d);
 
-    /* iframe.runJs(`
-      // document.body.style.background = '#000080';
-      // console.log('run js log ' + typeof window.postMessage + ' ' + window.postMessage.toString());
+        break;
+      }
+      case 'add': {
+        const {template} = m.data;
+        const url = links.find(link => link.id === template).url;
+        const {position, quaternion, scale} = _getFrontOfCamera();
+        _openUrl(url, position, quaternion, scale, 3);
 
-      window.onmessage = m => {
-        console.log('child got message: ' + JSON.stringify(m.data));
-      };
+        break;
+      }
+      case 'eval': {
+        let err, result;
+        try {
+          result = eval(m.data.jsString);
+        } catch(e) {
+          err = e;
+        }
+        if (!err) {
+          uiIframe.contentWindow.postMessage({
+            method: 'terminal',
+            output: browser.inspect(result),
+          });
+        } else {
+          uiIframe.contentWindow.postMessage({
+            method: 'terminal',
+            output: err.stack,
+          });
+        }
+        break;
+      }
+      case 'edit': {
+        browser.applyDomEdit(document.body.parentNode, m.data.keypath, m.data.edit)
+          .then(() => {
+            _pushDomUpdate();
+          })
+          .catch(err => {
+            console.warn(err.stack);
+          });
+        break;
+      }
+      case 'setting': {
+        const {key, value} = m.data;
+        window.browser.setSetting(key, value);
+        break;
+      }
+      case 'fakeVrMetrics': {
+        const {width, height} = m.data;
+        _endFakeVrDisplay()
+          .then(() => _startFakeVrDisplay(width, height))
+          .catch(err => {
+            console.warn(err.stack);
+          });
+        break;
+      }
+      default: {
+        console.warn(`got unknown ui iframe message: ${m.data.method}`);
+        break;
+      }
+    }
+    /* switch (m.data.action){
+      case 'launch':
+        launch(m.data.flags, m.data.url);
+        break;
+      case 'update':
+        update();
+        break;
+    } */
+  };
 
-      window.postMessage({lol: 'zol'});
-    `); */
+  /* uiIframe.runJs(`
+    // document.body.style.background = '#000080';
+    // console.log('run js log ' + typeof window.postMessage + ' ' + window.postMessage.toString());
 
-    _bindEventTarget('ui');
-    window.addEventListener('resize', e => {
-      // renderer.setSize(window.innerWidth, window.innerHeight);
+    window.onmessage = m => {
+      console.log('child got message: ' + JSON.stringify(m.data));
+    };
 
-      composeCanvas.width = window.innerWidth;
-      composeCanvas.height = window.innerHeight;
-      uiIframe.width = window.innerWidth;
-      uiIframe.height = window.innerHeight;
-    });
+    window.postMessage({lol: 'zol'});
+  `); */
 
-    _pushDomUpdate();
-  };
-  iframe.onconsole = (message, source, line) => {
-    console.log(source + ':' + line + ': ' + message);
-  };
-  document.body.appendChild(iframe);
+  _bindEventTarget('ui');
 
-  return {
-    canvas,
-    ctx,
-    iframe,
-  };
-})();
+  _pushDomUpdate();
+};
+uiIframe.onconsole = (message, source, line) => {
+  console.log(source + ':' + line + ': ' + message);
+};
+document.body.appendChild(uiIframe);
+window.addEventListener('move', e => {
+  const {x, y} = e.detail;
+  uiIframe.setPosition(x, y);
+});
+window.addEventListener('resize', e => {
+  uiIframe.width = window.innerWidth;
+  uiIframe.height = window.innerHeight;
+});
+window.addEventListener('focus', e => {
+  uiIframe.setAlwaysOnTop(true);
+});
+window.addEventListener('blur', e => {
+  uiIframe.setAlwaysOnTop(false);
+});
+window.addEventListener('restore', e => {
+  uiIframe.show();
+});
+window.addEventListener('minimize', e => {
+  uiIframe.hide();
+});
 
 // events
 
@@ -1080,90 +1165,71 @@
     };
   };
   if (target === 'ui') {
-    _bindEvents({
-      mousedown(e) {
-        if (!orbitControls) {
-          uiIframe.sendMouseDown(e.clientX, e.clientY, e.button);
-        }
-      },
-      mousemove(e) {
-        const _addOrbitControls = () => {
-          const orbitCamera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
-          orbitControls = new THREE.OrbitControls(orbitCamera);
-          orbitCamera.position.copy(fakeXrDisplay.position);
-          orbitCamera.quaternion.copy(fakeXrDisplay.quaternion);
-          scene.add(orbitCamera);
-          orbitCamera.updateMatrixWorld();
-          orbitControls.target.copy(orbitCamera.position).add(new THREE.Vector3(0, 0, -1).applyQuaternion(orbitCamera.quaternion));
-          orbitControls.screenSpacePanning = true;
-          orbitControls.update();
-        };
-        const _removeOrbitControls = () => {
-          scene.remove(orbitControls.object);
-          orbitControls.dispose();
-          orbitControls = null;
-        };
-        const _addTransformControls = (camera, iframe) => {
-          transformControls = new THREE.TransformControls(camera, document.body, viewport);
-          transformControls.iframe = iframe;
-
-          transformControls.addEventListener('dragging-changed', e => {
-            orbitControls.enabled = !e.value;
-          });
-          transformControls.addEventListener('change', e => {
-            iframe.position = mesh.position.toArray();
-            iframe.orientation = mesh.quaternion.toArray();
-            iframe.scale = mesh.scale.toArray();
-          });
+    const _addOrbitControls = () => {
+      const orbitCamera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
+      orbitControls = new THREE.OrbitControls(orbitCamera);
+      orbitCamera.position.copy(fakeXrDisplay.position);
+      orbitCamera.quaternion.copy(fakeXrDisplay.quaternion);
+      scene.add(orbitCamera);
+      orbitCamera.updateMatrixWorld();
+      orbitControls.target.copy(orbitCamera.position).add(new THREE.Vector3(0, 0, -1).applyQuaternion(orbitCamera.quaternion));
+      orbitControls.screenSpacePanning = true;
+      orbitControls.update();
+    };
+    const _removeOrbitControls = () => {
+      scene.remove(orbitControls.object);
+      orbitControls.dispose();
+      orbitControls = null;
+    };
+    const _addTransformControls = (camera, iframe) => {
+      transformControls = new THREE.TransformControls(camera, document.body, viewport);
+      transformControls.iframe = iframe;
 
-          const mesh = new THREE.Object3D();
-          mesh.position.fromArray(_parseVector(iframe.position));
-          mesh.quaternion.fromArray(_parseVector(iframe.orientation));
-          mesh.scale.fromArray(_parseVector(iframe.scale));
-          scene.add(mesh);
-          mesh.updateMatrixWorld();
+      transformControls.addEventListener('dragging-changed', e => {
+        if(orbitControls){
+          orbitControls.enabled = !e.value;
+        }
+      });
+      transformControls.addEventListener('change', e => {
+        iframe.position = mesh.position.toArray();
+        iframe.orientation = mesh.quaternion.toArray();
+        iframe.scale = mesh.scale.toArray();
+      });
 
-          transformControls.attach(mesh);
-          scene.add(transformControls);
-        };
-        const _removeTransformControls = () => {
-          scene.remove(transformControls.object);
-          scene.remove(transformControls);
-          transformControls.dispose();
-          transformControls = null;
-        };
+      const mesh = new THREE.Object3D();
+      mesh.position.fromArray(_parseVector(iframe.position));
+      mesh.quaternion.fromArray(_parseVector(iframe.orientation));
+      mesh.scale.fromArray(_parseVector(iframe.scale));
+      scene.add(mesh);
+      mesh.updateMatrixWorld();
 
-        const x = e.clientX/window.innerWidth;
-        const y = e.clientY/window.innerHeight;
-        const minX = viewport.x;
-        const minY = viewport.y;
-        const maxX = viewport.x + viewport.z;
-        const maxY = viewport.y + viewport.w;
-        const shouldOrbit = x >= minX && x < maxX && y >= minY && y < maxY && !menuOpen;
-        if (shouldOrbit && !orbitControls) {
-          _addOrbitControls();
-        } else if (!shouldOrbit && orbitControls) {
-          _removeOrbitControls();
-        }
+      transformControls.attach(mesh);
+      scene.add(transformControls);
+    };
+    const _removeTransformControls = () => {
+      scene.remove(transformControls.object);
+      scene.remove(transformControls);
+      transformControls.dispose();
+      transformControls = null;
+    };
 
-        if (orbitControls) {
+    _bindEvents({
+      mousemove(e) {
+        if(fakeXrDisplay){
           const localCamera = camera;
           localCamera.matrixWorldInverse.fromArray(fakeXrDisplay.viewMatrix);
           localCamera.matrixWorld.getInverse(localCamera.matrixWorldInverse);
           localCamera.projectionMatrix.fromArray(fakeXrDisplay.projectionMatrix);
           localCamera.projectionMatrixInverse.getInverse(localCamera.projectionMatrix);
 
-          const rect = document.body.getBoundingClientRect();
-          rect.left += viewport.x*rect.width;
-          rect.top += viewport.y*rect.height;
-          rect.width *= viewport.z;
-          rect.height *= viewport.w;
-
           localCamera.matrixWorld.decompose(localCamera.position, localCamera.quaternion, localCamera.scale);
+          const rect = document.body.getBoundingClientRect();
           localRaycaster.setFromCamera(
             localVector2D.set(
-              (((e.clientX - rect.left) / rect.width) % 0.5 * 2) * 2 - 1,
-              (-(e.clientY - rect.top) / rect.height) * 2 + 1
+              ((e.clientX / rect.width) % 0.5 * 2) * 2 - 1,
+              (-e.clientY / rect.height) * 2 + 1
+              /* ((e.clientX / rect.width * viewport.z - viewport.x) % 0.5 * 2) * 2 - 1,
+              (-e.clientY / rect.height * viewport.w - viewport.y) * 2 + 1 */
             ),
             localCamera
           );
@@ -1202,24 +1268,6 @@
           } else if (!shouldTransform && transformControls) {
             _removeTransformControls();
           }
-        } else {
-          if (transformControls) {
-            _removeTransformControls();
-          }
-        }
-
-        if (!orbitControls) {
-          uiIframe.sendMouseMove(e.clientX, e.clientY);
-        }
-      },
-      mouseup(e) {
-        if (!orbitControls) {
-          uiIframe.sendMouseUp(e.clientX, e.clientY, e.button);
-        }
-      },
-      wheel(e) {
-        if (!orbitControls) {
-          uiIframe.sendMouseWheel(e.clientX, e.clientY, e.deltaX, -e.deltaY);
         }
       },
       keydown(e) {
@@ -1227,22 +1275,26 @@
           uiIframe.back();
         } else if (e.keyCode === 39 && e.altKey) { // Alt-Right
           uiIframe.forward();
-        } else {
-          uiIframe.sendKeyDown(e.keyCode,{shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,altKey:e.altKey});
         }
       },
-      keyup(e) {
-        uiIframe.sendKeyUp(e.keyCode,{shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,altKey:e.altKey});
-      },
       keypress(e) {
         if (e.keyCode === 114 && e.ctrlKey) { // Ctrl-R
           uiIframe.reload();
-        } else {
-          uiIframe.sendKeyPress(e.keyCode,{shiftKey:e.shiftKey,ctrlKey:e.ctrlKey,altKey:e.altKey});
         }
       },
     });
+
+    if(fakeXrDisplay){
+      _addOrbitControls();
+    }
+    unbindEvents = (unbindEvents => function() {
+      unbindEvents.apply(this, arguments);
+      _removeOrbitControls();
+    })(unbindEvents);
   } else if (target === 'xr') {
+    for (let i = 0; i < 2; i++) {
+      controllerMeshes[i].rayMesh.visible = true;
+    }
     _bindEvents({
       /* click(e) {
         renderer.domElement.requestPointerLock();
@@ -2316,7 +2368,7 @@
 // let renderTarget = null;
 const startTime = Date.now();
 let lastTime = 0;
-function animateXrScene(time, frame) {
+function animate(time, frame) {
   /* const gl = renderer.getContext();
   gl.clearColor(1, 0, 0, 1);
   gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT|gl.STENCIL_BUFFER_BIT);
@@ -3033,7 +3085,7 @@
   _updateButtons();
 
   const _updateOrbitControls = () => {
-    if (orbitControls) {
+    if (orbitControls && fakeXrDisplay) {
       orbitControls.update();
 
       fakeXrDisplay.position.copy(orbitControls.object.position);
@@ -3139,53 +3191,82 @@
 
   lastTime = now;
 }
-function animateComposeContext(time, frame) {
-  {
-    composeContext.bindFramebuffer(composeContext.READ_FRAMEBUFFER, composeContext.readFbo);
-    composeContext.framebufferTexture2D(composeContext.READ_FRAMEBUFFER, composeContext.COLOR_ATTACHMENT0, composeContext.TEXTURE_2D, uiIframe.texture, 0);
-
-    composeContext.bindFramebuffer(composeContext.DRAW_FRAMEBUFFER, 0);
-    // glFramebufferTexture2D(GL_DRAW_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, composeContext.worldTex, 0);
-
-    composeContext.blitFramebuffer(
-      0, 0,
-      uiIframe.width, uiIframe.height,
-      0, composeCanvas.height,
-      composeCanvas.width, 0,
-      composeContext.COLOR_BUFFER_BIT,
-      composeContext.LINEAR
-    );
+
+// bootstrap Xr
+const _startVrDisplay = async () => {
+  if (navigator.xr) {
+    const session = await navigator.xr.requestSession({
+      exclusive: true,
+    });
+    display = session;
+    const _end = () => {
+      renderer.vr.enabled = false;
+      renderer.vr.setSession(null);
+      renderer.vr.setAnimationLoop(null);
+      session.removeEventListener('end', _end);
+    };
+    session.addEventListener('end', _end);
+    await new Promise((accept, reject) => {
+      session.requestAnimationFrame((timestamp, frame) => {
+        session.layers = layers;
+        renderer.vr.setSession(session, {
+          frameOfReferenceType: 'stage',
+        });
+        const {views} = frame.getViewerPose();
+        const viewport = session.baseLayer.getViewport(views[0]);
+        const width = viewport.width;
+        const height = viewport.height;
+        // console.log("session.isPresenting = " + session.isPresenting());
+        // renderer.setSize(width * 2, height);
+        renderer.setSize(width, height);
+        renderer.setAnimationLoop(null);
+        renderer.vr.enabled = true;
+        renderer.vr.setSession(session, {
+          frameOfReferenceType: 'stage',
+        });
+        renderer.vr.setAnimationLoop(animate);
+        console.log('entered xr');
+        accept();
+      });
+    });
+  } else { // WebVR
+    console.log('request device');
+    const displays = await navigator.getVRDisplays();
+    display = displays[0];
+    if (display) {
+      console.log('request present vr');
+      await display.requestPresent([{
+        source: renderer.domElement,
+      }]);
+      const {renderWidth: width, renderHeight: height} = display.getEyeParameters('left');
+      renderer.setSize(width * 2, height);
+      renderer.setAnimationLoop(null);
+      renderer.vr.enabled = true;
+      renderer.vr.setAnimationLoop(animate);
+      console.log('entered vr');
+    } else {
+      console.log('no vr displays');
+      renderer.setAnimationLoop(animate);
+    }
   }
-  if (!menuOpen) {
-    composeContext.bindFramebuffer(composeContext.READ_FRAMEBUFFER, composeContext.readFbo);
-    composeContext.framebufferTexture2D(composeContext.READ_FRAMEBUFFER, composeContext.COLOR_ATTACHMENT0, composeContext.TEXTURE_2D, fakeXrDisplay.texture, 0);
-
-    // composeContext.bindFramebuffer(composeContext.DRAW_FRAMEBUFFER, 0);
-    // glFramebufferTexture2D(GL_DRAW_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, composeContext.worldTex, 0);
-
-    composeContext.blitFramebuffer(
-      0, 0,
-      fakeXrDisplay.width, fakeXrDisplay.height,
-      viewport.x*composeCanvas.width, (1-viewport.y-viewport.w)*composeCanvas.height,
-      (viewport.x+viewport.z)*composeCanvas.width, (1-viewport.y)*composeCanvas.height,
-      composeContext.COLOR_BUFFER_BIT,
-      composeContext.LINEAR
-    );
+};
+const _endVrDisplay = async () => {
+  if (display) {
+    await display.end();
+    // await display.exitPresent();
   }
-}
-function animate(time, frame) {
-  animateXrScene(time, frame);
-  animateComposeContext(time, frame);
-}
+  display = null;
+  // renderer.domElement.framebuffer = null; // XXX destroy this framebuffer
+};
 
-// bootstrap
 
+// bootstrap fakeXr
 const _emitLayersVrDisplayActivate = () => {
   for (let i = 0; i < layers.length; i++) {
     const layer = layers[i];
 
     if (layer.tagName === 'IFRAME' && layer.d === 3) {
-      layer.contentWindow.runAsync('vrdisplayactivate');
+      // layer.contentWindow.runAsync('vrdisplayactivate');
     }
   }
 };
@@ -3194,7 +3275,7 @@
     const layer = layers[i];
 
     if (layer.tagName === 'IFRAME' && layer.d === 3) {
-      layer.contentWindow.runAsync('exitPresent');
+      // layer.contentWindow.runAsync('exitPresent');
     }
   }
 };
@@ -3243,12 +3324,12 @@
     });
   } else {
     const displays = await navigator.getVRDisplays();
-    const display = displays[0];
+    const fakeDisplay = displays[0];
     await display.requestPresent([{
       source: renderer.domElement,
     }]);
 
-    fakeXrDisplay.display = display;
+    fakeXrDisplay.display = fakeDisplay;
 
     const _vrdisplaypresentchange = () => {
       _emitLayersExitPresent();
@@ -3275,7 +3356,7 @@
 
   // renderer.domElement.framebuffer = null; // XXX destroy this framebuffer
 };
-_startFakeVrDisplay()
+_startVrDisplay()
   .then(() => {
     const tabUrl = (() => {
       const {t = 'tutorial.html'} = query;
diff --git a/ui/index.html b/ui/index.html
deleted file mode 100644
index ca28b5e..0000000
--- a/ui/index.html
+++ /dev/null
@@ -1,196 +0,0 @@
-<!doctype html>
-<html>
-
-<body>
-  <script src="three.js"></script>
-  <script>
-    let renderer, scene, camera, screenQuad, iframe;
-
-    window.ScreenQuad = (() => {
-
-      const defaultQuad = new THREE.PlaneBufferGeometry(2, 2, window.innerWidth, window.innerHeight);
-      const uvs = defaultQuad.attributes.uv.array;
-      const numUvs = uvs.length / 2;
-      for (let i = 0; i < numUvs; i++) {
-        uvs[i * 2 + 1] = 1 - uvs[i * 2 + 1];
-      }
-
-      const vertexShader = `\
-        varying vec2 vUv;
-        void main() {
-          gl_Position = vec4(position.xy, 1., 1.);
-          vUv = uv;
-        }
-      `;
-      const fragmentShader = `\
-        varying vec2 vUv;
-        uniform sampler2D uTexture;
-        void main() {
-          gl_FragColor = texture2D(uTexture, vUv);
-        }
-      `;
-
-      function ScreenQuad(params) {
-
-        params = params || {};
-
-        THREE.Mesh.apply(this, [defaultQuad, new THREE.ShaderMaterial({
-
-          uniforms: {
-            uTexture: {
-              type: 't',
-              value: params.texture,
-            },
-          },
-
-          vertexShader,
-
-          fragmentShader,
-
-          transparent: true,
-
-        })]);
-
-        this.frustumCulled = false;
-
-        this.renderOrder = -1;
-
-        //end mesh setup
-
-      }
-
-      ScreenQuad.prototype = Object.create(THREE.Mesh.prototype);
-
-      ScreenQuad.constructor = ScreenQuad;
-
-      return ScreenQuad
-
-    })();
-
-    function init() {
-      renderer = new THREE.WebGLRenderer({
-        antialias: true,
-        alpha: true,
-      });
-      renderer.setPixelRatio(window.devicePixelRatio);
-      renderer.setSize(window.innerWidth, window.innerHeight);
-
-      document.body.appendChild(renderer.domElement);
-
-      scene = new THREE.Scene();
-      scene.matrixAutoUpdate = false;
-
-      camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
-      scene.add(camera);
-
-      iframe = document.createElement('iframe');
-      iframe.width = window.innerWidth;
-      iframe.height = window.innerHeight;
-      iframe.d = 2;
-      iframe.src = 'launcher/build/index.html';
-      iframe.onload = () => {
-        const texture = new THREE.Texture(
-          null,
-          THREE.UVMapping,
-          THREE.ClampToEdgeWrapping,
-          THREE.ClampToEdgeWrapping,
-          THREE.NearestFilter,
-          THREE.NearestFilter,
-          THREE.RGBAFormat,
-          THREE.UnsignedByteType,
-          16
-        );
-        const properties = renderer.properties.get(texture);
-        properties.__webglTexture = iframe.texture;
-        properties.__webglInit = true;
-
-        screenQuad = new ScreenQuad({
-          texture,
-        });
-        scene.add(screenQuad);
-
-        iframe.contentWindow.onmessage = m => {
-          console.log('POST from frontend: ', m.data);
-          switch(m.data.action){
-            case 'launch':
-              launch(m.data.flags, m.data.url);
-              break;
-            case 'update':
-              update();
-              break;
-          }
-        };
-
-        iframe.runJs(`
-          // document.body.style.background = '#000080';
-          // console.log('run js log ' + typeof window.postMessage + ' ' + window.postMessage.toString());
-
-          window.onmessage = m => {
-            console.log('child got message: ' + JSON.stringify(m.data));
-          };
-
-          window.postMessage({lol: 'zol'});
-        `);
-
-      };
-      iframe.onconsole = (message, source, line) => {
-        console.log(source + ':' + line + ': ' + message);
-      };
-      document.body.appendChild(iframe);
-
-      focused = true;
-
-      window.addEventListener('mousemove', e => {
-        iframe.sendMouseMove(e.clientX, e.clientY);
-      });
-      window.addEventListener('mousedown', e => {
-        iframe.sendMouseDown(e.clientX, e.clientY, e.button);
-
-        focused = true;
-      });
-      window.addEventListener('mouseup', e => {
-        iframe.sendMouseUp(e.clientX, e.clientY, e.button);
-      });
-      window.addEventListener('wheel', e => {
-        if (focused) {
-          iframe.sendMouseWheel(e.clientX, e.clientY, e.deltaX, -e.deltaY);
-        }
-      });
-      window.addEventListener('keydown', e => {
-        if (focused) {
-          if (e.keyCode === 37 && e.altKey) { // Alt-Left
-            iframe.back();
-          } else if (e.keyCode === 39 && e.altKey) { // Alt-Right
-            iframe.forward();
-          } else {
-            iframe.sendKeyDown(e.keyCode, { shiftKey: e.shiftKey, ctrlKey: e.ctrlKey, altKey: e.altKey });
-          }
-        }
-      });
-      window.addEventListener('keyup', e => {
-        if (focused) {
-          iframe.sendKeyUp(e.keyCode, { shiftKey: e.shiftKey, ctrlKey: e.ctrlKey, altKey: e.altKey });
-        }
-      });
-      window.addEventListener('keypress', e => {
-        if (focused) {
-          if (e.keyCode === 114 && e.ctrlKey) { // Ctrl-R
-            iframe.reload();
-          } else {
-            iframe.sendKeyPress(e.keyCode, { shiftKey: e.shiftKey, ctrlKey: e.ctrlKey, altKey: e.altKey });
-          }
-        }
-      });
-    }
-
-    init();
-
-    function animate() {
-      renderer.render(scene, camera);
-    }
-    renderer.setAnimationLoop(animate);
-
-  </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/ui/public/index.html b/ui/public/index.html
index cbaaddb..0defbd8 100644
--- a/ui/public/index.html
+++ b/ui/public/index.html
@@ -12,7 +12,7 @@
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
     <link rel="stylesheet" href="%PUBLIC_URL%/css/all.css">
     <!-- <script src="%PUBLIC_URL%/../src/hterm_all.js"></script> -->
-    <title>Exokit Launcher</title>
+    <title>Exokit Studio</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/ui/public/manifest.json b/ui/public/manifest.json
index fddfd1d..bc4df82 100644
--- a/ui/public/manifest.json
+++ b/ui/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "Exokit Launcher",
-  "name": "Exokit Launcher",
+  "short_name": "Exokit Studio",
+  "name": "Exokit Studio",
   "icons": [
     {
       "src": "favicon.ico",
diff --git a/ui/src/components/Engine.jsx b/ui/src/components/Engine.jsx
index 57b3cf1..7f9bd4d 100644
--- a/ui/src/components/Engine.jsx
+++ b/ui/src/components/Engine.jsx
@@ -7,7 +7,10 @@ import '../css/engine.css';
 const _postViewportMessage = () => {
   const engineRender = document.getElementById('engine-render');
   const bcr = engineRender.getBoundingClientRect();
+  // const position = [window.screenX + bcr.x, window.screenY + bcr.y];
   const viewport = [bcr.x/window.innerWidth, bcr.y/window.innerHeight, bcr.width/window.innerWidth, bcr.height/window.innerHeight];
+  // const viewport = [window.screenX + bcr.x, window.screenY + bcr.y, bcr.width, bcr.height];
+  // const viewport = [bcr.x, bcr.y, bcr.width, bcr.height];
   window.postMessage({
     method: 'viewport',
     viewport,
@@ -34,16 +37,6 @@ class Engine extends React.Component {
     componentDidMount() {
       _postViewportMessage();
       window.addEventListener('resize', _postViewportMessage);
-
-      /* window.addEventListener('keydown', e => {
-        console.log('iframe keydown ' + e.keyCode);
-      });
-      window.addEventListener('keyup', e => {
-        console.log('iframe keyup ' + e.keyCode);
-      });
-      window.addEventListener('keypress', e => {
-        console.log('iframe keypress ' + e.keyCode);
-      }); */
     }
 
     postMessage(action){
@@ -137,7 +130,7 @@ class Engine extends React.Component {
       e.stopPropagation();
     }
 
-    onEngineRenderClick() {
+    onEngineRenderFocus() {
       this.blur();
     }
 
@@ -284,9 +277,9 @@ class Engine extends React.Component {
                   </div>
                 </div>
                 <div className={this.menuItemPopupItemsClassNames('examples')}>
-                  <div className="menu-item-popup-item" onClick={() => this.addTemplate('kitchenSink')}>
-                    <i class="far fa-meteor"/>
-                    <div className="label">Kitchen sink</div>
+                  <div className="menu-item-popup-item" onClick={() => this.addTemplate('webXrSample')}>
+                    <i class="fas fa-globe-europe"/>
+                    <div className="label">WebXR Sample</div>
                   </div>
                   <div className="menu-item-popup-item" onClick={() => this.addTemplate('exobot')}>
                     <i class="fal fa-robot"/>
@@ -338,11 +331,10 @@ class Engine extends React.Component {
           <Settings settings={this.state.settings === 'settings'} open={!!this.state.settings} close={() => this.openSettings(null)}/>
           <div className="engine-split">
             <div className="engine-left">
-              <div className="engine-render" id="engine-render" onClick={() => this.onEngineRenderClick()} />
+              <EngineRender onFocus={() => this.onEngineRenderFocus()}/>
               <Resizable
                 minWidth="200px"
-                // minHeight="100px"
-                // maxHeight="300px"
+                minHeight={this.state.consoleOpen ? 150 : 0}
                 onResize={(e, direction, ref, d) => {
                   _postViewportMessage();
                 }}>
@@ -365,6 +357,66 @@ class Engine extends React.Component {
     }
   }
 
+class EngineRender extends React.Component {
+  /* onMouseDown(e) {
+    const engineRender = document.getElementById('engine-render');
+    const bcr = engineRender.getBoundingClientRect();
+    window.postMessage({
+      method: 'viewportMouseDown',
+      x: e.clientX - bcr.x,
+      y: e.clientY - bcr.y,
+      button: e.button,
+    });
+  }
+  onMouseUp(e) {
+    const engineRender = document.getElementById('engine-render');
+    const bcr = engineRender.getBoundingClientRect();
+    window.postMessage({
+      method: 'viewportMouseUp',
+      x: e.clientX - bcr.x,
+      y: e.clientY - bcr.y,
+      button: e.button,
+    });
+  }
+  onClick(e) {
+    const engineRender = document.getElementById('engine-render');
+    const bcr = engineRender.getBoundingClientRect();
+    window.postMessage({
+      method: 'viewportClick',
+      x: e.clientX - bcr.x,
+      y: e.clientY - bcr.y,
+      button: e.button,
+    });
+  }
+  onMouseMove(e) {
+    const engineRender = document.getElementById('engine-render');
+    const bcr = engineRender.getBoundingClientRect();
+    window.postMessage({
+      method: 'viewportMouseMove',
+      x: e.clientX - bcr.x,
+      y: e.clientY - bcr.y,
+    });
+  }
+  onMouseWheel(e) {
+    const engineRender = document.getElementById('engine-render');
+    const bcr = engineRender.getBoundingClientRect();
+    window.postMessage({
+      method: 'viewportMouseWheel',
+      x: e.clientX - bcr.x,
+      y: e.clientY - bcr.y,
+      deltaX: e.deltaX,
+      deltaY: e.deltaY,
+    });
+  } */
+
+  render() {
+    /*<div className="engine-render" id="engine-render" onClick={e => this.onClick(e)} onMouseDown={e => this.onMouseDown(e)} onMouseUp={e => this.onMouseUp(e)} onMouseMove={e => this.onMouseMove(e)} onMouseWheel={e => this.onMouseWheel(e)} />*/
+    return (
+      <div className="engine-render" id="engine-render" />
+    );
+  }
+}
+
 class Settings extends React.Component {
   constructor(props) {
     super(props);
diff --git a/ui/src/css/App.css b/ui/src/css/App.css
index b6d5bd9..b85ae26 100644
--- a/ui/src/css/App.css
+++ b/ui/src/css/App.css
@@ -1,7 +1,8 @@
 
 body {
   margin: 0;
-  background: #232526;  /* fallback for old browsers */
+  /* background: #232526;*/  /* fallback for old browsers */
+  background: transparent;
 }
 .nav-pills .nav-link.active{
   background-color: #B600DB;
diff --git a/ui/src/css/console.css b/ui/src/css/console.css
index 1b13cd4..ac1a362 100644
--- a/ui/src/css/console.css
+++ b/ui/src/css/console.css
@@ -1,14 +1,21 @@
 .Console {
   position: relative;
-  height: 0px;
+  max-height: 0px;
   border-top: 2px solid #222;
   font-family: monospace;
   font-size: 11px;
   white-space: pre-wrap;
-  overflow-y: auto;
+  overflow-x: none;
+  overflow-y: scroll;
+  display: flex;
+  align-items: flex-end;
+  flex-direction:column;
+  justify-content:space-between;
 }
 .Console.open {
-  height: 100px;
+  height: 100%;
+  max-height: 100%;
+  min-height: 150px;
 }
 
 .Console .console-output {
diff --git a/ui/src/css/dom.css b/ui/src/css/dom.css
index 80284cd..2aff51c 100644
--- a/ui/src/css/dom.css
+++ b/ui/src/css/dom.css
@@ -89,6 +89,8 @@
   padding-left: 10px;
   display: table-cell;
   vertical-align: middle;
+  position: absolute;
+  z-index: 1;
 }
 .Dom > .dom-detail > .dom-detail-name {
   font-family: monospace;
diff --git a/ui/src/css/engine.css b/ui/src/css/engine.css
index 2a065d1..693e57c 100644
--- a/ui/src/css/engine.css
+++ b/ui/src/css/engine.css
@@ -202,5 +202,6 @@
 }
 #Engine .engine-render {
   flex: 1;
-  background-color: #000;
+  background-color: rgba(0.0, 0.0, 0.0, 0.0);
+  user-select: none;
 }