diff --git a/packages/webamp/demo/js/index.js b/packages/webamp/demo/js/index.tsx
similarity index 78%
rename from packages/webamp/demo/js/index.js
rename to packages/webamp/demo/js/index.tsx
index cd0b19a0..d302d934 100644
--- a/packages/webamp/demo/js/index.js
+++ b/packages/webamp/demo/js/index.tsx
@@ -1,7 +1,6 @@
-/* global SENTRY_DSN */
-
 import * as Sentry from "@sentry/browser";
 import ReactDOM from "react-dom";
+// @ts-ignore
 import isButterchurnSupported from "butterchurn/lib/isSupported.min";
 import { getWebampConfig } from "./webampConfig";
 
@@ -18,18 +17,29 @@ import { disableMarquee, skinUrl as configSkinUrl } from "./config";
 import DemoDesktop from "./DemoDesktop";
 import enableMediaSession from "./mediaSession";
 
+declare global {
+  const SENTRY_DSN: string;
+  const COMMITHASH: string | undefined;
+  interface Window {
+    __webamp: WebampLazy;
+  }
+}
+
 const DEFAULT_DOCUMENT_TITLE = document.title;
 
 let screenshot = false;
 let skinUrl = configSkinUrl;
 if ("URLSearchParams" in window) {
   const params = new URLSearchParams(location.search);
-  screenshot = params.get("screenshot");
+  screenshot = Boolean(params.get("screenshot"));
   skinUrl = params.get("skinUrl") || skinUrl;
 }
 
-function supressDragAndDrop(e) {
+function supressDragAndDrop(e: DragEvent) {
   e.preventDefault();
+  if (e.dataTransfer == null) {
+    return;
+  }
   e.dataTransfer.effectAllowed = "none";
   e.dataTransfer.dropEffect = "none";
 }
@@ -41,8 +51,7 @@ window.addEventListener("drop", supressDragAndDrop);
 try {
   Sentry.init({
     dsn: SENTRY_DSN,
-    /* global COMMITHASH */
-    release: typeof COMMITHASH !== "undefined" ? COMMITHASH : "DEV",
+    release: COMMITHASH ?? "DEV",
   });
 } catch (e) {
   // Archive.org tries to rewrite the DSN to point to a archive.org version
@@ -51,19 +60,24 @@ try {
 }
 
 async function main() {
-  const about = document.getElementsByClassName("about")[0];
+  const about = document.getElementsByClassName("about")[0] as HTMLDivElement;
   if (screenshot) {
     about.style.visibility = "hidden";
   }
   if (!WebampLazy.browserIsSupported()) {
-    document.getElementById("browser-compatibility").style.display = "block";
-    document.getElementById("app").style.visibility = "hidden";
+    (document.getElementById(
+      "browser-compatibility"
+    ) as HTMLDivElement).style.display = "block";
+    (document.getElementById("app") as HTMLDivElement).style.visibility =
+      "hidden";
     return;
   }
   about.classList.add("loaded");
 
   if (isButterchurnSupported()) {
-    document.getElementById("butterchurn-share").style.display = "flex";
+    (document.getElementById(
+      "butterchurn-share"
+    ) as HTMLDivElement).style.display = "flex";
   }
 
   const webamp = new WebampLazy(getWebampConfig(screenshot, skinUrl));
@@ -113,8 +127,8 @@ async function main() {
   fileInput.id = "webamp-file-input";
   fileInput.style.display = "none";
   fileInput.type = "file";
-  fileInput.value = null;
   fileInput.addEventListener("change", (e) => {
+    // @ts-ignore We know this will always be a file input
     const firstFile = e.target.files[0];
     if (firstFile == null) {
       return;
@@ -127,7 +141,9 @@ async function main() {
   // Expose webamp instance for debugging and integration tests.
   window.__webamp = webamp;
 
-  await webamp.renderWhenReady(document.getElementById("app"));
+  await webamp.renderWhenReady(
+    document.getElementById("app") as HTMLDivElement
+  );
 
   if (!screenshot) {
     ReactDOM.render(
diff --git a/packages/webamp/js/types.ts b/packages/webamp/js/types.ts
index dd5b0d60..2199d62f 100644
--- a/packages/webamp/js/types.ts
+++ b/packages/webamp/js/types.ts
@@ -360,7 +360,7 @@ export type Action =
     }
   | {
       type: "SET_DUMMY_VIZ_DATA";
-      data: null;
+      data: DummyVizData;
     }
   | {
       type: "SET_BAND_VALUE";