diff --git a/qt/aqt/editor.py b/qt/aqt/editor.py
index 5e9b3c833..97b416c1b 100644
--- a/qt/aqt/editor.py
+++ b/qt/aqt/editor.py
@@ -135,96 +135,6 @@ class Editor:
         self.web.set_bridge_command(self.onBridgeCmd, self)
         self.outerLayout.addWidget(self.web, 1)
 
-        lefttopbtns: List[str] = [
-            self._addButton(
-                None,
-                "fields",
-                tr.editing_customize_fields(),
-                f"{tr.editing_fields()}...",
-                disables=False,
-                rightside=False,
-            ),
-            self._addButton(
-                None,
-                "cards",
-                tr.editing_customize_card_templates_ctrlandl(),
-                f"{tr.editing_cards()}...",
-                disables=False,
-                rightside=False,
-            ),
-        ]
-
-        gui_hooks.editor_did_init_left_buttons(lefttopbtns, self)
-
-        righttopbtns: List[str] = [
-            self._addButton(
-                "text_bold", "bold", tr.editing_bold_text_ctrlandb(), id="bold"
-            ),
-            self._addButton(
-                "text_italic",
-                "italic",
-                tr.editing_italic_text_ctrlandi(),
-                id="italic",
-            ),
-            self._addButton(
-                "text_under",
-                "underline",
-                tr.editing_underline_text_ctrlandu(),
-                id="underline",
-            ),
-            self._addButton(
-                "text_super",
-                "super",
-                tr.editing_superscript_ctrlandand(),
-                id="superscript",
-            ),
-            self._addButton(
-                "text_sub", "sub", tr.editing_subscript_ctrland(), id="subscript"
-            ),
-            self._addButton(
-                "text_clear", "clear", tr.editing_remove_formatting_ctrlandr()
-            ),
-            self._addButton(
-                None,
-                "colour",
-                tr.editing_set_foreground_colour_f7(),
-                """
-<span id="forecolor" class="topbut rounded" style="background: #000"></span>
-""",
-            ),
-            self._addButton(
-                None,
-                "changeCol",
-                tr.editing_change_colour_f8(),
-                """
-<span class="topbut rounded rainbow"></span>
-""",
-            ),
-            self._addButton(
-                "text_cloze", "cloze", tr.editing_cloze_deletion_ctrlandshiftandc()
-            ),
-            self._addButton(
-                "paperclip", "attach", tr.editing_attach_picturesaudiovideo_f3()
-            ),
-            self._addButton("media-record", "record", tr.editing_record_audio_f5()),
-            self._addButton("more", "more"),
-        ]
-
-        gui_hooks.editor_did_init_buttons(righttopbtns, self)
-        # legacy filter
-        righttopbtns = runFilter("setupEditorButtons", righttopbtns, self)
-
-        topbuts = """
-            <div id="topbutsleft" class="topbuts">
-                %(leftbts)s
-            </div>
-            <div id="topbutsright" class="topbuts">
-                %(rightbts)s
-            </div>
-        """ % dict(
-            leftbts="".join(lefttopbtns),
-            rightbts="".join(righttopbtns),
-        )
         bgcol = self.mw.app.palette().window().color().name()  # type: ignore
         # then load page
         self.web.stdHtml(
@@ -242,7 +152,45 @@ class Editor:
             context=self,
             default_css=False,
         )
-        self.web.eval("preventButtonFocus();")
+
+        lefttopbtns: List[str] = []
+        gui_hooks.editor_did_init_left_buttons(lefttopbtns, self)
+
+        lefttopbtns_defs = [
+            f"$editorToolbar.addButton({{ component: editorToolbar.RawButton, html: `{button}` }}, 'notetype');"
+            for button in lefttopbtns
+        ]
+        lefttopbtns_js = "\n".join(lefttopbtns_defs)
+
+        righttopbtns: List[str] = []
+        gui_hooks.editor_did_init_buttons(righttopbtns, self)
+        # legacy filter
+        righttopbtns = runFilter("setupEditorButtons", righttopbtns, self)
+
+        righttopbtns_defs = "\n".join(
+            [
+                f"{{ component: editorToolbar.RawButton, html: `{button}` }},"
+                for button in righttopbtns
+            ]
+        )
+        righttopbtns_js = (
+            f"""
+$editorToolbar.addButtonGroup({{
+  id: "addons",
+  buttons: [ {righttopbtns_defs} ]
+}});
+"""
+            if righttopbtns_defs
+            else ""
+        )
+
+        self.web.eval(
+            f"""
+$editorToolbar = document.getElementById("editorToolbar");
+{lefttopbtns_js}
+{righttopbtns_js}
+"""
+        )
 
     # Top buttons
     ######################################################################
@@ -354,6 +302,7 @@ class Editor:
                         type="button"
                         title="{tip}"
                         onclick="pycmd('{cmd}');{togglesc}return false;"
+                        onmousedown="window.event.preventDefault();"
                 >
                     {imgelm}
                     {labelelm}
@@ -802,7 +751,8 @@ class Editor:
             self._wrapWithColour(self.fcolour)
 
     def _updateForegroundButton(self) -> None:
-        self.web.eval(f"setFGButton('{self.fcolour}')")
+        # self.web.eval(f"setFGButton('{self.fcolour}')")
+        pass
 
     def onColourChanged(self) -> None:
         self._updateForegroundButton()
@@ -1355,9 +1305,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('document.getElementById("editorToolbar").showButton("template", "cloze"); ')
+        editor.web.eval(
+            'document.getElementById("editorToolbar").showButton("template", "cloze"); '
+        )
     else:
-        editor.web.eval('document.getElementById("editorToolbar").hideButton("template", "cloze"); ')
+        editor.web.eval(
+            'document.getElementById("editorToolbar").hideButton("template", "cloze"); '
+        )
 
 
 gui_hooks.editor_did_load_note.append(set_cloze_button)
diff --git a/ts/editor-toolbar/BUILD.bazel b/ts/editor-toolbar/BUILD.bazel
index e0c48b00e..5f5f6afc2 100644
--- a/ts/editor-toolbar/BUILD.bazel
+++ b/ts/editor-toolbar/BUILD.bazel
@@ -21,6 +21,12 @@ sass_binary(
     visibility = ["//visibility:public"],
 )
 
+sass_binary(
+    name = "legacy_css",
+    src = "legacy.scss",
+    visibility = ["//visibility:public"],
+)
+
 ts_library(
     name = "index",
     srcs = ["index.ts"],
@@ -98,6 +104,7 @@ esbuild(
         "bootstrap-icons",
         "mdi-icons",
         ":color_css",
+        ":legacy_css",
     ] + svelte_names,
 )
 
diff --git a/ts/editor-toolbar/EditorToolbar.svelte b/ts/editor-toolbar/EditorToolbar.svelte
index 49e73d52f..fef9bedd7 100644
--- a/ts/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor-toolbar/EditorToolbar.svelte
@@ -1,4 +1,5 @@
 <script context="module" lang="typescript">
+    import "./legacy.css";
     import { writable } from "svelte/store";
 
     const disabled = writable(false);
diff --git a/ts/editor-toolbar/RawButton.svelte b/ts/editor-toolbar/RawButton.svelte
new file mode 100644
index 000000000..89778431a
--- /dev/null
+++ b/ts/editor-toolbar/RawButton.svelte
@@ -0,0 +1,10 @@
+<script lang="typescript">
+    import { onMount, createEventDispatcher } from "svelte";
+
+    export let html: string;
+
+    const dispatch = createEventDispatcher();
+    onMount(() => dispatch("mount", { button: null }));
+</script>
+
+{@html html}
diff --git a/ts/editor-toolbar/identifiable.ts b/ts/editor-toolbar/identifiable.ts
index b57f8a3cd..93f054c2e 100644
--- a/ts/editor-toolbar/identifiable.ts
+++ b/ts/editor-toolbar/identifiable.ts
@@ -21,7 +21,6 @@ export function search<T extends Identifiable>(
     idOrIndex: string | number
 ): T | null {
     const index = normalize(values, idOrIndex);
-
     return index >= 0 ? values[index] : null;
 }
 
@@ -31,7 +30,6 @@ export function insert<T extends Identifiable>(
     idOrIndex: string | number
 ): T[] {
     const index = normalize(values, idOrIndex);
-
     return index >= 0
         ? [...values.slice(0, index), value, ...values.slice(index)]
         : values;
@@ -43,7 +41,6 @@ export function add<T extends Identifiable>(
     idOrIndex: string | number
 ): T[] {
     const index = normalize(values, idOrIndex);
-
     return index >= 0
         ? [...values.slice(0, index + 1), value, ...values.slice(index + 1)]
         : values;
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index e3b40d1b3..d5efc0fd9 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -172,6 +172,7 @@ export { updateActiveButtons, clearActiveButtons } from "./CommandIconButton.sve
 export { enableButtons, disableButtons } from "./EditorToolbar.svelte";
 
 /* Exports for add-ons */
+export { default as RawButton } from "./RawButton.svelte";
 export { default as LabelButton } from "./LabelButton.svelte";
 export { default as IconButton } from "./IconButton.svelte";
 export { default as CommandIconButton } from "./CommandIconButton.svelte";
diff --git a/ts/editor-toolbar/legacy.scss b/ts/editor-toolbar/legacy.scss
new file mode 100644
index 000000000..767ca7677
--- /dev/null
+++ b/ts/editor-toolbar/legacy.scss
@@ -0,0 +1,10 @@
+.linkb {
+    display: inline-block;
+}
+
+.topbut {
+    display: inline-block;
+    vertical-align: middle;
+    width: calc(var(--toolbar-size) - 12px);
+    height: calc(var(--toolbar-size) - 12px);
+}