From bc26331a8e0a5017bc3fd95c19e8294574079c5b Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 18 Mar 2026 15:59:57 +0100
Subject: [PATCH 1/7] chore: import via alias instead of using relative path

---
 frontend/src/ts/db.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/ts/db.ts b/frontend/src/ts/db.ts
index 3a1515cd62f1..8ecb8255327d 100644
--- a/frontend/src/ts/db.ts
+++ b/frontend/src/ts/db.ts
@@ -26,7 +26,6 @@ import {
   SnapshotResult,
   SnapshotUserTag,
 } from "./constants/default-snapshot";
-import { FunboxMetadata } from "../../../packages/funbox/src/types";
 import { getFirstDayOfTheWeek } from "./utils/date-and-time";
 import { Language } from "@monkeytype/schemas/languages";
 import * as AuthEvent from "./observables/auth-event";
@@ -41,6 +40,7 @@ import {
 } from "./states/snapshot";
 import { XpBreakdown } from "@monkeytype/schemas/results";
 import { setXpBarData } from "./states/header";
+import { FunboxMetadata } from "@monkeytype/funbox";
 
 let dbSnapshot: Snapshot | undefined;
 const firstDayOfTheWeek = getFirstDayOfTheWeek();

From 950eca550896ade6a4d54a707b5a871a9ad7fc0f Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 18 Mar 2026 16:08:17 +0100
Subject: [PATCH 2/7] event rewrite

---
 .../components/layout/header/AccountXpBar.tsx | 23 ++++---
 .../src/ts/components/layout/header/Logo.tsx  |  4 +-
 .../src/ts/components/layout/header/Nav.tsx   |  4 +-
 frontend/src/ts/hooks/createEvent.ts          | 68 ++++++++++++-------
 frontend/src/ts/states/core.ts                |  2 +-
 frontend/src/ts/states/header.ts              |  2 +-
 frontend/src/ts/test/test-logic.ts            |  5 +-
 frontend/src/ts/test/test-ui.ts               |  4 +-
 8 files changed, 69 insertions(+), 43 deletions(-)

diff --git a/frontend/src/ts/components/layout/header/AccountXpBar.tsx b/frontend/src/ts/components/layout/header/AccountXpBar.tsx
index 0e95cd5e84e7..06988455bb60 100644
--- a/frontend/src/ts/components/layout/header/AccountXpBar.tsx
+++ b/frontend/src/ts/components/layout/header/AccountXpBar.tsx
@@ -1,7 +1,6 @@
 import { XpBreakdown } from "@monkeytype/schemas/results";
 import { isSafeNumber } from "@monkeytype/util/numbers";
 import {
-  createMemo,
   createSignal,
   For,
   JSXElement,
@@ -14,7 +13,7 @@ import { createSignalWithSetters } from "../../../hooks/createSignalWithSetters"
 import { createEffectOn } from "../../../hooks/effects";
 import { getFocus } from "../../../states/core";
 import {
-  getSkipBreakdownEvent,
+  skipBreakdownEvent,
   getXpBarData,
   setAnimatedLevel,
 } from "../../../states/header";
@@ -38,11 +37,11 @@ export function AccountXpBar(): JSXElement {
   const [getBarAnimationDuration, setBarAnimationDuration] = createSignal(0);
   const [getBarAnimationEase, setBarAnimationEase] = createSignal("out(5)");
 
-  const [getAnimationEvent, fireAnimationEvent] = createEvent();
+  const animationEvent = createEvent();
   const [getTotal, { setTotal }] = createSignalWithSetters(0)({
     setTotal: (set, value: number) => {
       set(value);
-      fireAnimationEvent();
+      animationEvent.dispatch();
     },
   });
 
@@ -54,23 +53,29 @@ export function AccountXpBar(): JSXElement {
   let skipped = false;
   let runId = 0;
 
-  const flashAnimation = createMemo(() => {
-    getAnimationEvent(); // trigger on every total update, even if value unchanged
+  const [flashAnimation, setFlashAnimation] = createSignal({
+    scale: [1, 1],
+    rotate: [0, 0],
+    duration: 2000,
+    ease: "out(5)",
+  });
+
+  animationEvent.useListener(() => {
     const rand = (Math.random() * 2 - 1) / 4;
     const rand2 = (Math.random() + 1) / 2;
-    return {
+    setFlashAnimation({
       scale: [1 + 0.5 * rand2, 1],
       rotate: [10 * rand, 0],
       duration: 2000,
       ease: "out(5)",
-    };
+    });
   });
 
   const addItem = (label: string, amount: number | string): void => {
     setBreakdownItems((items) => [...items, { label, amount }]);
   };
 
-  createEffectOn(getSkipBreakdownEvent, async () => {
+  skipBreakdownEvent.useListener(async () => {
     if (skipped || !canSkip) return;
 
     const myId = runId; // capture before first await
diff --git a/frontend/src/ts/components/layout/header/Logo.tsx b/frontend/src/ts/components/layout/header/Logo.tsx
index bc838e360b53..41127879c8c2 100644
--- a/frontend/src/ts/components/layout/header/Logo.tsx
+++ b/frontend/src/ts/components/layout/header/Logo.tsx
@@ -1,7 +1,7 @@
 import { JSXElement } from "solid-js";
 
 import {
-  dispatchRestartTest,
+  restartTestEvent,
   getActivePage,
   getFocus,
 } from "../../../states/core";
@@ -21,7 +21,7 @@ export function Logo(): JSXElement {
       }}
       data-ui-element="logo"
       onClick={() => {
-        if (getActivePage() === "test") dispatchRestartTest();
+        if (getActivePage() === "test") restartTestEvent.dispatch();
       }}
     >
       <svg
diff --git a/frontend/src/ts/components/layout/header/Nav.tsx b/frontend/src/ts/components/layout/header/Nav.tsx
index 69c0426e17fb..d2214a28a1ae 100644
--- a/frontend/src/ts/components/layout/header/Nav.tsx
+++ b/frontend/src/ts/components/layout/header/Nav.tsx
@@ -4,7 +4,7 @@ import { createMemo, JSXElement, Show } from "solid-js";
 import { createEffectOn } from "../../../hooks/effects";
 import { getServerConfigurationQueryOptions } from "../../../queries/server-configuration";
 import {
-  dispatchRestartTest,
+  restartTestEvent,
   getActivePage,
   getFocus,
 } from "../../../states/core";
@@ -80,7 +80,7 @@ export function Nav(): JSXElement {
           "data-nav-item": "test",
         }}
         onClick={() => {
-          if (getActivePage() === "test") dispatchRestartTest();
+          if (getActivePage() === "test") restartTestEvent.dispatch();
         }}
       />
       <Button
diff --git a/frontend/src/ts/hooks/createEvent.ts b/frontend/src/ts/hooks/createEvent.ts
index 4247ede6913a..b032d725c73f 100644
--- a/frontend/src/ts/hooks/createEvent.ts
+++ b/frontend/src/ts/hooks/createEvent.ts
@@ -1,34 +1,56 @@
-import { Accessor, createSignal } from "solid-js";
+import { onCleanup } from "solid-js";
+
+type Listener<T> = (value: T) => void;
+
+type EventBus<T> = {
+  dispatch: (...args: T extends undefined ? [] : [value: T]) => void;
+  subscribe: (fn: Listener<T>) => () => void;
+  useListener: (fn: Listener<T>) => void;
+};
 
 /**
- * Creates a reactive event primitive.
+ * Creates a pub-sub event bus.
  *
- * Returns a tuple of:
- * - An accessor whose value increments each time the event is dispatched.
- *   Reactive consumers (effects, memos, etc.) re-run whenever the event fires.
- * - A dispatch function that triggers the event.
- *
- * @returns `[accessor, dispatch]`
+ * - `dispatch(value)` notifies all listeners. No args needed when `T` is `undefined`.
+ * - `subscribe(fn)` registers a listener, returns an unsubscribe function.
+ * - `useListener(fn)` registers a listener that auto-unsubscribes via Solid's `onCleanup`.
  *
  * @example
  * ```ts
- * const [onSave, dispatchSave] = createEvent();
- *
- * createEffect(() => {
- *   onSave(); // re-runs every time dispatchSave() is called
- *   console.log("saved!");
- * });
+ * const clickEvent = createEvent2<{ x: number; y: number }>();
+ * clickEvent.useListener(({ x, y }) => console.log(x, y));
+ * clickEvent.dispatch({ x: 10, y: 20 });
  *
- * dispatchSave(); // triggers the effect
+ * const resetEvent = createEvent2();
+ * resetEvent.useListener(() => console.log("reset"));
+ * resetEvent.dispatch();
  * ```
  */
 
-export function createEvent(): [Accessor<number>, () => void] {
-  const [get, set] = createSignal(0);
-  return [
-    get,
-    () => {
-      set((v) => v + 1);
-    },
-  ];
+export function createEvent<T = undefined>(): EventBus<T> {
+  const listeners = new Set<Listener<T>>();
+
+  function dispatch(...args: T extends undefined ? [] : [value: T]): void {
+    const value = args[0] as T;
+    for (const fn of listeners) {
+      try {
+        fn(value);
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  }
+
+  function subscribe(fn: Listener<T>): () => void {
+    listeners.add(fn);
+    return () => listeners.delete(fn);
+  }
+
+  // Auto-unsubscribes when the Solid owner scope is disposed
+  function useListener(fn: Listener<T>): void {
+    listeners.add(fn);
+    onCleanup(() => listeners.delete(fn));
+  }
+
+  return { dispatch, subscribe, useListener };
 }
diff --git a/frontend/src/ts/states/core.ts b/frontend/src/ts/states/core.ts
index 9b3f9cf8c8ff..00695db0a8cc 100644
--- a/frontend/src/ts/states/core.ts
+++ b/frontend/src/ts/states/core.ts
@@ -38,4 +38,4 @@ export const [getSelectedProfileName, setSelectedProfileName] = createSignal<
   string | undefined
 >(undefined);
 
-export const [onRestartTest, dispatchRestartTest] = createEvent();
+export const restartTestEvent = createEvent();
diff --git a/frontend/src/ts/states/header.ts b/frontend/src/ts/states/header.ts
index 45f65dea9d83..3469da892b95 100644
--- a/frontend/src/ts/states/header.ts
+++ b/frontend/src/ts/states/header.ts
@@ -15,4 +15,4 @@ export const [getXpBarData, setXpBarData] = createSignal<XpBarData | null>(
   null,
 );
 
-export const [getSkipBreakdownEvent, skipBreakdown] = createEvent();
+export const skipBreakdownEvent = createEvent();
diff --git a/frontend/src/ts/test/test-logic.ts b/frontend/src/ts/test/test-logic.ts
index fc56ef4aa938..9de874aa6402 100644
--- a/frontend/src/ts/test/test-logic.ts
+++ b/frontend/src/ts/test/test-logic.ts
@@ -26,8 +26,7 @@ import * as TodayTracker from "./today-tracker";
 import * as ChallengeContoller from "../controllers/challenge-controller";
 import * as QuoteRateModal from "../modals/quote-rate";
 import * as Result from "./result";
-import { createEffect, on } from "solid-js";
-import { getActivePage, onRestartTest } from "../states/core";
+import { getActivePage, restartTestEvent } from "../states/core";
 import * as TestInput from "./test-input";
 import * as TestWords from "./test-words";
 import * as WordsGenerator from "./words-generator";
@@ -1433,7 +1432,7 @@ qs(".pageTest")?.onChild("click", "#restartTestButtonWithSameWordset", () => {
   });
 });
 
-createEffect(on(onRestartTest, () => restart(), { defer: true }));
+restartTestEvent.subscribe(() => restart());
 
 qs(".pageTest")?.onChild("click", "#testConfig .mode .textButton", (e) => {
   if (TestState.testRestarting) return;
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index ef58d4823ba1..4218c35c50eb 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -68,7 +68,7 @@ import {
   qsr,
 } from "../utils/dom";
 import { getTheme } from "../states/theme";
-import { skipBreakdown } from "../states/header";
+import { skipBreakdownEvent } from "../states/header";
 
 export const updateHintsPositionDebounced = Misc.debounceUntilResolved(
   updateHintsPosition,
@@ -1918,7 +1918,7 @@ export function onTestRestart(source: "testPage" | "resultPage"): void {
     if (Config.randomTheme !== "off") {
       void ThemeController.randomizeTheme();
     }
-    skipBreakdown();
+    skipBreakdownEvent.dispatch();
   }
 
   currentTestLine = 0;

From 060c5017022ceba104058aa654ceebda8fff0947 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 18 Mar 2026 16:10:22 +0100
Subject: [PATCH 3/7] rename

---
 frontend/__tests__/root/config.spec.ts                      | 2 +-
 frontend/src/ts/auth.tsx                                    | 2 +-
 frontend/src/ts/commandline/lists/themes.ts                 | 2 +-
 .../src/ts/components/pages/profile/ProfileSearchPage.tsx   | 2 +-
 frontend/src/ts/config/lifecycle.ts                         | 2 +-
 frontend/src/ts/config/setters.ts                           | 2 +-
 frontend/src/ts/controllers/ad-controller.ts                | 2 +-
 frontend/src/ts/controllers/challenge-controller.ts         | 2 +-
 frontend/src/ts/controllers/chart-controller.ts             | 2 +-
 frontend/src/ts/controllers/quotes-controller.ts            | 2 +-
 frontend/src/ts/controllers/route-controller.ts             | 4 ++--
 frontend/src/ts/controllers/sound-controller.ts             | 2 +-
 frontend/src/ts/controllers/tag-controller.ts               | 2 +-
 frontend/src/ts/controllers/theme-controller.ts             | 2 +-
 frontend/src/ts/controllers/url-handler.tsx                 | 2 +-
 frontend/src/ts/db.ts                                       | 2 +-
 frontend/src/ts/elements/account/result-filters.ts          | 2 +-
 frontend/src/ts/elements/custom-background-filter.ts        | 2 +-
 frontend/src/ts/elements/keymap.ts                          | 4 ++--
 frontend/src/ts/elements/modes-notice.ts                    | 2 +-
 frontend/src/ts/elements/psa.tsx                            | 2 +-
 frontend/src/ts/elements/settings/theme-picker.ts           | 2 +-
 .../src/ts/{observables/auth-event.ts => events/auth.ts}    | 0
 .../ts/{observables/config-event.ts => events/config.ts}    | 0
 .../connection-event.ts => events/connection.ts}            | 0
 .../google-sign-up-event.ts => events/google-sign-up.ts}    | 0
 .../ts/{observables/keymap-event.ts => events/keymap.ts}    | 0
 .../navigation-event.ts => events/navigation.ts}            | 0
 .../src/ts/{observables/timer-event.ts => events/timer.ts}  | 0
 frontend/src/ts/{observables/tts-event.ts => events/tts.ts} | 0
 frontend/src/ts/firebase.ts                                 | 2 +-
 frontend/src/ts/input/handlers/insert-text.ts               | 2 +-
 frontend/src/ts/legacy-states/connection.ts                 | 2 +-
 frontend/src/ts/modals/google-sign-up.ts                    | 2 +-
 frontend/src/ts/modals/last-signed-out-result.ts            | 2 +-
 frontend/src/ts/pages/account-settings.ts                   | 2 +-
 frontend/src/ts/pages/account.ts                            | 2 +-
 frontend/src/ts/pages/friends.ts                            | 2 +-
 frontend/src/ts/pages/settings.ts                           | 4 ++--
 frontend/src/ts/test/caret.ts                               | 2 +-
 frontend/src/ts/test/funbox/funbox-functions.ts             | 4 ++--
 frontend/src/ts/test/funbox/funbox.ts                       | 2 +-
 frontend/src/ts/test/live-acc.ts                            | 2 +-
 frontend/src/ts/test/live-burst.ts                          | 2 +-
 frontend/src/ts/test/live-speed.ts                          | 2 +-
 frontend/src/ts/test/monkey.ts                              | 2 +-
 frontend/src/ts/test/pace-caret.ts                          | 2 +-
 frontend/src/ts/test/practise-words.ts                      | 2 +-
 frontend/src/ts/test/result.ts                              | 2 +-
 frontend/src/ts/test/test-config.ts                         | 4 ++--
 frontend/src/ts/test/test-logic.ts                          | 6 +++---
 frontend/src/ts/test/test-timer.ts                          | 4 ++--
 frontend/src/ts/test/test-ui.ts                             | 4 ++--
 frontend/src/ts/test/timer-progress.ts                      | 2 +-
 frontend/src/ts/test/tts.ts                                 | 4 ++--
 frontend/src/ts/ui.ts                                       | 2 +-
 56 files changed, 58 insertions(+), 58 deletions(-)
 rename frontend/src/ts/{observables/auth-event.ts => events/auth.ts} (100%)
 rename frontend/src/ts/{observables/config-event.ts => events/config.ts} (100%)
 rename frontend/src/ts/{observables/connection-event.ts => events/connection.ts} (100%)
 rename frontend/src/ts/{observables/google-sign-up-event.ts => events/google-sign-up.ts} (100%)
 rename frontend/src/ts/{observables/keymap-event.ts => events/keymap.ts} (100%)
 rename frontend/src/ts/{observables/navigation-event.ts => events/navigation.ts} (100%)
 rename frontend/src/ts/{observables/timer-event.ts => events/timer.ts} (100%)
 rename frontend/src/ts/{observables/tts-event.ts => events/tts.ts} (100%)

diff --git a/frontend/__tests__/root/config.spec.ts b/frontend/__tests__/root/config.spec.ts
index 0f89fb6aa4d6..65fddab5a57c 100644
--- a/frontend/__tests__/root/config.spec.ts
+++ b/frontend/__tests__/root/config.spec.ts
@@ -12,7 +12,7 @@ import {
 } from "@monkeytype/schemas/configs";
 import * as FunboxValidation from "../../src/ts/config/funbox-validation";
 import * as ConfigValidation from "../../src/ts/config/validation";
-import * as ConfigEvent from "../../src/ts/observables/config-event";
+import * as ConfigEvent from "../../src/ts/events/config";
 import * as ApeConfig from "../../src/ts/ape/config";
 import * as Notifications from "../../src/ts/states/notifications";
 const { replaceConfig, getConfig } = __testing;
diff --git a/frontend/src/ts/auth.tsx b/frontend/src/ts/auth.tsx
index 5fc6c39b58d5..f2a9c35c2beb 100644
--- a/frontend/src/ts/auth.tsx
+++ b/frontend/src/ts/auth.tsx
@@ -12,6 +12,7 @@ import Ape from "./ape";
 import { showRegisterCaptchaModal } from "./components/modals/RegisterCaptchaModal";
 import { updateFromServer as updateConfigFromServer } from "./config/remote";
 import * as DB from "./db";
+import * as AuthEvent from "./events/auth";
 import {
   isAuthAvailable,
   getAuthenticatedUser,
@@ -23,7 +24,6 @@ import {
   resetIgnoreAuthCallback,
 } from "./firebase";
 import { showPopup } from "./modals/simple-modals-base";
-import * as AuthEvent from "./observables/auth-event";
 import * as Sentry from "./sentry";
 import { addBanner } from "./states/banners";
 import { showLoaderBar, hideLoaderBar } from "./states/loader-bar";
diff --git a/frontend/src/ts/commandline/lists/themes.ts b/frontend/src/ts/commandline/lists/themes.ts
index 0b4874f72bdb..dbfbc7e571ef 100644
--- a/frontend/src/ts/commandline/lists/themes.ts
+++ b/frontend/src/ts/commandline/lists/themes.ts
@@ -5,7 +5,7 @@ import * as ThemeController from "../../controllers/theme-controller";
 import { Command, CommandsSubgroup } from "../types";
 import { ThemesList, ThemeWithName } from "../../constants/themes";
 import { not } from "@monkeytype/util/predicates";
-import * as ConfigEvent from "../../observables/config-event";
+import * as ConfigEvent from "../../events/config";
 import * as getErrorMessage from "../../utils/error";
 
 const isFavorite = (theme: ThemeWithName): boolean =>
diff --git a/frontend/src/ts/components/pages/profile/ProfileSearchPage.tsx b/frontend/src/ts/components/pages/profile/ProfileSearchPage.tsx
index 61c409cf7e7e..259fa35082f7 100644
--- a/frontend/src/ts/components/pages/profile/ProfileSearchPage.tsx
+++ b/frontend/src/ts/components/pages/profile/ProfileSearchPage.tsx
@@ -2,8 +2,8 @@ import { UserNameSchema } from "@monkeytype/schemas/users";
 import { createForm } from "@tanstack/solid-form";
 import { createEffect, createSignal, JSXElement, Show } from "solid-js";
 
+import * as NavigationEvent from "../../../events/navigation";
 import { useRefWithUtils } from "../../../hooks/useRefWithUtils";
-import * as NavigationEvent from "../../../observables/navigation-event";
 import { queryClient } from "../../../queries";
 import { getUserProfile } from "../../../queries/profile";
 import { getActivePage } from "../../../states/core";
diff --git a/frontend/src/ts/config/lifecycle.ts b/frontend/src/ts/config/lifecycle.ts
index 636c38481bb6..04fa6147fb00 100644
--- a/frontend/src/ts/config/lifecycle.ts
+++ b/frontend/src/ts/config/lifecycle.ts
@@ -11,7 +11,7 @@ import {
 } from "./persistence";
 import { Config, setConfigStore } from "./store";
 import { getDefaultConfig } from "../constants/default-config";
-import * as ConfigEvent from "../observables/config-event";
+import * as ConfigEvent from "../events/config";
 import { migrateConfig } from "./utils";
 import { promiseWithResolvers, typedKeys } from "../utils/misc";
 import { setConfig } from "./setters";
diff --git a/frontend/src/ts/config/setters.ts b/frontend/src/ts/config/setters.ts
index e409c043eabb..2dca54e2c731 100644
--- a/frontend/src/ts/config/setters.ts
+++ b/frontend/src/ts/config/setters.ts
@@ -3,7 +3,7 @@ import { ZodType as ZodSchema } from "zod";
 import { saveToLocalStorage } from "../config/persistence";
 import { configMetadata, ConfigMetadataObject } from "./metadata";
 import { isConfigValueValid } from "./validation";
-import * as ConfigEvent from "../observables/config-event";
+import * as ConfigEvent from "../events/config";
 import { showNoticeNotification } from "../states/notifications";
 import {
   canSetConfigWithCurrentFunboxes,
diff --git a/frontend/src/ts/controllers/ad-controller.ts b/frontend/src/ts/controllers/ad-controller.ts
index 85bd1efe6255..13e6b3ec589f 100644
--- a/frontend/src/ts/controllers/ad-controller.ts
+++ b/frontend/src/ts/controllers/ad-controller.ts
@@ -1,6 +1,6 @@
 /* oxlint-disable no-unsafe-member-access */
 import { debounce } from "throttle-debounce";
-import * as ConfigEvent from "../observables/config-event";
+import * as ConfigEvent from "../events/config";
 import { Config } from "../config/store";
 import * as TestState from "../test/test-state";
 import * as EG from "./eg-ad-controller";
diff --git a/frontend/src/ts/controllers/challenge-controller.ts b/frontend/src/ts/controllers/challenge-controller.ts
index acb7864f0c29..cdf5f6214047 100644
--- a/frontend/src/ts/controllers/challenge-controller.ts
+++ b/frontend/src/ts/controllers/challenge-controller.ts
@@ -10,7 +10,7 @@ import * as Funbox from "../test/funbox/funbox";
 
 import { Config } from "../config/store";
 import { setConfig } from "../config/setters";
-import * as ConfigEvent from "../observables/config-event";
+import * as ConfigEvent from "../events/config";
 import * as TestState from "../test/test-state";
 
 import { showLoaderBar, hideLoaderBar } from "../states/loader-bar";
diff --git a/frontend/src/ts/controllers/chart-controller.ts b/frontend/src/ts/controllers/chart-controller.ts
index afc75ff6c85a..e2d3e7e74874 100644
--- a/frontend/src/ts/controllers/chart-controller.ts
+++ b/frontend/src/ts/controllers/chart-controller.ts
@@ -60,7 +60,7 @@ Chart.defaults.elements.line.fill = "origin";
 import "chartjs-adapter-date-fns";
 import { format } from "date-fns/format";
 import { Config } from "../config/store";
-import * as ConfigEvent from "../observables/config-event";
+import * as ConfigEvent from "../events/config";
 import * as TestInput from "../test/test-input";
 import * as DateTime from "../utils/date-and-time";
 import * as Arrays from "../utils/arrays";
diff --git a/frontend/src/ts/controllers/quotes-controller.ts b/frontend/src/ts/controllers/quotes-controller.ts
index a15d3002251c..df610a2f1906 100644
--- a/frontend/src/ts/controllers/quotes-controller.ts
+++ b/frontend/src/ts/controllers/quotes-controller.ts
@@ -1,7 +1,7 @@
 import { removeLanguageSize } from "../utils/strings";
 import { randomElementFromArray, shuffle } from "../utils/arrays";
 import { cachedFetchJson } from "../utils/json-data";
-import { subscribe } from "../observables/config-event";
+import { subscribe } from "../events/config";
 import * as DB from "../db";
 import Ape from "../ape";
 import { tryCatch } from "@monkeytype/util/trycatch";
diff --git a/frontend/src/ts/controllers/route-controller.ts b/frontend/src/ts/controllers/route-controller.ts
index bb41cf1407ef..c51294fdec8c 100644
--- a/frontend/src/ts/controllers/route-controller.ts
+++ b/frontend/src/ts/controllers/route-controller.ts
@@ -5,8 +5,8 @@ import { isAuthAvailable, isAuthenticated } from "../firebase";
 import { isFunboxActive } from "../test/funbox/list";
 import * as TestState from "../test/test-state";
 import { showNoticeNotification } from "../states/notifications";
-import * as NavigationEvent from "../observables/navigation-event";
-import * as AuthEvent from "../observables/auth-event";
+import * as NavigationEvent from "../events/navigation";
+import * as AuthEvent from "../events/auth";
 
 //source: https://www.youtube.com/watch?v=OstALBk-jTc
 // https://www.youtube.com/watch?v=OstALBk-jTc
diff --git a/frontend/src/ts/controllers/sound-controller.ts b/frontend/src/ts/controllers/sound-controller.ts
index b3103789a720..6261f06ed84a 100644
--- a/frontend/src/ts/controllers/sound-controller.ts
+++ b/frontend/src/ts/controllers/sound-controller.ts
@@ -1,5 +1,5 @@
 import { Config } from "../config/store";
-import * as ConfigEvent from "../observables/config-event";
+import * as ConfigEvent from "../events/config";
 import { randomElementFromArray } from "../utils/arrays";
 import { randomIntFromRange } from "@monkeytype/util/numbers";
 import { leftState, rightState } from "../test/shift-tracker";
diff --git a/frontend/src/ts/controllers/tag-controller.ts b/frontend/src/ts/controllers/tag-controller.ts
index abc6fcdcf7f4..0d2c07a13e7c 100644
--- a/frontend/src/ts/controllers/tag-controller.ts
+++ b/frontend/src/ts/controllers/tag-controller.ts
@@ -3,7 +3,7 @@ import * as DB from "../db";
 import * as ModesNotice from "../elements/modes-notice";
 import { LocalStorageWithSchema } from "../utils/local-storage-with-schema";
 import { IdSchema } from "@monkeytype/schemas/util";
-import * as AuthEvent from "../observables/auth-event";
+import * as AuthEvent from "../events/auth";
 
 const activeTagsLS = new LocalStorageWithSchema({
   key: "activeTags",
diff --git a/frontend/src/ts/controllers/theme-controller.ts b/frontend/src/ts/controllers/theme-controller.ts
index bca26542ad9d..b83864f6ec29 100644
--- a/frontend/src/ts/controllers/theme-controller.ts
+++ b/frontend/src/ts/controllers/theme-controller.ts
@@ -4,7 +4,7 @@ import { isColorDark, isColorLight } from "../utils/colors";
 import { Config } from "../config/store";
 import { setConfig } from "../config/setters";
 import * as BackgroundFilter from "../elements/custom-background-filter";
-import * as ConfigEvent from "../observables/config-event";
+import * as ConfigEvent from "../events/config";
 import * as DB from "../db";
 import { showNoticeNotification } from "../states/notifications";
 import { debounce } from "throttle-debounce";
diff --git a/frontend/src/ts/controllers/url-handler.tsx b/frontend/src/ts/controllers/url-handler.tsx
index acd5a586828b..7721998bcf01 100644
--- a/frontend/src/ts/controllers/url-handler.tsx
+++ b/frontend/src/ts/controllers/url-handler.tsx
@@ -24,7 +24,7 @@ import Ape from "../ape";
 import { setConfig } from "../config/setters";
 import { Config } from "../config/store";
 import * as DB from "../db";
-import * as AuthEvent from "../observables/auth-event";
+import * as AuthEvent from "../events/auth";
 import { showLoaderBar, hideLoaderBar } from "../states/loader-bar";
 import {
   showNoticeNotification,
diff --git a/frontend/src/ts/db.ts b/frontend/src/ts/db.ts
index 8ecb8255327d..0a1b9e23902d 100644
--- a/frontend/src/ts/db.ts
+++ b/frontend/src/ts/db.ts
@@ -28,7 +28,7 @@ import {
 } from "./constants/default-snapshot";
 import { getFirstDayOfTheWeek } from "./utils/date-and-time";
 import { Language } from "@monkeytype/schemas/languages";
-import * as AuthEvent from "./observables/auth-event";
+import * as AuthEvent from "./events/auth";
 import {
   configurationPromise,
   get as getServerConfiguration,
diff --git a/frontend/src/ts/elements/account/result-filters.ts b/frontend/src/ts/elements/account/result-filters.ts
index 35410cc996b7..04f8e36e5e61 100644
--- a/frontend/src/ts/elements/account/result-filters.ts
+++ b/frontend/src/ts/elements/account/result-filters.ts
@@ -22,7 +22,7 @@ import defaultResultFilters from "../../constants/default-result-filters";
 import { getAllFunboxes } from "@monkeytype/funbox";
 import { Snapshot } from "../../constants/default-snapshot";
 import { LanguageList } from "../../constants/languages";
-import * as AuthEvent from "../../observables/auth-event";
+import * as AuthEvent from "../../events/auth";
 import { sanitize } from "../../utils/sanitize";
 import { qs, qsa } from "../../utils/dom";
 
diff --git a/frontend/src/ts/elements/custom-background-filter.ts b/frontend/src/ts/elements/custom-background-filter.ts
index 21f5e9973d89..2b335bafcc45 100644
--- a/frontend/src/ts/elements/custom-background-filter.ts
+++ b/frontend/src/ts/elements/custom-background-filter.ts
@@ -1,6 +1,6 @@
 import { CustomBackgroundFilter } from "@monkeytype/schemas/configs";
 import { setConfig } from "../config/setters";
-import * as ConfigEvent from "../observables/config-event";
+import * as ConfigEvent from "../events/config";
 import { debounce } from "throttle-debounce";
 import { qs, qsr } from "../utils/dom";
 
diff --git a/frontend/src/ts/elements/keymap.ts b/frontend/src/ts/elements/keymap.ts
index 114acdb8f8e3..3f157efb39d2 100644
--- a/frontend/src/ts/elements/keymap.ts
+++ b/frontend/src/ts/elements/keymap.ts
@@ -1,6 +1,6 @@
 import { Config } from "../config/store";
-import * as ConfigEvent from "../observables/config-event";
-import * as KeymapEvent from "../observables/keymap-event";
+import * as ConfigEvent from "../events/config";
+import * as KeymapEvent from "../events/keymap";
 import * as Misc from "../utils/misc";
 import * as JSONData from "../utils/json-data";
 import * as Hangul from "hangul-js";
diff --git a/frontend/src/ts/elements/modes-notice.ts b/frontend/src/ts/elements/modes-notice.ts
index a1ef87f20660..b9ead88070e8 100644
--- a/frontend/src/ts/elements/modes-notice.ts
+++ b/frontend/src/ts/elements/modes-notice.ts
@@ -4,7 +4,7 @@ import * as DB from "../db";
 import * as Last10Average from "../elements/last-10-average";
 import { Config } from "../config/store";
 import * as TestWords from "../test/test-words";
-import * as ConfigEvent from "../observables/config-event";
+import * as ConfigEvent from "../events/config";
 import { isAuthenticated } from "../firebase";
 import * as CustomTextState from "../legacy-states/custom-text-name";
 import { getLanguageDisplayString } from "../utils/strings";
diff --git a/frontend/src/ts/elements/psa.tsx b/frontend/src/ts/elements/psa.tsx
index 32d053bc0924..3abbf81324a7 100644
--- a/frontend/src/ts/elements/psa.tsx
+++ b/frontend/src/ts/elements/psa.tsx
@@ -6,7 +6,7 @@ import { format } from "date-fns/format";
 import { z } from "zod";
 
 import Ape from "../ape";
-import * as AuthEvent from "../observables/auth-event";
+import * as AuthEvent from "../events/auth";
 import { addBanner } from "../states/banners";
 import { addPsa } from "../states/psas";
 import { secondsToString } from "../utils/date-and-time";
diff --git a/frontend/src/ts/elements/settings/theme-picker.ts b/frontend/src/ts/elements/settings/theme-picker.ts
index 5e88f52b0972..b688aa5e942a 100644
--- a/frontend/src/ts/elements/settings/theme-picker.ts
+++ b/frontend/src/ts/elements/settings/theme-picker.ts
@@ -10,7 +10,7 @@ import {
 } from "../../states/notifications";
 import { showLoaderBar, hideLoaderBar } from "../../states/loader-bar";
 import * as DB from "../../db";
-import * as ConfigEvent from "../../observables/config-event";
+import * as ConfigEvent from "../../events/config";
 import { isAuthenticated } from "../../firebase";
 import { getActivePage } from "../../states/core";
 import { ThemeName } from "@monkeytype/schemas/configs";
diff --git a/frontend/src/ts/observables/auth-event.ts b/frontend/src/ts/events/auth.ts
similarity index 100%
rename from frontend/src/ts/observables/auth-event.ts
rename to frontend/src/ts/events/auth.ts
diff --git a/frontend/src/ts/observables/config-event.ts b/frontend/src/ts/events/config.ts
similarity index 100%
rename from frontend/src/ts/observables/config-event.ts
rename to frontend/src/ts/events/config.ts
diff --git a/frontend/src/ts/observables/connection-event.ts b/frontend/src/ts/events/connection.ts
similarity index 100%
rename from frontend/src/ts/observables/connection-event.ts
rename to frontend/src/ts/events/connection.ts
diff --git a/frontend/src/ts/observables/google-sign-up-event.ts b/frontend/src/ts/events/google-sign-up.ts
similarity index 100%
rename from frontend/src/ts/observables/google-sign-up-event.ts
rename to frontend/src/ts/events/google-sign-up.ts
diff --git a/frontend/src/ts/observables/keymap-event.ts b/frontend/src/ts/events/keymap.ts
similarity index 100%
rename from frontend/src/ts/observables/keymap-event.ts
rename to frontend/src/ts/events/keymap.ts
diff --git a/frontend/src/ts/observables/navigation-event.ts b/frontend/src/ts/events/navigation.ts
similarity index 100%
rename from frontend/src/ts/observables/navigation-event.ts
rename to frontend/src/ts/events/navigation.ts
diff --git a/frontend/src/ts/observables/timer-event.ts b/frontend/src/ts/events/timer.ts
similarity index 100%
rename from frontend/src/ts/observables/timer-event.ts
rename to frontend/src/ts/events/timer.ts
diff --git a/frontend/src/ts/observables/tts-event.ts b/frontend/src/ts/events/tts.ts
similarity index 100%
rename from frontend/src/ts/observables/tts-event.ts
rename to frontend/src/ts/events/tts.ts
diff --git a/frontend/src/ts/firebase.ts b/frontend/src/ts/firebase.ts
index 4ac22ba8f32f..855a83dd0e26 100644
--- a/frontend/src/ts/firebase.ts
+++ b/frontend/src/ts/firebase.ts
@@ -31,7 +31,7 @@ import {
   getAnalytics as firebaseGetAnalytics,
 } from "firebase/analytics";
 import { tryCatch } from "@monkeytype/util/trycatch";
-import { dispatch as dispatchSignUpEvent } from "./observables/google-sign-up-event";
+import { dispatch as dispatchSignUpEvent } from "./events/google-sign-up";
 import { addBanner } from "./states/banners";
 import { setUserId } from "./states/core";
 
diff --git a/frontend/src/ts/input/handlers/insert-text.ts b/frontend/src/ts/input/handlers/insert-text.ts
index 190783c66227..76eb1abb001e 100644
--- a/frontend/src/ts/input/handlers/insert-text.ts
+++ b/frontend/src/ts/input/handlers/insert-text.ts
@@ -21,7 +21,7 @@ import {
 } from "../../test/funbox/list";
 import * as Replay from "../../test/replay";
 import { Config } from "../../config/store";
-import * as KeymapEvent from "../../observables/keymap-event";
+import * as KeymapEvent from "../../events/keymap";
 import * as WeakSpot from "../../test/weak-spot";
 import * as CompositionState from "../../legacy-states/composition";
 import {
diff --git a/frontend/src/ts/legacy-states/connection.ts b/frontend/src/ts/legacy-states/connection.ts
index 6c4506eb1c00..c35bdbff1416 100644
--- a/frontend/src/ts/legacy-states/connection.ts
+++ b/frontend/src/ts/legacy-states/connection.ts
@@ -1,6 +1,6 @@
 import { debounce } from "throttle-debounce";
 import { showSuccessNotification } from "../states/notifications";
-import * as ConnectionEvent from "../observables/connection-event";
+import * as ConnectionEvent from "../events/connection";
 import * as TestState from "../test/test-state";
 import { onDOMReady } from "../utils/dom";
 import { addBanner, removeBanner } from "../states/banners";
diff --git a/frontend/src/ts/modals/google-sign-up.ts b/frontend/src/ts/modals/google-sign-up.ts
index d42ddb8c2613..02a461cd7fb9 100644
--- a/frontend/src/ts/modals/google-sign-up.ts
+++ b/frontend/src/ts/modals/google-sign-up.ts
@@ -15,7 +15,7 @@ import * as AccountController from "../auth";
 import * as CaptchaController from "../controllers/captcha-controller";
 
 import { showLoaderBar, hideLoaderBar } from "../states/loader-bar";
-import { subscribe as subscribeToSignUpEvent } from "../observables/google-sign-up-event";
+import { subscribe as subscribeToSignUpEvent } from "../events/google-sign-up";
 import AnimatedModal from "../utils/animated-modal";
 import { resetIgnoreAuthCallback } from "../firebase";
 import { ValidatedHtmlInputElement } from "../elements/input-validation";
diff --git a/frontend/src/ts/modals/last-signed-out-result.ts b/frontend/src/ts/modals/last-signed-out-result.ts
index 8a7c0f648207..6af572c475fd 100644
--- a/frontend/src/ts/modals/last-signed-out-result.ts
+++ b/frontend/src/ts/modals/last-signed-out-result.ts
@@ -7,7 +7,7 @@ import {
 } from "../states/notifications";
 import { CompletedEvent } from "@monkeytype/schemas/results";
 import { getAuthenticatedUser } from "../firebase";
-import * as AuthEvent from "../observables/auth-event";
+import * as AuthEvent from "../events/auth";
 
 function reset(): void {
   modal.getModal().qs(".result")?.setHtml(`
diff --git a/frontend/src/ts/pages/account-settings.ts b/frontend/src/ts/pages/account-settings.ts
index c23732c83237..2d68b5c7fd95 100644
--- a/frontend/src/ts/pages/account-settings.ts
+++ b/frontend/src/ts/pages/account-settings.ts
@@ -11,7 +11,7 @@ import * as ApeKeyTable from "../elements/account-settings/ape-key-table";
 import * as BlockedUserTable from "../elements/account-settings/blocked-user-table";
 import { showErrorNotification } from "../states/notifications";
 import { z } from "zod";
-import * as AuthEvent from "../observables/auth-event";
+import * as AuthEvent from "../events/auth";
 import { qs, qsa, qsr, onDOMReady } from "../utils/dom";
 import { showPopup } from "../modals/simple-modals-base";
 import { addGithubAuth, addGoogleAuth } from "../auth";
diff --git a/frontend/src/ts/pages/account.ts b/frontend/src/ts/pages/account.ts
index 080ab29e4336..2b747efa2b59 100644
--- a/frontend/src/ts/pages/account.ts
+++ b/frontend/src/ts/pages/account.ts
@@ -20,7 +20,7 @@ import { get as getTypingSpeedUnit } from "../utils/typing-speed-units";
 import { format } from "date-fns/format";
 import * as Skeleton from "../utils/skeleton";
 import type { ScaleChartOptions, LinearScaleOptions } from "chart.js";
-import * as ConfigEvent from "../observables/config-event";
+import * as ConfigEvent from "../events/config";
 import { getActivePage } from "../states/core";
 import { getAuthenticatedUser } from "../firebase";
 
diff --git a/frontend/src/ts/pages/friends.ts b/frontend/src/ts/pages/friends.ts
index 3724aad11c8b..a5c85eba560f 100644
--- a/frontend/src/ts/pages/friends.ts
+++ b/frontend/src/ts/pages/friends.ts
@@ -28,7 +28,7 @@ import { getLanguageDisplayString } from "../utils/strings";
 import * as DB from "../db";
 import { getAuthenticatedUser } from "../firebase";
 import * as ServerConfiguration from "../ape/server-configuration";
-import * as AuthEvent from "../observables/auth-event";
+import * as AuthEvent from "../events/auth";
 import { Connection } from "@monkeytype/schemas/connections";
 import { Friend, UserNameSchema } from "@monkeytype/schemas/users";
 
diff --git a/frontend/src/ts/pages/settings.ts b/frontend/src/ts/pages/settings.ts
index a40605db8e8e..96acb60cc514 100644
--- a/frontend/src/ts/pages/settings.ts
+++ b/frontend/src/ts/pages/settings.ts
@@ -17,7 +17,7 @@ import {
   showSuccessNotification,
 } from "../states/notifications";
 import * as ImportExportSettingsModal from "../modals/import-export-settings";
-import * as ConfigEvent from "../observables/config-event";
+import * as ConfigEvent from "../events/config";
 import { getActivePage } from "../states/core";
 import { PageWithUrlParams } from "./page";
 import { isAuthenticated } from "../firebase";
@@ -48,7 +48,7 @@ import { handleConfigInput } from "../elements/input-validation";
 import { Fonts } from "../constants/fonts";
 import * as CustomBackgroundPicker from "../elements/settings/custom-background-picker";
 import * as CustomFontPicker from "../elements/settings/custom-font-picker";
-import * as AuthEvent from "../observables/auth-event";
+import * as AuthEvent from "../events/auth";
 import * as FpsLimitSection from "../elements/settings/fps-limit-section";
 import { qs, qsa, qsr, onDOMReady } from "../utils/dom";
 import { showPopup } from "../modals/simple-modals-base";
diff --git a/frontend/src/ts/test/caret.ts b/frontend/src/ts/test/caret.ts
index 04a2fd7dc74a..b8d3a5a18634 100644
--- a/frontend/src/ts/test/caret.ts
+++ b/frontend/src/ts/test/caret.ts
@@ -1,7 +1,7 @@
 import { Config } from "../config/store";
 import * as TestInput from "./test-input";
 import * as TestState from "../test/test-state";
-import { subscribe } from "../observables/config-event";
+import { subscribe } from "../events/config";
 import { Caret } from "../elements/caret";
 import * as CompositionState from "../legacy-states/composition";
 import { qsr } from "../utils/dom";
diff --git a/frontend/src/ts/test/funbox/funbox-functions.ts b/frontend/src/ts/test/funbox/funbox-functions.ts
index db4927a82797..92ff99174994 100644
--- a/frontend/src/ts/test/funbox/funbox-functions.ts
+++ b/frontend/src/ts/test/funbox/funbox-functions.ts
@@ -7,7 +7,7 @@ import * as Strings from "../../utils/strings";
 import { randomIntFromRange } from "@monkeytype/util/numbers";
 import * as Arrays from "../../utils/arrays";
 import { save } from "./funbox-memory";
-import * as TTSEvent from "../../observables/tts-event";
+import * as TTSEvent from "../../events/tts";
 import {
   showNoticeNotification,
   showErrorNotification,
@@ -16,7 +16,7 @@ import * as DDR from "../../utils/ddr";
 import * as TestWords from "../test-words";
 import * as TestInput from "../test-input";
 import * as LayoutfluidFunboxTimer from "./layoutfluid-funbox-timer";
-import * as KeymapEvent from "../../observables/keymap-event";
+import * as KeymapEvent from "../../events/keymap";
 import * as MemoryTimer from "./memory-funbox-timer";
 import { getPoem } from "../poetry";
 import * as JSONData from "../../utils/json-data";
diff --git a/frontend/src/ts/test/funbox/funbox.ts b/frontend/src/ts/test/funbox/funbox.ts
index 7d4d846fbcdf..85b4c3845478 100644
--- a/frontend/src/ts/test/funbox/funbox.ts
+++ b/frontend/src/ts/test/funbox/funbox.ts
@@ -24,7 +24,7 @@ import {
 } from "./list";
 import { tryCatch } from "@monkeytype/util/trycatch";
 import { qs, qsa } from "../../utils/dom";
-import * as ConfigEvent from "../../observables/config-event";
+import * as ConfigEvent from "../../events/config";
 
 export function toggleScript(...params: string[]): void {
   if (Config.funbox.length === 0) return;
diff --git a/frontend/src/ts/test/live-acc.ts b/frontend/src/ts/test/live-acc.ts
index cda6654997a2..71093e0209ec 100644
--- a/frontend/src/ts/test/live-acc.ts
+++ b/frontend/src/ts/test/live-acc.ts
@@ -1,6 +1,6 @@
 import { Config } from "../config/store";
 import * as TestState from "../test/test-state";
-import * as ConfigEvent from "../observables/config-event";
+import * as ConfigEvent from "../events/config";
 import { applyReducedMotion } from "../utils/misc";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
 import { qs } from "../utils/dom";
diff --git a/frontend/src/ts/test/live-burst.ts b/frontend/src/ts/test/live-burst.ts
index 3f1b6c308d64..ee4da9569393 100644
--- a/frontend/src/ts/test/live-burst.ts
+++ b/frontend/src/ts/test/live-burst.ts
@@ -1,6 +1,6 @@
 import { Config } from "../config/store";
 import * as TestState from "../test/test-state";
-import * as ConfigEvent from "../observables/config-event";
+import * as ConfigEvent from "../events/config";
 import Format from "../singletons/format";
 import { applyReducedMotion } from "../utils/misc";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
diff --git a/frontend/src/ts/test/live-speed.ts b/frontend/src/ts/test/live-speed.ts
index a35090a2beac..9f45a319ac68 100644
--- a/frontend/src/ts/test/live-speed.ts
+++ b/frontend/src/ts/test/live-speed.ts
@@ -1,6 +1,6 @@
 import { Config } from "../config/store";
 import * as TestState from "./test-state";
-import * as ConfigEvent from "../observables/config-event";
+import * as ConfigEvent from "../events/config";
 import Format from "../singletons/format";
 import { applyReducedMotion } from "../utils/misc";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
diff --git a/frontend/src/ts/test/monkey.ts b/frontend/src/ts/test/monkey.ts
index 2299f2df752b..0ba85f016ed2 100644
--- a/frontend/src/ts/test/monkey.ts
+++ b/frontend/src/ts/test/monkey.ts
@@ -1,6 +1,6 @@
 import { mapRange } from "@monkeytype/util/numbers";
 import { Config } from "../config/store";
-import * as ConfigEvent from "../observables/config-event";
+import * as ConfigEvent from "../events/config";
 import * as TestState from "../test/test-state";
 import * as KeyConverter from "../utils/key-converter";
 import { qs } from "../utils/dom";
diff --git a/frontend/src/ts/test/pace-caret.ts b/frontend/src/ts/test/pace-caret.ts
index 5dd45a69ba84..0c5e5314c140 100644
--- a/frontend/src/ts/test/pace-caret.ts
+++ b/frontend/src/ts/test/pace-caret.ts
@@ -3,7 +3,7 @@ import { Config } from "../config/store";
 import * as DB from "../db";
 import * as Misc from "../utils/misc";
 import * as TestState from "./test-state";
-import * as ConfigEvent from "../observables/config-event";
+import * as ConfigEvent from "../events/config";
 import { getActiveFunboxes } from "./funbox/list";
 import { Caret } from "../elements/caret";
 import { qsr } from "../utils/dom";
diff --git a/frontend/src/ts/test/practise-words.ts b/frontend/src/ts/test/practise-words.ts
index f84b178bfed7..481ff1f5dd10 100644
--- a/frontend/src/ts/test/practise-words.ts
+++ b/frontend/src/ts/test/practise-words.ts
@@ -5,7 +5,7 @@ import { Config } from "../config/store";
 import { setConfig } from "../config/setters";
 import * as CustomText from "./custom-text";
 import * as TestInput from "./test-input";
-import * as ConfigEvent from "../observables/config-event";
+import * as ConfigEvent from "../events/config";
 import { setCustomTextName } from "../legacy-states/custom-text-name";
 import { Mode } from "@monkeytype/schemas/shared";
 import { CustomTextSettings } from "@monkeytype/schemas/results";
diff --git a/frontend/src/ts/test/result.ts b/frontend/src/ts/test/result.ts
index 98d63f85f2eb..8d4c57f12f91 100644
--- a/frontend/src/ts/test/result.ts
+++ b/frontend/src/ts/test/result.ts
@@ -31,7 +31,7 @@ import * as TestInput from "./test-input";
 import * as TestStats from "./test-stats";
 import * as TestUI from "./test-ui";
 import * as TodayTracker from "./today-tracker";
-import * as ConfigEvent from "../observables/config-event";
+import * as ConfigEvent from "../events/config";
 import * as Focus from "./focus";
 import * as CustomText from "./custom-text";
 import * as CustomTextState from "./../legacy-states/custom-text-name";
diff --git a/frontend/src/ts/test/test-config.ts b/frontend/src/ts/test/test-config.ts
index 3a1ea2b6e679..adb0070b9e09 100644
--- a/frontend/src/ts/test/test-config.ts
+++ b/frontend/src/ts/test/test-config.ts
@@ -1,11 +1,11 @@
 import { ConfigValue, QuoteLength } from "@monkeytype/schemas/configs";
 import { Mode } from "@monkeytype/schemas/shared";
 import { Config } from "../config/store";
-import * as ConfigEvent from "../observables/config-event";
+import * as ConfigEvent from "../events/config";
 import { getActivePage } from "../states/core";
 import { applyReducedMotion } from "../utils/misc";
 import { areUnsortedArraysEqual } from "../utils/arrays";
-import * as AuthEvent from "../observables/auth-event";
+import * as AuthEvent from "../events/auth";
 import { qs, qsa } from "../utils/dom";
 
 export function show(): void {
diff --git a/frontend/src/ts/test/test-logic.ts b/frontend/src/ts/test/test-logic.ts
index 9de874aa6402..af90c50e844c 100644
--- a/frontend/src/ts/test/test-logic.ts
+++ b/frontend/src/ts/test/test-logic.ts
@@ -32,13 +32,13 @@ import * as TestWords from "./test-words";
 import * as WordsGenerator from "./words-generator";
 import * as TestState from "./test-state";
 import * as PageTransition from "../legacy-states/page-transition";
-import * as ConfigEvent from "../observables/config-event";
-import * as TimerEvent from "../observables/timer-event";
+import * as ConfigEvent from "../events/config";
+import * as TimerEvent from "../events/timer";
 import objectHash from "object-hash";
 import * as AnalyticsController from "../controllers/analytics-controller";
 import { getAuthenticatedUser, isAuthenticated } from "../firebase";
 import * as ConnectionState from "../legacy-states/connection";
-import * as KeymapEvent from "../observables/keymap-event";
+import * as KeymapEvent from "../events/keymap";
 import * as LazyModeState from "../legacy-states/remember-lazy-mode";
 import Format from "../singletons/format";
 import { QuoteLength, QuoteLengthConfig } from "@monkeytype/schemas/configs";
diff --git a/frontend/src/ts/test/test-timer.ts b/frontend/src/ts/test/test-timer.ts
index 1ce1314d1039..cf0503db1a5f 100644
--- a/frontend/src/ts/test/test-timer.ts
+++ b/frontend/src/ts/test/test-timer.ts
@@ -19,8 +19,8 @@ import * as Caret from "./caret";
 import * as SlowTimer from "../legacy-states/slow-timer";
 import * as TestState from "./test-state";
 import * as Time from "../legacy-states/time";
-import * as TimerEvent from "../observables/timer-event";
-import * as KeymapEvent from "../observables/keymap-event";
+import * as TimerEvent from "../events/timer";
+import * as KeymapEvent from "../events/keymap";
 import * as LayoutfluidFunboxTimer from "../test/funbox/layoutfluid-funbox-timer";
 import { KeymapLayout, Layout } from "@monkeytype/schemas/configs";
 import * as SoundController from "../controllers/sound-controller";
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index 4218c35c50eb..655355bfb4c7 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -15,7 +15,7 @@ import * as Strings from "../utils/strings";
 import { blendTwoHexColors } from "../utils/colors";
 import { get as getTypingSpeedUnit } from "../utils/typing-speed-units";
 import * as CompositionState from "../legacy-states/composition";
-import * as ConfigEvent from "../observables/config-event";
+import * as ConfigEvent from "../events/config";
 import * as Hangul from "hangul-js";
 import * as ResultWordHighlight from "../elements/result-word-highlight";
 import { getActivePage } from "../states/core";
@@ -35,7 +35,7 @@ import {
 import * as SoundController from "../controllers/sound-controller";
 import * as Numbers from "@monkeytype/util/numbers";
 import * as TestStats from "./test-stats";
-import * as KeymapEvent from "../observables/keymap-event";
+import * as KeymapEvent from "../events/keymap";
 import * as LiveAcc from "./live-acc";
 import * as Focus from "../test/focus";
 import * as TimerProgress from "../test/timer-progress";
diff --git a/frontend/src/ts/test/timer-progress.ts b/frontend/src/ts/test/timer-progress.ts
index 90f4ce76840e..7f961fe4f853 100644
--- a/frontend/src/ts/test/timer-progress.ts
+++ b/frontend/src/ts/test/timer-progress.ts
@@ -5,7 +5,7 @@ import * as TestWords from "./test-words";
 import * as TestInput from "./test-input";
 import * as Time from "../legacy-states/time";
 import * as TestState from "./test-state";
-import * as ConfigEvent from "../observables/config-event";
+import * as ConfigEvent from "../events/config";
 import { applyReducedMotion } from "../utils/misc";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
 import { animate } from "animejs";
diff --git a/frontend/src/ts/test/tts.ts b/frontend/src/ts/test/tts.ts
index a32d61947ab6..f92d1e8891c5 100644
--- a/frontend/src/ts/test/tts.ts
+++ b/frontend/src/ts/test/tts.ts
@@ -1,7 +1,7 @@
 import { Config } from "../config/store";
 import * as JSONData from "../utils/json-data";
-import * as ConfigEvent from "../observables/config-event";
-import * as TTSEvent from "../observables/tts-event";
+import * as ConfigEvent from "../events/config";
+import * as TTSEvent from "../events/tts";
 
 let voice: SpeechSynthesisUtterance | undefined;
 
diff --git a/frontend/src/ts/ui.ts b/frontend/src/ts/ui.ts
index 73991df8112b..599f1ffa3a30 100644
--- a/frontend/src/ts/ui.ts
+++ b/frontend/src/ts/ui.ts
@@ -2,7 +2,7 @@ import { Config } from "./config/store";
 import * as Caret from "./test/caret";
 import * as CustomText from "./test/custom-text";
 import * as TestState from "./test/test-state";
-import * as ConfigEvent from "./observables/config-event";
+import * as ConfigEvent from "./events/config";
 import { debounce, throttle } from "throttle-debounce";
 import * as TestUI from "./test/test-ui";
 import { getActivePage, getGlobalOffsetTop } from "./states/core";

From f7865f9835fb57eb7ed3e3adaa373fe2fa491c86 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 18 Mar 2026 20:58:35 +0100
Subject: [PATCH 4/7] brr

---
 frontend/src/ts/auth.tsx                      |  8 ++--
 frontend/src/ts/commandline/lists/themes.ts   |  4 +-
 .../pages/profile/ProfileSearchPage.tsx       |  7 +++-
 frontend/src/ts/config/lifecycle.ts           |  6 +--
 frontend/src/ts/config/setters.ts             |  6 +--
 frontend/src/ts/controllers/ad-controller.ts  |  4 +-
 .../ts/controllers/challenge-controller.ts    |  4 +-
 .../src/ts/controllers/chart-controller.ts    |  4 +-
 .../src/ts/controllers/quotes-controller.ts   |  4 +-
 .../src/ts/controllers/route-controller.ts    | 16 ++++----
 .../src/ts/controllers/sound-controller.ts    |  4 +-
 frontend/src/ts/controllers/tag-controller.ts |  4 +-
 .../src/ts/controllers/theme-controller.ts    |  4 +-
 frontend/src/ts/controllers/url-handler.tsx   |  4 +-
 frontend/src/ts/db.ts                         |  4 +-
 .../src/ts/elements/account/result-filters.ts |  4 +-
 .../ts/elements/custom-background-filter.ts   |  4 +-
 frontend/src/ts/elements/keymap.ts            |  8 ++--
 frontend/src/ts/elements/modes-notice.ts      |  6 +--
 frontend/src/ts/elements/psa.tsx              |  4 +-
 .../src/ts/elements/settings/theme-picker.ts  |  4 +-
 frontend/src/ts/events/auth.ts                | 23 ++---------
 frontend/src/ts/events/config.ts              | 22 ++---------
 frontend/src/ts/events/connection.ts          | 23 ++---------
 frontend/src/ts/events/google-sign-up.ts      | 29 +++-----------
 frontend/src/ts/events/keymap.ts              | 38 ++++++-------------
 frontend/src/ts/events/navigation.ts          | 23 +++--------
 frontend/src/ts/events/timer.ts               | 23 ++++-------
 frontend/src/ts/events/tts.ts                 | 19 +---------
 frontend/src/ts/firebase.ts                   |  4 +-
 frontend/src/ts/input/handlers/insert-text.ts |  4 +-
 frontend/src/ts/legacy-states/connection.ts   |  4 +-
 frontend/src/ts/modals/google-sign-up.ts      |  4 +-
 .../src/ts/modals/last-signed-out-result.ts   |  4 +-
 frontend/src/ts/pages/account-settings.ts     |  4 +-
 frontend/src/ts/pages/account.ts              |  4 +-
 frontend/src/ts/pages/friends.ts              |  4 +-
 frontend/src/ts/pages/settings.ts             | 10 ++---
 frontend/src/ts/test/caret.ts                 |  4 +-
 .../src/ts/test/funbox/funbox-functions.ts    |  8 ++--
 frontend/src/ts/test/funbox/funbox.ts         |  4 +-
 frontend/src/ts/test/live-acc.ts              |  4 +-
 frontend/src/ts/test/live-burst.ts            |  4 +-
 frontend/src/ts/test/live-speed.ts            |  4 +-
 frontend/src/ts/test/monkey.ts                |  4 +-
 frontend/src/ts/test/pace-caret.ts            |  4 +-
 frontend/src/ts/test/practise-words.ts        |  4 +-
 frontend/src/ts/test/result.ts                |  4 +-
 frontend/src/ts/test/test-config.ts           |  8 ++--
 frontend/src/ts/test/test-logic.ts            | 16 ++++----
 frontend/src/ts/test/test-timer.ts            | 14 +++----
 frontend/src/ts/test/test-ui.ts               |  8 ++--
 frontend/src/ts/test/timer-progress.ts        |  4 +-
 frontend/src/ts/test/tts.ts                   |  8 ++--
 frontend/src/ts/ui.ts                         |  4 +-
 55 files changed, 174 insertions(+), 287 deletions(-)

diff --git a/frontend/src/ts/auth.tsx b/frontend/src/ts/auth.tsx
index f2a9c35c2beb..39d411e64fd3 100644
--- a/frontend/src/ts/auth.tsx
+++ b/frontend/src/ts/auth.tsx
@@ -12,7 +12,7 @@ import Ape from "./ape";
 import { showRegisterCaptchaModal } from "./components/modals/RegisterCaptchaModal";
 import { updateFromServer as updateConfigFromServer } from "./config/remote";
 import * as DB from "./db";
-import * as AuthEvent from "./events/auth";
+import { authEvent } from "./events/auth";
 import {
   isAuthAvailable,
   getAuthenticatedUser,
@@ -131,7 +131,7 @@ export async function loadUser(_user: UserType): Promise<void> {
     signOut();
     return;
   }
-  AuthEvent.dispatch({ type: "snapshotUpdated", data: { isInitial: true } });
+  authEvent.dispatch({ type: "snapshotUpdated", data: { isInitial: true } });
 }
 
 export async function onAuthStateChanged(
@@ -155,7 +155,7 @@ export async function onAuthStateChanged(
     void Sentry.clearUser();
   }
 
-  AuthEvent.dispatch({
+  authEvent.dispatch({
     type: "authStateChanged",
     data: { isUserSignedIn: user !== null, loadPromise: userPromise },
   });
@@ -231,7 +231,7 @@ async function addAuthProvider(
     await linkWithPopup(user, provider);
     hideLoaderBar();
     showSuccessNotification(`${providerName} authentication added`);
-    AuthEvent.dispatch({ type: "authConfigUpdated" });
+    authEvent.dispatch({ type: "authConfigUpdated" });
   } catch (error) {
     hideLoaderBar();
     showErrorNotification(`Failed to add ${providerName} authentication`, {
diff --git a/frontend/src/ts/commandline/lists/themes.ts b/frontend/src/ts/commandline/lists/themes.ts
index dbfbc7e571ef..394ca2c29821 100644
--- a/frontend/src/ts/commandline/lists/themes.ts
+++ b/frontend/src/ts/commandline/lists/themes.ts
@@ -5,7 +5,7 @@ import * as ThemeController from "../../controllers/theme-controller";
 import { Command, CommandsSubgroup } from "../types";
 import { ThemesList, ThemeWithName } from "../../constants/themes";
 import { not } from "@monkeytype/util/predicates";
-import * as ConfigEvent from "../../events/config";
+import { configEvent } from "../../events/config";
 import * as getErrorMessage from "../../utils/error";
 
 const isFavorite = (theme: ThemeWithName): boolean =>
@@ -77,7 +77,7 @@ export function update(themes: ThemeWithName[]): void {
 }
 
 // subscribe to theme-related config events to update the theme command list
-ConfigEvent.subscribe(({ key }) => {
+configEvent.subscribe(({ key }) => {
   if (key === "favThemes") {
     // update themes list when favorites change
     try {
diff --git a/frontend/src/ts/components/pages/profile/ProfileSearchPage.tsx b/frontend/src/ts/components/pages/profile/ProfileSearchPage.tsx
index 259fa35082f7..6f2076910f1a 100644
--- a/frontend/src/ts/components/pages/profile/ProfileSearchPage.tsx
+++ b/frontend/src/ts/components/pages/profile/ProfileSearchPage.tsx
@@ -2,7 +2,7 @@ import { UserNameSchema } from "@monkeytype/schemas/users";
 import { createForm } from "@tanstack/solid-form";
 import { createEffect, createSignal, JSXElement, Show } from "solid-js";
 
-import * as NavigationEvent from "../../../events/navigation";
+import { navigationEvent } from "../../../events/navigation";
 import { useRefWithUtils } from "../../../hooks/useRefWithUtils";
 import { queryClient } from "../../../queries";
 import { getUserProfile } from "../../../queries/profile";
@@ -27,7 +27,10 @@ export function ProfileSearchPage(): JSXElement {
     onSubmit: async ({ value }) => {
       setEditable(false);
       try {
-        NavigationEvent.dispatch(`/profile/${value.username}`, {});
+        navigationEvent.dispatch({
+          url: `/profile/${value.username}`,
+          options: {},
+        });
       } finally {
         setEditable(true);
       }
diff --git a/frontend/src/ts/config/lifecycle.ts b/frontend/src/ts/config/lifecycle.ts
index 04fa6147fb00..9402afa95698 100644
--- a/frontend/src/ts/config/lifecycle.ts
+++ b/frontend/src/ts/config/lifecycle.ts
@@ -11,7 +11,7 @@ import {
 } from "./persistence";
 import { Config, setConfigStore } from "./store";
 import { getDefaultConfig } from "../constants/default-config";
-import * as ConfigEvent from "../events/config";
+import { configEvent } from "../events/config";
 import { migrateConfig } from "./utils";
 import { promiseWithResolvers, typedKeys } from "../utils/misc";
 import { setConfig } from "./setters";
@@ -76,7 +76,7 @@ export async function applyConfig(
   //migrate old values if needed, remove additional keys and merge with default config
   const fullConfig: ConfigSchemas.Config = migrateConfig(partialConfig);
 
-  ConfigEvent.dispatch({ key: "fullConfigChange" });
+  configEvent.dispatch({ key: "fullConfigChange" });
 
   const defaultConfig = getDefaultConfig();
   for (const key of typedKeys(fullConfig)) {
@@ -107,7 +107,7 @@ export async function applyConfig(
     saveToLocalStorage(key);
   }
 
-  ConfigEvent.dispatch({ key: "fullConfigChangeFinished" });
+  configEvent.dispatch({ key: "fullConfigChangeFinished" });
   setConfigStore(reconcile(Config));
 }
 
diff --git a/frontend/src/ts/config/setters.ts b/frontend/src/ts/config/setters.ts
index 2dca54e2c731..385b948fc428 100644
--- a/frontend/src/ts/config/setters.ts
+++ b/frontend/src/ts/config/setters.ts
@@ -3,7 +3,7 @@ import { ZodType as ZodSchema } from "zod";
 import { saveToLocalStorage } from "../config/persistence";
 import { configMetadata, ConfigMetadataObject } from "./metadata";
 import { isConfigValueValid } from "./validation";
-import * as ConfigEvent from "../events/config";
+import { configEvent } from "../events/config";
 import { showNoticeNotification } from "../states/notifications";
 import {
   canSetConfigWithCurrentFunboxes,
@@ -124,7 +124,7 @@ export function setConfig<T extends keyof ConfigSchemas.Config>(
   if (!options?.nosave) saveToLocalStorage(key, options?.nosave);
 
   // @ts-expect-error i can't figure this out
-  ConfigEvent.dispatch({
+  configEvent.dispatch({
     key: key,
     newValue: value,
     nosave: options?.nosave ?? false,
@@ -195,7 +195,7 @@ export function toggleFunbox(funbox: FunboxName, nosave?: boolean): boolean {
 
   Config.funbox = newConfig;
   saveToLocalStorage("funbox", nosave);
-  ConfigEvent.dispatch({
+  configEvent.dispatch({
     key: "funbox",
     newValue: Config.funbox,
     nosave,
diff --git a/frontend/src/ts/controllers/ad-controller.ts b/frontend/src/ts/controllers/ad-controller.ts
index 13e6b3ec589f..f8f471827be8 100644
--- a/frontend/src/ts/controllers/ad-controller.ts
+++ b/frontend/src/ts/controllers/ad-controller.ts
@@ -1,6 +1,6 @@
 /* oxlint-disable no-unsafe-member-access */
 import { debounce } from "throttle-debounce";
-import * as ConfigEvent from "../events/config";
+import { configEvent } from "../events/config";
 import { Config } from "../config/store";
 import * as TestState from "../test/test-state";
 import * as EG from "./eg-ad-controller";
@@ -286,7 +286,7 @@ window.addEventListener("resize", () => {
   debouncedBreakpoint2Update();
 });
 
-ConfigEvent.subscribe(({ key, newValue }) => {
+configEvent.subscribe(({ key, newValue }) => {
   if (key === "ads") {
     if (newValue === "off") {
       removeAll();
diff --git a/frontend/src/ts/controllers/challenge-controller.ts b/frontend/src/ts/controllers/challenge-controller.ts
index cdf5f6214047..2e7c145ea129 100644
--- a/frontend/src/ts/controllers/challenge-controller.ts
+++ b/frontend/src/ts/controllers/challenge-controller.ts
@@ -10,7 +10,7 @@ import * as Funbox from "../test/funbox/funbox";
 
 import { Config } from "../config/store";
 import { setConfig } from "../config/setters";
-import * as ConfigEvent from "../events/config";
+import { configEvent } from "../events/config";
 import * as TestState from "../test/test-state";
 
 import { showLoaderBar, hideLoaderBar } from "../states/loader-bar";
@@ -389,7 +389,7 @@ export async function setup(challengeName: string): Promise<boolean> {
   }
 }
 
-ConfigEvent.subscribe(({ key }) => {
+configEvent.subscribe(({ key }) => {
   if (
     [
       "difficulty",
diff --git a/frontend/src/ts/controllers/chart-controller.ts b/frontend/src/ts/controllers/chart-controller.ts
index e2d3e7e74874..6fc1a33d6807 100644
--- a/frontend/src/ts/controllers/chart-controller.ts
+++ b/frontend/src/ts/controllers/chart-controller.ts
@@ -60,7 +60,7 @@ Chart.defaults.elements.line.fill = "origin";
 import "chartjs-adapter-date-fns";
 import { format } from "date-fns/format";
 import { Config } from "../config/store";
-import * as ConfigEvent from "../events/config";
+import { configEvent } from "../events/config";
 import * as TestInput from "../test/test-input";
 import * as DateTime from "../utils/date-and-time";
 import * as Arrays from "../utils/arrays";
@@ -1354,7 +1354,7 @@ createDebouncedEffectOn(125, getTheme, (theme) => {
   void miniResult.updateColors(theme);
 });
 
-ConfigEvent.subscribe(({ key, newValue }) => {
+configEvent.subscribe(({ key, newValue }) => {
   if (key === "accountChart" && getActivePage() === "account") {
     updateAccountChartButtons();
     accountHistory.update();
diff --git a/frontend/src/ts/controllers/quotes-controller.ts b/frontend/src/ts/controllers/quotes-controller.ts
index df610a2f1906..53eac99b1095 100644
--- a/frontend/src/ts/controllers/quotes-controller.ts
+++ b/frontend/src/ts/controllers/quotes-controller.ts
@@ -1,7 +1,7 @@
 import { removeLanguageSize } from "../utils/strings";
 import { randomElementFromArray, shuffle } from "../utils/arrays";
 import { cachedFetchJson } from "../utils/json-data";
-import { subscribe } from "../events/config";
+import { configEvent } from "../events/config";
 import * as DB from "../db";
 import Ape from "../ape";
 import { tryCatch } from "@monkeytype/util/trycatch";
@@ -251,7 +251,7 @@ class QuotesController {
 
 const quoteController = new QuotesController();
 
-subscribe(({ key, newValue }) => {
+configEvent.subscribe(({ key, newValue }) => {
   if (key === "quoteLength") {
     quoteController.updateQuoteQueue(newValue as number[]);
   }
diff --git a/frontend/src/ts/controllers/route-controller.ts b/frontend/src/ts/controllers/route-controller.ts
index c51294fdec8c..58c5d6a5c3f8 100644
--- a/frontend/src/ts/controllers/route-controller.ts
+++ b/frontend/src/ts/controllers/route-controller.ts
@@ -5,8 +5,8 @@ import { isAuthAvailable, isAuthenticated } from "../firebase";
 import { isFunboxActive } from "../test/funbox/list";
 import * as TestState from "../test/test-state";
 import { showNoticeNotification } from "../states/notifications";
-import * as NavigationEvent from "../events/navigation";
-import * as AuthEvent from "../events/auth";
+import { navigationEvent, type NavigateOptions } from "../events/navigation";
+import { authEvent } from "../events/auth";
 
 //source: https://www.youtube.com/watch?v=OstALBk-jTc
 // https://www.youtube.com/watch?v=OstALBk-jTc
@@ -34,7 +34,7 @@ type Route = {
   path: string;
   load: (
     params: Record<string, string>,
-    navigateOptions: NavigationEvent.NavigateOptions,
+    navigateOptions: NavigateOptions,
   ) => Promise<void>;
 };
 
@@ -159,7 +159,7 @@ export async function navigate(
   url = window.location.pathname +
     window.location.search +
     window.location.hash,
-  options = {} as NavigationEvent.NavigateOptions,
+  options = {} as NavigateOptions,
 ): Promise<void> {
   if (
     !options.force &&
@@ -207,9 +207,7 @@ export async function navigate(
   await router(options);
 }
 
-async function router(
-  options = {} as NavigationEvent.NavigateOptions,
-): Promise<void> {
+async function router(options = {} as NavigateOptions): Promise<void> {
   const matches = routes.map((r) => {
     return {
       route: r,
@@ -249,11 +247,11 @@ document.addEventListener("DOMContentLoaded", () => {
   });
 });
 
-NavigationEvent.subscribe((url, options) => {
+navigationEvent.subscribe(({ url, options }) => {
   void navigate(url, options);
 });
 
-AuthEvent.subscribe((event) => {
+authEvent.subscribe((event) => {
   if (event.type === "authStateChanged") {
     let keyframes = [
       {
diff --git a/frontend/src/ts/controllers/sound-controller.ts b/frontend/src/ts/controllers/sound-controller.ts
index 6261f06ed84a..24e01e6b397a 100644
--- a/frontend/src/ts/controllers/sound-controller.ts
+++ b/frontend/src/ts/controllers/sound-controller.ts
@@ -1,5 +1,5 @@
 import { Config } from "../config/store";
-import * as ConfigEvent from "../events/config";
+import { configEvent } from "../events/config";
 import { randomElementFromArray } from "../utils/arrays";
 import { randomIntFromRange } from "@monkeytype/util/numbers";
 import { leftState, rightState } from "../test/shift-tracker";
@@ -833,7 +833,7 @@ function setVolume(val: number): void {
   }
 }
 
-ConfigEvent.subscribe(({ key, newValue }) => {
+configEvent.subscribe(({ key, newValue }) => {
   if (key === "playSoundOnClick" && newValue !== "off") void init();
   if (key === "soundVolume") {
     setVolume(newValue);
diff --git a/frontend/src/ts/controllers/tag-controller.ts b/frontend/src/ts/controllers/tag-controller.ts
index 0d2c07a13e7c..c1a414c9eba0 100644
--- a/frontend/src/ts/controllers/tag-controller.ts
+++ b/frontend/src/ts/controllers/tag-controller.ts
@@ -3,7 +3,7 @@ import * as DB from "../db";
 import * as ModesNotice from "../elements/modes-notice";
 import { LocalStorageWithSchema } from "../utils/local-storage-with-schema";
 import { IdSchema } from "@monkeytype/schemas/util";
-import * as AuthEvent from "../events/auth";
+import { authEvent } from "../events/auth";
 
 const activeTagsLS = new LocalStorageWithSchema({
   key: "activeTags",
@@ -77,7 +77,7 @@ export function loadActiveFromLocalStorage(): void {
   saveActiveToLocalStorage();
 }
 
-AuthEvent.subscribe((event) => {
+authEvent.subscribe((event) => {
   if (event.type === "snapshotUpdated" && event.data.isInitial) {
     loadActiveFromLocalStorage();
   }
diff --git a/frontend/src/ts/controllers/theme-controller.ts b/frontend/src/ts/controllers/theme-controller.ts
index b83864f6ec29..7cf1d46fde69 100644
--- a/frontend/src/ts/controllers/theme-controller.ts
+++ b/frontend/src/ts/controllers/theme-controller.ts
@@ -4,7 +4,7 @@ import { isColorDark, isColorLight } from "../utils/colors";
 import { Config } from "../config/store";
 import { setConfig } from "../config/setters";
 import * as BackgroundFilter from "../elements/custom-background-filter";
-import * as ConfigEvent from "../events/config";
+import { configEvent } from "../events/config";
 import * as DB from "../db";
 import { showNoticeNotification } from "../states/notifications";
 import { debounce } from "throttle-debounce";
@@ -333,7 +333,7 @@ window
 
 let ignoreConfigEvent = false;
 
-ConfigEvent.subscribe(async ({ key, newValue, nosave }) => {
+configEvent.subscribe(async ({ key, newValue, nosave }) => {
   if (key === "fullConfigChange") {
     ignoreConfigEvent = true;
   }
diff --git a/frontend/src/ts/controllers/url-handler.tsx b/frontend/src/ts/controllers/url-handler.tsx
index 7721998bcf01..27b62003a14a 100644
--- a/frontend/src/ts/controllers/url-handler.tsx
+++ b/frontend/src/ts/controllers/url-handler.tsx
@@ -24,7 +24,7 @@ import Ape from "../ape";
 import { setConfig } from "../config/setters";
 import { Config } from "../config/store";
 import * as DB from "../db";
-import * as AuthEvent from "../events/auth";
+import { authEvent } from "../events/auth";
 import { showLoaderBar, hideLoaderBar } from "../states/loader-bar";
 import {
   showNoticeNotification,
@@ -331,7 +331,7 @@ export function loadChallengeFromUrl(getOverride?: string): void {
     });
 }
 
-AuthEvent.subscribe((event) => {
+authEvent.subscribe((event) => {
   if (event.type === "authStateChanged") {
     const search = window.location.search;
     const hash = window.location.hash;
diff --git a/frontend/src/ts/db.ts b/frontend/src/ts/db.ts
index 0a1b9e23902d..bfe89e9330b8 100644
--- a/frontend/src/ts/db.ts
+++ b/frontend/src/ts/db.ts
@@ -28,7 +28,7 @@ import {
 } from "./constants/default-snapshot";
 import { getFirstDayOfTheWeek } from "./utils/date-and-time";
 import { Language } from "@monkeytype/schemas/languages";
-import * as AuthEvent from "./events/auth";
+import { authEvent } from "./events/auth";
 import {
   configurationPromise,
   get as getServerConfiguration,
@@ -84,7 +84,7 @@ export function setSnapshot(
   }
 
   if (options?.dispatchEvent !== false) {
-    AuthEvent.dispatch({ type: "snapshotUpdated", data: { isInitial: false } });
+    authEvent.dispatch({ type: "snapshotUpdated", data: { isInitial: false } });
   }
 
   setSolidSnapshot(newSnapshot);
diff --git a/frontend/src/ts/elements/account/result-filters.ts b/frontend/src/ts/elements/account/result-filters.ts
index 04f8e36e5e61..cc1a78ea7065 100644
--- a/frontend/src/ts/elements/account/result-filters.ts
+++ b/frontend/src/ts/elements/account/result-filters.ts
@@ -22,7 +22,7 @@ import defaultResultFilters from "../../constants/default-result-filters";
 import { getAllFunboxes } from "@monkeytype/funbox";
 import { Snapshot } from "../../constants/default-snapshot";
 import { LanguageList } from "../../constants/languages";
-import * as AuthEvent from "../../events/auth";
+import { authEvent } from "../../events/auth";
 import { sanitize } from "../../utils/sanitize";
 import { qs, qsa } from "../../utils/dom";
 
@@ -962,7 +962,7 @@ function verifyResultFiltersStructure(filterIn: ResultFilters): ResultFilters {
   return filter;
 }
 
-AuthEvent.subscribe((event) => {
+authEvent.subscribe((event) => {
   if (event.type === "snapshotUpdated" && event.data.isInitial) {
     loadTags();
     void load();
diff --git a/frontend/src/ts/elements/custom-background-filter.ts b/frontend/src/ts/elements/custom-background-filter.ts
index 2b335bafcc45..72663886bee9 100644
--- a/frontend/src/ts/elements/custom-background-filter.ts
+++ b/frontend/src/ts/elements/custom-background-filter.ts
@@ -1,6 +1,6 @@
 import { CustomBackgroundFilter } from "@monkeytype/schemas/configs";
 import { setConfig } from "../config/setters";
-import * as ConfigEvent from "../events/config";
+import { configEvent } from "../events/config";
 import { debounce } from "throttle-debounce";
 import { qs, qsr } from "../utils/dom";
 
@@ -133,7 +133,7 @@ const debouncedSave = debounce(2000, async () => {
   setConfig("customBackgroundFilter", arr);
 });
 
-ConfigEvent.subscribe(({ key, newValue }) => {
+configEvent.subscribe(({ key, newValue }) => {
   if (key === "customBackgroundFilter") {
     loadConfig(newValue);
     apply();
diff --git a/frontend/src/ts/elements/keymap.ts b/frontend/src/ts/elements/keymap.ts
index 3f157efb39d2..cdb305d95090 100644
--- a/frontend/src/ts/elements/keymap.ts
+++ b/frontend/src/ts/elements/keymap.ts
@@ -1,6 +1,6 @@
 import { Config } from "../config/store";
-import * as ConfigEvent from "../events/config";
-import * as KeymapEvent from "../events/keymap";
+import { configEvent } from "../events/config";
+import { keymapEvent } from "../events/keymap";
 import * as Misc from "../utils/misc";
 import * as JSONData from "../utils/json-data";
 import * as Hangul from "hangul-js";
@@ -601,7 +601,7 @@ async function updateLegends(): Promise<void> {
 }
 let ignoreConfigEvent = false;
 
-ConfigEvent.subscribe(({ key }) => {
+configEvent.subscribe(({ key }) => {
   const handleMode = (): void => {
     keymap.qsa(".activeKey").removeClass("activeKey");
     keymap.qsa(".keymapKey").setAttribute("style", "");
@@ -672,7 +672,7 @@ ConfigEvent.subscribe(({ key }) => {
   }
 });
 
-KeymapEvent.subscribe((mode, key, correct) => {
+keymapEvent.subscribe(({ mode, key, correct }) => {
   if (mode === "highlight") {
     highlightKey(key);
   }
diff --git a/frontend/src/ts/elements/modes-notice.ts b/frontend/src/ts/elements/modes-notice.ts
index b9ead88070e8..6f670371044c 100644
--- a/frontend/src/ts/elements/modes-notice.ts
+++ b/frontend/src/ts/elements/modes-notice.ts
@@ -4,7 +4,7 @@ import * as DB from "../db";
 import * as Last10Average from "../elements/last-10-average";
 import { Config } from "../config/store";
 import * as TestWords from "../test/test-words";
-import * as ConfigEvent from "../events/config";
+import { configEvent, type ConfigEventKey } from "../events/config";
 import { isAuthenticated } from "../firebase";
 import * as CustomTextState from "../legacy-states/custom-text-name";
 import { getLanguageDisplayString } from "../utils/strings";
@@ -13,8 +13,8 @@ import { getActiveFunboxes, getActiveFunboxNames } from "../test/funbox/list";
 import { escapeHTML, getMode2 } from "../utils/misc";
 import { qsr } from "../utils/dom";
 
-ConfigEvent.subscribe(({ key }) => {
-  const configKeys: ConfigEvent.ConfigEventKey[] = [
+configEvent.subscribe(({ key }) => {
+  const configKeys: ConfigEventKey[] = [
     "difficulty",
     "blindMode",
     "stopOnError",
diff --git a/frontend/src/ts/elements/psa.tsx b/frontend/src/ts/elements/psa.tsx
index 3abbf81324a7..53010aeb1138 100644
--- a/frontend/src/ts/elements/psa.tsx
+++ b/frontend/src/ts/elements/psa.tsx
@@ -6,7 +6,7 @@ import { format } from "date-fns/format";
 import { z } from "zod";
 
 import Ape from "../ape";
-import * as AuthEvent from "../events/auth";
+import { authEvent } from "../events/auth";
 import { addBanner } from "../states/banners";
 import { addPsa } from "../states/psas";
 import { secondsToString } from "../utils/date-and-time";
@@ -204,7 +204,7 @@ export async function show(): Promise<void> {
   });
 }
 
-AuthEvent.subscribe((event) => {
+authEvent.subscribe((event) => {
   if (event.type === "authStateChanged") {
     void show();
   }
diff --git a/frontend/src/ts/elements/settings/theme-picker.ts b/frontend/src/ts/elements/settings/theme-picker.ts
index b688aa5e942a..5e8856daea3c 100644
--- a/frontend/src/ts/elements/settings/theme-picker.ts
+++ b/frontend/src/ts/elements/settings/theme-picker.ts
@@ -10,7 +10,7 @@ import {
 } from "../../states/notifications";
 import { showLoaderBar, hideLoaderBar } from "../../states/loader-bar";
 import * as DB from "../../db";
-import * as ConfigEvent from "../../events/config";
+import { configEvent } from "../../events/config";
 import { isAuthenticated } from "../../firebase";
 import { getActivePage } from "../../states/core";
 import { ThemeName } from "@monkeytype/schemas/configs";
@@ -415,7 +415,7 @@ qs(".pageSettings #saveCustomThemeButton")?.on("click", async () => {
   void fillCustomButtons();
 });
 
-ConfigEvent.subscribe(({ key }) => {
+configEvent.subscribe(({ key }) => {
   if (key === "theme" && getActivePage() === "settings") {
     updateActiveButton();
   }
diff --git a/frontend/src/ts/events/auth.ts b/frontend/src/ts/events/auth.ts
index 1a9523aeeed5..8747d10862c1 100644
--- a/frontend/src/ts/events/auth.ts
+++ b/frontend/src/ts/events/auth.ts
@@ -1,4 +1,6 @@
-type AuthEvent =
+import { createEvent } from "../hooks/createEvent";
+
+export type AuthEvent =
   | {
       type: "authStateChanged";
       data: { isUserSignedIn: boolean; loadPromise: Promise<void> };
@@ -6,21 +8,4 @@ type AuthEvent =
   | { type: "snapshotUpdated"; data: { isInitial: boolean } }
   | { type: "authConfigUpdated"; data?: undefined };
 
-type SubscribeFunction = (event: AuthEvent) => void;
-
-const subscribers: SubscribeFunction[] = [];
-
-export function subscribe(fn: SubscribeFunction): void {
-  subscribers.push(fn);
-}
-
-export function dispatch(event: AuthEvent): void {
-  subscribers.forEach((fn) => {
-    try {
-      fn(event);
-    } catch (e) {
-      console.error("Auth event subscriber threw an error");
-      console.error(e);
-    }
-  });
-}
+export const authEvent = createEvent<AuthEvent>();
diff --git a/frontend/src/ts/events/config.ts b/frontend/src/ts/events/config.ts
index 4794c6e25b35..3f53dab1edb4 100644
--- a/frontend/src/ts/events/config.ts
+++ b/frontend/src/ts/events/config.ts
@@ -1,11 +1,12 @@
 import { Config } from "@monkeytype/schemas/configs";
+import { createEvent } from "../hooks/createEvent";
 
 export type ConfigEventKey =
   | keyof Config
   | "fullConfigChange"
   | "fullConfigChangeFinished";
 
-type SubscribeParams = {
+export type ConfigEventData = {
   nosave?: boolean;
   fullConfig?: Config;
 } & {
@@ -14,21 +15,4 @@ type SubscribeParams = {
     : { key: K; newValue?: undefined; previousValue?: undefined };
 }[ConfigEventKey];
 
-type SubscribeFunction = (options: SubscribeParams) => void;
-
-const subscribers: SubscribeFunction[] = [];
-
-export function subscribe(fn: SubscribeFunction): void {
-  subscribers.push(fn);
-}
-
-export function dispatch(options: SubscribeParams): void {
-  subscribers.forEach((fn) => {
-    try {
-      fn(options);
-    } catch (e) {
-      console.error("Config event subscriber threw an error");
-      console.error(e);
-    }
-  });
-}
+export const configEvent = createEvent<ConfigEventData>();
diff --git a/frontend/src/ts/events/connection.ts b/frontend/src/ts/events/connection.ts
index ef15553467f3..f47e30538d35 100644
--- a/frontend/src/ts/events/connection.ts
+++ b/frontend/src/ts/events/connection.ts
@@ -1,27 +1,12 @@
-type SubscribeFunction = (state: boolean) => void;
+import { createEvent } from "../hooks/createEvent";
 
-const subscribers: SubscribeFunction[] = [];
-
-export function subscribe(fn: SubscribeFunction): void {
-  subscribers.push(fn);
-}
+export const connectionEvent = createEvent<boolean>();
 
 window.addEventListener("load", () => {
   window.addEventListener("online", () => {
-    dispatch(true);
+    connectionEvent.dispatch(true);
   });
   window.addEventListener("offline", () => {
-    dispatch(false);
+    connectionEvent.dispatch(false);
   });
 });
-
-function dispatch(state: boolean): void {
-  subscribers.forEach((fn) => {
-    try {
-      fn(state);
-    } catch (e) {
-      console.error("Connection event subscriber threw an error");
-      console.error(e);
-    }
-  });
-}
diff --git a/frontend/src/ts/events/google-sign-up.ts b/frontend/src/ts/events/google-sign-up.ts
index 07e8d0b31b90..afa97168ee1b 100644
--- a/frontend/src/ts/events/google-sign-up.ts
+++ b/frontend/src/ts/events/google-sign-up.ts
@@ -1,26 +1,9 @@
 import { UserCredential } from "firebase/auth";
+import { createEvent } from "../hooks/createEvent";
 
-type SubscribeFunction = (
-  signedInUser: UserCredential,
-  isNewUser: boolean,
-) => void;
+export type GoogleSignUpEventData = {
+  signedInUser: UserCredential;
+  isNewUser: boolean;
+};
 
-const subscribers: SubscribeFunction[] = [];
-
-export function subscribe(fn: SubscribeFunction): void {
-  subscribers.push(fn);
-}
-
-export function dispatch(
-  signedInUser: UserCredential,
-  isNewUser: boolean,
-): void {
-  subscribers.forEach((fn) => {
-    try {
-      fn(signedInUser, isNewUser);
-    } catch (e) {
-      console.error("Google Sign Up event subscriber threw an error");
-      console.error(e);
-    }
-  });
-}
+export const googleSignUpEvent = createEvent<GoogleSignUpEventData>();
diff --git a/frontend/src/ts/events/keymap.ts b/frontend/src/ts/events/keymap.ts
index 48fa8b4a9d2b..a69d228f5848 100644
--- a/frontend/src/ts/events/keymap.ts
+++ b/frontend/src/ts/events/keymap.ts
@@ -1,33 +1,17 @@
-type SubscribeFunction = (
-  mode: "highlight" | "flash",
-  key: string,
-  correct?: boolean,
-) => void;
+import { createEvent } from "../hooks/createEvent";
 
-const subscribers: SubscribeFunction[] = [];
+export type KeymapEventData = {
+  mode: "highlight" | "flash";
+  key: string;
+  correct?: boolean;
+};
 
-export function subscribe(fn: SubscribeFunction): void {
-  subscribers.push(fn);
-}
+export const keymapEvent = createEvent<KeymapEventData>();
 
-export async function flash(key: string, correct?: boolean): Promise<void> {
-  subscribers.forEach((fn) => {
-    try {
-      fn("flash", key, correct);
-    } catch (e) {
-      console.error("Keymap flash event subscriber threw an error");
-      console.error(e);
-    }
-  });
+export function flash(key: string, correct?: boolean): void {
+  keymapEvent.dispatch({ mode: "flash", key, correct });
 }
 
-export async function highlight(key: string): Promise<void> {
-  subscribers.forEach((fn) => {
-    try {
-      fn("highlight", key);
-    } catch (e) {
-      console.error("Keymap highlight event subscriber threw an error");
-      console.error(e);
-    }
-  });
+export function highlight(key: string): void {
+  keymapEvent.dispatch({ mode: "highlight", key });
 }
diff --git a/frontend/src/ts/events/navigation.ts b/frontend/src/ts/events/navigation.ts
index 51d4584a6162..73e62f05afba 100644
--- a/frontend/src/ts/events/navigation.ts
+++ b/frontend/src/ts/events/navigation.ts
@@ -1,3 +1,4 @@
+import { createEvent } from "../hooks/createEvent";
 import { LoadingOptions } from "../pages/page";
 
 export type NavigateOptions = {
@@ -8,21 +9,9 @@ export type NavigateOptions = {
   loadingOptions?: LoadingOptions;
 };
 
-type SubscribeFunction = (url: string, options: NavigateOptions) => void;
-
-const subscribers: SubscribeFunction[] = [];
-
-export function subscribe(fn: SubscribeFunction): void {
-  subscribers.push(fn);
-}
+export type NavigationEventData = {
+  url: string;
+  options: NavigateOptions;
+};
 
-export function dispatch(url: string, options: NavigateOptions): void {
-  subscribers.forEach((fn) => {
-    try {
-      fn(url, options);
-    } catch (e) {
-      console.error("Navigation event subscriber threw an error");
-      console.error(e);
-    }
-  });
-}
+export const navigationEvent = createEvent<NavigationEventData>();
diff --git a/frontend/src/ts/events/timer.ts b/frontend/src/ts/events/timer.ts
index e0326156fbff..e61cc0a719a5 100644
--- a/frontend/src/ts/events/timer.ts
+++ b/frontend/src/ts/events/timer.ts
@@ -1,18 +1,9 @@
-type SubscribeFunction = (key: string, value?: string, value2?: string) => void;
+import { createEvent } from "../hooks/createEvent";
 
-const subscribers: SubscribeFunction[] = [];
+export type TimerEventData = {
+  key: string;
+  value?: string;
+  value2?: string;
+};
 
-export function subscribe(fn: SubscribeFunction): void {
-  subscribers.push(fn);
-}
-
-export function dispatch(key: string, value?: string, value2?: string): void {
-  subscribers.forEach((fn) => {
-    try {
-      fn(key, value, value2);
-    } catch (e) {
-      console.error("Timer event subscriber threw an error");
-      console.error(e);
-    }
-  });
-}
+export const timerEvent = createEvent<TimerEventData>();
diff --git a/frontend/src/ts/events/tts.ts b/frontend/src/ts/events/tts.ts
index 78035cdae529..bd9d663358f1 100644
--- a/frontend/src/ts/events/tts.ts
+++ b/frontend/src/ts/events/tts.ts
@@ -1,18 +1,3 @@
-type SubscribeFunction = (text: string) => void;
+import { createEvent } from "../hooks/createEvent";
 
-const subscribers: SubscribeFunction[] = [];
-
-export function subscribe(fn: SubscribeFunction): void {
-  subscribers.push(fn);
-}
-
-export async function dispatch(text: string): Promise<void> {
-  subscribers.forEach((fn) => {
-    try {
-      fn(text);
-    } catch (e) {
-      console.error("TTS event subscriber threw an error");
-      console.error(e);
-    }
-  });
-}
+export const ttsEvent = createEvent<string>();
diff --git a/frontend/src/ts/firebase.ts b/frontend/src/ts/firebase.ts
index 855a83dd0e26..3a45a7244ec2 100644
--- a/frontend/src/ts/firebase.ts
+++ b/frontend/src/ts/firebase.ts
@@ -31,7 +31,7 @@ import {
   getAnalytics as firebaseGetAnalytics,
 } from "firebase/analytics";
 import { tryCatch } from "@monkeytype/util/trycatch";
-import { dispatch as dispatchSignUpEvent } from "./events/google-sign-up";
+import { googleSignUpEvent } from "./events/google-sign-up";
 import { addBanner } from "./states/banners";
 import { setUserId } from "./states/core";
 
@@ -156,7 +156,7 @@ export async function signInWithPopup(
   }
   const additionalUserInfo = getAdditionalUserInfo(signedInUser);
   if (additionalUserInfo?.isNewUser) {
-    dispatchSignUpEvent(signedInUser, true);
+    googleSignUpEvent.dispatch({ signedInUser, isNewUser: true });
   } else {
     ignoreAuthCallback = false;
     await readyCallback?.(true, signedInUser.user);
diff --git a/frontend/src/ts/input/handlers/insert-text.ts b/frontend/src/ts/input/handlers/insert-text.ts
index 76eb1abb001e..7d99cc3dff96 100644
--- a/frontend/src/ts/input/handlers/insert-text.ts
+++ b/frontend/src/ts/input/handlers/insert-text.ts
@@ -21,7 +21,7 @@ import {
 } from "../../test/funbox/list";
 import * as Replay from "../../test/replay";
 import { Config } from "../../config/store";
-import * as KeymapEvent from "../../events/keymap";
+import { flash } from "../../events/keymap";
 import * as WeakSpot from "../../test/weak-spot";
 import * as CompositionState from "../../legacy-states/composition";
 import {
@@ -172,7 +172,7 @@ export async function onInsertText(options: OnInsertTextParams): Promise<void> {
     TestInput.pushMissedWord(TestWords.words.getCurrent());
   }
   if (Config.keymapMode === "react") {
-    void KeymapEvent.flash(data, correct);
+    void flash(data, correct);
   }
   if (testInput.length === 0) {
     TestInput.setBurstStart(now);
diff --git a/frontend/src/ts/legacy-states/connection.ts b/frontend/src/ts/legacy-states/connection.ts
index c35bdbff1416..a3a6e3dfc3c4 100644
--- a/frontend/src/ts/legacy-states/connection.ts
+++ b/frontend/src/ts/legacy-states/connection.ts
@@ -1,6 +1,6 @@
 import { debounce } from "throttle-debounce";
 import { showSuccessNotification } from "../states/notifications";
-import * as ConnectionEvent from "../events/connection";
+import { connectionEvent } from "../events/connection";
 import * as TestState from "../test/test-state";
 import { onDOMReady } from "../utils/dom";
 import { addBanner, removeBanner } from "../states/banners";
@@ -43,7 +43,7 @@ const throttledHandleState = debounce(5000, () => {
   }
 });
 
-ConnectionEvent.subscribe((newState) => {
+connectionEvent.subscribe((newState) => {
   state = newState;
   throttledHandleState();
 });
diff --git a/frontend/src/ts/modals/google-sign-up.ts b/frontend/src/ts/modals/google-sign-up.ts
index 02a461cd7fb9..33da69dddaf4 100644
--- a/frontend/src/ts/modals/google-sign-up.ts
+++ b/frontend/src/ts/modals/google-sign-up.ts
@@ -15,7 +15,7 @@ import * as AccountController from "../auth";
 import * as CaptchaController from "../controllers/captcha-controller";
 
 import { showLoaderBar, hideLoaderBar } from "../states/loader-bar";
-import { subscribe as subscribeToSignUpEvent } from "../events/google-sign-up";
+import { googleSignUpEvent } from "../events/google-sign-up";
 import AnimatedModal from "../utils/animated-modal";
 import { resetIgnoreAuthCallback } from "../firebase";
 import { ValidatedHtmlInputElement } from "../elements/input-validation";
@@ -171,7 +171,7 @@ async function setup(modalEl: ElementWithUtils): Promise<void> {
   });
 }
 
-subscribeToSignUpEvent((signedInUser, isNewUser) => {
+googleSignUpEvent.subscribe(({ signedInUser, isNewUser }) => {
   if (signedInUser !== undefined && isNewUser) {
     show(signedInUser);
   }
diff --git a/frontend/src/ts/modals/last-signed-out-result.ts b/frontend/src/ts/modals/last-signed-out-result.ts
index 6af572c475fd..ce0c5cdb5b2d 100644
--- a/frontend/src/ts/modals/last-signed-out-result.ts
+++ b/frontend/src/ts/modals/last-signed-out-result.ts
@@ -7,7 +7,7 @@ import {
 } from "../states/notifications";
 import { CompletedEvent } from "@monkeytype/schemas/results";
 import { getAuthenticatedUser } from "../firebase";
-import * as AuthEvent from "../events/auth";
+import { authEvent } from "../events/auth";
 
 function reset(): void {
   modal.getModal().qs(".result")?.setHtml(`
@@ -117,7 +117,7 @@ function hide(): void {
   void modal.hide();
 }
 
-AuthEvent.subscribe((event) => {
+authEvent.subscribe((event) => {
   if (event.type === "snapshotUpdated" && event.data.isInitial) {
     if (TestLogic.notSignedInLastResult !== null) {
       show();
diff --git a/frontend/src/ts/pages/account-settings.ts b/frontend/src/ts/pages/account-settings.ts
index 2d68b5c7fd95..a7dce4331425 100644
--- a/frontend/src/ts/pages/account-settings.ts
+++ b/frontend/src/ts/pages/account-settings.ts
@@ -11,7 +11,7 @@ import * as ApeKeyTable from "../elements/account-settings/ape-key-table";
 import * as BlockedUserTable from "../elements/account-settings/blocked-user-table";
 import { showErrorNotification } from "../states/notifications";
 import { z } from "zod";
-import * as AuthEvent from "../events/auth";
+import { authEvent } from "../events/auth";
 import { qs, qsa, qsr, onDOMReady } from "../utils/dom";
 import { showPopup } from "../modals/simple-modals-base";
 import { addGithubAuth, addGoogleAuth } from "../auth";
@@ -254,7 +254,7 @@ qs(".pageAccountSettings")?.onChild("click", "#addGithubAuth", () => {
   void addGithubAuth();
 });
 
-AuthEvent.subscribe((event) => {
+authEvent.subscribe((event) => {
   if (event.type === "authConfigUpdated") {
     updateUI();
   }
diff --git a/frontend/src/ts/pages/account.ts b/frontend/src/ts/pages/account.ts
index 2b747efa2b59..9232daddee18 100644
--- a/frontend/src/ts/pages/account.ts
+++ b/frontend/src/ts/pages/account.ts
@@ -20,7 +20,7 @@ import { get as getTypingSpeedUnit } from "../utils/typing-speed-units";
 import { format } from "date-fns/format";
 import * as Skeleton from "../utils/skeleton";
 import type { ScaleChartOptions, LinearScaleOptions } from "chart.js";
-import * as ConfigEvent from "../events/config";
+import { configEvent } from "../events/config";
 import { getActivePage } from "../states/core";
 import { getAuthenticatedUser } from "../firebase";
 
@@ -1174,7 +1174,7 @@ qs(".pageAccount")?.onChild("click", ".sendVerificationEmail", async () => {
   qs(".sendVerificationEmail")?.enable();
 });
 
-ConfigEvent.subscribe(({ key }) => {
+configEvent.subscribe(({ key }) => {
   if (getActivePage() === "account" && key === "typingSpeedUnit") {
     void update();
   }
diff --git a/frontend/src/ts/pages/friends.ts b/frontend/src/ts/pages/friends.ts
index a5c85eba560f..81459af97429 100644
--- a/frontend/src/ts/pages/friends.ts
+++ b/frontend/src/ts/pages/friends.ts
@@ -28,7 +28,7 @@ import { getLanguageDisplayString } from "../utils/strings";
 import * as DB from "../db";
 import { getAuthenticatedUser } from "../firebase";
 import * as ServerConfiguration from "../ape/server-configuration";
-import * as AuthEvent from "../events/auth";
+import { authEvent } from "../events/auth";
 import { Connection } from "@monkeytype/schemas/connections";
 import { Friend, UserNameSchema } from "@monkeytype/schemas/users";
 
@@ -567,7 +567,7 @@ onDOMReady(() => {
   Skeleton.save("pageFriends");
 });
 
-AuthEvent.subscribe((event) => {
+authEvent.subscribe((event) => {
   if (event.type === "authStateChanged" && !event.data.isUserSignedIn) {
     pendingRequests = undefined;
     friendsList = undefined;
diff --git a/frontend/src/ts/pages/settings.ts b/frontend/src/ts/pages/settings.ts
index 96acb60cc514..3cf3e11f6bc2 100644
--- a/frontend/src/ts/pages/settings.ts
+++ b/frontend/src/ts/pages/settings.ts
@@ -17,7 +17,7 @@ import {
   showSuccessNotification,
 } from "../states/notifications";
 import * as ImportExportSettingsModal from "../modals/import-export-settings";
-import * as ConfigEvent from "../events/config";
+import { configEvent, type ConfigEventKey } from "../events/config";
 import { getActivePage } from "../states/core";
 import { PageWithUrlParams } from "./page";
 import { isAuthenticated } from "../firebase";
@@ -48,7 +48,7 @@ import { handleConfigInput } from "../elements/input-validation";
 import { Fonts } from "../constants/fonts";
 import * as CustomBackgroundPicker from "../elements/settings/custom-background-picker";
 import * as CustomFontPicker from "../elements/settings/custom-font-picker";
-import * as AuthEvent from "../events/auth";
+import { authEvent } from "../events/auth";
 import * as FpsLimitSection from "../elements/settings/fps-limit-section";
 import { qs, qsa, qsr, onDOMReady } from "../utils/dom";
 import { showPopup } from "../modals/simple-modals-base";
@@ -598,7 +598,7 @@ export async function updateFilterSectionVisibility(): Promise<void> {
 
 export async function update(
   options: {
-    eventKey?: ConfigEvent.ConfigEventKey;
+    eventKey?: ConfigEventKey;
   } = {},
 ): Promise<void> {
   if (getActivePage() !== "settings") {
@@ -1027,7 +1027,7 @@ qs(".pageSettings #resetSettingsButton")?.on("click", () => {
   showPopup("resetSettings");
 });
 
-ConfigEvent.subscribe(({ key, newValue }) => {
+configEvent.subscribe(({ key, newValue }) => {
   if (key === "fullConfigChange") setEventDisabled(true);
   if (key === "fullConfigChangeFinished") setEventDisabled(false);
   if (key === "themeLight") {
@@ -1048,7 +1048,7 @@ ConfigEvent.subscribe(({ key, newValue }) => {
   }
 });
 
-AuthEvent.subscribe((event) => {
+authEvent.subscribe((event) => {
   if (event.type === "authStateChanged") {
     if (event.data.isUserSignedIn) {
       showAccountSection();
diff --git a/frontend/src/ts/test/caret.ts b/frontend/src/ts/test/caret.ts
index b8d3a5a18634..bbb380838266 100644
--- a/frontend/src/ts/test/caret.ts
+++ b/frontend/src/ts/test/caret.ts
@@ -1,7 +1,7 @@
 import { Config } from "../config/store";
 import * as TestInput from "./test-input";
 import * as TestState from "../test/test-state";
-import { subscribe } from "../events/config";
+import { configEvent } from "../events/config";
 import { Caret } from "../elements/caret";
 import * as CompositionState from "../legacy-states/composition";
 import { qsr } from "../utils/dom";
@@ -43,7 +43,7 @@ export function updatePosition(noAnim = false): void {
 
 export const caret = new Caret(qsr("#caret"), Config.caretStyle);
 
-subscribe(({ key }) => {
+configEvent.subscribe(({ key }) => {
   if (key === "caretStyle") {
     caret.setStyle(Config.caretStyle);
     updatePosition(true);
diff --git a/frontend/src/ts/test/funbox/funbox-functions.ts b/frontend/src/ts/test/funbox/funbox-functions.ts
index 92ff99174994..c6f72c7478b7 100644
--- a/frontend/src/ts/test/funbox/funbox-functions.ts
+++ b/frontend/src/ts/test/funbox/funbox-functions.ts
@@ -7,7 +7,7 @@ import * as Strings from "../../utils/strings";
 import { randomIntFromRange } from "@monkeytype/util/numbers";
 import * as Arrays from "../../utils/arrays";
 import { save } from "./funbox-memory";
-import * as TTSEvent from "../../events/tts";
+import { ttsEvent } from "../../events/tts";
 import {
   showNoticeNotification,
   showErrorNotification,
@@ -16,7 +16,7 @@ import * as DDR from "../../utils/ddr";
 import * as TestWords from "../test-words";
 import * as TestInput from "../test-input";
 import * as LayoutfluidFunboxTimer from "./layoutfluid-funbox-timer";
-import * as KeymapEvent from "../../events/keymap";
+import { highlight } from "../../events/keymap";
 import * as MemoryTimer from "./memory-funbox-timer";
 import { getPoem } from "../poetry";
 import * as JSONData from "../../utils/json-data";
@@ -234,7 +234,7 @@ const list: Partial<Record<FunboxName, FunboxFunctions>> = {
         showErrorNotification("Failed to load text-to-speech script");
         return;
       }
-      if (params[0] !== undefined) void TTSEvent.dispatch(params[0]);
+      if (params[0] !== undefined) void ttsEvent.dispatch(params[0]);
     },
   },
   arrows: {
@@ -451,7 +451,7 @@ const list: Partial<Record<FunboxName, FunboxFunctions>> = {
           LayoutfluidFunboxTimer.hide();
         }
         setTimeout(() => {
-          void KeymapEvent.highlight(
+          void highlight(
             TestWords.words.getCurrent().charAt(TestInput.input.current.length),
           );
         }, 1);
diff --git a/frontend/src/ts/test/funbox/funbox.ts b/frontend/src/ts/test/funbox/funbox.ts
index 85b4c3845478..de19d9a93452 100644
--- a/frontend/src/ts/test/funbox/funbox.ts
+++ b/frontend/src/ts/test/funbox/funbox.ts
@@ -24,7 +24,7 @@ import {
 } from "./list";
 import { tryCatch } from "@monkeytype/util/trycatch";
 import { qs, qsa } from "../../utils/dom";
-import * as ConfigEvent from "../../events/config";
+import { configEvent } from "../../events/config";
 
 export function toggleScript(...params: string[]): void {
   if (Config.funbox.length === 0) return;
@@ -231,7 +231,7 @@ async function applyFunboxCSS(): Promise<boolean> {
   return true;
 }
 
-ConfigEvent.subscribe(async ({ key }) => {
+configEvent.subscribe(async ({ key }) => {
   if (key === "funbox") {
     const active = getActiveFunboxNames();
     getAllFunboxes()
diff --git a/frontend/src/ts/test/live-acc.ts b/frontend/src/ts/test/live-acc.ts
index 71093e0209ec..9594bcc26eee 100644
--- a/frontend/src/ts/test/live-acc.ts
+++ b/frontend/src/ts/test/live-acc.ts
@@ -1,6 +1,6 @@
 import { Config } from "../config/store";
 import * as TestState from "../test/test-state";
-import * as ConfigEvent from "../events/config";
+import { configEvent } from "../events/config";
 import { applyReducedMotion } from "../utils/misc";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
 import { qs } from "../utils/dom";
@@ -82,6 +82,6 @@ export function instantHide(): void {
   state = false;
 }
 
-ConfigEvent.subscribe(({ key, newValue }) => {
+configEvent.subscribe(({ key, newValue }) => {
   if (key === "liveAccStyle") newValue === "off" ? hide() : show();
 });
diff --git a/frontend/src/ts/test/live-burst.ts b/frontend/src/ts/test/live-burst.ts
index ee4da9569393..9ed2ebac2025 100644
--- a/frontend/src/ts/test/live-burst.ts
+++ b/frontend/src/ts/test/live-burst.ts
@@ -1,6 +1,6 @@
 import { Config } from "../config/store";
 import * as TestState from "../test/test-state";
-import * as ConfigEvent from "../events/config";
+import { configEvent } from "../events/config";
 import Format from "../singletons/format";
 import { applyReducedMotion } from "../utils/misc";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
@@ -80,6 +80,6 @@ export function instantHide(): void {
   state = false;
 }
 
-ConfigEvent.subscribe(({ key, newValue }) => {
+configEvent.subscribe(({ key, newValue }) => {
   if (key === "liveBurstStyle") newValue === "off" ? hide() : show();
 });
diff --git a/frontend/src/ts/test/live-speed.ts b/frontend/src/ts/test/live-speed.ts
index 9f45a319ac68..34a963359d9a 100644
--- a/frontend/src/ts/test/live-speed.ts
+++ b/frontend/src/ts/test/live-speed.ts
@@ -1,6 +1,6 @@
 import { Config } from "../config/store";
 import * as TestState from "./test-state";
-import * as ConfigEvent from "../events/config";
+import { configEvent } from "../events/config";
 import Format from "../singletons/format";
 import { applyReducedMotion } from "../utils/misc";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
@@ -82,6 +82,6 @@ export function instantHide(): void {
   state = false;
 }
 
-ConfigEvent.subscribe(({ key, newValue }) => {
+configEvent.subscribe(({ key, newValue }) => {
   if (key === "liveSpeedStyle") newValue === "off" ? hide() : show();
 });
diff --git a/frontend/src/ts/test/monkey.ts b/frontend/src/ts/test/monkey.ts
index 0ba85f016ed2..0b2590b20aa8 100644
--- a/frontend/src/ts/test/monkey.ts
+++ b/frontend/src/ts/test/monkey.ts
@@ -1,6 +1,6 @@
 import { mapRange } from "@monkeytype/util/numbers";
 import { Config } from "../config/store";
-import * as ConfigEvent from "../events/config";
+import { configEvent } from "../events/config";
 import * as TestState from "../test/test-state";
 import * as KeyConverter from "../utils/key-converter";
 import { qs } from "../utils/dom";
@@ -9,7 +9,7 @@ import { Keycode } from "../constants/keys";
 const monkeyEl = qs("#monkey");
 const monkeyFastEl = qs("#monkey .fast");
 
-ConfigEvent.subscribe(({ key }) => {
+configEvent.subscribe(({ key }) => {
   if (key === "monkey" && TestState.isActive) {
     if (Config.monkey) {
       monkeyEl?.show();
diff --git a/frontend/src/ts/test/pace-caret.ts b/frontend/src/ts/test/pace-caret.ts
index 0c5e5314c140..d934c71c0264 100644
--- a/frontend/src/ts/test/pace-caret.ts
+++ b/frontend/src/ts/test/pace-caret.ts
@@ -3,7 +3,7 @@ import { Config } from "../config/store";
 import * as DB from "../db";
 import * as Misc from "../utils/misc";
 import * as TestState from "./test-state";
-import * as ConfigEvent from "../events/config";
+import { configEvent } from "../events/config";
 import { getActiveFunboxes } from "./funbox/list";
 import { Caret } from "../elements/caret";
 import { qsr } from "../utils/dom";
@@ -265,7 +265,7 @@ export function start(): void {
   void update((settings?.spc ?? 0) * 1000);
 }
 
-ConfigEvent.subscribe(({ key }) => {
+configEvent.subscribe(({ key }) => {
   if (key === "paceCaret") void init();
   if (key === "paceCaretStyle") {
     caret.setStyle(Config.paceCaretStyle);
diff --git a/frontend/src/ts/test/practise-words.ts b/frontend/src/ts/test/practise-words.ts
index 481ff1f5dd10..6bb97b5e023d 100644
--- a/frontend/src/ts/test/practise-words.ts
+++ b/frontend/src/ts/test/practise-words.ts
@@ -5,7 +5,7 @@ import { Config } from "../config/store";
 import { setConfig } from "../config/setters";
 import * as CustomText from "./custom-text";
 import * as TestInput from "./test-input";
-import * as ConfigEvent from "../events/config";
+import { configEvent } from "../events/config";
 import { setCustomTextName } from "../legacy-states/custom-text-name";
 import { Mode } from "@monkeytype/schemas/shared";
 import { CustomTextSettings } from "@monkeytype/schemas/results";
@@ -182,6 +182,6 @@ export function resetBefore(): void {
   before.customText = null;
 }
 
-ConfigEvent.subscribe(({ key }) => {
+configEvent.subscribe(({ key }) => {
   if (key === "mode") resetBefore();
 });
diff --git a/frontend/src/ts/test/result.ts b/frontend/src/ts/test/result.ts
index 8d4c57f12f91..8669d7dc51f1 100644
--- a/frontend/src/ts/test/result.ts
+++ b/frontend/src/ts/test/result.ts
@@ -31,7 +31,7 @@ import * as TestInput from "./test-input";
 import * as TestStats from "./test-stats";
 import * as TestUI from "./test-ui";
 import * as TodayTracker from "./today-tracker";
-import * as ConfigEvent from "../events/config";
+import { configEvent } from "../events/config";
 import * as Focus from "./focus";
 import * as CustomText from "./custom-text";
 import * as CustomTextState from "./../legacy-states/custom-text-name";
@@ -1404,7 +1404,7 @@ qs(".pageTest #favoriteQuoteButton")?.on("click", async () => {
   }
 });
 
-ConfigEvent.subscribe(async ({ key }) => {
+configEvent.subscribe(async ({ key }) => {
   if (
     ["typingSpeedUnit", "startGraphsAtZero"].includes(key) &&
     TestState.resultVisible
diff --git a/frontend/src/ts/test/test-config.ts b/frontend/src/ts/test/test-config.ts
index adb0070b9e09..ccfca5ef1552 100644
--- a/frontend/src/ts/test/test-config.ts
+++ b/frontend/src/ts/test/test-config.ts
@@ -1,11 +1,11 @@
 import { ConfigValue, QuoteLength } from "@monkeytype/schemas/configs";
 import { Mode } from "@monkeytype/schemas/shared";
 import { Config } from "../config/store";
-import * as ConfigEvent from "../events/config";
+import { configEvent } from "../events/config";
 import { getActivePage } from "../states/core";
 import { applyReducedMotion } from "../utils/misc";
 import { areUnsortedArraysEqual } from "../utils/arrays";
-import * as AuthEvent from "../events/auth";
+import { authEvent } from "../events/auth";
 import { qs, qsa } from "../utils/dom";
 
 export function show(): void {
@@ -313,7 +313,7 @@ export function hideFavoriteQuoteLength(): void {
 
 let ignoreConfigEvent = false;
 
-ConfigEvent.subscribe(({ key, newValue, previousValue }) => {
+configEvent.subscribe(({ key, newValue, previousValue }) => {
   if (key === "fullConfigChange") {
     ignoreConfigEvent = true;
   }
@@ -341,7 +341,7 @@ ConfigEvent.subscribe(({ key, newValue, previousValue }) => {
   }
 });
 
-AuthEvent.subscribe((event) => {
+authEvent.subscribe((event) => {
   if (event.type === "authStateChanged") {
     if (!event.data.isUserSignedIn) {
       hideFavoriteQuoteLength();
diff --git a/frontend/src/ts/test/test-logic.ts b/frontend/src/ts/test/test-logic.ts
index af90c50e844c..d16f24cd1074 100644
--- a/frontend/src/ts/test/test-logic.ts
+++ b/frontend/src/ts/test/test-logic.ts
@@ -32,13 +32,13 @@ import * as TestWords from "./test-words";
 import * as WordsGenerator from "./words-generator";
 import * as TestState from "./test-state";
 import * as PageTransition from "../legacy-states/page-transition";
-import * as ConfigEvent from "../events/config";
-import * as TimerEvent from "../events/timer";
+import { configEvent } from "../events/config";
+import { timerEvent } from "../events/timer";
 import objectHash from "object-hash";
 import * as AnalyticsController from "../controllers/analytics-controller";
 import { getAuthenticatedUser, isAuthenticated } from "../firebase";
 import * as ConnectionState from "../legacy-states/connection";
-import * as KeymapEvent from "../events/keymap";
+import { highlight } from "../events/keymap";
 import * as LazyModeState from "../legacy-states/remember-lazy-mode";
 import Format from "../singletons/format";
 import { QuoteLength, QuoteLengthConfig } from "@monkeytype/schemas/configs";
@@ -571,7 +571,7 @@ async function init(): Promise<boolean> {
   }
 
   if (Config.keymapMode === "next" && Config.mode !== "zen") {
-    void KeymapEvent.highlight(
+    void highlight(
       Arrays.nthElementFromArray(
         // ignoring for now but this might need a different approach
         // oxlint-disable-next-line no-misused-spread
@@ -684,7 +684,7 @@ export async function addWord(): Promise<void> {
     TestWords.words.push(randomWord.word, randomWord.sectionIndex);
     TestUI.addWord(randomWord.word);
   } catch (e) {
-    TimerEvent.dispatch("fail", "word generation error");
+    timerEvent.dispatch({ key: "fail", value: "word generation error" });
     showErrorNotification(
       "Error while getting next word. Please try again later",
       {
@@ -1516,7 +1516,7 @@ qs(".pageTest")?.onChild("click", "#testConfig .numbersMode.textButton", () => {
 
 // ===============================
 
-ConfigEvent.subscribe(({ key, newValue, nosave }) => {
+configEvent.subscribe(({ key, newValue, nosave }) => {
   if (getActivePage() === "test") {
     if (key === "language") {
       //automatically enable lazy mode for arabic
@@ -1537,7 +1537,7 @@ ConfigEvent.subscribe(({ key, newValue, nosave }) => {
 
     if (key === "keymapMode" && newValue === "next" && Config.mode !== "zen") {
       setTimeout(() => {
-        void KeymapEvent.highlight(
+        void highlight(
           Arrays.nthElementFromArray(
             // ignoring for now but this might need a different approach
             // oxlint-disable-next-line no-misused-spread
@@ -1561,7 +1561,7 @@ ConfigEvent.subscribe(({ key, newValue, nosave }) => {
   }
 });
 
-TimerEvent.subscribe((eventKey, eventValue) => {
+timerEvent.subscribe(({ key: eventKey, value: eventValue }) => {
   if (eventKey === "fail" && eventValue !== undefined) fail(eventValue);
   if (eventKey === "finish") void finish();
 });
diff --git a/frontend/src/ts/test/test-timer.ts b/frontend/src/ts/test/test-timer.ts
index cf0503db1a5f..ec0dd6145f6b 100644
--- a/frontend/src/ts/test/test-timer.ts
+++ b/frontend/src/ts/test/test-timer.ts
@@ -19,8 +19,8 @@ import * as Caret from "./caret";
 import * as SlowTimer from "../legacy-states/slow-timer";
 import * as TestState from "./test-state";
 import * as Time from "../legacy-states/time";
-import * as TimerEvent from "../events/timer";
-import * as KeymapEvent from "../events/keymap";
+import { timerEvent } from "../events/timer";
+import { highlight } from "../events/keymap";
 import * as LayoutfluidFunboxTimer from "../test/funbox/layoutfluid-funbox-timer";
 import { KeymapLayout, Layout } from "@monkeytype/schemas/configs";
 import * as SoundController from "../controllers/sound-controller";
@@ -141,7 +141,7 @@ function layoutfluid(): void {
 
       if (Config.keymapMode === "next") {
         setTimeout(() => {
-          void KeymapEvent.highlight(
+          void highlight(
             TestWords.words.getCurrent().charAt(TestInput.input.current.length),
           );
         }, 1);
@@ -167,14 +167,14 @@ function checkIfFailed(
     if (timer !== null) clearTimeout(timer);
     SlowTimer.clear();
     slowTimerCount = 0;
-    TimerEvent.dispatch("fail", "min speed");
+    timerEvent.dispatch({ key: "fail", value: "min speed" });
     return true;
   }
   if (Config.minAcc === "custom" && acc < Config.minAccCustom) {
     if (timer !== null) clearTimeout(timer);
     SlowTimer.clear();
     slowTimerCount = 0;
-    TimerEvent.dispatch("fail", "min accuracy");
+    timerEvent.dispatch({ key: "fail", value: "min accuracy" });
     return true;
   }
   if (timerDebug) console.timeEnd("fail conditions");
@@ -198,7 +198,7 @@ function checkIfTimeIsUp(): void {
     TestInput.corrected.pushHistory();
     SlowTimer.clear();
     slowTimerCount = 0;
-    TimerEvent.dispatch("finish");
+    timerEvent.dispatch({ key: "finish" });
     return;
   }
 
@@ -286,7 +286,7 @@ function checkIfTimerIsSlow(drift: number): void {
         "Stopping the test due to bad performance. This would cause test calculations to be incorrect. If this happens a lot, please report this.",
       );
 
-      TimerEvent.dispatch("fail", "slow timer");
+      timerEvent.dispatch({ key: "fail", value: "slow timer" });
     }
   }
 }
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index 655355bfb4c7..1713e3e6d1bc 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -15,7 +15,7 @@ import * as Strings from "../utils/strings";
 import { blendTwoHexColors } from "../utils/colors";
 import { get as getTypingSpeedUnit } from "../utils/typing-speed-units";
 import * as CompositionState from "../legacy-states/composition";
-import * as ConfigEvent from "../events/config";
+import { configEvent } from "../events/config";
 import * as Hangul from "hangul-js";
 import * as ResultWordHighlight from "../elements/result-word-highlight";
 import { getActivePage } from "../states/core";
@@ -35,7 +35,7 @@ import {
 import * as SoundController from "../controllers/sound-controller";
 import * as Numbers from "@monkeytype/util/numbers";
 import * as TestStats from "./test-stats";
-import * as KeymapEvent from "../events/keymap";
+import { highlight } from "../events/keymap";
 import * as LiveAcc from "./live-acc";
 import * as Focus from "../test/focus";
 import * as TimerProgress from "../test/timer-progress";
@@ -1750,7 +1750,7 @@ function afterAnyTestInput(
   }
 
   if (Config.keymapMode === "next") {
-    void KeymapEvent.highlight(
+    void highlight(
       TestWords.words.getCurrent().charAt(TestInput.input.current.length),
     );
   }
@@ -2025,7 +2025,7 @@ qs("#wordsWrapper")?.on("click", () => {
   focusWords();
 });
 
-ConfigEvent.subscribe(({ key, newValue }) => {
+configEvent.subscribe(({ key, newValue }) => {
   if (key === "quickRestart") {
     showHideTestRestartButton(newValue === "off");
   }
diff --git a/frontend/src/ts/test/timer-progress.ts b/frontend/src/ts/test/timer-progress.ts
index 7f961fe4f853..e83d8754ebda 100644
--- a/frontend/src/ts/test/timer-progress.ts
+++ b/frontend/src/ts/test/timer-progress.ts
@@ -5,7 +5,7 @@ import * as TestWords from "./test-words";
 import * as TestInput from "./test-input";
 import * as Time from "../legacy-states/time";
 import * as TestState from "./test-state";
-import * as ConfigEvent from "../events/config";
+import { configEvent } from "../events/config";
 import { applyReducedMotion } from "../utils/misc";
 import { requestDebouncedAnimationFrame } from "../utils/debounced-animation-frame";
 import { animate } from "animejs";
@@ -251,6 +251,6 @@ export function updateStyle(): void {
   }, 125);
 }
 
-ConfigEvent.subscribe(({ key }) => {
+configEvent.subscribe(({ key }) => {
   if (key === "timerStyle") updateStyle();
 });
diff --git a/frontend/src/ts/test/tts.ts b/frontend/src/ts/test/tts.ts
index f92d1e8891c5..ccc49dd4fa5d 100644
--- a/frontend/src/ts/test/tts.ts
+++ b/frontend/src/ts/test/tts.ts
@@ -1,7 +1,7 @@
 import { Config } from "../config/store";
 import * as JSONData from "../utils/json-data";
-import * as ConfigEvent from "../events/config";
-import * as TTSEvent from "../events/tts";
+import { configEvent } from "../events/config";
+import { ttsEvent } from "../events/tts";
 
 let voice: SpeechSynthesisUtterance | undefined;
 
@@ -31,7 +31,7 @@ export async function speak(text: string): Promise<void> {
   }
 }
 
-ConfigEvent.subscribe(({ key, newValue }) => {
+configEvent.subscribe(({ key, newValue }) => {
   if (key === "funbox") {
     if (newValue.includes("tts")) {
       void init();
@@ -44,6 +44,6 @@ ConfigEvent.subscribe(({ key, newValue }) => {
   }
 });
 
-TTSEvent.subscribe((text) => {
+ttsEvent.subscribe((text) => {
   void speak(text);
 });
diff --git a/frontend/src/ts/ui.ts b/frontend/src/ts/ui.ts
index 599f1ffa3a30..382034d6a380 100644
--- a/frontend/src/ts/ui.ts
+++ b/frontend/src/ts/ui.ts
@@ -2,7 +2,7 @@ import { Config } from "./config/store";
 import * as Caret from "./test/caret";
 import * as CustomText from "./test/custom-text";
 import * as TestState from "./test/test-state";
-import * as ConfigEvent from "./events/config";
+import { configEvent } from "./events/config";
 import { debounce, throttle } from "throttle-debounce";
 import * as TestUI from "./test/test-ui";
 import { getActivePage, getGlobalOffsetTop } from "./states/core";
@@ -107,7 +107,7 @@ createEffect(() => {
   });
 });
 
-ConfigEvent.subscribe(async ({ key }) => {
+configEvent.subscribe(async ({ key }) => {
   if (key === "fontFamily") {
     await applyFontFamily();
   }

From 4a6ef90d511798e4af780e765c75c69a664c3fd0 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 18 Mar 2026 21:20:37 +0100
Subject: [PATCH 5/7] fix

---
 frontend/__tests__/hooks/createEvent.spec.ts  | 95 +++++++++++++------
 frontend/src/ts/input/handlers/insert-text.ts |  2 +-
 .../src/ts/test/funbox/funbox-functions.ts    |  4 +-
 frontend/src/ts/test/test-logic.ts            |  4 +-
 frontend/src/ts/test/test-timer.ts            |  2 +-
 frontend/src/ts/test/test-ui.ts               |  2 +-
 6 files changed, 72 insertions(+), 37 deletions(-)

diff --git a/frontend/__tests__/hooks/createEvent.spec.ts b/frontend/__tests__/hooks/createEvent.spec.ts
index af5a28518a2f..d4455d0f128f 100644
--- a/frontend/__tests__/hooks/createEvent.spec.ts
+++ b/frontend/__tests__/hooks/createEvent.spec.ts
@@ -1,46 +1,81 @@
 import { createRoot } from "solid-js";
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import { createEvent } from "../../src/ts/hooks/createEvent";
 
 describe("createEvent", () => {
-  it("initial value is 0", () => {
-    createRoot((dispose) => {
-      const [event] = createEvent();
-      expect(event()).toBe(0);
-      dispose();
-    });
+  it("dispatch notifies subscribers", () => {
+    const event = createEvent<string>();
+    const fn = vi.fn();
+    event.subscribe(fn);
+    event.dispatch("hello");
+    expect(fn).toHaveBeenCalledWith("hello");
   });
 
-  it("dispatch increments the value by 1", () => {
-    createRoot((dispose) => {
-      const [event, dispatch] = createEvent();
-      dispatch();
-      expect(event()).toBe(1);
-      dispose();
-    });
+  it("dispatch notifies multiple subscribers", () => {
+    const event = createEvent<number>();
+    const fn1 = vi.fn();
+    const fn2 = vi.fn();
+    event.subscribe(fn1);
+    event.subscribe(fn2);
+    event.dispatch(42);
+    expect(fn1).toHaveBeenCalledWith(42);
+    expect(fn2).toHaveBeenCalledWith(42);
   });
 
-  it("each dispatch increments independently", () => {
-    createRoot((dispose) => {
-      const [event, dispatch] = createEvent();
-      dispatch();
-      dispatch();
-      dispatch();
-      expect(event()).toBe(3);
-      dispose();
-    });
+  it("dispatch with no type arg requires no arguments", () => {
+    const event = createEvent();
+    const fn = vi.fn();
+    event.subscribe(fn);
+    event.dispatch();
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it("subscribe returns an unsubscribe function", () => {
+    const event = createEvent<string>();
+    const fn = vi.fn();
+    const unsub = event.subscribe(fn);
+    event.dispatch("a");
+    unsub();
+    event.dispatch("b");
+    expect(fn).toHaveBeenCalledTimes(1);
+    expect(fn).toHaveBeenCalledWith("a");
   });
 
   it("two independent events do not share state", () => {
+    const eventA = createEvent<string>();
+    const eventB = createEvent<string>();
+    const fnA = vi.fn();
+    const fnB = vi.fn();
+    eventA.subscribe(fnA);
+    eventB.subscribe(fnB);
+    eventA.dispatch("a");
+    expect(fnA).toHaveBeenCalledWith("a");
+    expect(fnB).not.toHaveBeenCalled();
+  });
+
+  it("useListener auto-unsubscribes on dispose", () => {
+    const event = createEvent<string>();
+    const fn = vi.fn();
     createRoot((dispose) => {
-      const [eventA, dispatchA] = createEvent();
-      const [eventB, dispatchB] = createEvent();
-      dispatchA();
-      dispatchA();
-      dispatchB();
-      expect(eventA()).toBe(2);
-      expect(eventB()).toBe(1);
+      event.useListener(fn);
+      event.dispatch("inside");
       dispose();
     });
+    event.dispatch("outside");
+    expect(fn).toHaveBeenCalledTimes(1);
+    expect(fn).toHaveBeenCalledWith("inside");
+  });
+
+  it("subscriber errors do not prevent other subscribers from running", () => {
+    const event = createEvent<string>();
+    const fn1 = vi.fn(() => {
+      throw new Error("oops");
+    });
+    const fn2 = vi.fn();
+    event.subscribe(fn1);
+    event.subscribe(fn2);
+    event.dispatch("test");
+    expect(fn1).toHaveBeenCalled();
+    expect(fn2).toHaveBeenCalled();
   });
 });
diff --git a/frontend/src/ts/input/handlers/insert-text.ts b/frontend/src/ts/input/handlers/insert-text.ts
index 7d99cc3dff96..4b577eece08c 100644
--- a/frontend/src/ts/input/handlers/insert-text.ts
+++ b/frontend/src/ts/input/handlers/insert-text.ts
@@ -172,7 +172,7 @@ export async function onInsertText(options: OnInsertTextParams): Promise<void> {
     TestInput.pushMissedWord(TestWords.words.getCurrent());
   }
   if (Config.keymapMode === "react") {
-    void flash(data, correct);
+    flash(data, correct);
   }
   if (testInput.length === 0) {
     TestInput.setBurstStart(now);
diff --git a/frontend/src/ts/test/funbox/funbox-functions.ts b/frontend/src/ts/test/funbox/funbox-functions.ts
index c6f72c7478b7..1c65da0b870a 100644
--- a/frontend/src/ts/test/funbox/funbox-functions.ts
+++ b/frontend/src/ts/test/funbox/funbox-functions.ts
@@ -234,7 +234,7 @@ const list: Partial<Record<FunboxName, FunboxFunctions>> = {
         showErrorNotification("Failed to load text-to-speech script");
         return;
       }
-      if (params[0] !== undefined) void ttsEvent.dispatch(params[0]);
+      if (params[0] !== undefined) ttsEvent.dispatch(params[0]);
     },
   },
   arrows: {
@@ -451,7 +451,7 @@ const list: Partial<Record<FunboxName, FunboxFunctions>> = {
           LayoutfluidFunboxTimer.hide();
         }
         setTimeout(() => {
-          void highlight(
+          highlight(
             TestWords.words.getCurrent().charAt(TestInput.input.current.length),
           );
         }, 1);
diff --git a/frontend/src/ts/test/test-logic.ts b/frontend/src/ts/test/test-logic.ts
index d16f24cd1074..8db390113010 100644
--- a/frontend/src/ts/test/test-logic.ts
+++ b/frontend/src/ts/test/test-logic.ts
@@ -571,7 +571,7 @@ async function init(): Promise<boolean> {
   }
 
   if (Config.keymapMode === "next" && Config.mode !== "zen") {
-    void highlight(
+    highlight(
       Arrays.nthElementFromArray(
         // ignoring for now but this might need a different approach
         // oxlint-disable-next-line no-misused-spread
@@ -1537,7 +1537,7 @@ configEvent.subscribe(({ key, newValue, nosave }) => {
 
     if (key === "keymapMode" && newValue === "next" && Config.mode !== "zen") {
       setTimeout(() => {
-        void highlight(
+        highlight(
           Arrays.nthElementFromArray(
             // ignoring for now but this might need a different approach
             // oxlint-disable-next-line no-misused-spread
diff --git a/frontend/src/ts/test/test-timer.ts b/frontend/src/ts/test/test-timer.ts
index ec0dd6145f6b..26cf66b694e3 100644
--- a/frontend/src/ts/test/test-timer.ts
+++ b/frontend/src/ts/test/test-timer.ts
@@ -141,7 +141,7 @@ function layoutfluid(): void {
 
       if (Config.keymapMode === "next") {
         setTimeout(() => {
-          void highlight(
+          highlight(
             TestWords.words.getCurrent().charAt(TestInput.input.current.length),
           );
         }, 1);
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index 1713e3e6d1bc..5bd1f63d7463 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -1750,7 +1750,7 @@ function afterAnyTestInput(
   }
 
   if (Config.keymapMode === "next") {
-    void highlight(
+    highlight(
       TestWords.words.getCurrent().charAt(TestInput.input.current.length),
     );
   }

From fc4bd0a864da8b48232424a75981460c8e975001 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 18 Mar 2026 21:30:56 +0100
Subject: [PATCH 6/7] fix test

---
 frontend/__tests__/root/config.spec.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/__tests__/root/config.spec.ts b/frontend/__tests__/root/config.spec.ts
index 65fddab5a57c..d8c881e5588f 100644
--- a/frontend/__tests__/root/config.spec.ts
+++ b/frontend/__tests__/root/config.spec.ts
@@ -12,7 +12,7 @@ import {
 } from "@monkeytype/schemas/configs";
 import * as FunboxValidation from "../../src/ts/config/funbox-validation";
 import * as ConfigValidation from "../../src/ts/config/validation";
-import * as ConfigEvent from "../../src/ts/events/config";
+import { configEvent } from "../../src/ts/events/config";
 import * as ApeConfig from "../../src/ts/ape/config";
 import * as Notifications from "../../src/ts/states/notifications";
 const { replaceConfig, getConfig } = __testing;
@@ -33,7 +33,7 @@ describe("Config", () => {
       ConfigValidation,
       "isConfigValueValid",
     );
-    const dispatchConfigEventMock = vi.spyOn(ConfigEvent, "dispatch");
+    const dispatchConfigEventMock = vi.spyOn(configEvent, "dispatch");
     const dbSaveConfigMock = vi.spyOn(ApeConfig, "saveConfig");
     const notificationAddMock = vi.spyOn(
       Notifications,

From c5c3e6e8486ecc4cd61b3396b01c91b319304cda Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 18 Mar 2026 21:35:05 +0100
Subject: [PATCH 7/7] fix doc

---
 frontend/src/ts/hooks/createEvent.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/ts/hooks/createEvent.ts b/frontend/src/ts/hooks/createEvent.ts
index b032d725c73f..de30b7b2e520 100644
--- a/frontend/src/ts/hooks/createEvent.ts
+++ b/frontend/src/ts/hooks/createEvent.ts
@@ -17,11 +17,11 @@ type EventBus<T> = {
  *
  * @example
  * ```ts
- * const clickEvent = createEvent2<{ x: number; y: number }>();
+ * const clickEvent = createEvent<{ x: number; y: number }>();
  * clickEvent.useListener(({ x, y }) => console.log(x, y));
  * clickEvent.dispatch({ x: 10, y: 20 });
  *
- * const resetEvent = createEvent2();
+ * const resetEvent = createEvent();
  * resetEvent.useListener(() => console.log("reset"));
  * resetEvent.dispatch();
  * ```