diff --git a/src/PageState.js b/src/PageState.js
index f106717..60e658a 100644
--- a/src/PageState.js
+++ b/src/PageState.js
@@ -2,7 +2,7 @@ import { Page } from "./types/Page.js";
 import { allPages } from "./allPages.js"
 import {
   getKeyByObjectPropertyValue,
-} from "./utils.js";
+} from "./utils";
 
 export class PageState extends Page {
   constructor() {
diff --git a/src/api/addNewTOTP.js b/src/api/addNewTOTP.js
index 9176cbc..74788ca 100644
--- a/src/api/addNewTOTP.js
+++ b/src/api/addNewTOTP.js
@@ -1,5 +1,5 @@
 import { appendAPIURL, getHeaders } from "./apiUtils.js";
-import { removeDoubleSlash } from "../utils.js";
+import { removeDoubleSlash } from "../utils";
 
 
 export async function addNewTOTP(baseMount, parms) {
diff --git a/src/api/createOrUpdateSecret.js b/src/api/createOrUpdateSecret.js
index c477759..e92887f 100644
--- a/src/api/createOrUpdateSecret.js
+++ b/src/api/createOrUpdateSecret.js
@@ -1,5 +1,5 @@
 import { appendAPIURL, getHeaders } from "./apiUtils.js";
-import { removeDoubleSlash } from "../utils.js";
+import { removeDoubleSlash } from "../utils";
 
 
 export async function createOrUpdateSecret(baseMount, mountType, secretPath, name, data) {
diff --git a/src/api/deleteSecret.js b/src/api/deleteSecret.js
index 10f021a..b60cf74 100644
--- a/src/api/deleteSecret.js
+++ b/src/api/deleteSecret.js
@@ -1,5 +1,5 @@
 import { appendAPIURL, getHeaders } from "./apiUtils.js";
-import { removeDoubleSlash } from "../utils.js";
+import { removeDoubleSlash } from "../utils";
 
 
 export async function deleteSecret(baseMount, mountType, secretPath, name, version = null) {
diff --git a/src/api/getCapabilities.js b/src/api/getCapabilities.js
index 3c692e8..b0811c4 100644
--- a/src/api/getCapabilities.js
+++ b/src/api/getCapabilities.js
@@ -1,5 +1,5 @@
 import { appendAPIURL, getHeaders } from "./apiUtils.js";
-import { removeDoubleSlash } from "../utils.js";
+import { removeDoubleSlash } from "../utils";
 
 
 export async function getCapabilitiesPath(path) {
diff --git a/src/api/transitDecrypt.js b/src/api/transitDecrypt.js
index 42cb239..d5b7e55 100644
--- a/src/api/transitDecrypt.js
+++ b/src/api/transitDecrypt.js
@@ -1,5 +1,5 @@
 import { appendAPIURL, getHeaders } from "./apiUtils.js";
-import { removeDoubleSlash } from "../utils.js";
+import { removeDoubleSlash } from "../utils";
 
 
 export async function transitDecrypt(baseMount, name, data) {
diff --git a/src/api/transitEncrypt.js b/src/api/transitEncrypt.js
index b9abdb8..d20a661 100644
--- a/src/api/transitEncrypt.js
+++ b/src/api/transitEncrypt.js
@@ -1,5 +1,5 @@
 import { appendAPIURL, getHeaders } from "./apiUtils.js";
-import { removeDoubleSlash } from "../utils.js";
+import { removeDoubleSlash } from "../utils";
 
 
 export async function transitEncrypt(baseMount, name, data) {
diff --git a/src/api/undeleteSecret.js b/src/api/undeleteSecret.js
index fbbaa3a..0ef8438 100644
--- a/src/api/undeleteSecret.js
+++ b/src/api/undeleteSecret.js
@@ -1,5 +1,5 @@
 import { appendAPIURL, getHeaders } from "./apiUtils.js";
-import { getObjectKeys, removeDoubleSlash } from "../utils.js";
+import { getObjectKeys, removeDoubleSlash } from "../utils";
 import { getSecretMetadata } from "./getSecretMetadata";
 
 
diff --git a/src/elements/CopyableInputBox.js b/src/elements/CopyableInputBox.js
index 8b937a1..e4a0c1c 100644
--- a/src/elements/CopyableInputBox.js
+++ b/src/elements/CopyableInputBox.js
@@ -1,6 +1,6 @@
 import { MarginInline } from "./MarginInline.js";
 import { addClipboardNotifications } from "../pageUtils.js";
-import { makeElement } from "../htmlUtils.js";
+import { makeElement } from "../htmlUtils";
 import ClipboardJS from "clipboard";
 import i18next from "i18next";
 
diff --git a/src/elements/CopyableModal.js b/src/elements/CopyableModal.js
index e1a3ead..829aae0 100644
--- a/src/elements/CopyableModal.js
+++ b/src/elements/CopyableModal.js
@@ -1,5 +1,5 @@
 import { addClipboardNotifications } from "../pageUtils.js";
-import { makeElement } from "../htmlUtils.js";
+import { makeElement } from "../htmlUtils";
 import ClipboardJS from "clipboard";
 import FileSaver from 'file-saver';
 import i18next from 'i18next';
diff --git a/src/elements/Margin.js b/src/elements/Margin.js
index 0473fc2..8afc59f 100644
--- a/src/elements/Margin.js
+++ b/src/elements/Margin.js
@@ -1,4 +1,4 @@
-import { makeElement } from "../htmlUtils.js";
+import { makeElement } from "../htmlUtils";
 
 export function Margin(children, options = {}) {
   return makeElement({
diff --git a/src/elements/MarginInline.js b/src/elements/MarginInline.js
index e0b94c1..fdf8ebd 100644
--- a/src/elements/MarginInline.js
+++ b/src/elements/MarginInline.js
@@ -1,4 +1,4 @@
-import { makeElement } from "../htmlUtils.js";
+import { makeElement } from "../htmlUtils";
 
 export function MarginInline(children, marginOptions = {}, inlineOptions = {}) {
   return makeElement({
diff --git a/src/elements/QRScanner.js b/src/elements/QRScanner.js
index f083e2f..c94fa42 100644
--- a/src/elements/QRScanner.js
+++ b/src/elements/QRScanner.js
@@ -1,5 +1,5 @@
 import { Margin } from "./Margin.js";
-import { makeElement } from "../htmlUtils.js";
+import { makeElement } from "../htmlUtils";
 import QrScanner from 'qr-scanner';
 
 /* eslint-disable import/no-unresolved */ 
diff --git a/src/htmlUtils.js b/src/htmlUtils.js
deleted file mode 100644
index f8e7a56..0000000
--- a/src/htmlUtils.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import {getObjectKeys} from "./utils.js";
-
-const optionsFunctions = {
-  class: (e, arg) => {
-    if (Array.isArray(arg)) {
-      e.classList.add(...arg);
-    } else {
-      e.classList.add(arg);
-    }
-  },
-  id: (e, arg) => e.id = arg,
-  html: (e, arg) => e.innerHTML = arg,
-  onclick: (e, arg) => e.onclick = arg,
-  attributes: setElementAttributes,
-  text: (e, arg) => e.innerText = arg,
-  children: (e, arg) => {
-    if (Array.isArray(arg)) {
-      arg.forEach(child => {
-        if (child != null) e.appendChild(child);
-      });
-    } else {
-      if (arg != null) e.appendChild(arg);
-    }
-  },
-  thenRun: (e, arg) => arg(e),
-}
-
-export function makeElement(elementInfo) {
-  if ("condition" in elementInfo) { if (!elementInfo.condition) { return null; } }
-  let element = document.createElement(elementInfo.tag);
-
-  for (let key of Object.getOwnPropertyNames(elementInfo)) {
-    if (getObjectKeys(optionsFunctions).includes(key)) {
-      optionsFunctions[key](element, elementInfo[key]);
-    }
-  }
-
-  return element;
-}
-
-export function setElementAttributes(element, attributes) {
-  for (let key of Object.getOwnPropertyNames(attributes)) {
-    element.setAttribute(key, attributes[key]);
-  }
-}
\ No newline at end of file
diff --git a/src/htmlUtils.ts b/src/htmlUtils.ts
new file mode 100644
index 0000000..16bc55c
--- /dev/null
+++ b/src/htmlUtils.ts
@@ -0,0 +1,63 @@
+import { getObjectKeys } from "./utils";
+
+type optionsFunctionsObject = {
+  [key: string]: (e: any, arg: any) => void
+}
+
+const optionsFunctions: optionsFunctionsObject = {
+  "class": (e: Element, arg: string | string[]) => {
+    if (Array.isArray(arg)) {
+      e.classList.add(...arg);
+    } else {
+      e.classList.add(arg);
+    }
+  },
+  "id": (e: Element, arg: string) => e.id = arg,
+  "html": (e: Element, arg: string) => e.innerHTML = arg,
+  "onclick": (e: HTMLButtonElement, arg: any) => e.onclick = arg,
+  "attributes": setElementAttributes,
+  "text": (e: HTMLParagraphElement, arg: string) => e.innerText = arg,
+  "children": (e: Element, arg: null | Element | (Element | null[])) => {
+    if (Array.isArray(arg)) {
+      arg.forEach(child => {
+        if (child != null) e.appendChild(child);
+      });
+    } else {
+      if (arg != null) e.appendChild(arg);
+    }
+  },
+  "thenRun": (e: Element, arg: (e: Element) => void) => arg(e),
+}
+
+interface ElementInfo {
+  condition?: Boolean;
+  tag: string;
+  class?: string | string[];
+  id?: string;
+  html?: string;
+  attributes?: {
+    [propName: string]: any
+  };
+  text?: string;
+  thenRun?: (e: Element) => void;
+  [propName: string]: any;
+}
+
+export function makeElement(elementInfo: ElementInfo) {
+  if ("condition" in elementInfo) { if (!elementInfo.condition) { return null; } }
+  let element = document.createElement(elementInfo.tag);
+
+  for (let key of Object.getOwnPropertyNames(elementInfo)) {
+    if (getObjectKeys(optionsFunctions).includes(key)) {
+      (optionsFunctions as any)[key](element, elementInfo[key]);
+    }
+  }
+
+  return element;
+}
+
+export function setElementAttributes(element: Element, attributes: {[propName: string]: any}) {
+  for (let key of Object.getOwnPropertyNames(attributes)) {
+    element.setAttribute(key, attributes[key]);
+  }
+}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 27fb526..6d0696b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,7 +18,7 @@ import {
   renderPage,
 } from "./pageUtils.js";
 import { getSealStatus } from "./api/getSealStatus";
-import { makeElement } from "./htmlUtils.js";
+import { makeElement } from "./htmlUtils";
 import { pageState } from "./globalPageState.js";
 
 // Translations
diff --git a/src/pageUtils.js b/src/pageUtils.js
index f756aac..55118f0 100644
--- a/src/pageUtils.js
+++ b/src/pageUtils.js
@@ -1,6 +1,6 @@
 import { getSealStatus } from "./api/getSealStatus";
 import { lookupSelf } from "./api/lookupSelf";
-import { makeElement } from "./htmlUtils.js";
+import { makeElement } from "./htmlUtils";
 import { pageState } from "./globalPageState.js";
 import UIkit from 'uikit/dist/js/uikit.min.js';
 import i18next from 'i18next';
diff --git a/src/pages/Home.js b/src/pages/Home.js
index 3b1c292..ccc00c6 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -2,9 +2,9 @@ import { Page } from "../types/Page.js";
 import { changePage, prePageChecks, setErrorText } from "../pageUtils.js";
 import { getMounts } from "../api/getMounts";
 import { lookupSelf } from "../api/lookupSelf";
-import { makeElement } from "../htmlUtils.js";
+import { makeElement } from "../htmlUtils";
 import { pageState } from "../globalPageState.js";
-import { sortedObjectMap } from "../utils.js";
+import { sortedObjectMap } from "../utils";
 import i18next from 'i18next';
 
 export class HomePage extends Page {
diff --git a/src/pages/KeyValue/KeyValueDelete.js b/src/pages/KeyValue/KeyValueDelete.js
index a18c123..863ff2e 100644
--- a/src/pages/KeyValue/KeyValueDelete.js
+++ b/src/pages/KeyValue/KeyValueDelete.js
@@ -1,7 +1,7 @@
 import { Page } from "../../types/Page.js";
 import { changePage, setPageContent, setTitleElement } from "../../pageUtils.js";
 import { deleteSecret } from "../../api/deleteSecret";
-import { makeElement } from "../../htmlUtils.js";
+import { makeElement } from "../../htmlUtils";
 import { pageState } from "../../globalPageState.js";
 import i18next from 'i18next';
 
diff --git a/src/pages/KeyValue/KeyValueNew.js b/src/pages/KeyValue/KeyValueNew.js
index 6adad38..27f2af0 100644
--- a/src/pages/KeyValue/KeyValueNew.js
+++ b/src/pages/KeyValue/KeyValueNew.js
@@ -1,7 +1,7 @@
 import { Page } from "../../types/Page.js";
 import { changePage, setErrorText, setPageContent, setTitleElement } from "../../pageUtils.js";
 import { createOrUpdateSecret } from "../../api/createOrUpdateSecret";
-import { makeElement } from "../../htmlUtils.js";
+import { makeElement } from "../../htmlUtils";
 import { pageState } from "../../globalPageState.js";
 import i18next from 'i18next';
 
diff --git a/src/pages/KeyValue/KeyValueSecret.js b/src/pages/KeyValue/KeyValueSecret.js
index 18dbcef..6580b91 100644
--- a/src/pages/KeyValue/KeyValueSecret.js
+++ b/src/pages/KeyValue/KeyValueSecret.js
@@ -3,9 +3,9 @@ import { Page } from "../../types/Page.js";
 import { changePage, setPageContent, setTitleElement } from "../../pageUtils.js";
 import { getCapabilities } from "../../api/getCapabilities";
 import { getSecret } from "../../api/getSecret";
-import { makeElement } from "../../htmlUtils.js";
+import { makeElement } from "../../htmlUtils";
 import { pageState } from "../../globalPageState.js";
-import { sortedObjectMap } from "../../utils.js";
+import { sortedObjectMap } from "../../utils";
 import { undeleteSecret } from "../../api/undeleteSecret";
 import Prism from "prismjs";
 import i18next from 'i18next';
diff --git a/src/pages/KeyValue/KeyValueSecretsEdit.js b/src/pages/KeyValue/KeyValueSecretsEdit.js
index 708ad2e..f53b0d7 100644
--- a/src/pages/KeyValue/KeyValueSecretsEdit.js
+++ b/src/pages/KeyValue/KeyValueSecretsEdit.js
@@ -3,9 +3,9 @@ import { Page } from "../../types/Page.js";
 import { changePage, setErrorText, setPageContent, setTitleElement } from "../../pageUtils.js";
 import { createOrUpdateSecret } from "../../api/createOrUpdateSecret.js";
 import { getSecret } from "../../api/getSecret.js";
-import { makeElement } from "../../htmlUtils.js";
+import { makeElement } from "../../htmlUtils";
 import { pageState } from "../../globalPageState.js";
-import { verifyJSONString } from "../../utils.js";
+import { verifyJSONString } from "../../utils";
 import i18next from 'i18next';
 
 export class KeyValueSecretEditPage extends Page {
diff --git a/src/pages/KeyValue/KeyValueVersions.js b/src/pages/KeyValue/KeyValueVersions.js
index e3d5742..d09a36c 100644
--- a/src/pages/KeyValue/KeyValueVersions.js
+++ b/src/pages/KeyValue/KeyValueVersions.js
@@ -1,8 +1,8 @@
 import { Page } from "../../types/Page.js";
 import { changePage, setPageContent, setTitleElement } from "../../pageUtils.js";
 import { getSecretMetadata } from "../../api/getSecretMetadata.js";
-import { makeElement } from "../../htmlUtils.js";
-import { objectToMap } from "../../utils.js";
+import { makeElement } from "../../htmlUtils";
+import { objectToMap } from "../../utils";
 import { pageState } from "../../globalPageState.js";
 import i18next from 'i18next';
 
diff --git a/src/pages/KeyValue/KeyValueView.js b/src/pages/KeyValue/KeyValueView.js
index 813e5cd..ba7def9 100644
--- a/src/pages/KeyValue/KeyValueView.js
+++ b/src/pages/KeyValue/KeyValueView.js
@@ -2,7 +2,7 @@ import { DoesNotExistError } from "../../types/internalErrors.js";
 import { Page } from "../../types/Page.js";
 import { changePage, setErrorText, setTitleElement } from "../../pageUtils.js";
 import { getSecrets } from "../../api/getSecrets";
-import { makeElement } from "../../htmlUtils.js";
+import { makeElement } from "../../htmlUtils";
 import { pageState } from "../../globalPageState.js";
 import i18next from 'i18next';
 
diff --git a/src/pages/Login.js b/src/pages/Login.js
index 6d447ed..03c2ed6 100644
--- a/src/pages/Login.js
+++ b/src/pages/Login.js
@@ -3,7 +3,7 @@ import { MarginInline } from "../elements/MarginInline.js";
 import { Page } from "../types/Page.js";
 import { changePage, setErrorText, setPageContent } from "../pageUtils.js";
 import { lookupSelf } from "../api/lookupSelf";
-import { makeElement } from "../htmlUtils.js";
+import { makeElement } from "../htmlUtils";
 import { pageState } from "../globalPageState.js";
 import { usernameLogin } from "../api/usernameLogin";
 import i18next from 'i18next';
diff --git a/src/pages/Me.js b/src/pages/Me.js
index 8ac2c5b..3cd7ff6 100644
--- a/src/pages/Me.js
+++ b/src/pages/Me.js
@@ -1,7 +1,7 @@
 import { Page } from "../types/Page.js";
 import { addClipboardNotifications, changePage, prePageChecks, setErrorText, setPageContent } from "../pageUtils.js";
 import { getCapabilitiesPath } from "../api/getCapabilities.js";
-import { makeElement } from "../htmlUtils.js";
+import { makeElement } from "../htmlUtils";
 import { pageState } from "../globalPageState.js";
 import { renewSelf } from "../api/renewSelf.js";
 import { sealVault } from "../api/sealVault.js";
diff --git a/src/pages/PwGen.js b/src/pages/PwGen.js
index ae9e0bd..ff293a3 100644
--- a/src/pages/PwGen.js
+++ b/src/pages/PwGen.js
@@ -1,7 +1,7 @@
 import { CopyableInputBox } from "../elements/CopyableInputBox.js";
 import { Margin } from "../elements/Margin.js";
 import { Page } from "../types/Page.js";
-import { makeElement } from "../htmlUtils.js";
+import { makeElement } from "../htmlUtils";
 import { setPageContent } from "../pageUtils.js";
 import i18next from 'i18next';
 
diff --git a/src/pages/SetLanguage.js b/src/pages/SetLanguage.js
index e773235..f07b428 100644
--- a/src/pages/SetLanguage.js
+++ b/src/pages/SetLanguage.js
@@ -1,7 +1,7 @@
 import { Margin } from "../elements/Margin.js";
 import { Page } from "../types/Page.js";
 import { changePage, setPageContent } from "../pageUtils.js";
-import { makeElement } from "../htmlUtils.js";
+import { makeElement } from "../htmlUtils";
 import { pageState } from "../globalPageState.js";
 import i18next from 'i18next';
 import translations from "../translations/index.mjs";
diff --git a/src/pages/SetVaultURL.js b/src/pages/SetVaultURL.js
index 2fbd2c9..cafb78c 100644
--- a/src/pages/SetVaultURL.js
+++ b/src/pages/SetVaultURL.js
@@ -1,6 +1,6 @@
 import { Page } from "../types/Page.js";
 import { changePage, setPageContent } from "../pageUtils.js";
-import { makeElement } from "../htmlUtils.js";
+import { makeElement } from "../htmlUtils";
 import { pageState } from "../globalPageState.js";
 
 export class SetVaultURLPage extends Page {
diff --git a/src/pages/TOTP/NewTOTP.js b/src/pages/TOTP/NewTOTP.js
index da3acd5..23fc78f 100644
--- a/src/pages/TOTP/NewTOTP.js
+++ b/src/pages/TOTP/NewTOTP.js
@@ -3,7 +3,7 @@ import { MarginInline } from "../../elements/MarginInline.js";
 import { Page } from "../../types/Page.js";
 import { addNewTOTP } from "../../api/addNewTOTP";
 import { changePage, setErrorText, setPageContent, setTitleElement } from "../../pageUtils.js";
-import { makeElement } from "../../htmlUtils.js";
+import { makeElement } from "../../htmlUtils";
 import { pageState } from "../../globalPageState.js";
 import i18next from 'i18next';
 
diff --git a/src/pages/TOTP/TOTPView.js b/src/pages/TOTP/TOTPView.js
index 059a3a3..49e9934 100644
--- a/src/pages/TOTP/TOTPView.js
+++ b/src/pages/TOTP/TOTPView.js
@@ -4,8 +4,8 @@ import { Page } from "../../types/Page.js";
 import { changePage, setErrorText, setPageContent, setTitleElement } from "../../pageUtils.js";
 import { getTOTPCode } from "../../api/getTOTPCode";
 import { getTOTPKeys } from "../../api/getTOTPKeys";
-import { makeElement } from "../../htmlUtils.js";
-import { objectToMap } from "../../utils.js";
+import { makeElement } from "../../htmlUtils";
+import { objectToMap } from "../../utils";
 import { pageState } from "../../globalPageState.js";
 import i18next from 'i18next';
 
diff --git a/src/pages/Template.js b/src/pages/Template.js
index 19f37b2..71eb1bb 100644
--- a/src/pages/Template.js
+++ b/src/pages/Template.js
@@ -1,6 +1,6 @@
 import { Page } from "../types/Page.js";
 import { changePage, setPageContent, setTitleElement } from "../pageUtils.js";
-import { makeElement } from "../htmlUtils.js";
+import { makeElement } from "../htmlUtils";
 import { pageState } from "../globalPageState.js";
 
 export class TemplatePage extends Page {
diff --git a/src/pages/Transit/TransitDecrypt.js b/src/pages/Transit/TransitDecrypt.js
index f0be0d1..009c5ed 100644
--- a/src/pages/Transit/TransitDecrypt.js
+++ b/src/pages/Transit/TransitDecrypt.js
@@ -2,7 +2,7 @@ import { CopyableModal } from "../../elements/CopyableModal.js";
 import { Margin } from "../../elements/Margin.js";
 import { Page } from "../../types/Page.js";
 import { changePage, setErrorText, setPageContent, setTitleElement } from "../../pageUtils.js";
-import { makeElement } from "../../htmlUtils.js";
+import { makeElement } from "../../htmlUtils";
 import { pageState } from "../../globalPageState.js";
 import { transitDecrypt } from "../../api/transitDecrypt";
 import UIkit from 'uikit/dist/js/uikit.min.js';
diff --git a/src/pages/Transit/TransitEncrypt.js b/src/pages/Transit/TransitEncrypt.js
index 3ca6a23..61ab6d9 100644
--- a/src/pages/Transit/TransitEncrypt.js
+++ b/src/pages/Transit/TransitEncrypt.js
@@ -2,7 +2,7 @@ import { CopyableModal } from "../../elements/CopyableModal.js";
 import { Margin } from "../../elements/Margin.js";
 import { Page } from "../../types/Page.js";
 import { changePage, setErrorText, setPageContent, setTitleElement } from "../../pageUtils.js";
-import { makeElement } from "../../htmlUtils.js";
+import { makeElement } from "../../htmlUtils";
 import { pageState } from "../../globalPageState.js";
 import { transitEncrypt } from "../../api/transitEncrypt";
 import UIkit from 'uikit/dist/js/uikit.min.js';
diff --git a/src/pages/Transit/TransitView.js b/src/pages/Transit/TransitView.js
index e6fd9a9..e476477 100644
--- a/src/pages/Transit/TransitView.js
+++ b/src/pages/Transit/TransitView.js
@@ -2,7 +2,7 @@ import { DoesNotExistError } from "../../types/internalErrors.js";
 import { Page } from "../../types/Page.js";
 import { changePage, setErrorText, setTitleElement } from "../../pageUtils.js";
 import { getTransitKeys } from "../../api/getTransitKeys";
-import { makeElement } from "../../htmlUtils.js";
+import { makeElement } from "../../htmlUtils";
 import { pageState } from "../../globalPageState.js";
 import i18next from 'i18next';
 
diff --git a/src/pages/Transit/TransitViewSecret.js b/src/pages/Transit/TransitViewSecret.js
index 4ac041c..ac355b3 100644
--- a/src/pages/Transit/TransitViewSecret.js
+++ b/src/pages/Transit/TransitViewSecret.js
@@ -1,6 +1,6 @@
 import { Page } from "../../types/Page.js";
 import { changePage, setPageContent, setTitleElement } from "../../pageUtils.js";
-import { makeElement } from "../../htmlUtils.js";
+import { makeElement } from "../../htmlUtils";
 import { pageState } from "../../globalPageState.js";
 import i18next from 'i18next';
 
diff --git a/src/pages/Unseal.js b/src/pages/Unseal.js
index 60c5423..68f2ca0 100644
--- a/src/pages/Unseal.js
+++ b/src/pages/Unseal.js
@@ -3,7 +3,7 @@ import { Page } from "../types/Page.js";
 import { QRScanner } from "../elements/QRScanner.js";
 import { changePage, setErrorText, setPageContent } from "../pageUtils.js";
 import { getSealStatus } from "../api/getSealStatus.js";
-import { makeElement } from "../htmlUtils.js";
+import { makeElement } from "../htmlUtils";
 import { submitUnsealKey } from "../api/submitUnsealKey.js";
 import i18next from 'i18next';
 
diff --git a/src/utils.js b/src/utils.js
deleted file mode 100644
index 89eeee5..0000000
--- a/src/utils.js
+++ /dev/null
@@ -1,23 +0,0 @@
-export function removeDoubleSlash(str) {
-  return str.replace(/\/\/+/g, "/");
-}
-
-export const getObjectKeys = (obj) => Object.getOwnPropertyNames(obj);
-export const objectToMap = (obj) => new Map(Object.entries(obj));
-export const sortedObjectMap = (obj) => new Map(Object.entries(obj).sort());
-
-export function getKeyByObjectPropertyValue(map, searchValue) {
-  for (let key of getObjectKeys(map)) {
-    if (map[key] === searchValue)
-      return key;
-  }
-}
-
-export function verifyJSONString(str) {
-  try {
-    JSON.parse(str);
-  } catch (e) {
-    return false;
-  }
-  return true;
-}
\ No newline at end of file
diff --git a/src/utils.ts b/src/utils.ts
new file mode 100644
index 0000000..9a1c31e
--- /dev/null
+++ b/src/utils.ts
@@ -0,0 +1,23 @@
+export function removeDoubleSlash(str: string): string {
+  return str.replace(/\/\/+/g, "/");
+}
+
+export const getObjectKeys = (obj: Object) => Object.getOwnPropertyNames(obj);
+export const objectToMap = (obj: Object) => new Map(Object.entries(obj));
+export const sortedObjectMap = (obj: Object) => new Map(Object.entries(obj).sort());
+
+export function getKeyByObjectPropertyValue(map: object, searchValue: any) {
+  for (let key of getObjectKeys(map)) {
+    if ((map as any)[key] === searchValue)
+      return key;
+  }
+}
+
+export function verifyJSONString(str: string): Boolean {
+  try {
+    JSON.parse(str);
+  } catch (e) {
+    return false;
+  }
+  return true;
+}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..5d0e373
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "noImplicitAny": true,
+    "module": "es6",
+    "target": "es5",
+    "jsx": "react",
+    "allowJs": true,
+    "moduleResolution": "node",
+  }
+}
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 2fb3bb9..87d1938 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -26,7 +26,9 @@ module.exports = {
   },
   resolve: {
     modules: ['node_modules'],
+    extensions: ['.tsx', '.ts', '.js'],
   },
+
   module: {
     rules: [
       {
@@ -37,6 +39,7 @@ module.exports = {
           "sass-loader"
         ],
       },
+      { test: /\.tsx?$/, loader: "ts-loader" }
     ],
   },
 };
\ No newline at end of file