diff --git a/packages/core/src/components/BaseInput/__stories__/BaseInput.stories.tsx b/packages/core/src/components/BaseInput/__stories__/BaseInput.stories.tsx
index b1aa37adcc..28f623b34c 100644
--- a/packages/core/src/components/BaseInput/__stories__/BaseInput.stories.tsx
+++ b/packages/core/src/components/BaseInput/__stories__/BaseInput.stories.tsx
@@ -1,6 +1,9 @@
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import { createComponentTemplate } from "vibe-storybook-components";
 import BaseInput from "../BaseInput";
+import { Meta, StoryObj } from "@storybook/react";
+
+type Story = StoryObj<typeof BaseInput>;
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: BaseInput
@@ -12,10 +15,10 @@ export default {
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators,
   tags: ["internal"]
-};
+} satisfies Meta<typeof BaseInput>;
 
 const baseInputTemplate = createComponentTemplate(BaseInput);
 
-export const Overview = {
+export const Overview: Story = {
   render: baseInputTemplate.bind({})
 };
diff --git a/packages/core/src/components/Button/__stories__/button.mdx b/packages/core/src/components/Button/__stories__/button.mdx
index 674e4338f2..e0c3a1a18e 100644
--- a/packages/core/src/components/Button/__stories__/button.mdx
+++ b/packages/core/src/components/Button/__stories__/button.mdx
@@ -1,5 +1,5 @@
 import Button from "../Button";
-import { Canvas, Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/blocks";
 import {
   BUTTON_GROUP,
   BADGE,
diff --git a/packages/core/src/components/Button/__stories__/button.stories.tsx b/packages/core/src/components/Button/__stories__/button.stories.tsx
index 5bb92461d5..98d8d2f786 100644
--- a/packages/core/src/components/Button/__stories__/button.stories.tsx
+++ b/packages/core/src/components/Button/__stories__/button.stories.tsx
@@ -4,6 +4,9 @@ import { Add, Calendar, Check, Remove } from "../../Icon/Icons";
 import { createStoryMetaSettingsDecorator } from "../../../storybook/functions/createStoryMetaSettingsDecorator";
 import Button from "../Button";
 import "./button.stories.scss";
+import { Meta, StoryObj } from "@storybook/react";
+
+type Story = StoryObj<typeof Button>;
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: Button,
@@ -17,19 +20,25 @@ export default {
   component: Button,
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators
-};
+} satisfies Meta<typeof Button>;
 
 const buttonTemplate = createComponentTemplate(Button);
 
-export const Overview = {
+export const Overview: Story = {
   render: buttonTemplate.bind({}),
-  name: "Overview",
   args: {
     children: "Button"
+  },
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
   }
 };
 
-export const ButtonKinds = {
+export const ButtonKinds: Story = {
   render: () => (
     <>
       <Button>Primary</Button>
@@ -37,23 +46,20 @@ export const ButtonKinds = {
       <Button kind={Button.kinds.TERTIARY}>Tertiary</Button>
     </>
   ),
-
   name: "Button kinds"
 };
 
-export const Sizes = {
+export const Sizes: Story = {
   render: () => (
     <>
       <Button size={Button.sizes.LARGE}>Large</Button>
       <Button size={Button.sizes.MEDIUM}>Medium</Button>
       <Button size={Button.sizes.SMALL}>Small</Button>
     </>
-  ),
-
-  name: "Sizes"
+  )
 };
 
-export const Disabled = {
+export const Disabled: Story = {
   render: () => (
     <>
       <Button disabled>Primary</Button>
@@ -64,45 +70,45 @@ export const Disabled = {
         Tertiary
       </Button>
     </>
-  ),
-
-  name: "Disabled"
+  )
 };
 
-export const States = {
+export const States: Story = {
   render: () => (
     <>
       <Button>Regular</Button>
       <Button active>Active</Button>
     </>
-  ),
-
-  name: "States"
+  )
 };
 
-export const PositiveAndNegative = {
+export const PositiveAndNegative: Story = {
   render: () => (
     <>
       <Button color={Button.colors.POSITIVE}>Positive</Button>
       <Button color={Button.colors.NEGATIVE}>Negative</Button>
     </>
   ),
-
   name: "Positive and Negative"
 };
 
-export const Icons = {
+export const Icons: Story = {
   render: () => (
     <>
       <Button rightIcon={Calendar}>Right icon</Button>
       <Button leftIcon={Calendar}>Left icon</Button>
     </>
   ),
-
-  name: "Icons"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Calendar }
+      }
+    }
+  }
 };
 
-export const LoadingState = {
+export const LoadingState: Story = {
   render: () => {
     const [loading, setLoading] = useState(false);
     const onClick = useCallback(() => {
@@ -114,11 +120,10 @@ export const LoadingState = {
       </Button>
     );
   },
-
   name: "Loading state"
 };
 
-export const SuccessState = {
+export const SuccessState: Story = {
   render: () => {
     const [success, setSuccess] = useState(false);
     const onClick = useCallback(() => {
@@ -130,11 +135,17 @@ export const SuccessState = {
       </Button>
     );
   },
-
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Check }
+      }
+    }
+  },
   name: "Success state"
 };
 
-export const OnColorStates = {
+export const OnColorStates: Story = {
   render: () => (
     <>
       <div style={{ display: "flex", flexDirection: "column" }}>
@@ -166,11 +177,10 @@ export const OnColorStates = {
       </div>
     </>
   ),
-
   name: "On color states"
 };
 
-export const AdjacentButtons = {
+export const AdjacentButtons: Story = {
   render: () => (
     <div>
       <Button kind={Button.kinds.SECONDARY} size={Button.sizes.SMALL} ariaLabel="decrease zoom level" rightFlat>
@@ -181,6 +191,12 @@ export const AdjacentButtons = {
       </Button>
     </div>
   ),
-
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Remove, Add }
+      }
+    }
+  },
   name: "Adjacent buttons"
 };
diff --git a/packages/core/src/components/ButtonGroup/__stories__/buttonGroup.mdx b/packages/core/src/components/ButtonGroup/__stories__/buttonGroup.mdx
index b02491bcf3..7c620ab342 100644
--- a/packages/core/src/components/ButtonGroup/__stories__/buttonGroup.mdx
+++ b/packages/core/src/components/ButtonGroup/__stories__/buttonGroup.mdx
@@ -1,5 +1,4 @@
-import { Canvas, Meta } from "@storybook/blocks";
-import { Link } from "vibe-storybook-components";
+import { Meta } from "@storybook/blocks";
 import ButtonGroup from "../ButtonGroup";
 import { Mobile } from "../../Icon/Icons";
 import { BREADCRUBMS, BUTTON, TABS } from "../../../storybook/components/related-components/component-description-map";
diff --git a/packages/core/src/components/ButtonGroup/__stories__/buttonGroup.stories.tsx b/packages/core/src/components/ButtonGroup/__stories__/buttonGroup.stories.tsx
index 50b43a6596..07fcc7b877 100644
--- a/packages/core/src/components/ButtonGroup/__stories__/buttonGroup.stories.tsx
+++ b/packages/core/src/components/ButtonGroup/__stories__/buttonGroup.stories.tsx
@@ -2,6 +2,9 @@ import ButtonGroup from "../ButtonGroup";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import { createComponentTemplate } from "vibe-storybook-components";
 import "./buttonGroup.stories.scss";
+import { Meta, StoryObj } from "@storybook/react";
+
+type Story = StoryObj<typeof ButtonGroup>;
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: ButtonGroup,
@@ -16,11 +19,10 @@ export default {
   component: ButtonGroup,
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators
-};
+} satisfies Meta<typeof ButtonGroup>;
 
-export const Overview = {
+export const Overview: Story = {
   render: buttonGroupTemplate.bind({}),
-  name: "Overview",
 
   args: {
     options: [
@@ -43,10 +45,17 @@ export const Overview = {
     ],
 
     value: 1
+  },
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
   }
 };
 
-export const Default = {
+export const Default: Story = {
   render: () => (
     <ButtonGroup
       groupAriaLabel="button group aria label"
@@ -70,12 +79,10 @@ export const Default = {
         }
       ]}
     />
-  ),
-
-  name: "Default"
+  )
 };
 
-export const Tertiary = {
+export const Tertiary: Story = {
   render: () => (
     <ButtonGroup
       groupAriaLabel="button group aria label"
@@ -100,12 +107,10 @@ export const Tertiary = {
         }
       ]}
     />
-  ),
-
-  name: "Tertiary"
+  )
 };
 
-export const Disabled = {
+export const Disabled: Story = {
   render: () => (
     <ButtonGroup
       disabled
@@ -129,12 +134,10 @@ export const Disabled = {
         }
       ]}
     />
-  ),
-
-  name: "Disabled"
+  )
 };
 
-export const DisabledSingeButton = {
+export const DisabledSingeButton: Story = {
   render: () => (
     <ButtonGroup
       groupAriaLabel="button group aria label"
@@ -160,11 +163,10 @@ export const DisabledSingeButton = {
       ]}
     />
   ),
-
   name: "Disabled - Singe Button"
 };
 
-export const Size = {
+export const Size: Story = {
   render: () => (
     <>
       <div className="monday-storybook-button-group_column">
@@ -196,12 +198,10 @@ export const Size = {
         />
       </div>
     </>
-  ),
-
-  name: "Size"
+  )
 };
 
-export const ButtonGroupInSettings = {
+export const ButtonGroupInSettings: Story = {
   render: () => (
     <div className="monday-storybook-button-group_column">
       Function
@@ -230,11 +230,10 @@ export const ButtonGroupInSettings = {
       />
     </div>
   ),
-
   name: "Button group in settings"
 };
 
-export const ButtonGroupAsToggle = {
+export const ButtonGroupAsToggle: Story = {
   render: () => (
     <ButtonGroup
       groupAriaLabel="button group aria label"
@@ -251,6 +250,5 @@ export const ButtonGroupAsToggle = {
       ]}
     />
   ),
-
   name: "Button group as toggle"
 };
diff --git a/packages/core/src/components/Checkbox/__stories__/checkbox.mdx b/packages/core/src/components/Checkbox/__stories__/checkbox.mdx
index 61ffefdc42..6a0efde4ab 100644
--- a/packages/core/src/components/Checkbox/__stories__/checkbox.mdx
+++ b/packages/core/src/components/Checkbox/__stories__/checkbox.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/blocks";
 import Checkbox from "../Checkbox";
 import { createComponentTemplate, Link } from "vibe-storybook-components";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
diff --git a/packages/core/src/components/Checkbox/__stories__/checkbox.stories.tsx b/packages/core/src/components/Checkbox/__stories__/checkbox.stories.tsx
index faef84e7a1..614366ee21 100644
--- a/packages/core/src/components/Checkbox/__stories__/checkbox.stories.tsx
+++ b/packages/core/src/components/Checkbox/__stories__/checkbox.stories.tsx
@@ -2,6 +2,9 @@ import { createComponentTemplate, Link } from "vibe-storybook-components";
 import Checkbox from "../Checkbox";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import "./checkbox.stories.scss";
+import { Meta, StoryObj } from "@storybook/react";
+
+type Story = StoryObj<typeof Checkbox>;
 
 const metaSettings = createStoryMetaSettingsDecorator({ component: Checkbox });
 const checkboxTemplate = createComponentTemplate(Checkbox);
@@ -10,19 +13,24 @@ export default {
   title: "Inputs/Checkbox",
   component: Checkbox,
   decorators: metaSettings.decorators
-};
+} satisfies Meta<typeof Checkbox>;
 
-export const Overview = {
+export const Overview: Story = {
   render: checkboxTemplate.bind({}),
-  name: "Overview",
-
   args: {
     label: "Option",
     defaultChecked: true
+  },
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
   }
 };
 
-export const States = {
+export const States: Story = {
   render: () => (
     <>
       <Checkbox label="Regular" />
@@ -32,11 +40,10 @@ export const States = {
       <Checkbox label="Disabled checked" disabled checked />
       <Checkbox label="Disabled indeterminate" disabled indeterminate />
     </>
-  ),
-  name: "States"
+  )
 };
 
-export const SingleCheckbox = {
+export const SingleCheckbox: Story = {
   render: () => (
     <Checkbox
       checked
@@ -55,6 +62,12 @@ export const SingleCheckbox = {
       }
     />
   ),
-
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
+  },
   name: "Single checkbox"
 };
diff --git a/packages/core/src/components/Combobox/__stories__/combobox.mdx b/packages/core/src/components/Combobox/__stories__/combobox.mdx
index 36e82aa152..b8fa98f51e 100644
--- a/packages/core/src/components/Combobox/__stories__/combobox.mdx
+++ b/packages/core/src/components/Combobox/__stories__/combobox.mdx
@@ -1,5 +1,4 @@
-import { Canvas, Meta } from "@storybook/blocks";
-import { Link } from "vibe-storybook-components";
+import { Meta } from "@storybook/blocks";
 import Combobox from "../Combobox";
 import DialogContentContainer from "../../DialogContentContainer/DialogContentContainer";
 import { DROPDOWN, MENU, SEARCH } from "../../../storybook/components/related-components/component-description-map";
diff --git a/packages/core/src/components/Combobox/__stories__/combobox.stories.js b/packages/core/src/components/Combobox/__stories__/combobox.stories.js
index a08efc3374..cff4237a3a 100644
--- a/packages/core/src/components/Combobox/__stories__/combobox.stories.js
+++ b/packages/core/src/components/Combobox/__stories__/combobox.stories.js
@@ -40,8 +40,6 @@ const comboboxTemplate = args => {
 
 export const Overview = {
   render: comboboxTemplate.bind({}),
-  name: "Overview",
-
   args: {
     options: [
       {
@@ -61,6 +59,13 @@ export const Overview = {
     onClick: () => alert("clicked"),
     placeholder: "Placeholder text here",
     clearFilterOnSelection: true
+  },
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
   }
 };
 
@@ -86,8 +91,6 @@ export const Default = {
 
     return <Combobox placeholder="Placeholder text here" options={options} />;
   },
-
-  name: "Default",
   play: defaultPlaySuite
 };
 
@@ -125,7 +128,6 @@ export const ComboboxInsideADialog = {
       </DialogContentContainer>
     );
   },
-
   name: "Combobox inside a dialog"
 };
 
@@ -170,9 +172,7 @@ export const Sizes = {
         </DialogContentContainer>
       </div>
     );
-  },
-
-  name: "Sizes"
+  }
 };
 
 export const WithCategories = {
@@ -273,7 +273,13 @@ export const WithCategories = {
       </Flex>
     );
   },
-
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { StoryDescription }
+      }
+    }
+  },
   name: "With categories"
 };
 
@@ -316,7 +322,13 @@ export const WithIcons = {
       </DialogContentContainer>
     );
   },
-
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Wand, ThumbsUp, Time, Update, Upgrade }
+      }
+    }
+  },
   name: "With icons"
 };
 
@@ -352,7 +364,13 @@ export const WithOptionRenderer = {
       </DialogContentContainer>
     );
   },
-
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Person }
+      }
+    }
+  },
   name: "With optionRenderer"
 };
 
@@ -398,8 +416,13 @@ export const WithButton = {
       </DialogContentContainer>
     );
   },
-
-  name: "With Button"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Wand, ThumbsUp, Time, Update, Upgrade, Edit }
+      }
+    }
+  }
 };
 
 export const WithCreation = {
@@ -424,9 +447,7 @@ export const WithCreation = {
         />
       </DialogContentContainer>
     );
-  },
-
-  name: "With Creation"
+  }
 };
 
 export const WithVirtualizationOptimization = {
@@ -642,7 +663,13 @@ export const WithVirtualizationOptimization = {
       </Flex>
     );
   },
-
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { StoryDescription }
+      }
+    }
+  },
   name: "With virtualization optimization"
 };
 
@@ -656,7 +683,6 @@ export const LoadingState = {
       </DialogContentContainer>
     );
   },
-
   name: "Loading state"
 };
 
@@ -734,6 +760,12 @@ export const ComboboxAsPersonPicker = {
       </Flex>
     );
   },
-
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { person1, person2, person3, optionRenderer }
+      }
+    }
+  },
   name: "Combobox as person picker"
 };
diff --git a/packages/core/src/components/Dropdown/__stories__/dropdown.mdx b/packages/core/src/components/Dropdown/__stories__/dropdown.mdx
index eb873be5cb..e83eb83eb1 100644
--- a/packages/core/src/components/Dropdown/__stories__/dropdown.mdx
+++ b/packages/core/src/components/Dropdown/__stories__/dropdown.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/blocks";
 import { Link } from "vibe-storybook-components";
 import {
   COMBOBOX,
@@ -74,7 +74,7 @@ The Dropdown component supports multiple options selection in two different stat
 
 The Dropdown component supports async loading of options.
 
-<Canvas of={DropdownStories.AsyncOptions} />
+<Canvas of={DropdownStories.AsyncDropdown} />
 
 ### Dropdown with avatar
 
diff --git a/packages/core/src/components/Dropdown/__stories__/dropdown.stories.js b/packages/core/src/components/Dropdown/__stories__/dropdown.stories.js
index 99ece63eb5..03de472fb5 100644
--- a/packages/core/src/components/Dropdown/__stories__/dropdown.stories.js
+++ b/packages/core/src/components/Dropdown/__stories__/dropdown.stories.js
@@ -55,7 +55,6 @@ const dropdownTemplate = props => {
 
 export const Overview = {
   render: dropdownTemplate.bind({}),
-  name: "Overview",
   args: {
     placeholder: "Placeholder text here",
     className: "dropdown-stories-styles_spacing"
@@ -64,6 +63,11 @@ export const Overview = {
     controls: {
       // TODO: remove exclusion when prop is removed in next major
       exclude: ["withReadOnlyStyle"]
+    },
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
     }
   },
   play: overviewPlaySuite
@@ -76,9 +80,7 @@ export const Sizes = {
       <Dropdown placeholder="Medium" size={Dropdown.sizes.MEDIUM} className="dropdown-stories-styles_spacing" />
       <Dropdown placeholder="Large" size={Dropdown.sizes.LARGE} className="dropdown-stories-styles_spacing" />
     </>
-  ),
-
-  name: "Sizes"
+  )
 };
 
 export const Disabled = {
@@ -113,9 +115,7 @@ export const Disabled = {
         />
       </Flex>
     );
-  },
-
-  name: "Disabled"
+  }
 };
 
 export const Readonly = {
@@ -150,9 +150,7 @@ export const Readonly = {
         />
       </Flex>
     );
-  },
-
-  name: "Readonly"
+  }
 };
 
 export const Rtl = {
@@ -162,7 +160,6 @@ export const Rtl = {
       <Dropdown placeholder="מימין לשמאל" className="dropdown-stories-styles_spacing" rtl />
     </>
   ),
-
   name: "RTL"
 };
 
@@ -268,12 +265,18 @@ export const MultiChoiceWithDifferentStates = {
       </Flex>
     );
   },
-
-  name: "Multi-choice with different states",
-  play: multiInteractionTests
+  play: multiInteractionTests,
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { StoryDescription }
+      }
+    }
+  },
+  name: "Multi-choice with different states"
 };
 
-export const AsyncOptions = {
+export const AsyncDropdown = {
   render: () => {
     const fetchUserOptions = async () => {
       try {
@@ -299,9 +302,7 @@ export const AsyncOptions = {
         <Dropdown asyncOptions={fetchUserOptions} placeholder="Async options" cacheOptions defaultOptions />
       </div>
     );
-  },
-
-  name: "Async Dropdown"
+  }
 };
 
 export const DropdownWithAvatar = {
@@ -352,7 +353,13 @@ export const DropdownWithAvatar = {
       </Flex>
     );
   },
-
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { person1, person2, person3, StoryDescription }
+      }
+    }
+  },
   name: "Dropdown with avatar"
 };
 
@@ -399,7 +406,13 @@ export const DropdownWithIcon = {
       </Flex>
     );
   },
-
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Email, Attach, StoryDescription }
+      }
+    }
+  },
   name: "Dropdown with icon"
 };
 
@@ -440,7 +453,13 @@ export const DropdownWithChipColors = {
       </StoryDescription>
     );
   },
-
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { StoryDescription }
+      }
+    }
+  },
   name: "Dropdown with chip colors"
 };
 
@@ -480,7 +499,13 @@ export const DropdownWithTooltipsOnItems = {
       </StoryDescription>
     );
   },
-
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { StoryDescription }
+      }
+    }
+  },
   name: "Dropdown with tooltips on items"
 };
 
@@ -530,7 +555,13 @@ export const DropdownWithChips = {
       />
     );
   },
-
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { person1, person2, person3, OptionRenderer }
+      }
+    }
+  },
   name: "Dropdown with chips"
 };
 
@@ -590,7 +621,6 @@ export const SearchableDropdown = {
       />
     );
   },
-
   name: "Searchable dropdown"
 };
 
@@ -631,7 +661,6 @@ export const DropdownWithLabels = {
       />
     );
   },
-
   name: "Dropdown with labels"
 };
 
@@ -667,7 +696,6 @@ export const DropdownInsideAForm = {
       </div>
     );
   },
-
   name: "Dropdown inside a form"
 };
 
@@ -711,7 +739,6 @@ export const DropdownWithGroups = {
       <Dropdown placeholder="Placeholder text here" options={options} className="dropdown-stories-styles_big-spacing" />
     );
   },
-
   name: "Dropdown with groups"
 };
 
@@ -818,7 +845,13 @@ export const DropdownInsidePopover = {
       </Flex>
     );
   },
-
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { ModalExampleContent }
+      }
+    }
+  },
   name: "Dropdown inside popover"
 };
 
@@ -863,7 +896,6 @@ export const DropdownWithLoading = {
       />
     );
   },
-
   name: "Dropdown with loading"
 };
 
@@ -908,7 +940,6 @@ export const DropdownWithRef = {
       </Flex>
     );
   },
-
   name: "Dropdown with ref"
 };
 
@@ -944,6 +975,5 @@ export const DropdownValueSelection = {
       </Flex>
     );
   },
-
   name: "Dropdown value selection"
 };
diff --git a/packages/core/src/components/EditableHeading/__stories__/EditableHeading.mdx b/packages/core/src/components/EditableHeading/__stories__/EditableHeading.mdx
index 0e59f0d19b..4b317b3c09 100644
--- a/packages/core/src/components/EditableHeading/__stories__/EditableHeading.mdx
+++ b/packages/core/src/components/EditableHeading/__stories__/EditableHeading.mdx
@@ -1,5 +1,5 @@
 import EditableHeading from "../EditableHeading";
-import { Canvas, Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/blocks";
 import { createComponentTemplate } from "vibe-storybook-components";
 import {
   EDITABLE_TEXT,
diff --git a/packages/core/src/components/EditableHeading/__stories__/EditableHeading.stories.js b/packages/core/src/components/EditableHeading/__stories__/EditableHeading.stories.js
index 7c893f5f38..2654ce1858 100644
--- a/packages/core/src/components/EditableHeading/__stories__/EditableHeading.stories.js
+++ b/packages/core/src/components/EditableHeading/__stories__/EditableHeading.stories.js
@@ -21,12 +21,18 @@ const editableHeadingTemplate = createComponentTemplate(EditableHeading);
 
 export const Overview = {
   render: editableHeadingTemplate.bind({}),
-  name: "Overview",
   args: {
     value: "This heading is an editable heading",
     type: EditableHeading.types.H1
   },
-  play: overviewPlaySuite
+  play: overviewPlaySuite,
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
+  }
 };
 
 export const Types = {
@@ -94,5 +100,11 @@ export const Types = {
       </div>
     </div>
   ),
-  name: "Types"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { EditableHeading }
+      }
+    }
+  }
 };
diff --git a/packages/core/src/components/EditableText/__stories__/EditableText.mdx b/packages/core/src/components/EditableText/__stories__/EditableText.mdx
index dd36c0b063..d38cc73ec3 100644
--- a/packages/core/src/components/EditableText/__stories__/EditableText.mdx
+++ b/packages/core/src/components/EditableText/__stories__/EditableText.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/blocks";
 import {
   EDITABLE_HEADING,
   HEADING,
diff --git a/packages/core/src/components/EditableText/__stories__/EditableText.stories.js b/packages/core/src/components/EditableText/__stories__/EditableText.stories.js
index e6f5b874e5..4ad6253b6c 100644
--- a/packages/core/src/components/EditableText/__stories__/EditableText.stories.js
+++ b/packages/core/src/components/EditableText/__stories__/EditableText.stories.js
@@ -21,12 +21,18 @@ const EditableTextTemplate = createComponentTemplate(EditableText);
 
 export const Overview = {
   render: EditableTextTemplate.bind({}),
-  name: "Overview",
   args: {
     value: "This text is an editable text",
     type: EditableText.types.TEXT2
   },
-  play: overviewPlaySuite
+  play: overviewPlaySuite,
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
+  }
 };
 
 export const Types = {
@@ -88,5 +94,11 @@ export const Types = {
       </div>
     </div>
   ),
-  name: "Types"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { styles }
+      }
+    }
+  }
 };
diff --git a/packages/core/src/components/IconButton/__stories__/IconButton.mdx b/packages/core/src/components/IconButton/__stories__/IconButton.mdx
index e9a95d6bc1..d8eca001d7 100644
--- a/packages/core/src/components/IconButton/__stories__/IconButton.mdx
+++ b/packages/core/src/components/IconButton/__stories__/IconButton.mdx
@@ -1,5 +1,4 @@
-import { Canvas, Meta } from "@storybook/blocks";
-import { Link } from "vibe-storybook-components";
+import { Meta } from "@storybook/blocks";
 import IconButton from "../IconButton";
 import DialogContentContainer from "../../DialogContentContainer/DialogContentContainer";
 import { Add, Bolt, Broom, HighlightColorBucket, Pin, Show } from "../../Icon/Icons";
diff --git a/packages/core/src/components/IconButton/__stories__/IconButton.stories.tsx b/packages/core/src/components/IconButton/__stories__/IconButton.stories.tsx
index faac3705e7..960a1f87e1 100644
--- a/packages/core/src/components/IconButton/__stories__/IconButton.stories.tsx
+++ b/packages/core/src/components/IconButton/__stories__/IconButton.stories.tsx
@@ -10,6 +10,9 @@ import Icon from "../../Icon/Icon";
 import Heading from "../../LegacyHeading/LegacyHeading";
 import Avatar from "../../Avatar/Avatar";
 import styles from "./iconButton.stories.module.scss";
+import { Meta, StoryObj } from "@storybook/react";
+
+type Story = StoryObj<typeof IconButton>;
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: IconButton,
@@ -25,19 +28,24 @@ export default {
   component: IconButton,
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators
-};
+} satisfies Meta<typeof IconButton>;
 
-export const Overview = {
+export const Overview: Story = {
   render: iconButtonTemplate.bind({}),
-  name: "Overview",
-
   args: {
     ariaLabel: "Add",
     icon: Add
+  },
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
   }
 };
 
-export const Kinds = {
+export const Kinds: Story = {
   render: () => (
     <div
       style={{
@@ -52,11 +60,16 @@ export const Kinds = {
       <IconButton icon={Bolt} kind={IconButton.kinds.TERTIARY} ariaLabel="My tertiary IconButton" />
     </div>
   ),
-
-  name: "Kinds"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Bolt }
+      }
+    }
+  }
 };
 
-export const Sizes = {
+export const Sizes: Story = {
   render: () => (
     <div
       style={{
@@ -103,11 +116,16 @@ export const Sizes = {
       />
     </div>
   ),
-
-  name: "Sizes"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Robot }
+      }
+    }
+  }
 };
 
-export const Active = {
+export const Active: Story = {
   render: () => (
     <div
       style={{
@@ -122,11 +140,16 @@ export const Active = {
       <IconButton icon={Doc} kind={IconButton.kinds.TERTIARY} ariaLabel="My active large IconButton" active />
     </div>
   ),
-
-  name: "Active"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Doc }
+      }
+    }
+  }
 };
 
-export const Disabled = {
+export const Disabled: Story = {
   render: () => (
     <div
       style={{
@@ -159,11 +182,16 @@ export const Disabled = {
       />
     </div>
   ),
-
-  name: "Disabled"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Doc }
+      }
+    }
+  }
 };
 
-export const IconButtonAsToolbarButton = {
+export const IconButtonAsToolbarButton: Story = {
   render: () => (
     <Flex
       className={styles.dashboard}
@@ -181,11 +209,17 @@ export const IconButtonAsToolbarButton = {
       <div className={styles.dashboardContent} />
     </Flex>
   ),
-
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { styles, Drag, Filter }
+      }
+    }
+  },
   name: "Icon button as toolbar button"
 };
 
-export const IconButtonAsCloseButton = {
+export const IconButtonAsCloseButton: Story = {
   render: () => (
     <>
       <Flex
@@ -246,6 +280,12 @@ export const IconButtonAsCloseButton = {
       <IconButton icon={CloseSmall} size={IconButton.sizes.SMALL} ariaLabel="Remove from Recycle bin" />
     </>
   ),
-
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { styles, person1, Item, Time, CloseSmall }
+      }
+    }
+  },
   name: "Icon button as close button"
 };
diff --git a/packages/core/src/components/MenuButton/__stories__/MenuButton.mdx b/packages/core/src/components/MenuButton/__stories__/MenuButton.mdx
index 458f368f33..649ab8e44e 100644
--- a/packages/core/src/components/MenuButton/__stories__/MenuButton.mdx
+++ b/packages/core/src/components/MenuButton/__stories__/MenuButton.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/blocks";
 import {
   BUTTON,
   ICON_BUTTON,
diff --git a/packages/core/src/components/MenuButton/__stories__/MenuButton.stories.tsx b/packages/core/src/components/MenuButton/__stories__/MenuButton.stories.tsx
index 39be8babc0..d83cc5add0 100644
--- a/packages/core/src/components/MenuButton/__stories__/MenuButton.stories.tsx
+++ b/packages/core/src/components/MenuButton/__stories__/MenuButton.stories.tsx
@@ -6,6 +6,9 @@ import { Button, Menu, MenuItem } from "../../index";
 import { DropdownChevronDown, Favorite, Moon, Sun } from "../../Icon/Icons";
 import MoveArrowDown from "../../Icon/Icons/components/MoveArrowDown";
 import React, { useRef } from "react";
+import { Meta, StoryObj } from "@storybook/react";
+
+type Story = StoryObj<typeof MenuButton>;
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: MenuButton,
@@ -19,14 +22,12 @@ export default {
   component: MenuButton,
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators
-};
+} satisfies Meta<typeof MenuButton>;
 
 const menuButtonTemplate = createComponentTemplate(MenuButton);
 
-export const Overview = {
+export const Overview: Story = {
   render: menuButtonTemplate.bind({}),
-  name: "Overview",
-
   args: {
     children: (
       <Menu id="menu" size={Menu.sizes.MEDIUM}>
@@ -35,10 +36,17 @@ export const Overview = {
         <MenuItem icon={Favorite} onClick={NOOP} iconType={MenuItem.iconType.SVG} title="And the stars" />
       </Menu>
     )
+  },
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
   }
 };
 
-export const Sizes = {
+export const Sizes: Story = {
   render: () => (
     <>
       <MenuButton size={MenuButton.sizes.XXS}>
@@ -78,11 +86,16 @@ export const Sizes = {
       </MenuButton>
     </>
   ),
-
-  name: "Sizes"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { NOOP, Sun, Moon, Favorite }
+      }
+    }
+  }
 };
 
-export const DifferentIcon = {
+export const DifferentIcon: Story = {
   render: () => (
     <MenuButton component={MoveArrowDown}>
       <Menu id="menu" size={Menu.sizes.MEDIUM}>
@@ -92,11 +105,16 @@ export const DifferentIcon = {
       </Menu>
     </MenuButton>
   ),
-
-  name: "Different Icon"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { NOOP, MoveArrowDown, Sun, Moon, Favorite }
+      }
+    }
+  }
 };
 
-export const WithText = {
+export const WithText: Story = {
   render: () => (
     <div
       style={{
@@ -112,11 +130,16 @@ export const WithText = {
       </MenuButton>
     </div>
   ),
-
-  name: "With Text"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { NOOP, Sun, Moon, Favorite }
+      }
+    }
+  }
 };
 
-export const WithTextAndIconAtTheEnd = {
+export const WithTextAndIconAtTheEnd: Story = {
   render: () => (
     <div
       style={{
@@ -132,11 +155,17 @@ export const WithTextAndIconAtTheEnd = {
       </MenuButton>
     </div>
   ),
-
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { NOOP, DropdownChevronDown, Sun, Moon, Favorite }
+      }
+    }
+  },
   name: "With Text and Icon at the end"
 };
 
-export const Disabled = {
+export const Disabled: Story = {
   render: () => (
     <MenuButton disabled tooltipContent="This action is not available now">
       <Menu id="menu" size={Menu.sizes.MEDIUM}>
@@ -146,11 +175,16 @@ export const Disabled = {
       </Menu>
     </MenuButton>
   ),
-
-  name: "Disabled"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { NOOP, Sun, Moon, Favorite }
+      }
+    }
+  }
 };
 
-export const CustomTriggerElement = {
+export const CustomTriggerElement: Story = {
   render: () => {
     const ref = useRef(null);
 
@@ -170,6 +204,11 @@ export const CustomTriggerElement = {
       </MenuButton>
     );
   },
-
-  name: "Custom Trigger Element"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { NOOP, Sun, Moon, Favorite }
+      }
+    }
+  }
 };
diff --git a/packages/core/src/components/RadioButton/__stories__/radioButton.mdx b/packages/core/src/components/RadioButton/__stories__/radioButton.mdx
index 4e52fe4ad3..16271bab77 100644
--- a/packages/core/src/components/RadioButton/__stories__/radioButton.mdx
+++ b/packages/core/src/components/RadioButton/__stories__/radioButton.mdx
@@ -1,5 +1,4 @@
-import { Canvas, Meta } from "@storybook/blocks";
-import { Link } from "vibe-storybook-components";
+import { Meta } from "@storybook/blocks";
 import RadioButton from "../RadioButton";
 import { CHECKBOX, DROPDOWN, TOGGLE } from "../../../storybook/components/related-components/component-description-map";
 import DialogContentContainer from "../../DialogContentContainer/DialogContentContainer";
diff --git a/packages/core/src/components/RadioButton/__stories__/radioButton.stories.js b/packages/core/src/components/RadioButton/__stories__/radioButton.stories.js
index e5b5b42671..7a01f126a7 100644
--- a/packages/core/src/components/RadioButton/__stories__/radioButton.stories.js
+++ b/packages/core/src/components/RadioButton/__stories__/radioButton.stories.js
@@ -15,10 +15,15 @@ export default {
 
 export const Overview = {
   render: radioButtonTemplate.bind({}),
-  name: "Overview",
-
   args: {
     text: "Selection"
+  },
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
   }
 };
 
@@ -30,8 +35,7 @@ export const States = {
       <RadioButton text="Disabled" disabled disabledReason="Disabled reason" />
       <RadioButton text="Disabled" checked disabled />
     </>
-  ),
-  name: "States"
+  )
 };
 
 export const RadioButtonInItemsList = {
@@ -43,9 +47,8 @@ export const RadioButtonInItemsList = {
       <RadioButton text="All updates" name="radio-buttons-group-4" />
     </div>
   ),
-
-  name: "Radio button in items list",
-  play: clickRadioButtonPlaySuite
+  play: clickRadioButtonPlaySuite,
+  name: "Radio button in items list"
 };
 
 export const ControlledRadioButtons = {
@@ -68,6 +71,6 @@ export const ControlledRadioButtons = {
       </div>
     );
   },
-  name: "Controlled Radio buttons",
-  play: controlRadioButtonPlaySuite
+  play: controlRadioButtonPlaySuite,
+  name: "Controlled Radio buttons"
 };
diff --git a/packages/core/src/components/Search/__stories__/Search.mdx b/packages/core/src/components/Search/__stories__/Search.mdx
index fa3c794d2a..c686e03aae 100644
--- a/packages/core/src/components/Search/__stories__/Search.mdx
+++ b/packages/core/src/components/Search/__stories__/Search.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/blocks";
 import { StorybookLink, Tip, UsageGuidelines } from "vibe-storybook-components";
 import {
   COMBOBOX,
diff --git a/packages/core/src/components/Search/__stories__/Search.stories.tsx b/packages/core/src/components/Search/__stories__/Search.stories.tsx
index b40c793a01..ac099a0ff9 100644
--- a/packages/core/src/components/Search/__stories__/Search.stories.tsx
+++ b/packages/core/src/components/Search/__stories__/Search.stories.tsx
@@ -4,7 +4,7 @@ import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import DialogContentContainer from "../../DialogContentContainer/DialogContentContainer";
 import Combobox from "../../Combobox/Combobox";
 import Flex from "../../Flex/Flex";
-import { Decorator, StoryObj } from "@storybook/react";
+import { Decorator, Meta, StoryObj } from "@storybook/react";
 import IconButton from "../../IconButton/IconButton";
 import FilterIcon from "../../Icon/Icons/components/Filter";
 
@@ -20,7 +20,7 @@ export default {
   component: Search,
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators
-};
+} satisfies Meta<typeof Search>;
 
 type Story = StoryObj<typeof Search>;
 
@@ -32,10 +32,15 @@ const withFixedWidth: Decorator = Story => (
 
 export const Overview: Story = {
   render: searchTemplate.bind({}),
-  name: "Overview",
-
   args: { placeholder: "Placeholder text here" },
-  decorators: [withFixedWidth]
+  decorators: [withFixedWidth],
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
+  }
 };
 
 export const Sizes: Story = {
@@ -46,7 +51,6 @@ export const Sizes: Story = {
       <Search placeholder="Large" size="large" />
     </>
   ),
-
   decorators: [
     Story => (
       <Flex direction={Flex.directions.COLUMN} justify={Flex.justify.START} gap={Flex.gaps.MEDIUM}>
@@ -54,7 +58,14 @@ export const Sizes: Story = {
       </Flex>
     ),
     withFixedWidth
-  ]
+  ],
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Search }
+      }
+    }
+  }
 };
 
 export const WithAdditionalAction: Story = {
@@ -64,8 +75,14 @@ export const WithAdditionalAction: Story = {
       renderAction={<IconButton icon={FilterIcon} ariaLabel="Filter results" size={IconButton.sizes.SMALL} />}
     />
   ),
-
-  decorators: [withFixedWidth]
+  decorators: [withFixedWidth],
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Search, FilterIcon }
+      }
+    }
+  }
 };
 
 const options = [
@@ -102,5 +119,12 @@ export const FilterInCombobox: Story = {
       </DialogContentContainer>
     ),
     withFixedWidth
-  ]
+  ],
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { options }
+      }
+    }
+  }
 };
diff --git a/packages/core/src/components/Slider/__stories__/Slider.mdx b/packages/core/src/components/Slider/__stories__/Slider.mdx
index 1f73de7723..18bd8d98ca 100644
--- a/packages/core/src/components/Slider/__stories__/Slider.mdx
+++ b/packages/core/src/components/Slider/__stories__/Slider.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/blocks";
 import { UsageGuidelines } from "vibe-storybook-components";
 import {
   LINEAR_PROGRESS_BAR,
diff --git a/packages/core/src/components/Slider/__stories__/Slider.stories.js b/packages/core/src/components/Slider/__stories__/Slider.stories.js
index 5f179f0e36..1a8fea975d 100644
--- a/packages/core/src/components/Slider/__stories__/Slider.stories.js
+++ b/packages/core/src/components/Slider/__stories__/Slider.stories.js
@@ -20,8 +20,13 @@ const sliderTemplate = createComponentTemplate(Slider);
 
 export const Overview = {
   render: sliderTemplate.bind({}),
-  name: "Overview",
-  args: {}
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
+  }
 };
 
 export const Sizes = {
@@ -31,8 +36,7 @@ export const Sizes = {
       <Slider size={Slider.sizes.MEDIUM} defaultValue={24} />
       <Slider size={Slider.sizes.LARGE} defaultValue={35} />
     </>
-  ),
-  name: "Sizes"
+  )
 };
 
 export const Ranged = {
@@ -42,9 +46,8 @@ export const Ranged = {
       <Slider data-testid={"monday-ranged-slider-m"} size={Slider.sizes.MEDIUM} ranged={true} defaultValue={[12, 55]} />
       <Slider size={Slider.sizes.LARGE} ranged={true} defaultValue={[25, 32]} />
     </>
-  ),
+  )
 
-  name: "Ranged"
   // TODO storybook 7 migration: interactive test isn't working correctly
   // play: rangedSliderMouseEventsPlaySuite
 };
@@ -56,9 +59,7 @@ export const Colors = {
       <Slider color={Slider.colors.NEGATIVE} ranged={true} defaultValue={[12, 55]} size={Slider.sizes.MEDIUM} />
       <Slider color={Slider.colors.PRIMARY} defaultValue={12} size={Slider.sizes.MEDIUM} />
     </>
-  ),
-
-  name: "Colors"
+  )
 };
 
 export const Disabled = {
@@ -74,9 +75,7 @@ export const Disabled = {
         size={Slider.sizes.MEDIUM}
       />
     </>
-  ),
-
-  name: "Disabled"
+  )
 };
 
 export const WithLabels = {
@@ -89,8 +88,14 @@ export const WithLabels = {
       <Slider prefix="Vol" indicateSelection={true} defaultValue={0} size={Slider.sizes.LARGE} />
     </>
   ),
-  name: "WithLabels",
-  decorators: [VerticalStories]
+  decorators: [VerticalStories],
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Sound, Video }
+      }
+    }
+  }
 };
 
 export const ShowValue = {
@@ -105,9 +110,8 @@ export const ShowValue = {
       />
       <Slider data-testid={"monday-slider-show-value-l"} showValue={true} defaultValue={89} size={Slider.sizes.LARGE} />
     </>
-  ),
+  )
 
-  name: "ShowValue"
   // TODO storybook 7 migration: interactive test isn't working correctly
   // play: nonRangedSliderMouseEventsPlaySuite
 };
@@ -188,7 +192,5 @@ export const Customisation = {
       />
     </>
   ),
-
-  name: "Customisation",
   decorators: [VerticalStories]
 };
diff --git a/packages/core/src/components/TextField/__stories__/TextField.mdx b/packages/core/src/components/TextField/__stories__/TextField.mdx
index 966249bd4d..7776e9ccaf 100644
--- a/packages/core/src/components/TextField/__stories__/TextField.mdx
+++ b/packages/core/src/components/TextField/__stories__/TextField.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/blocks";
 import TextField from "../TextField";
 import { ComponentRules, UsageGuidelines } from "vibe-storybook-components";
 import { COMBOBOX, DROPDOWN, SEARCH } from "../../../storybook/components/related-components/component-description-map";
diff --git a/packages/core/src/components/TextField/__stories__/TextField.stories.tsx b/packages/core/src/components/TextField/__stories__/TextField.stories.tsx
index 3d4f16cc56..a533ca98cc 100644
--- a/packages/core/src/components/TextField/__stories__/TextField.stories.tsx
+++ b/packages/core/src/components/TextField/__stories__/TextField.stories.tsx
@@ -1,9 +1,11 @@
 import TextField from "../TextField";
-import { TextFieldTextType } from "../TextFieldConstants";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import { createComponentTemplate } from "vibe-storybook-components";
 import { Check, CloseSmall, Email, Show } from "../../Icon/Icons";
 import "./TextField.stories.scss";
+import { Meta, StoryObj } from "@storybook/react";
+
+type Story = StoryObj<typeof TextField>;
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: TextField,
@@ -16,14 +18,12 @@ export default {
   component: TextField,
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators
-};
+} satisfies Meta<typeof TextField>;
 
 const textFieldTemplate = createComponentTemplate(TextField);
 
-export const Overview = {
+export const Overview: Story = {
   render: textFieldTemplate.bind({}),
-  name: "Overview",
-
   args: {
     title: "Name",
     iconName: Show,
@@ -40,23 +40,26 @@ export const Overview = {
     controls: {
       // TODO: remove exclusion when prop is removed in next major
       exclude: ["withReadOnlyStyle"]
+    },
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
     }
   }
 };
 
-export const Sizes = {
+export const Sizes: Story = {
   render: () => (
     <div className="monday-storybook-text-field_column-wrapper">
       <TextField placeholder="Small" />
       <TextField placeholder="Medium" size={TextField.sizes.MEDIUM} />
       <TextField placeholder="Large" size={TextField.sizes.LARGE} />
     </div>
-  ),
-
-  name: "Sizes"
+  )
 };
 
-export const States = {
+export const States: Story = {
   render: () => (
     <div className="monday-storybook-text-field_wrapper">
       <div className="monday-storybook-text-field_column-wrapper monday-storybook-text-field_spacing">
@@ -90,11 +93,16 @@ export const States = {
       </div>
     </div>
   ),
-
-  name: "States"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Email, Check, CloseSmall }
+      }
+    }
+  }
 };
 
-export const Validation = {
+export const Validation: Story = {
   render: () => (
     <div className="monday-storybook-text-field_column-wrapper">
       <TextField
@@ -107,12 +115,10 @@ export const Validation = {
         }}
       />
     </div>
-  ),
-
-  name: "Validation"
+  )
 };
 
-export const TextFieldInAForm = {
+export const TextFieldInAForm: Story = {
   render: () => (
     <div className="monday-storybook-text-field_box">
       <h1>Dark Mode Feedback From</h1>
@@ -122,11 +128,10 @@ export const TextFieldInAForm = {
       </div>
     </div>
   ),
-
   name: "Text field in a form"
 };
 
-export const InputFieldWithPlaceholderText = {
+export const InputFieldWithPlaceholderText: Story = {
   render: () => (
     <div className="monday-storybook-text-field_size">
       <TextField
@@ -137,36 +142,39 @@ export const InputFieldWithPlaceholderText = {
       />
     </div>
   ),
-
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { Email }
+      }
+    }
+  },
   name: "Input field with placeholder text"
 };
 
-export const RequiredInputField = {
+export const RequiredInputField: Story = {
   render: () => (
     <div className="monday-storybook-text-field_column-wrapper">
       <TextField placeholder="Your email" title="Email Address" size={TextField.sizes.MEDIUM} requiredAsterisk={true} />
     </div>
   ),
-
   name: "Required input field"
 };
 
-export const InputFieldWithDate = {
+export const InputFieldWithDate: Story = {
   render: () => (
     <div className="monday-storybook-text-field_size">
-      <TextField size={TextField.sizes.MEDIUM} type={TextFieldTextType.DATE} />
+      <TextField size={TextField.sizes.MEDIUM} type={TextField.types.DATE} />
     </div>
   ),
-
   name: "Input field with date"
 };
 
-export const InputFieldWithDateAndTime = {
+export const InputFieldWithDateAndTime: Story = {
   render: () => (
     <div className="monday-storybook-text-field_size">
-      <TextField size={TextField.sizes.MEDIUM} type={TextFieldTextType.DATE_TIME} />
+      <TextField size={TextField.sizes.MEDIUM} type={TextField.types.DATE_TIME} />
     </div>
   ),
-
   name: "Input field with date and time"
 };
diff --git a/packages/core/src/components/Toggle/__stories__/toggle.mdx b/packages/core/src/components/Toggle/__stories__/toggle.mdx
index f6c7bd2593..6a7e0aa0b3 100644
--- a/packages/core/src/components/Toggle/__stories__/toggle.mdx
+++ b/packages/core/src/components/Toggle/__stories__/toggle.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/blocks";
 import Toggle from "../Toggle";
 import {
   BUTTON_GROUP,
diff --git a/packages/core/src/components/Toggle/__stories__/toggle.stories.tsx b/packages/core/src/components/Toggle/__stories__/toggle.stories.tsx
index 099417a7c3..c6bca6ddf5 100644
--- a/packages/core/src/components/Toggle/__stories__/toggle.stories.tsx
+++ b/packages/core/src/components/Toggle/__stories__/toggle.stories.tsx
@@ -2,6 +2,9 @@ import { createComponentTemplate, MultipleStoryElementsWrapper } from "vibe-stor
 import Toggle from "../Toggle";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import "./toggle.stories.scss";
+import { Meta, StoryObj } from "@storybook/react";
+
+type Story = StoryObj<typeof Toggle>;
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: Toggle,
@@ -15,38 +18,54 @@ export default {
   component: Toggle,
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators
-};
+} satisfies Meta<typeof Toggle>;
 
 const toggleTemplate = createComponentTemplate(Toggle);
 
-export const Overview = {
+export const Overview: Story = {
   render: toggleTemplate.bind({}),
-  name: "Overview"
+  parameters: {
+    docs: {
+      liveEdit: {
+        isEnabled: false
+      }
+    }
+  }
 };
 
-export const States = {
+export const States: Story = {
   render: () => (
     <MultipleStoryElementsWrapper className="monday-storybook-toggle_column">
       <Toggle isDefaultSelected={false} />
       <Toggle />
     </MultipleStoryElementsWrapper>
   ),
-
-  name: "States"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { MultipleStoryElementsWrapper }
+      }
+    }
+  }
 };
 
-export const Disabled = {
+export const Disabled: Story = {
   render: () => (
     <MultipleStoryElementsWrapper className="monday-storybook-toggle_column">
       <Toggle isDefaultSelected={false} disabled />
       <Toggle disabled />
     </MultipleStoryElementsWrapper>
   ),
-
-  name: "Disabled"
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { MultipleStoryElementsWrapper }
+      }
+    }
+  }
 };
 
-export const TurnOnOffAnAutomation = {
+export const TurnOnOffAnAutomation: Story = {
   render: () => (
     <>
       <h5>Board automations</h5>
diff --git a/packages/core/src/storybook/components/canvas-wrapper/CanvasWrapper.tsx b/packages/core/src/storybook/components/canvas-wrapper/CanvasWrapper.tsx
index eb356ace7d..3463c4d8c5 100644
--- a/packages/core/src/storybook/components/canvas-wrapper/CanvasWrapper.tsx
+++ b/packages/core/src/storybook/components/canvas-wrapper/CanvasWrapper.tsx
@@ -18,13 +18,14 @@ const CanvasWrapper: FC<CanvasWrapper> = ({ of }) => {
     []
   );
 
-  const liveEditEnabledForStory = story.parameters.docs?.liveEdit?.isEnabled;
+  const sourceState = story.parameters.docs?.sourceState;
+  const liveEditEnabledForStory = sourceState !== "none" && story.parameters.docs?.liveEdit?.isEnabled;
 
   return (
     <>
       <Canvas
         of={of}
-        sourceState={liveEditEnabledForStory ? "none" : "hidden"}
+        sourceState={sourceState || (liveEditEnabledForStory ? "none" : "hidden")}
         additionalActions={liveEditEnabledForStory ? [toggleCodeAction] : []}
         className={styles.canvas}
       />
diff --git a/packages/core/src/storybook/decorators/withLiveEdit/LiveContent/LiveContent.tsx b/packages/core/src/storybook/decorators/withLiveEdit/LiveContent/LiveContent.tsx
index d8ba70621d..0476a1c660 100644
--- a/packages/core/src/storybook/decorators/withLiveEdit/LiveContent/LiveContent.tsx
+++ b/packages/core/src/storybook/decorators/withLiveEdit/LiveContent/LiveContent.tsx
@@ -4,12 +4,24 @@ import LivePreview from "../../../components/live-preview/LivePreview";
 import useApplyDecorators from "../hooks/useApplyDecorators";
 import { LiveContentProps } from "./LiveContent.types";
 import styles from "./LiveContent.module.scss";
+import * as VibeComponents from "../../../../components";
+import * as VibeIcons from "../../../../components/Icon/Icons";
+import * as VibeComponentsNext from "../../../../next";
+
+const vibeScope = { ...VibeComponents, VibeIcons, VibeNext: VibeComponentsNext };
+const reactCommonHooksScope = {
+  useState: React.useState,
+  useEffect: React.useEffect,
+  useCallback: React.useCallback,
+  useMemo: React.useMemo,
+  useRef: React.useRef
+};
 
 const LiveContent = ({ code, scope, decorators, context }: LiveContentProps) => {
   const content: React.JSX.Element = (
     <>
       <div className={styles.modifiedVersionIndicator}>Modified Version</div>
-      <LiveProvider code={code} scope={scope} enableTypeScript>
+      <LiveProvider code={code} scope={{ ...vibeScope, ...reactCommonHooksScope, ...scope }} enableTypeScript>
         <LivePreview />
       </LiveProvider>
     </>
diff --git a/packages/core/src/storybook/decorators/withLiveEdit/withLiveEdit.tsx b/packages/core/src/storybook/decorators/withLiveEdit/withLiveEdit.tsx
index 73ddf3e7af..6b3e7d2481 100644
--- a/packages/core/src/storybook/decorators/withLiveEdit/withLiveEdit.tsx
+++ b/packages/core/src/storybook/decorators/withLiveEdit/withLiveEdit.tsx
@@ -2,17 +2,12 @@ import { Decorator, StoryContext } from "@storybook/react";
 import { useMemo, useRef, useState } from "react";
 import { vscodeDark } from "@uiw/codemirror-theme-vscode";
 import { langs } from "@uiw/codemirror-extensions-langs";
-import * as VibeComponents from "../../../components";
-import * as VibeComponentsNext from "../../../next";
-import * as VibeIcons from "../../../components/Icon/Icons";
 import { createPortal } from "react-dom";
 import LiveEditor from "../../components/live-editor/LiveEditor";
 import { formatCode } from "./utils/prettier-utils";
 import LiveContent from "./LiveContent/LiveContent";
 import { extractRenderAttributeFromCsf } from "./utils/parse-csf-utils";
 
-const globalScope = { ...VibeComponents, VibeIcons, VibeNext: VibeComponentsNext };
-
 function getInitialCodeValue(source: string, shouldPrintError: boolean): string {
   try {
     // need to wrap with parentheses to avoid syntax errors
@@ -28,7 +23,6 @@ function getInitialCodeValue(source: string, shouldPrintError: boolean): string
 
 const withLiveEdit: Decorator = (Story, context: StoryContext) => {
   const { id, parameters, viewMode, moduleExport } = context;
-  const scope = { ...globalScope, ...parameters.docs?.liveEdit?.scope };
   const canvasEditorContainer = useMemo(() => document.getElementById(id), [id]);
   const shouldAllowLiveEdit = viewMode === "docs" && parameters.docs?.liveEdit?.isEnabled && !!canvasEditorContainer;
 
@@ -50,7 +44,12 @@ const withLiveEdit: Decorator = (Story, context: StoryContext) => {
   return (
     <>
       {dirty ? (
-        <LiveContent code={code} scope={scope} decorators={moduleExport.decorators || []} context={context} />
+        <LiveContent
+          code={code}
+          scope={parameters.docs?.liveEdit?.scope}
+          decorators={moduleExport.decorators || []}
+          context={context}
+        />
       ) : (
         <Story />
       )}
diff --git a/packages/core/src/storybook/stand-alone-documentaion/catalog/catalog.mdx b/packages/core/src/storybook/stand-alone-documentaion/catalog/catalog.mdx
index 5062a941ac..774e769eba 100644
--- a/packages/core/src/storybook/stand-alone-documentaion/catalog/catalog.mdx
+++ b/packages/core/src/storybook/stand-alone-documentaion/catalog/catalog.mdx
@@ -1,5 +1,5 @@
-import { Canvas, Meta } from "@storybook/blocks";
-import * as CatalogStories from './catalog.stories';
+import { Meta } from "@storybook/blocks";
+import * as CatalogStories from "./catalog.stories";
 
 <Meta of={CatalogStories} />
 
diff --git a/packages/core/src/storybook/stand-alone-documentaion/catalog/catalog.stories.tsx b/packages/core/src/storybook/stand-alone-documentaion/catalog/catalog.stories.tsx
index c0e93821f8..9e05daaf71 100644
--- a/packages/core/src/storybook/stand-alone-documentaion/catalog/catalog.stories.tsx
+++ b/packages/core/src/storybook/stand-alone-documentaion/catalog/catalog.stories.tsx
@@ -1,14 +1,19 @@
 import { CatalogTemplate } from "./Catalog/Catalog.stories.templates";
+import { Meta, StoryObj } from "@storybook/react";
+
+type Story = StoryObj<typeof CatalogTemplate>;
 
 export default {
   title: "Catalog",
   tags: ["internal"]
-};
+} satisfies Meta<typeof CatalogTemplate>;
 
-export const Catalog = {
+export const Catalog: Story = {
   render: () => <CatalogTemplate />,
-  name: "Catalog",
   parameters: {
+    docs: {
+      sourceState: "none"
+    },
     chromatic: {
       pauseAnimationAtEnd: true
     }