diff --git a/src/components/Scroller/Scroller.stories.svelte b/src/components/Scroller/Scroller.stories.svelte
index 6412d867..89c96317 100644
--- a/src/components/Scroller/Scroller.stories.svelte
+++ b/src/components/Scroller/Scroller.stories.svelte
@@ -20,7 +20,7 @@
 
   import {
     withComponentDocs,
-    withStoryDocs
+    withStoryDocs,
   } from '$lib/docs/utils/withParams.js';
 
   import { getScrollerPropsFromDoc } from './docProps';
@@ -74,53 +74,90 @@
 
 <Story
   name="Default"
-  args={{
+  args="{{
     steps: [
-      { background: BasicStep, backgroundProps: { colour: 'red' }, foreground: '#### Step 1\n\nLorem ipsum red' },
-      { background: BasicStep, backgroundProps: { colour: 'blue' }, foreground: '#### Step 2\n\nLorem ipsum blue' },
-      { background: BasicStep, backgroundProps: { colour: 'green' }, foreground: '#### Step 3\n\nLorem ipsum green' },
+      {
+        background: BasicStep,
+        backgroundProps: { colour: 'red' },
+        foreground: '#### Step 1\n\nLorem ipsum red',
+      },
+      {
+        background: BasicStep,
+        backgroundProps: { colour: 'blue' },
+        foreground: '#### Step 2\n\nLorem ipsum blue',
+      },
+      {
+        background: BasicStep,
+        backgroundProps: { colour: 'green' },
+        foreground: '#### Step 3\n\nLorem ipsum green',
+      },
     ],
     foregroundPosition: 'middle',
     backgroundWidth: 'fluid',
     embeddedLayout: 'fb',
     embedded: false,
-  }}
+  }}"
 />
 
 <Story
   name="🚀 QUICKIT"
-  args={getScrollerPropsFromDoc(docBlock, aiCharts)}
+  args="{getScrollerPropsFromDoc(docBlock, aiCharts)}"
   {...withStoryDocs(quickitDocs)}
 />
 
 <Story
   name="Foreground components"
-  args={{
+  args="{{
     steps: [
-      { background: BasicStep, backgroundProps: { colour: 'red' }, foreground: InteractiveForeground },
-      { background: BasicStep, backgroundProps: { colour: 'blue' }, foreground: '#### Step 2\n\nLorem ipsum blue' },
-      { background: BasicStep, backgroundProps: { colour: 'green' }, foreground: InteractiveForeground, foregroundProps: { count: 100 } },
+      {
+        background: BasicStep,
+        backgroundProps: { colour: 'red' },
+        foreground: InteractiveForeground,
+      },
+      {
+        background: BasicStep,
+        backgroundProps: { colour: 'blue' },
+        foreground: '#### Step 2\n\nLorem ipsum blue',
+      },
+      {
+        background: BasicStep,
+        backgroundProps: { colour: 'green' },
+        foreground: InteractiveForeground,
+        foregroundProps: { count: 100 },
+      },
     ],
     foregroundPosition: 'middle',
     backgroundWidth: 'fluid',
     embeddedLayout: 'fb',
     embedded: false,
-  }}
+  }}"
   {...withStoryDocs(interactiveDocs)}
 />
 
 <Story
   name="Ai2svelte"
-  args={{
+  args="{{
     steps: [
-      { background: AiMap1, backgroundProps: { colour: 'red' }, foreground: '#### Step 1\n\nLorem ipsum' },
-      { background: AiMap2, backgroundProps: { colour: 'blue' }, foreground: '#### Step 2\n\nLorem ipsum' },
-      { background: AiMap3, backgroundProps: { colour: 'green' }, foreground: '#### Step 3\n\nLorem ipsum' },
+      {
+        background: AiMap1,
+        backgroundProps: { colour: 'red' },
+        foreground: '#### Step 1\n\nLorem ipsum',
+      },
+      {
+        background: AiMap2,
+        backgroundProps: { colour: 'blue' },
+        foreground: '#### Step 2\n\nLorem ipsum',
+      },
+      {
+        background: AiMap3,
+        backgroundProps: { colour: 'green' },
+        foreground: '#### Step 3\n\nLorem ipsum',
+      },
     ],
     foregroundPosition: 'middle',
     backgroundWidth: 'fluid',
     embeddedLayout: 'fb',
     embedded: false,
-  }}
+  }}"
   {...withStoryDocs(ai2svelteDocs)}
-/>
\ No newline at end of file
+/>
diff --git a/src/components/Scroller/docProps.ts b/src/components/Scroller/docProps.ts
index dbd42910..3c21394f 100644
--- a/src/components/Scroller/docProps.ts
+++ b/src/components/Scroller/docProps.ts
@@ -1,4 +1,4 @@
-import type { ComponentType, SvelteComponentTyped } from 'svelte';
+import type { ComponentType } from 'svelte';
 
 interface BlockStep {
   Background: string;
@@ -17,7 +17,7 @@ interface Block {
 
 interface AiCharts {
   [key: string]: ComponentType,
-};
+}
 
 export const getScrollerPropsFromDoc = (docBlock: Block, aiCharts: AiCharts, assetsPath: string = '') => {
   return {
diff --git a/src/components/Scroller/stories/docs/ai2svelte.md b/src/components/Scroller/stories/docs/ai2svelte.md
index 532bca92..4ffba630 100644
--- a/src/components/Scroller/stories/docs/ai2svelte.md
+++ b/src/components/Scroller/stories/docs/ai2svelte.md
@@ -11,19 +11,30 @@ A more detailed example of using `Scroller` with graphics created by [ai2svelte]
   import { assets } from '$app/paths'; // If using with the Graphics Kit
 
   const steps = [
-    { background: MyAiMap1, backgroundProps: { assetsPath: assets }, foreground: '#### Step 1\n\nLorem ipsum' },
-    { background: MyAiMap2, backgroundProps: { assetsPath: assets }, foreground: '#### Step 2\n\nLorem ipsum' },
-    { background: MyAiMap3, backgroundProps: { assetsPath: assets }, foreground: '#### Step 3\n\nLorem ipsum' },
-  ]
+    {
+      background: MyAiMap1,
+      backgroundProps: { assetsPath: assets },
+      foreground: '#### Step 1\n\nLorem ipsum',
+    },
+    {
+      background: MyAiMap2,
+      backgroundProps: { assetsPath: assets },
+      foreground: '#### Step 2\n\nLorem ipsum',
+    },
+    {
+      background: MyAiMap3,
+      backgroundProps: { assetsPath: assets },
+      foreground: '#### Step 3\n\nLorem ipsum',
+    },
+  ];
 </script>
 
-
 <Scroller
   steps="{steps}"
   backgroundWidth="fluid"
   foregroundPosition="middle"
-  stackBackground={true}
-  embedded={false}
+  stackBackground="{true}"
+  embedded="{false}"
 />
 ```
 
@@ -55,34 +66,45 @@ Lorem Ipsum
   // This should be already imported for you.
   import content from '$locales/en/content.json';
 
-
   // Get the data for the block in content by its ID
-  const scrollerBlock = content.blocks.find(block => block.ID === 'map-scrolly');
+  const scrollerBlock = content.blocks.find(
+    (block) => block.ID === 'map-scrolly'
+  );
 
   // Now plug your text into your step foregrounds
   const steps = [
-    { background: MyAiMap1, backgroundProps: { basePath: assets }, foreground: scrollerBlock.Step1Text },
-    { background: MyAiMap2, backgroundProps: { basePath: assets }, foreground: scrollerBlock.Step2Text },
-    { background: MyAiMap3, backgroundProps: { basePath: assets }, foreground: scrollerBlock.Step3Text },
-  ]
+    {
+      background: MyAiMap1,
+      backgroundProps: { basePath: assets },
+      foreground: scrollerBlock.Step1Text,
+    },
+    {
+      background: MyAiMap2,
+      backgroundProps: { basePath: assets },
+      foreground: scrollerBlock.Step2Text,
+    },
+    {
+      background: MyAiMap3,
+      backgroundProps: { basePath: assets },
+      foreground: scrollerBlock.Step3Text,
+    },
+  ];
 </script>
 
 {#each content.blocks as block}
   {#if block.Type === 'text'}
     <!-- ... other blocks -->
 
-  <!-- Copy/paste into your blocks loop! -->
+    <!-- Copy/paste into your blocks loop! -->
   {:else if block.Type === 'scroller' && block.ID === 'map-scrolly'}
     <Scroller
       steps="{steps}"
       backgroundWidth="fluid"
       foregroundPosition="middle"
-      stackBackground={true}
-      embedded={false}
+      stackBackground="{true}"
+      embedded="{false}"
     />
-  <!-- END copy/paste -->
-
-
+    <!-- END copy/paste -->
   {/if}
 {/each}
 ```