diff --git a/qt/tools/genhooks_gui.py b/qt/tools/genhooks_gui.py
index 346ba9c25..0a480c74b 100644
--- a/qt/tools/genhooks_gui.py
+++ b/qt/tools/genhooks_gui.py
@@ -294,7 +294,12 @@ hooks = [
         args=[
             "deck_options: aqt.deckoptions.DeckOptionsDialog",
         ],
-        doc="Can be used to inject extra options into the config screen",
+        doc="""Can be used to inject extra options into the config screen.
+        
+        See the example add-ons at:
+        https://github.com/ankitects/anki-addons/tree/main/demos/deckoptions_svelte
+        https://github.com/ankitects/anki-addons/tree/main/demos/deckoptions_raw_html
+        """,
     ),
     # Filtered deck options
     ###################
diff --git a/ts/deckoptions/Addons.svelte b/ts/deckoptions/Addons.svelte
index 216d76c08..040f47892 100644
--- a/ts/deckoptions/Addons.svelte
+++ b/ts/deckoptions/Addons.svelte
@@ -8,6 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     export let state: DeckOptionsState;
     let components = state.addonComponents;
+    const auxData = state.currentAuxData;
 </script>
 
 {#if $components.length}
@@ -15,7 +16,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         <h2>Add-ons</h2>
 
         {#each $components as addon}
-            <svelte:component this={addon.component} {state} {...addon} />
+            <svelte:component this={addon.component} bind:data={$auxData} {...addon} />
         {/each}
     </div>
 {/if}
diff --git a/ts/deckoptions/DeckOptionsPage.svelte b/ts/deckoptions/DeckOptionsPage.svelte
index 60eaaec79..bacffa186 100644
--- a/ts/deckoptions/DeckOptionsPage.svelte
+++ b/ts/deckoptions/DeckOptionsPage.svelte
@@ -10,6 +10,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { registerShortcut } from "lib/shortcuts";
     import type { Writable } from "svelte/store";
     import HtmlAddon from "./HtmlAddon.svelte";
+    import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
 
     export let state: DeckOptionsState;
     let addons = state.addonComponents;
@@ -18,6 +19,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         return state.currentAuxData;
     }
 
+    export function addSvelteAddon(component: DynamicSvelteComponent): void {
+        $addons = [...$addons, component];
+    }
+
     export function addHtmlAddon(html: string, mounted: () => void): void {
         $addons = [
             ...$addons,
diff --git a/ts/deckoptions/index.ts b/ts/deckoptions/index.ts
index 40b201792..7af7871f0 100644
--- a/ts/deckoptions/index.ts
+++ b/ts/deckoptions/index.ts
@@ -5,6 +5,10 @@ import { getDeckOptionsInfo, DeckOptionsState } from "./lib";
 import { setupI18n, ModuleName } from "lib/i18n";
 import { checkNightMode } from "lib/nightmode";
 import DeckOptionsPage from "./DeckOptionsPage.svelte";
+import SpinBox from "./SpinBox.svelte";
+import SpinBoxFloat from "./SpinBoxFloat.svelte";
+import EnumSelector from "./EnumSelector.svelte";
+import CheckBox from "./CheckBox.svelte";
 
 export async function deckOptions(
     target: HTMLDivElement,
@@ -21,3 +25,10 @@ export async function deckOptions(
         props: { state },
     });
 }
+
+export const deckConfigComponents = {
+    SpinBox,
+    SpinBoxFloat,
+    EnumSelector,
+    CheckBox,
+};