diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py
index 6b2b3b2ac..5065abb29 100644
--- a/qt/aqt/editor.py
+++ b/qt/aqt/editor.py
@@ -1277,9 +1277,13 @@ gui_hooks.editor_will_munge_html.append(reverse_url_quoting)
 
 def set_cloze_button(editor: Editor) -> None:
     if editor.note.model()["type"] == MODEL_CLOZE:
-        editor.web.eval('$editorToolbar.then(({ showButton }) => showButton("template", "cloze")); ')
+        editor.web.eval(
+            '$editorToolbar.then(({ showButton }) => showButton("template", "cloze")); '
+        )
     else:
-        editor.web.eval('$editorToolbar.then(({ hideButton }) => hideButton("template", "cloze")); ')
+        editor.web.eval(
+            '$editorToolbar.then(({ hideButton }) => hideButton("template", "cloze")); '
+        )
 
 
 gui_hooks.editor_did_load_note.append(set_cloze_button)
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index c11f6ee7f..5626973dc 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -18,19 +18,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <script lang="typescript">
-    import type { Readable } from "svelte/store";
+    import type { Identifier } from "./identifiable";
     import type { ToolbarItem, IterableToolbarItem } from "./types";
+
     import { setContext } from "svelte";
     import { disabledKey, nightModeKey } from "./contextKeys";
+    import { add, insert, updateRecursive } from "./identifiable";
+    import { showComponent, hideComponent, toggleComponent } from "./hideable";
 
     import ButtonGroup from "./ButtonGroup.svelte";
 
-    export let buttons: Readable<IterableToolbarItem[]>;
-    export let menus: Readable<ToolbarItem[]>;
-
-    $: _buttons = $buttons;
-    $: _menus = $menus;
-
+    export let buttons: IterableToolbarItem[];
+    export let menus: ToolbarItem[];
     export let nightMode: boolean;
 
     setContext(nightModeKey, nightMode);
@@ -42,6 +41,77 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     $: style = `--toolbar-size: ${size}px; --toolbar-wrap: ${
         wraps ? "wrap" : "nowrap"
     }`;
+
+    export function updateButton(
+        update: (component: ToolbarItem) => ToolbarItem,
+        ...identifiers: Identifier[]
+    ): void {
+        buttons = updateRecursive(
+            update,
+            ({ items: buttons } as unknown) as ToolbarItem,
+            ...identifiers
+        ).items as IterableToolbarItem[];
+    }
+
+    export function showButton(...identifiers: Identifier[]): void {
+        updateButton(showComponent, ...identifiers);
+    }
+
+    export function hideButton(...identifiers: Identifier[]): void {
+        updateButton(hideComponent, ...identifiers);
+    }
+
+    export function toggleButton(...identifiers: Identifier[]): void {
+        updateButton(toggleComponent, ...identifiers);
+    }
+
+    export function insertButton(
+        newButton: ToolbarItem,
+        ...identifiers: Identifier[]
+    ): void {
+        const initIdentifiers = identifiers.slice(0, -1);
+        const lastIdentifier = identifiers[identifiers.length - 1];
+        updateButton(
+            (component: ToolbarItem) =>
+                insert(component as IterableToolbarItem, newButton, lastIdentifier),
+
+            ...initIdentifiers
+        );
+    }
+
+    export function addButton(
+        newButton: ToolbarItem,
+        ...identifiers: Identifier[]
+    ): void {
+        const initIdentifiers = identifiers.slice(0, -1);
+        const lastIdentifier = identifiers[identifiers.length - 1];
+        updateButton(
+            (component: ToolbarItem) =>
+                add(component as IterableToolbarItem, newButton, lastIdentifier),
+            ...initIdentifiers
+        );
+    }
+
+    export function updateMenu(
+        update: (component: ToolbarItem) => ToolbarItem,
+        ...identifiers: Identifier[]
+    ): void {
+        menus = updateRecursive(
+            update,
+            ({ items: menus } as unknown) as ToolbarItem,
+            ...identifiers
+        ).items as ToolbarItem[];
+    }
+
+    export function addMenu(newMenu: ToolbarItem, ...identifiers: Identifier[]): void {
+        const initIdentifiers = identifiers.slice(0, -1);
+        const lastIdentifier = identifiers[identifiers.length - 1];
+        updateMenu(
+            (component: ToolbarItem) =>
+                add(component as IterableToolbarItem, newMenu, lastIdentifier),
+            ...initIdentifiers
+        );
+    }
 </script>
 
 <style lang="scss">
@@ -57,11 +127,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </style>
 
 <div {style}>
-    {#each _menus as menu}
+    {#each menus as menu}
         <svelte:component this={menu.component} {...menu} />
     {/each}
 </div>
 
 <nav {style}>
-    <ButtonGroup items={_buttons} className="p-0 mb-1" />
+    <ButtonGroup items={buttons} className="p-0 mb-1" />
 </nav>
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index ff6e645c7..0e64430cb 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -1,46 +1,18 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 import type { ToolbarItem, IterableToolbarItem } from "./types";
-import type { Identifier } from "./identifiable";
 
-import { writable } from "svelte/store";
-
-import EditorToolbarSvelte from "./EditorToolbar.svelte";
+import EditorToolbar from "./EditorToolbar.svelte";
+export { default as EditorToolbar } from "./EditorToolbar.svelte";
 
 import "./bootstrap.css";
 
-import { add, insert, updateRecursive } from "./identifiable";
-import { showComponent, hideComponent, toggleComponent } from "./hideable";
-
-export interface EditorToolbarAPI {
-    // Button API
-    updateButton(
-        update: (component: ToolbarItem) => ToolbarItem,
-        ...identifiers: Identifier[]
-    ): void;
-    showButton(...identifiers: Identifier[]): void;
-    hideButton(...identifiers: Identifier[]): void;
-    toggleButton(...identifiers: Identifier[]): void;
-    insertButton(newButton: ToolbarItem, ...identifiers: Identifier[]): void;
-    addButton(newButton: ToolbarItem, ...identifiers: Identifier[]): void;
-
-    // Menu API
-    updateMenu(
-        update: (component: ToolbarItem) => ToolbarItem,
-        ...identifiers: Identifier[]
-    ): void;
-    addMenu(newMenu: ToolbarItem, ...identifiers: Identifier[]): void;
-}
-
 export function editorToolbar(
     target: HTMLElement,
-    initialButtons: IterableToolbarItem[] = [],
-    initialMenus: ToolbarItem[] = []
-): EditorToolbarAPI {
-    const buttons = writable(initialButtons);
-    const menus = writable(initialMenus);
-
-    new EditorToolbarSvelte({
+    buttons: IterableToolbarItem[] = [],
+    menus: ToolbarItem[] = []
+): EditorToolbar {
+    return new EditorToolbar({
         target,
         props: {
             buttons,
@@ -48,88 +20,6 @@ export function editorToolbar(
             nightMode: document.documentElement.classList.contains("night-mode"),
         },
     });
-
-    function updateButton(
-        update: (component: ToolbarItem) => ToolbarItem,
-        ...identifiers: Identifier[]
-    ): void {
-        buttons.update(
-            (items: IterableToolbarItem[]): IterableToolbarItem[] =>
-                updateRecursive(
-                    update,
-                    ({ items } as unknown) as ToolbarItem,
-                    ...identifiers
-                ).items as IterableToolbarItem[]
-        );
-    }
-
-    function showButton(...identifiers: Identifier[]): void {
-        updateButton(showComponent, ...identifiers);
-    }
-
-    function hideButton(...identifiers: Identifier[]): void {
-        updateButton(hideComponent, ...identifiers);
-    }
-
-    function toggleButton(...identifiers: Identifier[]): void {
-        updateButton(toggleComponent, ...identifiers);
-    }
-
-    function insertButton(newButton: ToolbarItem, ...identifiers: Identifier[]): void {
-        const initIdentifiers = identifiers.slice(0, -1);
-        const lastIdentifier = identifiers[identifiers.length - 1];
-        updateButton(
-            (component: ToolbarItem) =>
-                insert(component as IterableToolbarItem, newButton, lastIdentifier),
-
-            ...initIdentifiers
-        );
-    }
-
-    function addButton(newButton: ToolbarItem, ...identifiers: Identifier[]): void {
-        const initIdentifiers = identifiers.slice(0, -1);
-        const lastIdentifier = identifiers[identifiers.length - 1];
-        updateButton(
-            (component: ToolbarItem) =>
-                add(component as IterableToolbarItem, newButton, lastIdentifier),
-            ...initIdentifiers
-        );
-    }
-
-    function updateMenu(
-        update: (component: ToolbarItem) => ToolbarItem,
-        ...identifiers: Identifier[]
-    ): void {
-        menus.update(
-            (items: ToolbarItem[]): ToolbarItem[] =>
-                updateRecursive(
-                    update,
-                    ({ items } as unknown) as ToolbarItem,
-                    ...identifiers
-                ).items as ToolbarItem[]
-        );
-    }
-
-    function addMenu(newMenu: ToolbarItem, ...identifiers: Identifier[]): void {
-        const initIdentifiers = identifiers.slice(0, -1);
-        const lastIdentifier = identifiers[identifiers.length - 1];
-        updateMenu(
-            (component: ToolbarItem) =>
-                add(component as IterableToolbarItem, newMenu, lastIdentifier),
-            ...initIdentifiers
-        );
-    }
-
-    return {
-        updateButton,
-        showButton,
-        hideButton,
-        toggleButton,
-        insertButton,
-        addButton,
-        updateMenu,
-        addMenu,
-    };
 }
 
 /* Exports for editor */
diff --git a/ts/editor/toolbar.ts b/ts/editor/toolbar.ts
index b74de5ccf..930c3ee41 100644
--- a/ts/editor/toolbar.ts
+++ b/ts/editor/toolbar.ts
@@ -1,6 +1,6 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-import { editorToolbar, EditorToolbarAPI } from "editor-toolbar";
+import { editorToolbar, EditorToolbar } from "editor-toolbar";
 
 import { getNotetypeGroup } from "./notetype";
 import { getFormatInlineGroup } from "./formatInline";
@@ -8,9 +8,9 @@ import { getFormatBlockGroup, getFormatBlockMenus } from "./formatBlock";
 import { getColorGroup } from "./color";
 import { getTemplateGroup, getTemplateMenus } from "./template";
 
-export function initToolbar(i18n: Promise<void>): Promise<EditorToolbarAPI> {
-    let toolbarResolve: (value: EditorToolbarAPI) => void;
-    const toolbarPromise = new Promise<EditorToolbarAPI>((resolve) => {
+export function initToolbar(i18n: Promise<void>) {
+    let toolbarResolve: (value: EditorToolbar) => void;
+    const toolbarPromise = new Promise<EditorToolbar>((resolve) => {
         toolbarResolve = resolve;
     });