diff --git a/common/web/gesture-recognizer/src/tools/build.sh b/common/web/gesture-recognizer/src/tools/build.sh
index 5666330b8d..6255c2031e 100755
--- a/common/web/gesture-recognizer/src/tools/build.sh
+++ b/common/web/gesture-recognizer/src/tools/build.sh
@@ -25,7 +25,7 @@ builder_parse "$@"
 builder_describe_outputs \
   configure            /node_modules \
   build:fixture        /common/web/gesture-recognizer/build/tools/host-fixture.mjs \
-  build:recorder       /common/web/gesture-recognizer/src/tools/recorder/build/recorder.js \
+  build:recorder       /common/web/gesture-recognizer/src/tools/recorder/build/recorder.mjs \
   build:test-module    /common/web/gesture-recognizer/build/tools/lib/index.mjs
 
 # TODO: build if out-of-date if test is specified
@@ -62,7 +62,7 @@ if builder_start_action build :recorder; then
     mkdir -p recorder/build
   fi
   cp recorder/src/pageStyle.css    recorder/build/pageStyle.css
-  cp recorder/src/recorder.js      recorder/build/recorder.js
+  cp recorder/src/recorder.mjs     recorder/build/recorder.mjs
 
   cp host-fixture/gestureHost.css  recorder/build/gestureHost.css
 
diff --git a/common/web/gesture-recognizer/src/tools/recorder/src/index.html b/common/web/gesture-recognizer/src/tools/recorder/src/index.html
index b98d1627f4..fc7c9e7b31 100644
--- a/common/web/gesture-recognizer/src/tools/recorder/src/index.html
+++ b/common/web/gesture-recognizer/src/tools/recorder/src/index.html
@@ -11,9 +11,7 @@
     <link rel="stylesheet" href="pageStyle.css">
     <link rel="stylesheet" href="gestureHost.css">
 
-    <script src="../../../../build/obj/index.js"></script>
-    <script src="../../../../build/tools/unit-test-resources.js"></script>
-    <script src="recorder.js"></script>
+    <script type="module" src="./recorder.mjs"></script>
 
     <title>Gesture Recognizer - Demo Host Page</title>
   </head>
diff --git a/common/web/gesture-recognizer/src/tools/recorder/src/recorder.js b/common/web/gesture-recognizer/src/tools/recorder/src/recorder.mjs
similarity index 88%
rename from common/web/gesture-recognizer/src/tools/recorder/src/recorder.js
rename to common/web/gesture-recognizer/src/tools/recorder/src/recorder.mjs
index 00f95e7e66..29128eb0f9 100644
--- a/common/web/gesture-recognizer/src/tools/recorder/src/recorder.js
+++ b/common/web/gesture-recognizer/src/tools/recorder/src/recorder.mjs
@@ -1,6 +1,13 @@
 // This script allows user-interactive use of the user-testing oriented unit-test-resource objects.
 
-const controller = new Testing.HostFixtureLayoutController();
+import {
+  FixtureLayoutConfiguration,
+  HostFixtureLayoutController,
+  InputSequenceSimulator,
+  SequenceRecorder
+} from '../../../../build/tools/lib/index.mjs';
+
+const controller = new HostFixtureLayoutController();
 let loadPromise = controller.connect();
 let recorder;
 
@@ -13,7 +20,7 @@ function presentSavableJSON(text) {
 }
 
 loadPromise.then((recognizer) => {
-  recorder = new Testing.SequenceRecorder(controller);
+  recorder = new SequenceRecorder(controller);
   updateConfig();
 
   // DOM-oriented logging setup.
@@ -27,7 +34,7 @@ loadPromise.then((recognizer) => {
     recorder.clear();
   }
 
-  controller.on(Testing.HostFixtureLayoutController.CONFIG_CHANGED_EVENT, () => {
+  controller.on(HostFixtureLayoutController.CONFIG_CHANGED_EVENT, () => {
     logElement.value = '';
   });
 
@@ -63,15 +70,15 @@ window.addEventListener('load', function(ev) {
   let receiverGroup = document.config.receiver;
   let safeGroup = document.config.safeZone;
 
-  for(entry of layoutGroup) {
+  for(let entry of layoutGroup) {
     entry.addEventListener('change', updateConfig);
   }
 
-  for(entry of boundsGroup) {
+  for(let entry of boundsGroup) {
     entry.addEventListener('change', updateConfig);
   }
 
-  for(entry of receiverGroup) {
+  for(let entry of receiverGroup) {
     if(entry.value == 'full') {
       entry.addEventListener('change', function() {
         let topRange = document.getElementById('topOnlyRadio');
@@ -89,7 +96,7 @@ window.addEventListener('load', function(ev) {
 
   document.addEventListener('scroll', updateAlignment);
 
-  for(entry of safeGroup) {
+  for(let entry of safeGroup) {
     entry.addEventListener('change', updateConfig);
   }
 
@@ -115,7 +122,7 @@ function updateConfig() {
   let receiver = document.config.receiver;
   let safe = document.config.safeZone;
 
-  let layoutSpec = new Testing.FixtureLayoutConfiguration(
+  let layoutSpec = new FixtureLayoutConfiguration(
     layout.value,
     bounds.value,
     receiver.value,