diff --git a/docs/_assets/contribute/local-storybook-website-dropdown-optimized.mp4 b/docs/_assets/contribute/local-storybook-website-dropdown-optimized.mp4
new file mode 100644
index 000000000000..b165b199c31b
Binary files /dev/null and b/docs/_assets/contribute/local-storybook-website-dropdown-optimized.mp4 differ
diff --git a/docs/_assets/contribute/local-storybook-website-dropdown-optimized.png b/docs/_assets/contribute/local-storybook-website-dropdown-optimized.png
deleted file mode 100644
index 229efa469abf..000000000000
Binary files a/docs/_assets/contribute/local-storybook-website-dropdown-optimized.png and /dev/null differ
diff --git a/docs/_snippets/add-localize-package-to-polyfills.md b/docs/_snippets/add-localize-package-to-polyfills.md
deleted file mode 100644
index 109a146cb5d3..000000000000
--- a/docs/_snippets/add-localize-package-to-polyfills.md
+++ /dev/null
@@ -1,4 +0,0 @@
-```ts filename="src/polyfills.ts" renderer="angular" language="ts"
-import '@angular/localize/init';
-```
-
diff --git a/docs/_snippets/addon-actions-action-function.md b/docs/_snippets/addon-actions-action-function.md
index 2bfa724a201b..ac2c1cd93a7d 100644
--- a/docs/_snippets/addon-actions-action-function.md
+++ b/docs/_snippets/addon-actions-action-function.md
@@ -91,4 +91,3 @@ const meta: Meta {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/addon-backgrounds-grid.md b/docs/_snippets/addon-backgrounds-grid.md
index 03c3b7559735..266d4e39d520 100644
--- a/docs/_snippets/addon-backgrounds-grid.md
+++ b/docs/_snippets/addon-backgrounds-grid.md
@@ -131,4 +131,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/addon-consume-and-update-globaltype.md b/docs/_snippets/addon-consume-and-update-globaltype.md
index d2e163551ea6..08eed8c3a8bd 100644
--- a/docs/_snippets/addon-consume-and-update-globaltype.md
+++ b/docs/_snippets/addon-consume-and-update-globaltype.md
@@ -38,4 +38,3 @@ const ExampleToolbar = () => {
   );
 };
 ```
-
diff --git a/docs/_snippets/addon-consume-globaltype.md b/docs/_snippets/addon-consume-globaltype.md
index cbebb92a408d..6a53af2bdc55 100644
--- a/docs/_snippets/addon-consume-globaltype.md
+++ b/docs/_snippets/addon-consume-globaltype.md
@@ -38,4 +38,3 @@ const ThemePanel = (props) => {
   );
 };
 ```
-
diff --git a/docs/_snippets/addon-highlight-reset.md b/docs/_snippets/addon-highlight-reset.md
index 5cd0e675b9f0..72a5f296a996 100644
--- a/docs/_snippets/addon-highlight-reset.md
+++ b/docs/_snippets/addon-highlight-reset.md
@@ -240,4 +240,3 @@ export const ResetHighlight: Story = {
   ],
 };
 ```
-
diff --git a/docs/_snippets/addon-test-install.md b/docs/_snippets/addon-test-install.md
index b516f291b85f..482a6c00793e 100644
--- a/docs/_snippets/addon-test-install.md
+++ b/docs/_snippets/addon-test-install.md
@@ -1,4 +1,4 @@
-```shell renderer="common" language="js" packageManager="npx"
+```shell renderer="common" language="js" packageManager="npm"
 npx storybook add @storybook/experimental-addon-test
 ```
 
diff --git a/docs/_snippets/angular-install.md b/docs/_snippets/angular-install.md
index 25add9054a0d..5333417d45d9 100644
--- a/docs/_snippets/angular-install.md
+++ b/docs/_snippets/angular-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/angular
 ```shell renderer="angular" language="js" packageManager="yarn"
 yarn add --dev @storybook/angular
 ```
-
diff --git a/docs/_snippets/angular-project-compodoc-config.md b/docs/_snippets/angular-project-compodoc-config.md
index 161f5cfce106..ce7077448325 100644
--- a/docs/_snippets/angular-project-compodoc-config.md
+++ b/docs/_snippets/angular-project-compodoc-config.md
@@ -46,4 +46,3 @@
   }
 }
 ```
-
diff --git a/docs/_snippets/api-doc-block-argtypes-parameter.md b/docs/_snippets/api-doc-block-argtypes-parameter.md
index f0f64183d994..abd54038f549 100644
--- a/docs/_snippets/api-doc-block-argtypes-parameter.md
+++ b/docs/_snippets/api-doc-block-argtypes-parameter.md
@@ -63,4 +63,3 @@ const meta: Meta<typeof Button> = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/api-doc-block-canvas-parameter.md b/docs/_snippets/api-doc-block-canvas-parameter.md
index 64c77770d0d2..f49d31200bde 100644
--- a/docs/_snippets/api-doc-block-canvas-parameter.md
+++ b/docs/_snippets/api-doc-block-canvas-parameter.md
@@ -107,4 +107,3 @@ export const Basic: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/api-doc-block-controls-parameter.md b/docs/_snippets/api-doc-block-controls-parameter.md
index 229051ffabb8..03f33b83c7ed 100644
--- a/docs/_snippets/api-doc-block-controls-parameter.md
+++ b/docs/_snippets/api-doc-block-controls-parameter.md
@@ -94,4 +94,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/api-doc-block-description-example.md b/docs/_snippets/api-doc-block-description-example.md
index 8ae271fdb0af..63221a8078fc 100644
--- a/docs/_snippets/api-doc-block-description-example.md
+++ b/docs/_snippets/api-doc-block-description-example.md
@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { Button } from './button.component';
 
 /**
- * # Button stories
+ * Button stories
  * These stories showcase the button
  */
 const meta: Meta<Button> = {
@@ -22,7 +22,7 @@ export default meta;
 type Story = StoryObj<Button>;
 
 /**
- * # Primary Button
+ * Primary Button
  * This is the primary button
  */
 export const Primary: Story = {
@@ -40,7 +40,7 @@ export const Primary: Story = {
 import { Button } from './Button';
 
 /**
- * # Button stories
+ * Button stories
  * These stories showcase the button
  */
 export default {
@@ -55,7 +55,7 @@ export default {
 }
 
 /**
- * # Primary Button
+ * Primary Button
  * This is the primary button
  */
 export const Primary = {
@@ -76,7 +76,7 @@ import type { Meta, StoryObj } from '@storybook/your-framework';
 import { Button } from './Button';
 
 /**
- * # Button stories
+ * Button stories
  * These stories showcase the button
  */
 const meta = {
@@ -94,7 +94,7 @@ export default meta;
 type Story = StoryObj<typeof meta>
 
 /**
- * # Primary Button
+ * Primary Button
  * This is the primary button
  */
 export const Primary: Story = {
@@ -115,7 +115,7 @@ import type { Meta, StoryObj } from '@storybook/your-framework';
 import { Button } from './Button';
 
 /**
- * # Button stories
+ * Button stories
  * These stories showcase the button
  */
 const meta: Meta<typeof Button> = {
@@ -133,7 +133,7 @@ export default meta;
 type Story = StoryObj<typeof Button>;
 
 /**
- * # Primary Button
+ * Primary Button
  * This is the primary button
  */
 export const Primary: Story = {
@@ -148,6 +148,10 @@ export const Primary: Story = {
 ```
 
 ```js filename="Button.stories.js" renderer="web-components" language="js"
+/**
+ * Button stories
+ * These stories showcase the button
+ */
 export default {
   title: 'Button',
   component: 'demo-button',
@@ -179,7 +183,7 @@ export const Primary = {
 import type { Meta, StoryObj } from '@storybook/web-components';
 
 /**
- * # Button stories
+ * Button stories
  * These stories showcase the button
  */
 const meta: Meta = {
@@ -198,7 +202,7 @@ export default meta;
 type Story = StoryObj;
 
 /**
- * # Primary Button
+ * Primary Button
  * This is the primary button
  */
 export const Primary: Story = {
@@ -211,4 +215,3 @@ export const Primary: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/api-doc-block-source-parameter.md b/docs/_snippets/api-doc-block-source-parameter.md
index 3f9b48757f67..8b1293180248 100644
--- a/docs/_snippets/api-doc-block-source-parameter.md
+++ b/docs/_snippets/api-doc-block-source-parameter.md
@@ -107,4 +107,3 @@ export const Basic: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/api-doc-block-story-parameter.md b/docs/_snippets/api-doc-block-story-parameter.md
index 681649f5b5c8..1054cf6d1620 100644
--- a/docs/_snippets/api-doc-block-story-parameter.md
+++ b/docs/_snippets/api-doc-block-story-parameter.md
@@ -107,4 +107,3 @@ export const Basic: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/apollo-module.md b/docs/_snippets/apollo-module.md
deleted file mode 100644
index 9412daad09df..000000000000
--- a/docs/_snippets/apollo-module.md
+++ /dev/null
@@ -1,38 +0,0 @@
-```ts filename="mock-graphql.module.ts" renderer="angular" language="ts" tabTitle="mock-apollo-module"
-import { NgModule } from '@angular/core';
-import { APOLLO_OPTIONS } from 'apollo-angular';
-import { ApolloClientOptions, InMemoryCache } from '@apollo/client/core';
-import { HttpLink } from 'apollo-angular/http';
-
-// See here for docs https://apollo-angular.com/docs/get-started
-
-const uri = 'https://your-graphql-endpoint';
-export function createApollo(httpLink: HttpLink): ApolloClientOptions<any> {
-  return {
-    link: httpLink.create({ uri }),
-    cache: new InMemoryCache(),
-    defaultOptions: {
-      watchQuery: {
-        fetchPolicy: 'no-cache',
-        errorPolicy: 'all',
-      },
-      query: {
-        fetchPolicy: 'no-cache',
-        errorPolicy: 'all',
-      },
-    },
-  };
-}
-
-@NgModule({
-  providers: [
-    {
-      provide: APOLLO_OPTIONS,
-      useFactory: createApollo,
-      deps: [HttpLink],
-    },
-  ],
-})
-export class MockGraphQLModule {}
-```
-
diff --git a/docs/_snippets/apollo-wrapper-component.md b/docs/_snippets/apollo-wrapper-component.md
deleted file mode 100644
index bafb8de364d2..000000000000
--- a/docs/_snippets/apollo-wrapper-component.md
+++ /dev/null
@@ -1,98 +0,0 @@
-```html renderer="svelte" language="js" tabTitle="with-mock-implementation"
-{/* MockApolloWrapperClient.svelte */}
-
-<script>
-  import { ApolloClient, InMemoryCache } from '@apollo/client';
-
-  import { setClient } from 'svelte-apollo';
-
-  const mockedClient = new ApolloClient({
-    uri: 'https://your-graphql-endpoint',
-    cache: new InMemoryCache(),
-    defaultOptions: {
-      watchQuery: {
-        fetchPolicy: 'no-cache',
-        errorPolicy: 'all',
-      },
-      query: {
-        fetchPolicy: 'no-cache',
-        errorPolicy: 'all',
-      },
-    },
-  });
-  setClient(mockedClient);
-</script>
-
-<slot />
-```
-
-```html renderer="svelte" language="ts" tabTitle="with-mock-implementation"
-{/* MockApolloWrapperClient.svelte */}
-
-<script lang="ts">
-  import { ApolloClient, InMemoryCache } from '@apollo/client';
-
-  import { setClient } from 'svelte-apollo';
-
-  const mockedClient = new ApolloClient({
-    uri: 'https://your-graphql-endpoint',
-    cache: new InMemoryCache(),
-    defaultOptions: {
-      watchQuery: {
-        fetchPolicy: 'no-cache',
-        errorPolicy: 'all',
-      },
-      query: {
-        fetchPolicy: 'no-cache',
-        errorPolicy: 'all',
-      },
-    },
-  });
-  setClient(mockedClient);
-</script>
-
-<slot />
-```
-
-```html renderer="vue" language="js" tabTitle="with-mock-implementation-3"
-{/* ApolloWrapperClient.vue */}
-
-<template>
-  <div><slot /></div>
-</template>
-
-<script>
-  import { defineComponent, provide } from 'vue';
-  import { DefaultApolloClient } from '@vue/apollo-composable';
-  import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core';
-
-  // Apollo client wrapper component that can be used within your app and Storybook
-  export default defineComponent({
-    name: 'WrapperComponent',
-    setup() {
-      const httpLink = createHttpLink({
-        // You should use an absolute URL here
-        uri: 'https://your-graphql-endpoint',
-      });
-      const cache = new InMemoryCache();
-
-      const mockedClient = new ApolloClient({
-        link: httpLink,
-        cache,
-        defaultOptions: {
-          watchQuery: {
-            fetchPolicy: 'no-cache',
-            errorPolicy: 'all',
-          },
-          query: {
-            fetchPolicy: 'no-cache',
-            errorPolicy: 'all',
-          },
-        },
-      });
-      provide(DefaultApolloClient, mockedClient);
-    },
-  });
-</script>
-```
-
diff --git a/docs/_snippets/arg-types-control.md b/docs/_snippets/arg-types-control.md
index 243e52f4056d..4cbca48ac3db 100644
--- a/docs/_snippets/arg-types-control.md
+++ b/docs/_snippets/arg-types-control.md
@@ -119,4 +119,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/arg-types-default-value.md b/docs/_snippets/arg-types-default-value.md
index 9373e3301604..bc866a132112 100644
--- a/docs/_snippets/arg-types-default-value.md
+++ b/docs/_snippets/arg-types-default-value.md
@@ -119,4 +119,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/arg-types-description.md b/docs/_snippets/arg-types-description.md
index c28da88b53f5..8ba11bbdc06f 100644
--- a/docs/_snippets/arg-types-description.md
+++ b/docs/_snippets/arg-types-description.md
@@ -89,4 +89,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/arg-types-if.md b/docs/_snippets/arg-types-if.md
index 2844fd7896e6..73979e5bc378 100644
--- a/docs/_snippets/arg-types-if.md
+++ b/docs/_snippets/arg-types-if.md
@@ -221,4 +221,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/arg-types-in-meta.md b/docs/_snippets/arg-types-in-meta.md
index 34ddd566c374..fe333056e15a 100644
--- a/docs/_snippets/arg-types-in-meta.md
+++ b/docs/_snippets/arg-types-in-meta.md
@@ -101,4 +101,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/arg-types-in-preview.md b/docs/_snippets/arg-types-in-preview.md
index f382c50956c8..73c7b6bf4c5d 100644
--- a/docs/_snippets/arg-types-in-preview.md
+++ b/docs/_snippets/arg-types-in-preview.md
@@ -43,4 +43,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/arg-types-mapping.md b/docs/_snippets/arg-types-mapping.md
index 88652f526512..7993754b63d0 100644
--- a/docs/_snippets/arg-types-mapping.md
+++ b/docs/_snippets/arg-types-mapping.md
@@ -117,4 +117,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/arg-types-name.md b/docs/_snippets/arg-types-name.md
index 6e9237bbfd80..8053c80de77c 100644
--- a/docs/_snippets/arg-types-name.md
+++ b/docs/_snippets/arg-types-name.md
@@ -89,4 +89,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/arg-types-options.md b/docs/_snippets/arg-types-options.md
index 3ca62ed1a603..730332d7f449 100644
--- a/docs/_snippets/arg-types-options.md
+++ b/docs/_snippets/arg-types-options.md
@@ -89,4 +89,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/arg-types-table.md b/docs/_snippets/arg-types-table.md
index cbf0121445c8..231a02b9fc86 100644
--- a/docs/_snippets/arg-types-table.md
+++ b/docs/_snippets/arg-types-table.md
@@ -107,4 +107,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/arg-types-type.md b/docs/_snippets/arg-types-type.md
index f51719f5a640..d1950ece31d4 100644
--- a/docs/_snippets/arg-types-type.md
+++ b/docs/_snippets/arg-types-type.md
@@ -77,4 +77,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/args-in-preview.md b/docs/_snippets/args-in-preview.md
index d66d35c7a330..d0dd6acb435f 100644
--- a/docs/_snippets/args-in-preview.md
+++ b/docs/_snippets/args-in-preview.md
@@ -28,4 +28,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/args-usage-with-addons.md b/docs/_snippets/args-usage-with-addons.md
index 58b3f7f22cad..59929a410957 100644
--- a/docs/_snippets/args-usage-with-addons.md
+++ b/docs/_snippets/args-usage-with-addons.md
@@ -12,4 +12,3 @@ resetArgs((argNames: ['key']));
 // To reset all args
 resetArgs();
 ```
-
diff --git a/docs/_snippets/before-each-in-preview.md b/docs/_snippets/before-each-in-preview.md
index 47abe76c5057..d8e79641135b 100644
--- a/docs/_snippets/before-each-in-preview.md
+++ b/docs/_snippets/before-each-in-preview.md
@@ -3,8 +3,8 @@ import MockDate from 'mockdate';
 
 export default {
   async beforeEach() {
-    MockDate.reset()
-  }
+    MockDate.reset();
+  },
 };
 ```
 
@@ -15,10 +15,9 @@ import MockDate from 'mockdate';
 
 const preview: Preview = {
   async beforeEach() {
-    MockDate.reset()
-  }
+    MockDate.reset();
+  },
 };
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/build-storybook-production-mode.md b/docs/_snippets/build-storybook-production-mode.md
index 27b75f36ca31..ca247450716e 100644
--- a/docs/_snippets/build-storybook-production-mode.md
+++ b/docs/_snippets/build-storybook-production-mode.md
@@ -16,4 +16,3 @@ pnpm run build-storybook
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn build-storybook
 ```
-
diff --git a/docs/_snippets/button-component-with-proptypes.md b/docs/_snippets/button-component-with-proptypes.md
index 4a36ccb3e890..253586174075 100644
--- a/docs/_snippets/button-component-with-proptypes.md
+++ b/docs/_snippets/button-component-with-proptypes.md
@@ -69,7 +69,7 @@ export const Button: React.FC<ButtonProps> = ({ isDisabled = false, content = ''
 };
 ```
 
-```html filename="Button.svelte" renderer="svelte" language="js"
+```svelte filename="Button.svelte" renderer="svelte" language="js"
 <script>
   /**
    * A Button Component
@@ -92,9 +92,7 @@ export const Button: React.FC<ButtonProps> = ({ isDisabled = false, content = ''
 <button type="button" {disabled}>{content}</button>
 ```
 
-```html renderer="vue" language="js" tabTitle="3"
-{/* Button.vue */}
-
+```html filename="Button.vue" renderer="vue" language="js"
 <template>
   <button type="button" :disabled="isDisabled">{{ label }}</button>
 </template>
@@ -136,9 +134,7 @@ export const Button: React.FC<ButtonProps> = ({ isDisabled = false, content = ''
 </script>
 ```
 
-```html renderer="vue" language="ts" tabTitle="3"
-{/* Button.vue */}
-
+```html filename="Button.vue" renderer="vue" language="ts"
 <template>
   <button type="button" :disabled="isDisabled">{{ label }}</button>
 </template>
@@ -230,4 +226,3 @@ export class CustomButton extends LitElement {
   }
 }
 ```
-
diff --git a/docs/_snippets/button-group-story.md b/docs/_snippets/button-group-story.md
index 146034a60d12..9fd1b5efaa1d 100644
--- a/docs/_snippets/button-group-story.md
+++ b/docs/_snippets/button-group-story.md
@@ -293,7 +293,7 @@ export const Pair: Story = {
 };
 ```
 
-```js filename="ButtonGroup.stories.js" renderer="vue" language="js" tabTitle="3"
+```js filename="ButtonGroup.stories.js" renderer="vue" language="js"
 import ButtonGroup from './ButtonGroup.vue';
 
 //👇 Imports the Button stories
@@ -323,7 +323,7 @@ export const Pair = {
 };
 ```
 
-```ts filename="ButtonGroup.stories.ts" renderer="vue" language="ts-4-9" tabTitle="3"
+```ts filename="ButtonGroup.stories.ts" renderer="vue" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import ButtonGroup from './ButtonGroup.vue';
@@ -353,7 +353,7 @@ export const Pair: Story = {
 };
 ```
 
-```ts filename="ButtonGroup.stories.ts" renderer="vue" language="ts" tabTitle="3"
+```ts filename="ButtonGroup.stories.ts" renderer="vue" language="ts"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import ButtonGroup from './ButtonGroup.vue';
diff --git a/docs/_snippets/button-implementation.md b/docs/_snippets/button-implementation.md
index 333017bf79dd..9e9c3ee4cc70 100644
--- a/docs/_snippets/button-implementation.md
+++ b/docs/_snippets/button-implementation.md
@@ -114,9 +114,7 @@ export const Button: React.FC<ButtonProps> = ({
 };
 ```
 
-```html renderer="svelte" language="js"
-{/* Button.svelte */}
-
+```svelte filename="Button.svelte" renderer="svelte" language="js"
 <script>
   import { createEventDispatcher } from 'svelte';
   /**
@@ -152,12 +150,8 @@ export const Button: React.FC<ButtonProps> = ({
 <button type="button" {style} on:click="{onClick}">{label}</button>
 ```
 
-```html renderer="vue" language="js" tabTitle="3"
-{/* Button.vue */}
-
-<template>
-  {/* the component markup implementation */}
-</template>
+```html filename="Button.vue" renderer="vue" language="js"
+<template> <!-- The component markup implementation --> </template>
 
 <script>
   export default {
@@ -210,12 +204,8 @@ export const Button: React.FC<ButtonProps> = ({
 </script>
 ```
 
-```html renderer="vue" language="ts" tabTitle="3"
-{/* Button.vue */}
-
-<template>
-  {/* the component markup implementation */}
-</template>
+```html filename="Button.vue" renderer="vue" language="ts"
+<template> <!-- The component markup implementation --> </template>
 
 <script lang="ts">
   import { defineComponent, reactive } from 'vue';
@@ -270,4 +260,3 @@ export const Button: React.FC<ButtonProps> = ({
   });
 </script>
 ```
-
diff --git a/docs/_snippets/button-story-action-event-handle.md b/docs/_snippets/button-story-action-event-handle.md
index 32c31b10ffdb..a574de6e82b6 100644
--- a/docs/_snippets/button-story-action-event-handle.md
+++ b/docs/_snippets/button-story-action-event-handle.md
@@ -106,4 +106,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/button-story-argtypes-with-categories.md b/docs/_snippets/button-story-argtypes-with-categories.md
index d4b36cbb7d9a..b1278748f55d 100644
--- a/docs/_snippets/button-story-argtypes-with-categories.md
+++ b/docs/_snippets/button-story-argtypes-with-categories.md
@@ -251,4 +251,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/button-story-baseline-with-satisfies-story-level.md b/docs/_snippets/button-story-baseline-with-satisfies-story-level.md
index 61da26569ef2..d95245125c81 100644
--- a/docs/_snippets/button-story-baseline-with-satisfies-story-level.md
+++ b/docs/_snippets/button-story-baseline-with-satisfies-story-level.md
@@ -18,4 +18,3 @@ export const Example = {
   },
 } satisfies Story;
 ```
-
diff --git a/docs/_snippets/button-story-baseline-with-satisfies.md b/docs/_snippets/button-story-baseline-with-satisfies.md
index 5ac57b99484f..c1cfe8ddec81 100644
--- a/docs/_snippets/button-story-baseline-with-satisfies.md
+++ b/docs/_snippets/button-story-baseline-with-satisfies.md
@@ -10,4 +10,3 @@ const meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/button-story-click-handler-args.md b/docs/_snippets/button-story-click-handler-args.md
index 03f55f914183..1feaa43722d1 100644
--- a/docs/_snippets/button-story-click-handler-args.md
+++ b/docs/_snippets/button-story-click-handler-args.md
@@ -245,7 +245,7 @@ export const Text: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="3"
+```js filename="Button.stories.js" renderer="vue" language="js"
 import Button from './Button.vue';
 
 import { action } from '@storybook/addon-actions';
@@ -271,7 +271,7 @@ export const Text = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts-4-9" tabTitle="3"
+```ts filename="Button.stories.ts" renderer="vue" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
@@ -302,7 +302,7 @@ export const Primary: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="3"
+```ts filename="Button.stories.ts" renderer="vue" language="ts"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
@@ -374,4 +374,3 @@ export const Text: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/button-story-click-handler-simple-docs.md b/docs/_snippets/button-story-click-handler-simple-docs.md
deleted file mode 100644
index 20dfff72f628..000000000000
--- a/docs/_snippets/button-story-click-handler-simple-docs.md
+++ /dev/null
@@ -1,14 +0,0 @@
-```js filename="Button.stories.js|jsx" renderer="react" language="js"
-import { action } from '@storybook/addon-actions';
-
-import { Button } from './Button';
-
-export default {
-  component: Button,
-};
-
-export const Text = {
-  render: ({ label, onClick }) => <Button label={label} onClick={onClick} />,
-};
-```
-
diff --git a/docs/_snippets/button-story-click-handler.md b/docs/_snippets/button-story-click-handler.md
index 731f41ac6a79..72ceb73b21c7 100644
--- a/docs/_snippets/button-story-click-handler.md
+++ b/docs/_snippets/button-story-click-handler.md
@@ -200,7 +200,7 @@ export const Text: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="3"
+```js filename="Button.stories.js" renderer="vue" language="js"
 import Button from './Button.vue';
 
 import { action } from '@storybook/addon-actions';
@@ -222,7 +222,7 @@ export const Text = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts-4-9" tabTitle="3"
+```ts filename="Button.stories.ts" renderer="vue" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
@@ -249,7 +249,7 @@ export const Text: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="3"
+```ts filename="Button.stories.ts" renderer="vue" language="ts"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
diff --git a/docs/_snippets/button-story-default-export.md b/docs/_snippets/button-story-default-export.md
index cfd0cbae6bc0..1cf14b769a66 100644
--- a/docs/_snippets/button-story-default-export.md
+++ b/docs/_snippets/button-story-default-export.md
@@ -109,4 +109,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/button-story-disable-addon.md b/docs/_snippets/button-story-disable-addon.md
index a147b623f617..41ceff477219 100644
--- a/docs/_snippets/button-story-disable-addon.md
+++ b/docs/_snippets/button-story-disable-addon.md
@@ -92,4 +92,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/button-story-grouped.md b/docs/_snippets/button-story-grouped.md
index ff931669c2de..0ff8b0086931 100644
--- a/docs/_snippets/button-story-grouped.md
+++ b/docs/_snippets/button-story-grouped.md
@@ -81,4 +81,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/button-story-hoisted.md b/docs/_snippets/button-story-hoisted.md
index 8072369576e5..8d61bb1f0990 100644
--- a/docs/_snippets/button-story-hoisted.md
+++ b/docs/_snippets/button-story-hoisted.md
@@ -103,4 +103,3 @@ type Story = StoryObj;
 // This is the only named export in the file, and it matches the component name
 export const Button: Story = {};
 ```
-
diff --git a/docs/_snippets/button-story-hypothetical-example.md b/docs/_snippets/button-story-hypothetical-example.md
index 055e451d8eb6..ed974f40b2c4 100644
--- a/docs/_snippets/button-story-hypothetical-example.md
+++ b/docs/_snippets/button-story-hypothetical-example.md
@@ -60,4 +60,3 @@ export const Sample: Story = {
   }),
 };
 ```
-
diff --git a/docs/_snippets/button-story-matching-argtypes.md b/docs/_snippets/button-story-matching-argtypes.md
index f1f373ba323d..080f78c84e77 100644
--- a/docs/_snippets/button-story-matching-argtypes.md
+++ b/docs/_snippets/button-story-matching-argtypes.md
@@ -65,4 +65,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/button-story-onclick-action-spy.md b/docs/_snippets/button-story-onclick-action-spy.md
index 67e85c1e778c..d868c21456ea 100644
--- a/docs/_snippets/button-story-onclick-action-spy.md
+++ b/docs/_snippets/button-story-onclick-action-spy.md
@@ -55,4 +55,3 @@ const meta: Meta<typeof Button> = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/button-story-primary-long-name.md b/docs/_snippets/button-story-primary-long-name.md
index 3684eed255a5..ae477a342a28 100644
--- a/docs/_snippets/button-story-primary-long-name.md
+++ b/docs/_snippets/button-story-primary-long-name.md
@@ -43,9 +43,10 @@ export const PrimaryLongName: Story = {
 
 <Story name="Primary" args={primaryArgs} />
 
-<Story name="PrimaryLongName" args={{
-  ...primaryArgs,
-  label: 'Primary with a really long name'
+<Story name="PrimaryLongName"
+  args={{
+    ...primaryArgs,
+    label: 'Primary with a really long name'
   }} />
 ```
 
@@ -111,9 +112,10 @@ export const PrimaryLongName = {
 
 <Story name="Primary" args={primaryArgs} />
 
-<Story name="PrimaryLongName" args={{
-  ...primaryArgs,
-  label: 'Primary with a really long name'
+<Story name="PrimaryLongName"
+  args={{
+    ...primaryArgs,
+    label: 'Primary with a really long name'
   }} />
 ```
 
@@ -190,9 +192,10 @@ export const PrimaryLongName: Story = {
 
 <Story name="Primary" args={primaryArgs} />
 
-<Story name="PrimaryLongName" args={{
-  ...primaryArgs,
-  label: 'Primary with a really long name'
+<Story name="PrimaryLongName"
+  args={{
+    ...primaryArgs,
+    label: 'Primary with a really long name'
   }} />
 ```
 
diff --git a/docs/_snippets/button-story-using-args.md b/docs/_snippets/button-story-using-args.md
index 97f33121e090..848448d8a6cd 100644
--- a/docs/_snippets/button-story-using-args.md
+++ b/docs/_snippets/button-story-using-args.md
@@ -517,7 +517,7 @@ export const Tertiary: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="3"
+```js filename="Button.stories.js" renderer="vue" language="js"
 import Button from './Button.vue';
 
 export default {
@@ -572,7 +572,7 @@ export const Tertiary = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts-4-9" tabTitle="3"
+```ts filename="Button.stories.ts" renderer="vue" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
@@ -632,7 +632,7 @@ export const Tertiary: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="3"
+```ts filename="Button.stories.ts" renderer="vue" language="ts"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
diff --git a/docs/_snippets/button-story-with-args.md b/docs/_snippets/button-story-with-args.md
index 3da07a30731c..3ff2014ecd91 100644
--- a/docs/_snippets/button-story-with-args.md
+++ b/docs/_snippets/button-story-with-args.md
@@ -339,7 +339,7 @@ export const Primary: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="3"
+```js filename="Button.stories.js" renderer="vue" language="js"
 import Button from './Button.vue';
 
 export default {
@@ -366,7 +366,7 @@ export const Primary = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts-4-9" tabTitle="3"
+```ts filename="Button.stories.ts" renderer="vue" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
@@ -398,7 +398,7 @@ export const Primary: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="3"
+```ts filename="Button.stories.ts" renderer="vue" language="ts"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
diff --git a/docs/_snippets/button-story-with-parameters.md b/docs/_snippets/button-story-with-parameters.md
index da16a27e21ff..ee308f651d33 100644
--- a/docs/_snippets/button-story-with-parameters.md
+++ b/docs/_snippets/button-story-with-parameters.md
@@ -126,4 +126,3 @@ const meta: Meta<typeof Button> = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/button-story-with-sample.md b/docs/_snippets/button-story-with-sample.md
index 5876bf16d4ae..92480d5059a9 100644
--- a/docs/_snippets/button-story-with-sample.md
+++ b/docs/_snippets/button-story-with-sample.md
@@ -21,4 +21,3 @@ export const Sample = {
   render: () => <Button label="hello button" />,
 };
 ```
-
diff --git a/docs/_snippets/chromatic-github-action.md b/docs/_snippets/chromatic-github-action.md
index 47bb6d65d2c9..ab5bb8523cc5 100644
--- a/docs/_snippets/chromatic-github-action.md
+++ b/docs/_snippets/chromatic-github-action.md
@@ -1,6 +1,4 @@
-```shell renderer="common" language="js"
-# .github/workflows/chromatic.yml
-
+```yml filename=".github/workflows/chromatic.yml" renderer="common" language="js"
 # Workflow name
 name: 'Chromatic Publish'
 
@@ -19,15 +17,14 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           cache: 'yarn'
       - run: yarn
       #👇 Adds Chromatic as a step in the workflow
-      - uses: chromaui/action@v1
+      - uses: chromaui/action@latest
         # Options required for Chromatic's GitHub Action
         with:
           #👇 Chromatic projectToken,
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           token: ${{ secrets.GITHUB_TOKEN }}
 ```
-
diff --git a/docs/_snippets/chromatic-storybook-add.md b/docs/_snippets/chromatic-storybook-add.md
index aea0b17aa5f5..84756a1ae1b8 100644
--- a/docs/_snippets/chromatic-storybook-add.md
+++ b/docs/_snippets/chromatic-storybook-add.md
@@ -9,4 +9,3 @@ pnpm dlx storybook@latest add @chromatic-com/storybook
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn dlx storybook@latest add @chromatic-com/storybook
 ```
-
diff --git a/docs/_snippets/compodoc-install.md b/docs/_snippets/compodoc-install.md
index 2db606064ae7..7319f09a66b4 100644
--- a/docs/_snippets/compodoc-install.md
+++ b/docs/_snippets/compodoc-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @compodoc/compodoc
 ```shell renderer="angular" language="js" packageManager="yarn"
 yarn add --dev @compodoc/compodoc
 ```
-
diff --git a/docs/_snippets/component-cypress-test.md b/docs/_snippets/component-cypress-test.md
index ef5562daf806..3346798edfad 100644
--- a/docs/_snippets/component-cypress-test.md
+++ b/docs/_snippets/component-cypress-test.md
@@ -13,4 +13,3 @@ describe('Login Form', () => {
   });
 });
 ```
-
diff --git a/docs/_snippets/component-playwright-test.md b/docs/_snippets/component-playwright-test.md
index faa1ce9728c1..91b6705612e7 100644
--- a/docs/_snippets/component-playwright-test.md
+++ b/docs/_snippets/component-playwright-test.md
@@ -9,4 +9,3 @@ test('Login Form inputs', async ({ page }) => {
   await expect(password).toBe('a-random-password');
 });
 ```
-
diff --git a/docs/_snippets/component-story-auto-title.md b/docs/_snippets/component-story-auto-title.md
index b89bb194b176..92ba228a4f75 100644
--- a/docs/_snippets/component-story-auto-title.md
+++ b/docs/_snippets/component-story-auto-title.md
@@ -80,4 +80,3 @@ export const Default = {
   args: { message: 'Hello world!' },
 };
 ```
-
diff --git a/docs/_snippets/component-story-figma-integration.md b/docs/_snippets/component-story-figma-integration.md
index afd0a641a762..d417ce880537 100644
--- a/docs/_snippets/component-story-figma-integration.md
+++ b/docs/_snippets/component-story-figma-integration.md
@@ -308,4 +308,3 @@ export const Example: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/component-story-highlight-addon.md b/docs/_snippets/component-story-highlight-addon.md
index 942ac7c524a7..03d1a8e0ba52 100644
--- a/docs/_snippets/component-story-highlight-addon.md
+++ b/docs/_snippets/component-story-highlight-addon.md
@@ -231,4 +231,3 @@ export const Highlighted: Story = {
   ],
 };
 ```
-
diff --git a/docs/_snippets/component-story-static-asset-with-import.md b/docs/_snippets/component-story-static-asset-with-import.md
index ae48423539e0..3301d3b03561 100644
--- a/docs/_snippets/component-story-static-asset-with-import.md
+++ b/docs/_snippets/component-story-static-asset-with-import.md
@@ -307,7 +307,7 @@ export const WithAnImage: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="3"
+```js filename="MyComponent.stories.js" renderer="vue" language="js"
 import MyComponent from './MyComponent.vue';
 
 import imageFile from './static/image.png';
@@ -332,7 +332,7 @@ export const WithAnImage = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="vue" language="ts-4-9" tabTitle="3"
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import MyComponent from './MyComponent.vue';
@@ -362,7 +362,7 @@ export const WithAnImage: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="3"
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import MyComponent from './MyComponent.vue';
diff --git a/docs/_snippets/component-story-with-accessibility.md b/docs/_snippets/component-story-with-accessibility.md
index c738b45b0757..173cbbf06018 100644
--- a/docs/_snippets/component-story-with-accessibility.md
+++ b/docs/_snippets/component-story-with-accessibility.md
@@ -365,7 +365,7 @@ export const Inaccessible: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="3"
+```js filename="Button.stories.js" renderer="vue" language="js"
 import Button from './Button.vue';
 
 export default {
@@ -392,7 +392,7 @@ export const Inaccessible = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts-4-9" tabTitle="3"
+```ts filename="Button.stories.ts" renderer="vue" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
@@ -423,7 +423,7 @@ export const Inaccessible: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="3"
+```ts filename="Button.stories.ts" renderer="vue" language="ts"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
diff --git a/docs/_snippets/component-story-with-custom-render-function.md b/docs/_snippets/component-story-with-custom-render-function.md
index 0fb274bc56d9..f09079e91e86 100644
--- a/docs/_snippets/component-story-with-custom-render-function.md
+++ b/docs/_snippets/component-story-with-custom-render-function.md
@@ -371,4 +371,3 @@ export const Example: Story = {
   `,
 };
 ```
-
diff --git a/docs/_snippets/component-styled-variables-object-notation.md b/docs/_snippets/component-styled-variables-object-notation.md
index 0253c4dbb2e4..bfff3a901641 100644
--- a/docs/_snippets/component-styled-variables-object-notation.md
+++ b/docs/_snippets/component-styled-variables-object-notation.md
@@ -4,4 +4,3 @@ const Component = styled.div(({ theme }) => ({
   width: 0,
 }));
 ```
-
diff --git a/docs/_snippets/component-styled-variables-template-literals.md b/docs/_snippets/component-styled-variables-template-literals.md
index 504fcf06c8f9..501e5211f2c4 100644
--- a/docs/_snippets/component-styled-variables-template-literals.md
+++ b/docs/_snippets/component-styled-variables-template-literals.md
@@ -4,4 +4,3 @@ const Component = styled.div`
   width: 0;
 `;
 ```
-
diff --git a/docs/_snippets/component-test-with-testing-library.md b/docs/_snippets/component-test-with-testing-library.md
index 0ac1e206d6b1..7688b694f45d 100644
--- a/docs/_snippets/component-test-with-testing-library.md
+++ b/docs/_snippets/component-test-with-testing-library.md
@@ -104,7 +104,7 @@ it('Checks if the form is valid', async () => {
 });
 ```
 
-```js filename="tests/Form.test.js" renderer="vue" language="js" tabTitle="3"
+```js filename="tests/Form.test.js" renderer="vue" language="js"
 import { fireEvent, render, screen } from '@testing-library/vue';
 
 import { composeStories } from '@storybook/vue3';
@@ -128,7 +128,7 @@ test('Checks if the form is valid', async () => {
 });
 ```
 
-```ts filename="tests/Form.test.ts" renderer="vue" language="ts" tabTitle="3"
+```ts filename="tests/Form.test.ts" renderer="vue" language="ts"
 import { fireEvent, render, screen } from '@testing-library/vue';
 
 import { composeStories } from '@storybook/vue3';
diff --git a/docs/_snippets/configure-mock-provider-with-story-parameter.md b/docs/_snippets/configure-mock-provider-with-story-parameter.md
index f58b7b441096..a9b4b310b034 100644
--- a/docs/_snippets/configure-mock-provider-with-story-parameter.md
+++ b/docs/_snippets/configure-mock-provider-with-story-parameter.md
@@ -61,4 +61,3 @@ export const Dark: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/csf-2-example-primary-dark-story.md b/docs/_snippets/csf-2-example-primary-dark-story.md
index 5c0f1397e870..ea013974f52c 100644
--- a/docs/_snippets/csf-2-example-primary-dark-story.md
+++ b/docs/_snippets/csf-2-example-primary-dark-story.md
@@ -1,6 +1,5 @@
-```js filename="CSF 2" renderer="common" language="js"
+```js filename="CSF 2 - Button.stories.js|jsx|ts|tsx" renderer="common" language="js"
 export const PrimaryOnDark = Primary.bind({});
 PrimaryOnDark.args = Primary.args;
 PrimaryOnDark.parameters = { background: { default: 'dark' } };
 ```
-
diff --git a/docs/_snippets/csf-2-example-starter.md b/docs/_snippets/csf-2-example-starter.md
index e56d985beede..ba9340e6cd89 100644
--- a/docs/_snippets/csf-2-example-starter.md
+++ b/docs/_snippets/csf-2-example-starter.md
@@ -1,4 +1,4 @@
-```ts filename="CSF 2" renderer="angular" language="ts"
+```ts filename="CSF 2 - Button.stories.ts" renderer="angular" language="ts"
 import { Meta, Story } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -14,7 +14,7 @@ export const Primary: Story = (args) => ({
 Primary.args = { primary: true };
 ```
 
-```js filename="CSF 2" renderer="react" language="js"
+```js filename="CSF 2 - Button.stories.js|jsx" renderer="react" language="js"
 import { Button } from './Button';
 
 export default {
@@ -26,7 +26,7 @@ export const Primary = (args) => <Button {...args} />;
 Primary.args = { primary: true };
 ```
 
-```tsx filename="CSF 2" renderer="react" language="ts"
+```tsx filename="CSF 2 - Button.stories.ts|tsx" renderer="react" language="ts"
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
 import { Button } from './Button';
@@ -40,7 +40,7 @@ export const Primary: ComponentStory<typeof Button> = (args) => <Button {...args
 Primary.args = { primary: true };
 ```
 
-```js filename="CSF 2" renderer="solid" language="js"
+```js filename="CSF 2 - Button.stories.js|jsx" renderer="solid" language="js"
 import { Button } from './Button';
 
 export default {
@@ -52,7 +52,7 @@ export const Primary = (args) => <Button {...args} />;
 Primary.args = { primary: true };
 ```
 
-```tsx filename="CSF 2" renderer="solid" language="ts"
+```tsx filename="CSF 2 - Button.stories.ts|tsx" renderer="solid" language="ts"
 import { ComponentStory, ComponentMeta } from 'storybook-solidjs';
 
 import { Button } from './Button';
@@ -66,7 +66,7 @@ export const Primary: ComponentStory<typeof Button> = (args) => <Button {...args
 Primary.args = { primary: true };
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js"
+```js filename="CSF 2 - Button.stories.js" renderer="svelte" language="js"
 import Button from './Button.svelte';
 
 export default {
@@ -81,7 +81,7 @@ export const Primary = (args) => ({
 Primary.args = { primary: true };
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts"
+```ts filename="CSF 2 - Button.stories.ts" renderer="svelte" language="ts"
 import type { Meta, StoryFn } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -98,7 +98,7 @@ export const Primary: StoryFn<typeof Button> = (args) => ({
 Primary.args = { primary: true };
 ```
 
-```js filename="CSF 2" renderer="vue" language="js" tabTitle="3"
+```js filename="CSF 2 - Button.stories.js" renderer="vue" language="js"
 import Button from './Button.vue';
 
 export default {
@@ -116,7 +116,7 @@ export const Primary = (args) => ({
 Primary.args = { primary: true };
 ```
 
-```ts filename="CSF 2" renderer="vue" language="ts" tabTitle="3"
+```ts filename="CSF 2 - Button.stories.ts" renderer="vue" language="ts"
 import { Meta, StoryFn } from '@storybook/vue3';
 
 import Button from './Button.vue';
@@ -136,7 +136,7 @@ export const Primary: StoryFn<typeof Button> = (args) => ({
 Primary.args = { primary: true };
 ```
 
-```js filename="CSF 2" renderer="web-components" language="js"
+```js filename="CSF 2 - Button.stories.js" renderer="web-components" language="js"
 import { html } from 'lit';
 
 export default {
@@ -150,7 +150,7 @@ Primary.args = {
 };
 ```
 
-```ts filename="CSF 2" renderer="web-components" language="ts"
+```ts filename="CSF 2 - Button.stories.ts" renderer="web-components" language="ts"
 import type { Meta, Story } from '@storybook/web-components';
 
 import { html } from 'lit';
@@ -166,4 +166,3 @@ Primary.args = {
   primary: true,
 };
 ```
-
diff --git a/docs/_snippets/csf-2-example-story.md b/docs/_snippets/csf-2-example-story.md
index fe9a90055ecd..5126e303f653 100644
--- a/docs/_snippets/csf-2-example-story.md
+++ b/docs/_snippets/csf-2-example-story.md
@@ -1,31 +1,31 @@
-```ts filename="CSF 2" renderer="angular" language="ts"
+```ts filename="CSF 2 - Button.stories.ts" renderer="angular" language="ts"
 // Other imports and story implementation
 export const Default: Story = (args) => ({
   props: args,
 });
 ```
 
-```js filename="CSF 2" renderer="react" language="js"
+```js filename="CSF 2 - Button.stories.js|jsx" renderer="react" language="js"
 // Other imports and story implementation
 export const Default = (args) => <Button {...args} />;
 ```
 
-```ts filename="CSF 2" renderer="react" language="ts"
+```ts filename="CSF 2 - Button.stories.ts|tsx" renderer="react" language="ts"
 // Other imports and story implementation
 export const Default: ComponentStory<typeof Button> = (args) => <Button {...args} />;
 ```
 
-```js filename="CSF 2" renderer="solid" language="js"
+```js filename="CSF 2 - Button.stories.js|jsx" renderer="solid" language="js"
 // Other imports and story implementation
 export const Default = (args) => <Button {...args} />;
 ```
 
-```ts filename="CSF 2" renderer="solid" language="ts"
+```ts filename="CSF 2 - Button.stories.ts|tsx" renderer="solid" language="ts"
 // Other imports and story implementation
 export const Default: ComponentStory<typeof Button> = (args) => <Button {...args} />;
 ```
 
-```js filename="CSF 2" renderer="svelte" language="js"
+```js filename="CSF 2 - Button.stories.js" renderer="svelte" language="js"
 // Other imports and story implementation
 export const Default = (args) => ({
   Component: Button,
@@ -33,15 +33,15 @@ export const Default = (args) => ({
 });
 ```
 
-```ts filename="CSF 2" renderer="svelte" language="ts"
+```ts filename="CSF 2 - Button.stories.ts" renderer="svelte" language="ts"
 // Other imports and story implementation
-export const Primary: StoryFn<typeof Button> = (args) => ({
+export const Default: StoryFn<typeof Button> = (args) => ({
   Component: Button,
   props: args,
 });
 ```
 
-```js filename="CSF 2" renderer="vue" language="js" tabTitle="3"
+```js filename="CSF 2 - Button.stories.js" renderer="vue" language="js"
 // Other imports and story implementation
 export const Default = (args) => ({
   components: { Button },
@@ -52,7 +52,7 @@ export const Default = (args) => ({
 });
 ```
 
-```ts filename="CSF 2" renderer="vue" language="ts" tabTitle="3"
+```ts filename="CSF 2 - Button.stories.ts" renderer="vue" language="ts"
 // Other imports and story implementation
 export const Default: StoryFn<typeof Button> = (args) => ({
   components: { Button },
@@ -63,17 +63,16 @@ export const Default: StoryFn<typeof Button> = (args) => ({
 });
 ```
 
-```js filename="CSF 2" renderer="web-components" language="js"
+```js filename="CSF 2 - Button.stories.js" renderer="web-components" language="js"
 // Other imports and story implementation
 
-export const Default = ({ primary, backgroundColor, size, label }) =>
+export const Default = ({ primary, size, label }) =>
   html`<custom-button ?primary="${primary}" size="${size}" label="${label}"></custom-button>`;
 ```
 
-```ts filename="CSF 2" renderer="web-components" language="ts"
+```ts filename="CSF 2 - Button.stories.ts" renderer="web-components" language="ts"
 // Other imports and story implementation
 
 export const Default: Story = ({ primary, backgroundColor, size, label }) =>
   html`<custom-button ?primary="${primary}" size="${size}" label="${label}"></custom-button>`;
 ```
-
diff --git a/docs/_snippets/csf-2-example-title.md b/docs/_snippets/csf-2-example-title.md
index 9c55eac4fa2f..3574e82822a1 100644
--- a/docs/_snippets/csf-2-example-title.md
+++ b/docs/_snippets/csf-2-example-title.md
@@ -1,7 +1,6 @@
-```js filename="CSF 2" renderer="common" language="js"
+```js filename="CSF 2 - Button.stories.js|jsx|ts|tsx" renderer="common" language="js"
 export default {
   title: 'components/Button',
   component: Button,
 };
 ```
-
diff --git a/docs/_snippets/csf-3-example-auto-title.md b/docs/_snippets/csf-3-example-auto-title.md
index 18d9531d5281..d98dfea7bbd1 100644
--- a/docs/_snippets/csf-3-example-auto-title.md
+++ b/docs/_snippets/csf-3-example-auto-title.md
@@ -1,4 +1,3 @@
-```js filename="CSF 3" renderer="common" language="js"
+```js filename="CSF 3 - Button.stories.js|jsx|ts|tsx" renderer="common" language="js"
 export default { component: Button };
 ```
-
diff --git a/docs/_snippets/csf-3-example-default-render.md b/docs/_snippets/csf-3-example-default-render.md
index 3382a97654cd..87fb0d060c3d 100644
--- a/docs/_snippets/csf-3-example-default-render.md
+++ b/docs/_snippets/csf-3-example-default-render.md
@@ -1,4 +1,3 @@
-```js filename="CSF 3 - default render function" renderer="common" language="js"
+```js filename="CSF 3 - Button.stories.js|jsx|ts|tsx" renderer="common" language="js"
 export const Default = {};
 ```
-
diff --git a/docs/_snippets/csf-3-example-primary-dark-story.md b/docs/_snippets/csf-3-example-primary-dark-story.md
index a4dea05d3606..850fd8bd21de 100644
--- a/docs/_snippets/csf-3-example-primary-dark-story.md
+++ b/docs/_snippets/csf-3-example-primary-dark-story.md
@@ -1,14 +1,13 @@
-```js filename="CSF 3" renderer="common" language="js"
+```js filename="CSF 3 - Button.stories.js|jsx" renderer="common" language="js"
 export const PrimaryOnDark = {
   ...Primary,
   parameters: { background: { default: 'dark' } },
 };
 ```
 
-```ts filename="CSF 3" renderer="common" language="ts"
+```ts filename="CSF 3 - Button.stories.ts|tsx" renderer="common" language="ts"
 export const PrimaryOnDark: Story = {
   ...Primary,
   parameters: { background: { default: 'dark' } },
 };
 ```
-
diff --git a/docs/_snippets/csf-3-example-render.md b/docs/_snippets/csf-3-example-render.md
index 4f41716a33eb..0eba075462f4 100644
--- a/docs/_snippets/csf-3-example-render.md
+++ b/docs/_snippets/csf-3-example-render.md
@@ -1,4 +1,4 @@
-```ts filename="CSF 3 - explicit render function" renderer="angular" language="ts"
+```ts filename="CSF 3 - Button.stories.ts" renderer="angular" language="ts"
 // Other imports and story implementation
 export const Default: Story = {
   render: (args) => ({
@@ -7,35 +7,35 @@ export const Default: Story = {
 };
 ```
 
-```js filename="CSF 3 - explicit render function" renderer="react" language="js"
+```js filename="CSF 3 - Button.stories.js|jsx" renderer="react" language="js"
 // Other imports and story implementation
 export const Default = {
   render: (args) => <Button {...args} />,
 };
 ```
 
-```ts filename="CSF 3 - explicit render function" renderer="react" language="ts"
+```ts filename="CSF 3 - Button.stories.ts|tsx" renderer="react" language="ts"
 // Other imports and story implementation
 export const Default: Story = {
   render: (args) => <Button {...args} />,
 };
 ```
 
-```js filename="CSF 3 - explicit render function" renderer="solid" language="js"
+```js filename="CSF 3 - Button.stories.js|jsx" renderer="solid" language="js"
 // Other imports and story implementation
 export const Default = {
   render: (args) => <Button {...args} />,
 };
 ```
 
-```ts filename="CSF 3 - explicit render function" renderer="solid" language="ts"
+```ts filename="CSF 3 - Button.stories.ts|tsx" renderer="solid" language="ts"
 // Other imports and story implementation
 export const Default: Story = {
   render: (args) => <Button {...args} />,
 };
 ```
 
-```js filename="CSF 3 - explicit render function" renderer="svelte" language="js"
+```js filename="CSF 3 - Button.stories.js" renderer="svelte" language="js"
 // Other imports and story implementation
 export const Default = {
   render: (args) => ({
@@ -45,7 +45,7 @@ export const Default = {
 };
 ```
 
-```ts filename="CSF 3 - explicit render function" renderer="svelte" language="ts"
+```ts filename="CSF 3 - Button.stories.ts" renderer="svelte" language="ts"
 // Other imports and story implementation
 export const Default: Story = {
   render: (args) => ({
@@ -55,7 +55,7 @@ export const Default: Story = {
 };
 ```
 
-```js filename="CSF 3 - explicit render function" renderer="vue" language="js" tabTitle="3"
+```js filename="CSF 3 - Button.stories.js" renderer="vue" language="js"
 // Other imports and story implementation
 export const Default = {
   render: (args) => ({
@@ -68,7 +68,7 @@ export const Default = {
 };
 ```
 
-```ts filename="CSF 3 - explicit render function" renderer="vue" language="ts" tabTitle="3"
+```ts filename="CSF 3 - Button.stories.ts" renderer="vue" language="ts"
 // Other imports and story implementation
 export const Default: Story = {
   render: (args) => ({
@@ -81,19 +81,18 @@ export const Default: Story = {
 };
 ```
 
-```js filename="CSF 3" renderer="web-components" language="js"
+```js filename="CSF 3 - Button.stories.js" renderer="web-components" language="js"
 // Other imports and story implementation
 
 export const Default = {
-  render: (args) => html`<demo-button label="Hello" @click=${action('clicked')}></custom-button>`,
+  render: (args) => html`<demo-button label="Hello" @click=${action('clicked')}></demo-button>`,
 };
 ```
 
-```js filename="CSF 3" renderer="web-components" language="ts"
+```js filename="CSF 3 - Button.stories.ts" renderer="web-components" language="ts"
 // Other imports and story implementation
 
 export const Default: Story = {
   render: (args) => html`<custom-button label="Hello" @click=${action('clicked')}></custom-button>`,
 };
 ```
-
diff --git a/docs/_snippets/csf-3-example-starter.md b/docs/_snippets/csf-3-example-starter.md
index 262cf7e4f454..2740454daba0 100644
--- a/docs/_snippets/csf-3-example-starter.md
+++ b/docs/_snippets/csf-3-example-starter.md
@@ -1,17 +1,17 @@
-```ts filename="CSF 3" renderer="angular" language="ts"
+```ts filename="CSF 3 - Button.stories.ts" renderer="angular" language="ts"
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Button } from './button.component';
 
 const meta: Meta<Button> = { component: Button };
-export default meta;
 
+export default meta;
 type Story = StoryObj<Button>;
 
 export const Primary: Story = { args: { primary: true } };
 ```
 
-```js filename="CSF 3" renderer="common" language="js"
+```js filename="CSF 3 - Button.stories.js|jsx" renderer="react" language="js"
 import { Button } from './Button';
 
 export default { component: Button };
@@ -19,7 +19,7 @@ export default { component: Button };
 export const Primary = { args: { primary: true } };
 ```
 
-```ts filename="CSF 3" renderer="react" language="ts-4-9"
+```ts filename="CSF 3 - Button.stories.ts|tsx" renderer="react" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
@@ -27,27 +27,27 @@ import { Button } from './Button';
 const meta = {
   component: Button,
 } satisfies Meta<typeof Button>;
-export default meta;
 
+export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = { args: { primary: true } };
 ```
 
-```ts filename="CSF 3" renderer="react" language="ts"
+```ts filename="CSF 3 - Button.stories.ts|tsx" renderer="react" language="ts"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
 
 const meta: Meta<typeof Button> = { component: Button };
-export default meta;
 
+export default meta;
 type Story = StoryObj<typeof Button>;
 
 export const Primary: Story = { args: { primary: true } };
 ```
 
-```tsx filename="CSF 3" renderer="solid" language="ts-4-9"
+```ts filename="CSF 3 - Button.stories.ts|tsx" renderer="solid" language="ts-4-9"
 import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { Button } from './Button';
@@ -55,40 +55,64 @@ import { Button } from './Button';
 const meta = {
   component: Button,
 } satisfies Meta<typeof Button>;
-export default meta;
 
+export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = { args: { primary: true } };
 ```
 
-```ts filename="CSF 3" renderer="solid" language="ts"
+```js filename="CSF 3 - Button.stories.js|jsx" renderer="solid" language="js"
+import { Button } from './Button';
+
+export default { component: Button };
+
+export const Primary = { args: { primary: true } };
+```
+
+```ts filename="CSF 3 - Button.stories.ts|tsx" renderer="solid" language="ts"
 import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { Button } from './Button';
 
 const meta: Meta<typeof Button> = { component: Button };
-export default meta;
 
+export default meta;
 type Story = StoryObj<typeof Button>;
 
 export const Primary: Story = { args: { primary: true } };
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts"
+```js filename="CSF 3 - Button.stories.js" renderer="svelte" language="js"
+import Button from './Button.svelte';
+
+export default { component: Button };
+
+export const Primary = { args: { primary: true } };
+```
+
+```ts filename="CSF 3 - Button.stories.ts" renderer="svelte" language="ts"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import Button from './Button.svelte';
 
 const meta: Meta<typeof Button> = { component: Button };
-export default meta;
 
+export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = { args: { primary: true } };
 ```
 
-```ts filename="CSF 3" renderer="vue" language="ts-4-9"
+```js filename="CSF 3 - Button.stories.js" renderer="vue" language="js"
+import Button from './Button.vue';
+
+export default { component: Button };
+
+export const Primary = { args: { primary: true } };
+```
+
+```ts filename="CSF 3 - Button.stories.ts" renderer="vue" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
@@ -101,7 +125,7 @@ type Story = StoryObj<typeof meta>;
 export const Primary: Story = { args: { primary: true } };
 ```
 
-```ts filename="CSF 3" renderer="vue" language="ts"
+```ts filename="CSF 3 - Button.stories.ts" renderer="vue" language="ts"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
@@ -114,7 +138,7 @@ type Story = StoryObj<typeof Button>;
 export const Primary: Story = { args: { primary: true } };
 ```
 
-```js filename="CSF 3" renderer="web-components" language="js"
+```js filename="CSF 3 - Button.stories.js" renderer="web-components" language="js"
 export default {
   title: 'components/Button',
   component: 'demo-button',
@@ -123,7 +147,7 @@ export default {
 export const Primary = { args: { primary: true } };
 ```
 
-```ts filename="CSF 3" renderer="web-components" language="ts"
+```ts filename="CSF 3 - Button.stories.ts" renderer="web-components" language="ts"
 import type { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
@@ -136,4 +160,3 @@ type Story = StoryObj;
 
 export const Primary: Story = { args: { primary: true } };
 ```
-
diff --git a/docs/_snippets/csf-3-example-title.md b/docs/_snippets/csf-3-example-title.md
index 66a2d9d8f215..4b5d0039ba2f 100644
--- a/docs/_snippets/csf-3-example-title.md
+++ b/docs/_snippets/csf-3-example-title.md
@@ -1,19 +1,39 @@
-```mdx renderer="common" language="mdx"
-{/* src/components/Button/Button.mdx */}
-
-import { Meta } from '@storybook/blocks';
+```mdx filename="src/components/Button/Button.mdx" renderer="common" language="mdx"
+import { Meta, Story } from '@storybook/blocks';
 
 {/* 👇 Documentation-only page */}
-<Meta title="Documentation" />
 
+<Meta title="Documentation" />
 
 {/* 👇 Component documentation page */}
-import * as ExampleComponentStories from './ExampleComponent.stories';
+import * as ButtonStories from './Button.stories';
+
+<Meta of={ButtonStories} />
+
+<Story of={ButtonStories.Primary} />
+```
+
+```js filename="src/components/Button/Button.stories.js|jsx" renderer="common" language="js"
+import { Button } from './Button';
+
+export default {
+  // Sets the name for the stories container
+  title: 'components/Button',
+  // The component name will be used if `title` is not set
+  component: Button,
+};
 
-<Meta of={ExampleComponentStories} /> 
+// The story variable name will be used if `name` is not set
+const Primary = {
+  // Sets the name for that particular story
+  name: 'Primary',
+  args: {
+    label: 'Button',
+  },
+};
 ```
 
-```ts filename="src/components/Button/Button.stories.tsx" renderer="common" language="ts-4-9"
+```ts filename="src/components/Button/Button.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -39,7 +59,7 @@ const Primary: Story = {
 };
 ```
 
-```ts filename="src/components/Button/Button.stories.tsx" renderer="common" language="ts"
+```ts filename="src/components/Button/Button.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -64,4 +84,3 @@ const Primary: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/document-screen-fetch.md b/docs/_snippets/document-screen-fetch.md
index a80c7ec9035f..8c49340ffacb 100644
--- a/docs/_snippets/document-screen-fetch.md
+++ b/docs/_snippets/document-screen-fetch.md
@@ -45,7 +45,7 @@ export class DocumentScreen implements OnInit {
 }
 ```
 
-```js filename="YourPage.js|jsx|mjs|ts|tsx" renderer="react" language="js"
+```js filename="YourPage.jsx" renderer="react" language="js"
 import React, { useState, useEffect } from 'react';
 
 import { PageLayout } from './PageLayout';
@@ -155,7 +155,7 @@ export function DocumentScreen() {
 }
 ```
 
-```js filename="YourPage.js|jsx|mjs|ts|tsx" renderer="solid" language="js"
+```js filename="YourPage.jsx" renderer="solid" language="js"
 import { createSignal, Match, Switch } from 'solid-js';
 
 import { PageLayout } from './PageLayout';
@@ -211,9 +211,7 @@ export function DocumentScreen() {
 }
 ```
 
-```html renderer="svelte" language="js"
-{/* YourPage.svelte */}
-
+```svelte filename="YourPage.svelte" renderer="svelte" language="js"
 <script>
   import { onMount } from 'svelte';
 
@@ -259,9 +257,7 @@ export function DocumentScreen() {
 {/if}
 ```
 
-```html renderer="svelte" language="ts"
-{/* YourPage.svelte */}
-
+```svelte filename="YourPage.svelte" renderer="svelte" language="ts"
 <script lang="ts">
   import { onMount } from 'svelte';
 
@@ -307,9 +303,7 @@ export function DocumentScreen() {
 {/if}
 ```
 
-```html renderer="vue" language="js" tabTitle="3"
-{/* YourPage.vue */}
-
+```html filename="YourPage.vue" renderer="vue" language="js"
 <template>
   <div v-if="!loading && data && data.subdocuments.length">
     <PageLayout :user="data.user">
@@ -358,9 +352,7 @@ export function DocumentScreen() {
 </script>
 ```
 
-```html renderer="vue" language="ts" tabTitle="3"
-{/* YourPage.vue */}
-
+```html filename="YourPage.vue" renderer="vue" language="ts"
 <template>
   <div v-if="!loading && data && data.subdocuments.length">
     <PageLayout :user="data.user">
@@ -474,4 +466,3 @@ class DocumentScreen extends LitElement {
 
 customElements.define('demo-document-screen', DocumentScreen);
 ```
-
diff --git a/docs/_snippets/document-screen-with-graphql.md b/docs/_snippets/document-screen-with-graphql.md
index d0368e4d3a82..07421281063a 100644
--- a/docs/_snippets/document-screen-with-graphql.md
+++ b/docs/_snippets/document-screen-with-graphql.md
@@ -66,7 +66,7 @@ export class SampleGraphqlComponent implements OnInit {
 }
 ```
 
-```js filename="YourPage.js|jsx" renderer="react" language="js"
+```js filename="YourPage.jsx" renderer="react" language="js"
 import { useQuery, gql } from '@apollo/client';
 
 import { PageLayout } from './PageLayout';
@@ -122,7 +122,7 @@ export function DocumentScreen() {
 }
 ```
 
-```ts filename="YourPage.ts|tsx" renderer="react" language="ts"
+```ts filename="YourPage.tsx" renderer="react" language="ts"
 import { useQuery, gql } from '@apollo/client';
 
 import { PageLayout } from './PageLayout';
@@ -202,7 +202,7 @@ export function DocumentScreen() {
 }
 ```
 
-```js filename="YourPage.js|jsx" renderer="solid" language="js"
+```js filename="YourPage.jsx" renderer="solid" language="js"
 import { Match, Switch } from 'solid-js';
 import { createGraphQLClient, gql } from '@solid-primitives/graphql';
 
@@ -263,7 +263,7 @@ export function DocumentScreen() {
 }
 ```
 
-```ts filename="YourPage.ts|tsx" renderer="solid" language="ts"
+```ts filename="YourPage.tsx" renderer="solid" language="ts"
 import { createGraphQLClient, gql } from '@solid-primitives/graphql';
 
 import { PageLayout } from './PageLayout';
@@ -347,9 +347,7 @@ export function DocumentScreen() {
 }
 ```
 
-```html renderer="vue" language="js" tabTitle="3"
-{/* YourPage.vue */}
-
+```html filename="YourPage.vue" renderer="vue" language="js"
 <template>
   <div v-if="loading">Loading...</div>
 
@@ -406,9 +404,7 @@ export function DocumentScreen() {
 </script>
 ```
 
-```html renderer="vue" language="ts" tabTitle="3"
-{/* YourPage.vue */}
-
+```html filename="YourPage.vue" renderer="vue" language="ts"
 <template>
   <div v-if="loading">Loading...</div>
 
@@ -467,3 +463,92 @@ export function DocumentScreen() {
 </script>
 ```
 
+```svelte filename="YourPage.svelte" renderer="svelte" language="js"
+<script>
+  import gql from 'graphql-tag';
+  import { query } from 'svelte-apollo';
+  import PageLayout from './PageLayout.svelte';
+  import DocumentHeader from './DocumentHeader.svelte';
+  import DocumentList from './DocumentList.svelte';
+
+  const AllInfoQuery = gql`
+    query AllInfoQuery {
+      user {
+        userID
+        name
+      }
+      document {
+        id
+        userID
+        title
+        brief
+        status
+      }
+      subdocuments {
+        id
+        userID
+        title
+        content
+        status
+      }
+    }
+  `;
+  const infoResult = query(AllInfoQuery);
+</script>
+
+{#if $infoResult.loading}
+<p>Loading...</p>
+{:else if $infoResult.error}
+<p>There was an error fetching the data!</p>
+{:else}
+<PageLayout {$infoResult.data.user}>
+  <DocumentHeader {$infoResult.data.document} />
+  <DocumentList {$infoResult.data.subdocuments} />
+</PageLayout>
+{/if}
+```
+
+```svelte filename="YourPage.svelte" renderer="svelte" language="ts"
+<script lang="ts">
+  import gql from 'graphql-tag';
+  import { query } from 'svelte-apollo';
+  import PageLayout from './PageLayout.svelte';
+  import DocumentHeader from './DocumentHeader.svelte';
+  import DocumentList from './DocumentList.svelte';
+
+  const AllInfoQuery = gql`
+    query AllInfoQuery {
+      user {
+        userID
+        name
+      }
+      document {
+        id
+        userID
+        title
+        brief
+        status
+      }
+      subdocuments {
+        id
+        userID
+        title
+        content
+        status
+      }
+    }
+  `;
+  const infoResult = query(AllInfoQuery);
+</script>
+
+{#if $infoResult.loading}
+<p>Loading...</p>
+{:else if $infoResult.error}
+<p>There was an error fetching the data!</p>
+{:else}
+<PageLayout {$infoResult.data.user}>
+  <DocumentHeader {$infoResult.data.document} />
+  <DocumentList {$infoResult.data.subdocuments} />
+</PageLayout>
+{/if}
+```
diff --git a/docs/_snippets/document-screen-with-grapqhl.md b/docs/_snippets/document-screen-with-grapqhl.md
deleted file mode 100644
index d5642453b112..000000000000
--- a/docs/_snippets/document-screen-with-grapqhl.md
+++ /dev/null
@@ -1,94 +0,0 @@
-```html renderer="svelte" language="js"
-{/* YourPage.svelte */}
-
-<script>
-  import gql from 'graphql-tag';
-  import { query } from 'svelte-apollo';
-  import PageLayout from './PageLayout.svelte';
-  import DocumentHeader from './DocumentHeader.svelte';
-  import DocumentList from './DocumentList.svelte';
-
-  const AllInfoQuery = gql`
-    query AllInfoQuery {
-      user {
-        userID
-        name
-      }
-      document {
-        id
-        userID
-        title
-        brief
-        status
-      }
-      subdocuments {
-        id
-        userID
-        title
-        content
-        status
-      }
-    }
-  `;
-  const infoResult = query(AllInfoQuery);
-</script>
-
-{#if $infoResult.loading}
-<p>Loading...</p>
-{:else if $infoResult.error}
-<p>There was an error fetching the data!</p>
-{:else}
-<PageLayout {$infoResult.data.user}>
-  <DocumentHeader {$infoResult.data.document} />
-  <DocumentList {$infoResult.data.subdocuments} />
-</PageLayout>
-{/if}
-```
-
-```html renderer="svelte" language="ts"
-{/* YourPage.svelte */}
-
-<script lang="ts">
-  import gql from 'graphql-tag';
-  import { query } from 'svelte-apollo';
-  import PageLayout from './PageLayout.svelte';
-  import DocumentHeader from './DocumentHeader.svelte';
-  import DocumentList from './DocumentList.svelte';
-
-  const AllInfoQuery = gql`
-    query AllInfoQuery {
-      user {
-        userID
-        name
-      }
-      document {
-        id
-        userID
-        title
-        brief
-        status
-      }
-      subdocuments {
-        id
-        userID
-        title
-        content
-        status
-      }
-    }
-  `;
-  const infoResult = query(AllInfoQuery);
-</script>
-
-{#if $infoResult.loading}
-<p>Loading...</p>
-{:else if $infoResult.error}
-<p>There was an error fetching the data!</p>
-{:else}
-<PageLayout {$infoResult.data.user}>
-  <DocumentHeader {$infoResult.data.document} />
-  <DocumentList {$infoResult.data.subdocuments} />
-</PageLayout>
-{/if}
-```
-
diff --git a/docs/_snippets/foo-bar-baz-story.md b/docs/_snippets/foo-bar-baz-story.md
index bf54630002f1..c510d93af9bf 100644
--- a/docs/_snippets/foo-bar-baz-story.md
+++ b/docs/_snippets/foo-bar-baz-story.md
@@ -74,4 +74,3 @@ type Story = StoryObj<typeof Foo>;
 
 export const Baz: Story = {};
 ```
-
diff --git a/docs/_snippets/ghp-github-action.md b/docs/_snippets/ghp-github-action.md
index 34e407e0615f..975f2af2a473 100644
--- a/docs/_snippets/ghp-github-action.md
+++ b/docs/_snippets/ghp-github-action.md
@@ -1,6 +1,4 @@
-```yml renderer="common" language="ts" tabTitle="yml"
-# .github/workflows/deploy-github-pages.yaml
-
+```yml filename=".github/workflows/deploy-github-pages.yml" renderer="common" language="js"
 # Workflow name
 name: Build and Publish Storybook to GitHub Pages
 
@@ -23,12 +21,12 @@ jobs:
     steps:
       # Manual Checkout
       - uses: actions/checkout@v4
-
+        with:
+          fetch-depth: 0
       # Set up Node
       - uses: actions/setup-node@v4
         with:
-          node-version: '20.x'
-
+          node-version: '20'
       #👇 Add Storybook build and deploy to GitHub Pages as a step in the workflow
       - uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3
         with:
@@ -37,4 +35,3 @@ jobs:
           path: storybook-static # default: dist/storybook
           checkout: false # default: true
 ```
-
diff --git a/docs/_snippets/highlight-addon-custom-style.md b/docs/_snippets/highlight-addon-custom-style.md
index 835ea2f966ef..05c3e9603180 100644
--- a/docs/_snippets/highlight-addon-custom-style.md
+++ b/docs/_snippets/highlight-addon-custom-style.md
@@ -249,4 +249,3 @@ export const StyledHighlight: Story = {
   ],
 };
 ```
-
diff --git a/docs/_snippets/histogram-story.md b/docs/_snippets/histogram-story.md
index bddeb944e4ea..fd6464be9432 100644
--- a/docs/_snippets/histogram-story.md
+++ b/docs/_snippets/histogram-story.md
@@ -354,7 +354,7 @@ export const Default: Story = {
 };
 ```
 
-```js filename="Histogram.stories.js" renderer="vue" language="js" tabTitle="3"
+```js filename="Histogram.stories.js" renderer="vue" language="js"
 import Histogram from './Histogram.vue';
 
 export default {
@@ -383,7 +383,7 @@ export const Default = {
 };
 ```
 
-```ts filename="Histogram.stories.ts" renderer="vue" language="ts-4-9" tabTitle="3"
+```ts filename="Histogram.stories.ts" renderer="vue" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Histogram from './Histogram.vue';
@@ -417,7 +417,7 @@ export const Default: Story = {
 };
 ```
 
-```ts filename="Histogram.stories.ts" renderer="vue" language="ts" tabTitle="3"
+```ts filename="Histogram.stories.ts" renderer="vue" language="ts"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Histogram from './Histogram.vue';
diff --git a/docs/_snippets/init-command-custom-package-manager.md b/docs/_snippets/init-command-custom-package-manager.md
index da6d52b3b49b..d7729e174ecd 100644
--- a/docs/_snippets/init-command-custom-package-manager.md
+++ b/docs/_snippets/init-command-custom-package-manager.md
@@ -1,4 +1,4 @@
-```shell renderer="common" language="js" packageManager="npx"
+```shell renderer="common" language="js" packageManager="npm"
 npx storybook@latest init --package-manager=npm
 ```
 
@@ -9,4 +9,3 @@ pnpm dlx storybook@latest init --package-manager=npm
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn dlx storybook@latest init --package-manager=npm
 ```
-
diff --git a/docs/_snippets/init-command-manual-framework.md b/docs/_snippets/init-command-manual-framework.md
index f20a762ab79f..6818860a456d 100644
--- a/docs/_snippets/init-command-manual-framework.md
+++ b/docs/_snippets/init-command-manual-framework.md
@@ -1,4 +1,4 @@
-```shell renderer="common" language="js" packageManager="npx"
+```shell renderer="common" language="js" packageManager="npm"
 npx storybook@latest init --type solid
 ```
 
@@ -9,4 +9,3 @@ pnpm dlx storybook@latest init --type solid
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn dlx storybook@latest init --type solid
 ```
-
diff --git a/docs/_snippets/init-command.md b/docs/_snippets/init-command.md
index 4d6563e2ef84..851b1da7192f 100644
--- a/docs/_snippets/init-command.md
+++ b/docs/_snippets/init-command.md
@@ -1,4 +1,4 @@
-```shell renderer="common" language="js" packageManager="npx"
+```shell renderer="common" language="js" packageManager="npm"
 npx storybook@latest init
 ```
 
@@ -9,4 +9,3 @@ pnpm dlx storybook@latest init
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn dlx storybook@latest init
 ```
-
diff --git a/docs/_snippets/list-story-reuse-data.md b/docs/_snippets/list-story-reuse-data.md
index aae3098c609c..7de27f68a2e0 100644
--- a/docs/_snippets/list-story-reuse-data.md
+++ b/docs/_snippets/list-story-reuse-data.md
@@ -245,7 +245,7 @@ export const ManyItems: Story = {
 };
 ```
 
-```js filename="List.stories.js" renderer="vue" language="js" tabTitle="3"
+```js filename="List.stories.js" renderer="vue" language="js"
 import List from './ListComponent.vue';
 import ListItem from './ListItem.vue';
 
@@ -276,7 +276,7 @@ export const ManyItems = {
 };
 ```
 
-```ts filename="List.stories.ts" renderer="vue" language="ts-4-9" tabTitle="3"
+```ts filename="List.stories.ts" renderer="vue" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import List from './ListComponent.vue';
@@ -312,7 +312,7 @@ export const ManyItems: Story = {
 };
 ```
 
-```ts filename="List.stories.ts" renderer="vue" language="ts" tabTitle="3"
+```ts filename="List.stories.ts" renderer="vue" language="ts"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import List from './ListComponent.vue';
@@ -392,4 +392,3 @@ export const ManyItems: Story = {
   `,
 };
 ```
-
diff --git a/docs/_snippets/list-story-template.md b/docs/_snippets/list-story-template.md
index b92ee09399ff..31c6ca75d8cc 100644
--- a/docs/_snippets/list-story-template.md
+++ b/docs/_snippets/list-story-template.md
@@ -352,7 +352,7 @@ export const OneItem = {
 };
 ```
 
-```js filename="List.stories.js" renderer="vue" language="js" tabTitle="3"
+```js filename="List.stories.js" renderer="vue" language="js"
 import List from './List.vue';
 import ListItem from './ListItem.vue';
 
@@ -403,7 +403,7 @@ export const OneItem = {
 };
 ```
 
-```ts filename="List.stories.ts" renderer="vue" language="ts-4-9" tabTitle="3"
+```ts filename="List.stories.ts" renderer="vue" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import List from './List.vue';
@@ -459,7 +459,7 @@ export const OneItem: Story = {
 };
 ```
 
-```ts filename="List.stories.ts" renderer="vue" language="ts" tabTitle="3"
+```ts filename="List.stories.ts" renderer="vue" language="ts"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import List from './List.vue';
@@ -598,4 +598,3 @@ export const OneItem: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/list-story-unchecked.md b/docs/_snippets/list-story-unchecked.md
index fd51261b9f1c..5fe08eeffdfb 100644
--- a/docs/_snippets/list-story-unchecked.md
+++ b/docs/_snippets/list-story-unchecked.md
@@ -213,7 +213,7 @@ export const OneItem: Story = {
 };
 ```
 
-```js filename="List.stories.js" renderer="vue" language="js" tabTitle="3"
+```js filename="List.stories.js" renderer="vue" language="js"
 import List from './List.vue';
 import ListItem from './ListItem.vue';
 
@@ -249,7 +249,7 @@ export const OneItem = {
 };
 ```
 
-```ts filename="List.stories.js" renderer="vue" language="ts-4-9" tabTitle="3"
+```ts filename="List.stories.js" renderer="vue" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import List from './List.vue';
@@ -290,7 +290,7 @@ export const OneItem: Story = {
 };
 ```
 
-```ts filename="List.stories.js" renderer="vue" language="ts" tabTitle="3"
+```ts filename="List.stories.js" renderer="vue" language="ts"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import List from './List.vue';
@@ -367,4 +367,3 @@ export const OneItem: Story = {
   render: () => html` <List> ${Unchecked({ ...Unchecked.args })} </List> `,
 };
 ```
-
diff --git a/docs/_snippets/list-story-with-sub-components.md b/docs/_snippets/list-story-with-sub-components.md
deleted file mode 100644
index 27b866230d51..000000000000
--- a/docs/_snippets/list-story-with-sub-components.md
+++ /dev/null
@@ -1,91 +0,0 @@
-```js filename="List.stories.js" renderer="vue" language="js"
-import List from './List.vue';
-import ListItem from './ListItem.vue';
-
-export default {
-  component: List,
-  subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
-};
-
-export const Empty = {
-  render: () => ({
-    components: { List },
-    template: '<List/>',
-  }),
-};
-
-export const OneItem = {
-  render: (args) => ({
-    components: { List, ListItem },
-    setup() {
-      return { args }
-    }
-    template: '<List v-bind="args"><ListItem /></List>',
-  }),
-};
-```
-
-```ts filename="List.stories.ts" renderer="vue" language="ts-4-9"
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import List from './List.vue';
-import ListItem from './ListItem.vue';
-
-const meta = {
-  component: List,
-  subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
-} satisfies Meta<typeof List>;
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Empty: Story = {
-  render: () => ({
-    components: { List },
-    template: '<List />',
-  }),
-};
-
-export const OneItem: Story = {
-  render: (args) => ({
-    components: { List, ListItem },
-    setup() {
-      return { args }
-    }
-    template: '<List v-bind="args"><ListItem /></List>',
-  }),
-};
-```
-
-```ts filename="List.stories.ts" renderer="vue" language="ts"
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import List from './List.vue';
-import ListItem from './ListItem.vue';
-
-const meta: Meta<typeof List> = {
-  component: List,
-  subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
-};
-export default meta;
-
-type Story = StoryObj<typeof List>;
-
-export const Empty: Story = {
-  render: () => ({
-    components: { List },
-    template: '<List />',
-  }),
-};
-
-export const OneItem: Story = {
-  render: (args) => ({
-    components: { List, ListItem },
-    setup() {
-      return { args }
-    }
-    template: '<List v-bind="args"><ListItem /></List>',
-  }),
-};
-```
-
diff --git a/docs/_snippets/list-story-with-subcomponents.md b/docs/_snippets/list-story-with-subcomponents.md
index e0a7fdf53a7d..44a05aade665 100644
--- a/docs/_snippets/list-story-with-subcomponents.md
+++ b/docs/_snippets/list-story-with-subcomponents.md
@@ -242,3 +242,93 @@ export const OneItem: Story = {
 };
 ```
 
+```js filename="List.stories.js" renderer="vue" language="js"
+import List from './List.vue';
+import ListItem from './ListItem.vue';
+
+export default {
+  component: List,
+  subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
+};
+
+export const Empty = {
+  render: () => ({
+    components: { List },
+    template: '<List/>',
+  }),
+};
+
+export const OneItem = {
+  render: (args) => ({
+    components: { List, ListItem },
+    setup() {
+      return { args }
+    }
+    template: '<List v-bind="args"><ListItem /></List>',
+  }),
+};
+```
+
+```ts filename="List.stories.ts" renderer="vue" language="ts-4-9"
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import List from './List.vue';
+import ListItem from './ListItem.vue';
+
+const meta = {
+  component: List,
+  subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
+} satisfies Meta<typeof List>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Empty: Story = {
+  render: () => ({
+    components: { List },
+    template: '<List />',
+  }),
+};
+
+export const OneItem: Story = {
+  render: (args) => ({
+    components: { List, ListItem },
+    setup() {
+      return { args }
+    }
+    template: '<List v-bind="args"><ListItem /></List>',
+  }),
+};
+```
+
+```ts filename="List.stories.ts" renderer="vue" language="ts"
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import List from './List.vue';
+import ListItem from './ListItem.vue';
+
+const meta: Meta<typeof List> = {
+  component: List,
+  subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
+};
+export default meta;
+
+type Story = StoryObj<typeof List>;
+
+export const Empty: Story = {
+  render: () => ({
+    components: { List },
+    template: '<List />',
+  }),
+};
+
+export const OneItem: Story = {
+  render: (args) => ({
+    components: { List, ListItem },
+    setup() {
+      return { args }
+    }
+    template: '<List v-bind="args"><ListItem /></List>',
+  }),
+};
+```
diff --git a/docs/_snippets/list-story-with-unchecked-children.md b/docs/_snippets/list-story-with-unchecked-children.md
index 7f2843705a94..695ec926432a 100644
--- a/docs/_snippets/list-story-with-unchecked-children.md
+++ b/docs/_snippets/list-story-with-unchecked-children.md
@@ -149,4 +149,3 @@ export const OneItem: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/loader-story.md b/docs/_snippets/loader-story.md
index d0b4706e0095..a777c0e2e922 100644
--- a/docs/_snippets/loader-story.md
+++ b/docs/_snippets/loader-story.md
@@ -424,4 +424,3 @@ export const Primary: Story = {
   ],
 };
 ```
-
diff --git a/docs/_snippets/main-config-addons.md b/docs/_snippets/main-config-addons.md
index d7a0ee94fd90..497402137c04 100644
--- a/docs/_snippets/main-config-addons.md
+++ b/docs/_snippets/main-config-addons.md
@@ -63,4 +63,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-babel.md b/docs/_snippets/main-config-babel.md
index a84c1b8e7fbf..461b07c96f80 100644
--- a/docs/_snippets/main-config-babel.md
+++ b/docs/_snippets/main-config-babel.md
@@ -35,4 +35,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-builder-custom-config.md b/docs/_snippets/main-config-builder-custom-config.md
index d7e77531b4b2..42ee9456cb46 100644
--- a/docs/_snippets/main-config-builder-custom-config.md
+++ b/docs/_snippets/main-config-builder-custom-config.md
@@ -11,4 +11,3 @@ export default {
   },
 };
 ```
-
diff --git a/docs/_snippets/main-config-core-builder.md b/docs/_snippets/main-config-core-builder.md
index 3f99dd9a7854..59bac17fdfe6 100644
--- a/docs/_snippets/main-config-core-builder.md
+++ b/docs/_snippets/main-config-core-builder.md
@@ -53,4 +53,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-core-cross-origin-isolated.md b/docs/_snippets/main-config-core-cross-origin-isolated.md
index 0220b9279e86..9dd3de4a0c14 100644
--- a/docs/_snippets/main-config-core-cross-origin-isolated.md
+++ b/docs/_snippets/main-config-core-cross-origin-isolated.md
@@ -23,4 +23,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-core-disable-project-json.md b/docs/_snippets/main-config-core-disable-project-json.md
index ec0479ff729d..a3ee05092236 100644
--- a/docs/_snippets/main-config-core-disable-project-json.md
+++ b/docs/_snippets/main-config-core-disable-project-json.md
@@ -23,4 +23,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-core-disable-telemetry.md b/docs/_snippets/main-config-core-disable-telemetry.md
index da71438e89ad..7ae7d19ce9ad 100644
--- a/docs/_snippets/main-config-core-disable-telemetry.md
+++ b/docs/_snippets/main-config-core-disable-telemetry.md
@@ -23,4 +23,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-core-disable-update-notifications.md b/docs/_snippets/main-config-core-disable-update-notifications.md
index 79f13ab69fbd..4690f91dff3b 100644
--- a/docs/_snippets/main-config-core-disable-update-notifications.md
+++ b/docs/_snippets/main-config-core-disable-update-notifications.md
@@ -23,4 +23,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-core-disable-webpack-defaults.md b/docs/_snippets/main-config-core-disable-webpack-defaults.md
index 9de06b3e3e49..872865235bb7 100644
--- a/docs/_snippets/main-config-core-disable-webpack-defaults.md
+++ b/docs/_snippets/main-config-core-disable-webpack-defaults.md
@@ -23,4 +23,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-core-enable-crash-reports.md b/docs/_snippets/main-config-core-enable-crash-reports.md
index 50d44d8a7c31..32f436b273ae 100644
--- a/docs/_snippets/main-config-core-enable-crash-reports.md
+++ b/docs/_snippets/main-config-core-enable-crash-reports.md
@@ -23,4 +23,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-docs-autodocs.md b/docs/_snippets/main-config-docs-autodocs.md
index eab7ca0e6959..7fef4184f37e 100644
--- a/docs/_snippets/main-config-docs-autodocs.md
+++ b/docs/_snippets/main-config-docs-autodocs.md
@@ -23,4 +23,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-docs-default-name.md b/docs/_snippets/main-config-docs-default-name.md
index 7f37237c76ec..181354867f7e 100644
--- a/docs/_snippets/main-config-docs-default-name.md
+++ b/docs/_snippets/main-config-docs-default-name.md
@@ -23,4 +23,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-docs-docs-mode.md b/docs/_snippets/main-config-docs-docs-mode.md
index 7b93d17627ed..8e90c952e9b2 100644
--- a/docs/_snippets/main-config-docs-docs-mode.md
+++ b/docs/_snippets/main-config-docs-docs-mode.md
@@ -23,4 +23,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-env.md b/docs/_snippets/main-config-env.md
index 19d4f7e8f7a6..677be576fa72 100644
--- a/docs/_snippets/main-config-env.md
+++ b/docs/_snippets/main-config-env.md
@@ -33,4 +33,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-features-arg-type-targets-v7.md b/docs/_snippets/main-config-features-arg-type-targets-v7.md
index 72cb3cfce324..5b03ccd0090f 100644
--- a/docs/_snippets/main-config-features-arg-type-targets-v7.md
+++ b/docs/_snippets/main-config-features-arg-type-targets-v7.md
@@ -23,4 +23,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-features-legacy-decorator-file-order.md b/docs/_snippets/main-config-features-legacy-decorator-file-order.md
index fc16fd76a9a0..f44c53f53220 100644
--- a/docs/_snippets/main-config-features-legacy-decorator-file-order.md
+++ b/docs/_snippets/main-config-features-legacy-decorator-file-order.md
@@ -23,4 +23,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-framework.md b/docs/_snippets/main-config-framework.md
index 4b7e64958921..b2701eeb52a2 100644
--- a/docs/_snippets/main-config-framework.md
+++ b/docs/_snippets/main-config-framework.md
@@ -27,4 +27,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-indexers-jsonstories.md b/docs/_snippets/main-config-indexers-jsonstories.md
index 1e279464c9d7..8d0ea9c1b7f4 100644
--- a/docs/_snippets/main-config-indexers-jsonstories.md
+++ b/docs/_snippets/main-config-indexers-jsonstories.md
@@ -101,4 +101,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-indexers-title.md b/docs/_snippets/main-config-indexers-title.md
index febd48d4c8d6..33f3ad714c30 100644
--- a/docs/_snippets/main-config-indexers-title.md
+++ b/docs/_snippets/main-config-indexers-title.md
@@ -89,4 +89,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-indexers.md b/docs/_snippets/main-config-indexers.md
index b86c0c7ddefa..544f8d2b98c9 100644
--- a/docs/_snippets/main-config-indexers.md
+++ b/docs/_snippets/main-config-indexers.md
@@ -65,4 +65,3 @@ const config: StorybookConfig = {
 
 export default config
 ```
-
diff --git a/docs/_snippets/main-config-log-level.md b/docs/_snippets/main-config-log-level.md
index 3f273bc15f7c..2d57e78eb994 100644
--- a/docs/_snippets/main-config-log-level.md
+++ b/docs/_snippets/main-config-log-level.md
@@ -19,4 +19,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-manager-head.md b/docs/_snippets/main-config-manager-head.md
index af295c0b1247..363e168040a8 100644
--- a/docs/_snippets/main-config-manager-head.md
+++ b/docs/_snippets/main-config-manager-head.md
@@ -25,4 +25,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-preview-body.md b/docs/_snippets/main-config-preview-body.md
index 5fbbcfac8e8f..0f8c36d65ebe 100644
--- a/docs/_snippets/main-config-preview-body.md
+++ b/docs/_snippets/main-config-preview-body.md
@@ -29,4 +29,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-preview-head.md b/docs/_snippets/main-config-preview-head.md
index 3a95e2a7fdc6..c892c84164af 100644
--- a/docs/_snippets/main-config-preview-head.md
+++ b/docs/_snippets/main-config-preview-head.md
@@ -29,4 +29,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-preview.md b/docs/_snippets/main-config-preview.md
index 706563a2ae96..2e849eabd534 100644
--- a/docs/_snippets/main-config-preview.md
+++ b/docs/_snippets/main-config-preview.md
@@ -55,4 +55,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-refs-disable.md b/docs/_snippets/main-config-refs-disable.md
index 8b99555794a1..40d9830d9943 100644
--- a/docs/_snippets/main-config-refs-disable.md
+++ b/docs/_snippets/main-config-refs-disable.md
@@ -23,4 +23,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-refs-with-function.md b/docs/_snippets/main-config-refs-with-function.md
index 5b48a9b60f16..b94608356b25 100644
--- a/docs/_snippets/main-config-refs-with-function.md
+++ b/docs/_snippets/main-config-refs-with-function.md
@@ -69,4 +69,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-static-dirs-with-object.md b/docs/_snippets/main-config-static-dirs-with-object.md
index 3a0aa7954bb9..ae6e78369d91 100644
--- a/docs/_snippets/main-config-static-dirs-with-object.md
+++ b/docs/_snippets/main-config-static-dirs-with-object.md
@@ -19,4 +19,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-static-dirs.md b/docs/_snippets/main-config-static-dirs.md
index 3d8514d18885..c4537d4f0e82 100644
--- a/docs/_snippets/main-config-static-dirs.md
+++ b/docs/_snippets/main-config-static-dirs.md
@@ -19,4 +19,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-stories-ordered.md b/docs/_snippets/main-config-stories-ordered.md
index 41902cb5b140..972589b0ab42 100644
--- a/docs/_snippets/main-config-stories-ordered.md
+++ b/docs/_snippets/main-config-stories-ordered.md
@@ -20,4 +20,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-stories-with-logic.md b/docs/_snippets/main-config-stories-with-logic.md
index 43021b00b526..2baa4ceb91a1 100644
--- a/docs/_snippets/main-config-stories-with-logic.md
+++ b/docs/_snippets/main-config-stories-with-logic.md
@@ -34,4 +34,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-stories-with-object.md b/docs/_snippets/main-config-stories-with-object.md
index a26aebd7f425..a08c476c79c0 100644
--- a/docs/_snippets/main-config-stories-with-object.md
+++ b/docs/_snippets/main-config-stories-with-object.md
@@ -35,4 +35,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-stories.md b/docs/_snippets/main-config-stories.md
index 5335c946d8aa..2d04f3a74d6f 100644
--- a/docs/_snippets/main-config-stories.md
+++ b/docs/_snippets/main-config-stories.md
@@ -17,4 +17,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-swc-jsx-transform.md b/docs/_snippets/main-config-swc-jsx-transform.md
index b85848dcafd9..f942eee4e7fc 100644
--- a/docs/_snippets/main-config-swc-jsx-transform.md
+++ b/docs/_snippets/main-config-swc-jsx-transform.md
@@ -38,4 +38,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-swc.md b/docs/_snippets/main-config-swc.md
index 6690e30ce924..670bdb51b922 100644
--- a/docs/_snippets/main-config-swc.md
+++ b/docs/_snippets/main-config-swc.md
@@ -33,4 +33,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-test-disable-autodocs.md b/docs/_snippets/main-config-test-disable-autodocs.md
index 16df9af2dcfd..dab7b1ffb3cf 100644
--- a/docs/_snippets/main-config-test-disable-autodocs.md
+++ b/docs/_snippets/main-config-test-disable-autodocs.md
@@ -27,4 +27,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-test-disable-blocks.md b/docs/_snippets/main-config-test-disable-blocks.md
index bcc85cfbaafa..d48c5e54c19a 100644
--- a/docs/_snippets/main-config-test-disable-blocks.md
+++ b/docs/_snippets/main-config-test-disable-blocks.md
@@ -27,4 +27,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-test-disable-docgen.md b/docs/_snippets/main-config-test-disable-docgen.md
index c45c607fed59..029bece1e6fd 100644
--- a/docs/_snippets/main-config-test-disable-docgen.md
+++ b/docs/_snippets/main-config-test-disable-docgen.md
@@ -27,4 +27,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-test-disable-mdx.md b/docs/_snippets/main-config-test-disable-mdx.md
index ee708b0b2a7a..013a85ee6af3 100644
--- a/docs/_snippets/main-config-test-disable-mdx.md
+++ b/docs/_snippets/main-config-test-disable-mdx.md
@@ -27,4 +27,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-test-disable-sourcemaps.md b/docs/_snippets/main-config-test-disable-sourcemaps.md
index 8f581273dfbd..42da44e8fce8 100644
--- a/docs/_snippets/main-config-test-disable-sourcemaps.md
+++ b/docs/_snippets/main-config-test-disable-sourcemaps.md
@@ -27,4 +27,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-test-disable-treeshaking.md b/docs/_snippets/main-config-test-disable-treeshaking.md
index e5f65383fbd4..a328ce28de7c 100644
--- a/docs/_snippets/main-config-test-disable-treeshaking.md
+++ b/docs/_snippets/main-config-test-disable-treeshaking.md
@@ -27,4 +27,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-typescript-check-options.md b/docs/_snippets/main-config-typescript-check-options.md
index 2c41b5f53ad8..2850a3fb2f40 100644
--- a/docs/_snippets/main-config-typescript-check-options.md
+++ b/docs/_snippets/main-config-typescript-check-options.md
@@ -15,4 +15,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-typescript-check.md b/docs/_snippets/main-config-typescript-check.md
index 043e01e26bde..a1ef1bcec0af 100644
--- a/docs/_snippets/main-config-typescript-check.md
+++ b/docs/_snippets/main-config-typescript-check.md
@@ -12,4 +12,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-typescript-react-docgen-typescript-options.md b/docs/_snippets/main-config-typescript-react-docgen-typescript-options.md
index 47c800598e2e..57310d35a370 100644
--- a/docs/_snippets/main-config-typescript-react-docgen-typescript-options.md
+++ b/docs/_snippets/main-config-typescript-react-docgen-typescript-options.md
@@ -17,4 +17,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-typescript-react-docgen.md b/docs/_snippets/main-config-typescript-react-docgen.md
index a49ccfeda3a9..94a73916a1ff 100644
--- a/docs/_snippets/main-config-typescript-react-docgen.md
+++ b/docs/_snippets/main-config-typescript-react-docgen.md
@@ -12,4 +12,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-typescript-skip-compiler.md b/docs/_snippets/main-config-typescript-skip-compiler.md
index 3f338a05c724..57a0f21c359c 100644
--- a/docs/_snippets/main-config-typescript-skip-compiler.md
+++ b/docs/_snippets/main-config-typescript-skip-compiler.md
@@ -12,4 +12,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-typical.md b/docs/_snippets/main-config-typical.md
index 342de3698437..eb2230a71ba7 100644
--- a/docs/_snippets/main-config-typical.md
+++ b/docs/_snippets/main-config-typical.md
@@ -32,4 +32,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-vite-final-env.md b/docs/_snippets/main-config-vite-final-env.md
index b785329d0dbc..eaaed64eeef2 100644
--- a/docs/_snippets/main-config-vite-final-env.md
+++ b/docs/_snippets/main-config-vite-final-env.md
@@ -19,4 +19,3 @@ export default {
   },
 };
 ```
-
diff --git a/docs/_snippets/main-config-vite-final.md b/docs/_snippets/main-config-vite-final.md
index ca3566e5a91f..a6a1d2fd79f1 100644
--- a/docs/_snippets/main-config-vite-final.md
+++ b/docs/_snippets/main-config-vite-final.md
@@ -69,4 +69,3 @@ const config = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-webpack-final.md b/docs/_snippets/main-config-webpack-final.md
index 8ee96518d565..0d0c8b5e463c 100644
--- a/docs/_snippets/main-config-webpack-final.md
+++ b/docs/_snippets/main-config-webpack-final.md
@@ -35,4 +35,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/mock-context-container-global.md b/docs/_snippets/mock-context-container-global.md
index ada262d52e1c..447d1cd44b84 100644
--- a/docs/_snippets/mock-context-container-global.md
+++ b/docs/_snippets/mock-context-container-global.md
@@ -62,9 +62,7 @@ const AppDecorator = (storyFn) => {
 export const decorators = [AppDecorator];
 ```
 
-```ts filename="Replace your-framework with the framework you are using (e.g., react, vue3)" renderer="solid" language="ts"
-import { Preview } from '@storybook/your-framework';
-
+```ts filename=".storybook/preview.ts" renderer="solid" language="ts"
 import { normal as NavigationNormal } from '../components/Navigation.stories';
 
 import GlobalContainerContext from '../components/lib/GlobalContainerContext';
@@ -85,4 +83,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/mock-context-container-provider.md b/docs/_snippets/mock-context-container-provider.md
index 81a3ce811fc1..533765ee4736 100644
--- a/docs/_snippets/mock-context-container-provider.md
+++ b/docs/_snippets/mock-context-container-provider.md
@@ -41,4 +41,3 @@ export const AppProfilePage = () => {
   );
 };
 ```
-
diff --git a/docs/_snippets/mock-context-container.md b/docs/_snippets/mock-context-container.md
index 2b3f1e92278b..716c68d31f26 100644
--- a/docs/_snippets/mock-context-container.md
+++ b/docs/_snippets/mock-context-container.md
@@ -71,4 +71,3 @@ export const Normal = {
   ),
 };
 ```
-
diff --git a/docs/_snippets/mock-context-create.md b/docs/_snippets/mock-context-create.md
index 7954b4f8d71a..7d4b419079db 100644
--- a/docs/_snippets/mock-context-create.md
+++ b/docs/_snippets/mock-context-create.md
@@ -13,4 +13,3 @@ const ProfilePageContext = createContext();
 
 export default ProfilePageContext;
 ```
-
diff --git a/docs/_snippets/mock-context-in-use.md b/docs/_snippets/mock-context-in-use.md
index 9176799db702..39fec5ba4a8c 100644
--- a/docs/_snippets/mock-context-in-use.md
+++ b/docs/_snippets/mock-context-in-use.md
@@ -33,4 +33,3 @@ export const ProfilePage = (props) => {
   );
 };
 ```
-
diff --git a/docs/_snippets/mock-provider-in-preview.md b/docs/_snippets/mock-provider-in-preview.md
index 2b13aa680e6d..31c0a23c9b91 100644
--- a/docs/_snippets/mock-provider-in-preview.md
+++ b/docs/_snippets/mock-provider-in-preview.md
@@ -48,4 +48,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/module-aliases-config.md b/docs/_snippets/module-aliases-config.md
index 354538305779..097285e63efd 100644
--- a/docs/_snippets/module-aliases-config.md
+++ b/docs/_snippets/module-aliases-config.md
@@ -101,4 +101,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/msw-addon-configure-handlers-graphql.md b/docs/_snippets/msw-addon-configure-handlers-graphql.md
index e3a0b167f1fd..8d41807db3f2 100644
--- a/docs/_snippets/msw-addon-configure-handlers-graphql.md
+++ b/docs/_snippets/msw-addon-configure-handlers-graphql.md
@@ -1,4 +1,4 @@
-```ts filename="YourPage.stories.ts" renderer="angular" language="ts"
+```ts filename="YourPage.stories.ts" renderer="angular" language="ts" tabTitle="story"
 import type { Meta, StoryObj } from '@storybook/angular';
 import { moduleMetadata } from '@storybook/angular';
 
@@ -89,6 +89,45 @@ export const MockedError: Story = {
 };
 ```
 
+```ts filename="mock-graphql.module.ts" renderer="angular" language="ts" tabTitle="mock-apollo-module"
+import { NgModule } from '@angular/core';
+import { APOLLO_OPTIONS } from 'apollo-angular';
+
+import { ApolloClientOptions, InMemoryCache } from '@apollo/client/core';
+import { HttpLink } from 'apollo-angular/http';
+
+// See here for docs https://apollo-angular.com/docs/get-started
+
+const uri = 'https://your-graphql-endpoint';
+export function createApollo(httpLink: HttpLink): ApolloClientOptions<any> {
+  return {
+    link: httpLink.create({ uri }),
+    cache: new InMemoryCache(),
+    defaultOptions: {
+      watchQuery: {
+        fetchPolicy: 'no-cache',
+        errorPolicy: 'all',
+      },
+      query: {
+        fetchPolicy: 'no-cache',
+        errorPolicy: 'all',
+      },
+    },
+  };
+}
+
+@NgModule({
+  providers: [
+    {
+      provide: APOLLO_OPTIONS,
+      useFactory: createApollo,
+      deps: [HttpLink],
+    },
+  ],
+})
+export class MockGraphQLModule {}
+```
+
 ```js filename="YourPage.stories.js|jsx" renderer="react" language="js"
 import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
 import { graphql, HttpResponse, delay } from 'msw';
@@ -255,7 +294,7 @@ export const MockedSuccess: Story = {
               allInfo: {
                 ...TestData,
               },
-            }
+            },
           });
         }),
       ],
@@ -354,7 +393,7 @@ export const MockedSuccess: Story = {
               allInfo: {
                 ...TestData,
               },
-            }
+            },
           });
         }),
       ],
@@ -382,7 +421,7 @@ export const MockedError: Story = {
 };
 ```
 
-```js filename="YourPage.stories.js" renderer="svelte" language="js"
+```js filename="YourPage.stories.js" renderer="svelte" language="js" tabTitle="story"
 import { graphql, HttpResponse, delay } from 'msw';
 
 import MockApolloWrapperClient from './MockApolloWrapperClient.svelte';
@@ -456,7 +495,33 @@ export const MockedError = {
 };
 ```
 
-```ts filename="YourPage.stories.ts" renderer="svelte" language="ts-4-9"
+```svelte filename="MockApolloWrapperClient.svelte" renderer="svelte" language="js" tabTitle="apollo-wrapper-component"
+<script>
+  import { ApolloClient, InMemoryCache } from '@apollo/client';
+
+  import { setClient } from 'svelte-apollo';
+
+  const mockedClient = new ApolloClient({
+    uri: 'https://your-graphql-endpoint',
+    cache: new InMemoryCache(),
+    defaultOptions: {
+      watchQuery: {
+        fetchPolicy: 'no-cache',
+        errorPolicy: 'all',
+      },
+      query: {
+        fetchPolicy: 'no-cache',
+        errorPolicy: 'all',
+      },
+    },
+  });
+  setClient(mockedClient);
+</script>
+
+<slot />
+```
+
+```ts filename="YourPage.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="story"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import { graphql, HttpResponse, delay } from 'msw';
@@ -535,7 +600,33 @@ export const MockedError: Story = {
 };
 ```
 
-```ts filename="YourPage.stories.ts" renderer="svelte" language="ts"
+```svelte filename="MockApolloWrapperClient.svelte" renderer="svelte" language="ts-4-9" tabTitle="apollo-wrapper-component"
+<script lang="ts">
+  import { ApolloClient, InMemoryCache } from '@apollo/client';
+
+  import { setClient } from 'svelte-apollo';
+
+  const mockedClient = new ApolloClient({
+    uri: 'https://your-graphql-endpoint',
+    cache: new InMemoryCache(),
+    defaultOptions: {
+      watchQuery: {
+        fetchPolicy: 'no-cache',
+        errorPolicy: 'all',
+      },
+      query: {
+        fetchPolicy: 'no-cache',
+        errorPolicy: 'all',
+      },
+    },
+  });
+  setClient(mockedClient);
+</script>
+
+<slot />
+```
+
+```ts filename="YourPage.stories.ts" renderer="svelte" language="ts" tabTitle="story"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import { graphql, HttpResponse, delay } from 'msw';
@@ -614,7 +705,33 @@ export const MockedError: Story = {
 };
 ```
 
-```js filename="YourPage.stories.js" renderer="vue" language="js"
+```svelte filename="MockApolloWrapperClient.svelte" renderer="svelte" language="ts" tabTitle="apollo-wrapper-component"
+<script lang="ts">
+  import { ApolloClient, InMemoryCache } from '@apollo/client';
+
+  import { setClient } from 'svelte-apollo';
+
+  const mockedClient = new ApolloClient({
+    uri: 'https://your-graphql-endpoint',
+    cache: new InMemoryCache(),
+    defaultOptions: {
+      watchQuery: {
+        fetchPolicy: 'no-cache',
+        errorPolicy: 'all',
+      },
+      query: {
+        fetchPolicy: 'no-cache',
+        errorPolicy: 'all',
+      },
+    },
+  });
+  setClient(mockedClient);
+</script>
+
+<slot />
+```
+
+```js filename="YourPage.stories.js" renderer="vue" language="js" tabTitle="story"
 import { graphql, HttpResponse, delay } from 'msw';
 
 import WrapperComponent from './ApolloWrapperClient.vue';
@@ -691,7 +808,47 @@ export const MockedError = {
 };
 ```
 
-```ts filename="YourPage.stories.ts" renderer="vue" language="ts-4-9"
+```html filename="ApolloWrapperClient.vue" renderer="vue" language="js" tabTitle="apollo-wrapper-component"
+<template>
+  <div><slot /></div>
+</template>
+
+<script>
+  import { defineComponent, provide } from 'vue';
+  import { DefaultApolloClient } from '@vue/apollo-composable';
+  import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core';
+
+  // Apollo client wrapper component that can be used within your app and Storybook
+  export default defineComponent({
+    name: 'WrapperComponent',
+    setup() {
+      const httpLink = createHttpLink({
+        // You should use an absolute URL here
+        uri: 'https://your-graphql-endpoint',
+      });
+      const cache = new InMemoryCache();
+
+      const mockedClient = new ApolloClient({
+        link: httpLink,
+        cache,
+        defaultOptions: {
+          watchQuery: {
+            fetchPolicy: 'no-cache',
+            errorPolicy: 'all',
+          },
+          query: {
+            fetchPolicy: 'no-cache',
+            errorPolicy: 'all',
+          },
+        },
+      });
+      provide(DefaultApolloClient, mockedClient);
+    },
+  });
+</script>
+```
+
+```ts filename="YourPage.stories.ts" renderer="vue" language="ts-4-9" tabTitle="story"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import { graphql, HttpResponse, delay } from 'msw';
@@ -773,7 +930,47 @@ export const MockedError: Story = {
 };
 ```
 
-```ts filename="YourPage.stories.ts" renderer="vue" language="ts"
+```html filename="ApolloWrapperClient.vue" renderer="vue" language="ts-4-9" tabTitle="apollo-wrapper-component"
+<template>
+  <div><slot /></div>
+</template>
+
+<script>
+  import { defineComponent, provide } from 'vue';
+  import { DefaultApolloClient } from '@vue/apollo-composable';
+  import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core';
+
+  // Apollo client wrapper component that can be used within your app and Storybook
+  export default defineComponent({
+    name: 'WrapperComponent',
+    setup() {
+      const httpLink = createHttpLink({
+        // You should use an absolute URL here
+        uri: 'https://your-graphql-endpoint',
+      });
+      const cache = new InMemoryCache();
+
+      const mockedClient = new ApolloClient({
+        link: httpLink,
+        cache,
+        defaultOptions: {
+          watchQuery: {
+            fetchPolicy: 'no-cache',
+            errorPolicy: 'all',
+          },
+          query: {
+            fetchPolicy: 'no-cache',
+            errorPolicy: 'all',
+          },
+        },
+      });
+      provide(DefaultApolloClient, mockedClient);
+    },
+  });
+</script>
+```
+
+```ts filename="YourPage.stories.ts" renderer="vue" language="ts" tabTitle="story"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import { graphql, HttpResponse, delay } from 'msw';
@@ -855,3 +1052,42 @@ export const MockedError: Story = {
 };
 ```
 
+```html filename="ApolloWrapperClient.vue" renderer="vue" language="ts" tabTitle="apollo-wrapper-component"
+<template>
+  <div><slot /></div>
+</template>
+
+<script>
+  import { defineComponent, provide } from 'vue';
+  import { DefaultApolloClient } from '@vue/apollo-composable';
+  import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core';
+
+  // Apollo client wrapper component that can be used within your app and Storybook
+  export default defineComponent({
+    name: 'WrapperComponent',
+    setup() {
+      const httpLink = createHttpLink({
+        // You should use an absolute URL here
+        uri: 'https://your-graphql-endpoint',
+      });
+      const cache = new InMemoryCache();
+
+      const mockedClient = new ApolloClient({
+        link: httpLink,
+        cache,
+        defaultOptions: {
+          watchQuery: {
+            fetchPolicy: 'no-cache',
+            errorPolicy: 'all',
+          },
+          query: {
+            fetchPolicy: 'no-cache',
+            errorPolicy: 'all',
+          },
+        },
+      });
+      provide(DefaultApolloClient, mockedClient);
+    },
+  });
+</script>
+```
diff --git a/docs/_snippets/msw-addon-initialize.md b/docs/_snippets/msw-addon-initialize.md
index 71889c968f8e..af8abd264fd0 100644
--- a/docs/_snippets/msw-addon-initialize.md
+++ b/docs/_snippets/msw-addon-initialize.md
@@ -34,4 +34,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/msw-addon-install.md b/docs/_snippets/msw-addon-install.md
index 72ee2a6fc2b0..2f9ce9a5f725 100644
--- a/docs/_snippets/msw-addon-install.md
+++ b/docs/_snippets/msw-addon-install.md
@@ -9,4 +9,3 @@ pnpm add msw msw-storybook-addon --save-dev
 ```sh renderer="common" language="js" packageManager="yarn"
 yarn add msw msw-storybook-addon --save-dev
 ```
-
diff --git a/docs/_snippets/msw-generate-service-worker.md b/docs/_snippets/msw-generate-service-worker.md
index 805ac7374b54..d8fdbeb6914d 100644
--- a/docs/_snippets/msw-generate-service-worker.md
+++ b/docs/_snippets/msw-generate-service-worker.md
@@ -1,8 +1,11 @@
-```shell renderer="common" language="js" packageManager="npx"
+```shell renderer="common" language="js" packageManager="npm"
 npx msw init public/
 ```
 
+```shell renderer="common" language="js" packageManager="yarn"
+yarn dlx msw init public/
+```
+
 ```shell renderer="common" language="js" packageManager="pnpm"
 pnpm dlx msw init public/
 ```
-
diff --git a/docs/_snippets/multiple-stories-test.md b/docs/_snippets/multiple-stories-test.md
index 5610d4c144cd..583b315863ef 100644
--- a/docs/_snippets/multiple-stories-test.md
+++ b/docs/_snippets/multiple-stories-test.md
@@ -70,7 +70,7 @@ test('Tests filled form', async () => {
 });
 ```
 
-```js filename="tests/Form.test.js" renderer="vue" language="js" tabTitle="3"
+```js filename="tests/Form.test.js" renderer="vue" language="js"
 import { fireEvent, screen } from '@testing-library/vue';
 
 import { composeStories } from '@storybook/vue3';
@@ -106,7 +106,7 @@ test('Tests filled form', async () => {
 });
 ```
 
-```ts filename="tests/Form.test.ts" renderer="vue" language="ts" tabTitle="3"
+```ts filename="tests/Form.test.ts" renderer="vue" language="ts"
 import { fireEvent, screen } from '@testing-library/vue';
 
 import { composeStories } from '@storybook/vue3';
diff --git a/docs/_snippets/my-component-env-var-config.md b/docs/_snippets/my-component-env-var-config.md
index 538423a21e2b..d5e9bcb77e11 100644
--- a/docs/_snippets/my-component-env-var-config.md
+++ b/docs/_snippets/my-component-env-var-config.md
@@ -100,4 +100,3 @@ export const Default: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/my-component-exclude-tags.md b/docs/_snippets/my-component-exclude-tags.md
index 3b0c9f6a007d..58768d7023bd 100644
--- a/docs/_snippets/my-component-exclude-tags.md
+++ b/docs/_snippets/my-component-exclude-tags.md
@@ -31,4 +31,3 @@ export const ExcludeStory: Story = {
   tags: ['no-tests'],
 };
 ```
-
diff --git a/docs/_snippets/my-component-include-tags.md b/docs/_snippets/my-component-include-tags.md
index c77da4a37f0c..29a3b0b1bf83 100644
--- a/docs/_snippets/my-component-include-tags.md
+++ b/docs/_snippets/my-component-include-tags.md
@@ -31,4 +31,3 @@ export const IncludeStory: Story = {
   tags: ['test-only'],
 };
 ```
-
diff --git a/docs/_snippets/my-component-skip-tags.md b/docs/_snippets/my-component-skip-tags.md
index 507cd09a91b4..5134cf9e0422 100644
--- a/docs/_snippets/my-component-skip-tags.md
+++ b/docs/_snippets/my-component-skip-tags.md
@@ -31,4 +31,3 @@ export const SkipStory: Story = {
   tags: ['skip-test'],
 };
 ```
-
diff --git a/docs/_snippets/my-component-story-import-json.md b/docs/_snippets/my-component-story-import-json.md
index c4efc85f6930..d2fa224234f3 100644
--- a/docs/_snippets/my-component-story-import-json.md
+++ b/docs/_snippets/my-component-story-import-json.md
@@ -2,4 +2,3 @@
 // This will automatically be parsed to the contents of `data.json`
 import data from './data.json';
 ```
-
diff --git a/docs/_snippets/my-component-story-mandatory-export.md b/docs/_snippets/my-component-story-mandatory-export.md
index 0bc760cbec91..2e49f0c50359 100644
--- a/docs/_snippets/my-component-story-mandatory-export.md
+++ b/docs/_snippets/my-component-story-mandatory-export.md
@@ -93,4 +93,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/my-component-story-use-globaltype.md b/docs/_snippets/my-component-story-use-globaltype.md
index 91aeace22707..d1904249e559 100644
--- a/docs/_snippets/my-component-story-use-globaltype.md
+++ b/docs/_snippets/my-component-story-use-globaltype.md
@@ -523,4 +523,3 @@ export const StoryWithLocale: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/my-component-story-with-nonstory.md b/docs/_snippets/my-component-story-with-nonstory.md
index 0751ca526403..f581820552e4 100644
--- a/docs/_snippets/my-component-story-with-nonstory.md
+++ b/docs/_snippets/my-component-story-with-nonstory.md
@@ -445,4 +445,3 @@ export const ComplexStory: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/my-component-story-with-storyname.md b/docs/_snippets/my-component-story-with-storyname.md
index 8f14f67391bc..8a37ebaa137f 100644
--- a/docs/_snippets/my-component-story-with-storyname.md
+++ b/docs/_snippets/my-component-story-with-storyname.md
@@ -99,4 +99,3 @@ export const Simple: Story = {
   parameters: {},
 };
 ```
-
diff --git a/docs/_snippets/nextjs-app-directory-in-meta.md b/docs/_snippets/nextjs-app-directory-in-meta.md
index 47d283ae59fc..1613ce50d507 100644
--- a/docs/_snippets/nextjs-app-directory-in-meta.md
+++ b/docs/_snippets/nextjs-app-directory-in-meta.md
@@ -42,4 +42,3 @@ const meta: Meta<typeof NavigationBasedComponent> = {
 };
 export default meta;
 ```
-
diff --git a/docs/_snippets/nextjs-app-directory-in-preview.md b/docs/_snippets/nextjs-app-directory-in-preview.md
index 75652a5bcd72..44d0166b296b 100644
--- a/docs/_snippets/nextjs-app-directory-in-preview.md
+++ b/docs/_snippets/nextjs-app-directory-in-preview.md
@@ -25,4 +25,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/nextjs-cache-mock.md b/docs/_snippets/nextjs-cache-mock.md
index b404e1625809..8c310d086aca 100644
--- a/docs/_snippets/nextjs-cache-mock.md
+++ b/docs/_snippets/nextjs-cache-mock.md
@@ -75,4 +75,3 @@ export const Submitted: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/nextjs-configure-svgr.md b/docs/_snippets/nextjs-configure-svgr.md
index dcf45222c54e..18bb44b1b07a 100644
--- a/docs/_snippets/nextjs-configure-svgr.md
+++ b/docs/_snippets/nextjs-configure-svgr.md
@@ -51,4 +51,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/nextjs-headers-mock.md b/docs/_snippets/nextjs-headers-mock.md
index 4e7916f1417a..bbc0e7901d6c 100644
--- a/docs/_snippets/nextjs-headers-mock.md
+++ b/docs/_snippets/nextjs-headers-mock.md
@@ -87,4 +87,3 @@ export const LoggedInEurope: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/nextjs-image-static-dirs.md b/docs/_snippets/nextjs-image-static-dirs.md
index d70202edc512..7485f467397d 100644
--- a/docs/_snippets/nextjs-image-static-dirs.md
+++ b/docs/_snippets/nextjs-image-static-dirs.md
@@ -25,4 +25,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/nextjs-install.md b/docs/_snippets/nextjs-install.md
index 7779659a3e37..0e6cb2d09ecc 100644
--- a/docs/_snippets/nextjs-install.md
+++ b/docs/_snippets/nextjs-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/nextjs
 ```shell renderer="react" language="js" packageManager="yarn"
 yarn add --dev @storybook/nextjs
 ```
-
diff --git a/docs/_snippets/nextjs-navigation-mock.md b/docs/_snippets/nextjs-navigation-mock.md
index 635d822a883d..003fdee91a48 100644
--- a/docs/_snippets/nextjs-navigation-mock.md
+++ b/docs/_snippets/nextjs-navigation-mock.md
@@ -114,4 +114,3 @@ export const GoBack: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/nextjs-navigation-segments-for-use-params-override-in-meta.md b/docs/_snippets/nextjs-navigation-segments-for-use-params-override-in-meta.md
index abd429265068..194ea482b5a5 100644
--- a/docs/_snippets/nextjs-navigation-segments-for-use-params-override-in-meta.md
+++ b/docs/_snippets/nextjs-navigation-segments-for-use-params-override-in-meta.md
@@ -60,4 +60,3 @@ const meta: Meta<typeof NavigationBasedComponent> = {
 };
 export default meta;
 ```
-
diff --git a/docs/_snippets/nextjs-navigation-segments-override-in-meta.md b/docs/_snippets/nextjs-navigation-segments-override-in-meta.md
index 3e494fb4dcf6..848f9530c164 100644
--- a/docs/_snippets/nextjs-navigation-segments-override-in-meta.md
+++ b/docs/_snippets/nextjs-navigation-segments-override-in-meta.md
@@ -51,4 +51,3 @@ const meta: Meta<typeof NavigationBasedComponent> = {
 };
 export default meta;
 ```
-
diff --git a/docs/_snippets/nextjs-remove-addons.md b/docs/_snippets/nextjs-remove-addons.md
index 8daf79ac7d95..007e6fe14733 100644
--- a/docs/_snippets/nextjs-remove-addons.md
+++ b/docs/_snippets/nextjs-remove-addons.md
@@ -25,4 +25,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/nextjs-router-mock.md b/docs/_snippets/nextjs-router-mock.md
index 4d3c35fba720..83e83aee5e02 100644
--- a/docs/_snippets/nextjs-router-mock.md
+++ b/docs/_snippets/nextjs-router-mock.md
@@ -76,4 +76,3 @@ export const GoBack: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/other-foo-bar-story.md b/docs/_snippets/other-foo-bar-story.md
index c2a5393ef7b7..eab030321c8e 100644
--- a/docs/_snippets/other-foo-bar-story.md
+++ b/docs/_snippets/other-foo-bar-story.md
@@ -115,4 +115,3 @@ export const Baz: Story = {
   name: 'Insert name here',
 };
 ```
-
diff --git a/docs/_snippets/page-story-args-within-story.md b/docs/_snippets/page-story-args-within-story.md
index 9a33cdefb1e2..a890b871ffbc 100644
--- a/docs/_snippets/page-story-args-within-story.md
+++ b/docs/_snippets/page-story-args-within-story.md
@@ -95,4 +95,3 @@ export const Example: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/page-story-slots.md b/docs/_snippets/page-story-slots.md
index ed8b9a9b8b66..c32f96c7cd8e 100644
--- a/docs/_snippets/page-story-slots.md
+++ b/docs/_snippets/page-story-slots.md
@@ -231,7 +231,7 @@ export const CustomFooter: Story = {
 </Story>
 ```
 
-```js filename="Page.stories.js" renderer="vue" language="js" tabTitle="3"
+```js filename="Page.stories.js" renderer="vue" language="js"
 import Page from './Page.vue';
 
 export default {
@@ -258,7 +258,7 @@ export const CustomFooter = {
 };
 ```
 
-```ts filename="Page.stories.ts" renderer="vue" language="ts-4-9" tabTitle="3"
+```ts filename="Page.stories.ts" renderer="vue" language="ts-4-9"
 // https://www.npmjs.com/package/vue-component-type-helpers
 import type { ComponentProps } from 'vue-component-type-helpers';
 import type { Meta, StoryObj } from '@storybook/vue3';
@@ -294,7 +294,7 @@ export const Primary = {
 } satisfies Story;
 ```
 
-```ts filename="Page.stories.ts" renderer="vue" language="ts" tabTitle="3"
+```ts filename="Page.stories.ts" renderer="vue" language="ts"
 // https://www.npmjs.com/package/vue-component-type-helpers
 import type { ComponentProps } from 'vue-component-type-helpers';
 import type { Meta, StoryObj } from '@storybook/vue3';
diff --git a/docs/_snippets/page-story-with-args-composition.md b/docs/_snippets/page-story-with-args-composition.md
index de13cb80a08b..a12fc28740de 100644
--- a/docs/_snippets/page-story-with-args-composition.md
+++ b/docs/_snippets/page-story-with-args-composition.md
@@ -141,4 +141,3 @@ export const Simple: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/page-story.md b/docs/_snippets/page-story.md
index 295940d9a004..24868f858f30 100644
--- a/docs/_snippets/page-story.md
+++ b/docs/_snippets/page-story.md
@@ -263,7 +263,7 @@ export const LoggedIn: Story = {
 };
 ```
 
-```js filename="Page.stories.js" renderer="vue" language="js" tabTitle="3"
+```js filename="Page.stories.js" renderer="vue" language="js"
 import Page from './Page.vue';
 
 //👇 Imports all Header stories
@@ -292,7 +292,7 @@ export const LoggedIn = {
 };
 ```
 
-```ts filename="Page.stories.ts" renderer="vue" language="ts-4-9" tabTitle="3"
+```ts filename="Page.stories.ts" renderer="vue" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Page from './Page.vue';
@@ -326,7 +326,7 @@ export const Primary: Story = {
 };
 ```
 
-```ts filename="Page.stories.ts" renderer="vue" language="ts" tabTitle="3"
+```ts filename="Page.stories.ts" renderer="vue" language="ts"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Page from './Page.vue';
diff --git a/docs/_snippets/parameters-in-preview.md b/docs/_snippets/parameters-in-preview.md
index 06c35eae5a79..b017899e0316 100644
--- a/docs/_snippets/parameters-in-preview.md
+++ b/docs/_snippets/parameters-in-preview.md
@@ -28,4 +28,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/portable-stories-jest-compose-stories.md b/docs/_snippets/portable-stories-jest-compose-stories.md
index 044ff413695d..cce7ff58c1af 100644
--- a/docs/_snippets/portable-stories-jest-compose-stories.md
+++ b/docs/_snippets/portable-stories-jest-compose-stories.md
@@ -50,4 +50,3 @@ test('renders primary button with overridden props', () => {
   expect(buttonElement).not.toBeNull();
 });
 ```
-
diff --git a/docs/_snippets/portable-stories-jest-set-project-annotations.md b/docs/_snippets/portable-stories-jest-set-project-annotations.md
index c17f1b25f2d3..022464514648 100644
--- a/docs/_snippets/portable-stories-jest-set-project-annotations.md
+++ b/docs/_snippets/portable-stories-jest-set-project-annotations.md
@@ -5,10 +5,7 @@ import { setProjectAnnotations } from '@storybook/react';
 import * as addonAnnotations from 'my-addon/preview';
 import * as previewAnnotations from './.storybook/preview';
 
-const annotations = setProjectAnnotations([
-  previewAnnotations,
-  addonAnnotations,
-]);
+const annotations = setProjectAnnotations([previewAnnotations, addonAnnotations]);
 
 // Supports beforeAll hook from Storybook
 beforeAll(annotations.beforeAll);
@@ -21,10 +18,7 @@ import { setProjectAnnotations } from '@storybook/vue3';
 import * as addonAnnotations from 'my-addon/preview';
 import * as previewAnnotations from './.storybook/preview';
 
-const annotations = setProjectAnnotations([
-  previewAnnotations,
-  addonAnnotations,
-]);
+const annotations = setProjectAnnotations([previewAnnotations, addonAnnotations]);
 
 // Supports beforeAll hook from Storybook
 beforeAll(annotations.beforeAll);
diff --git a/docs/_snippets/portable-stories-playwright-ct.md b/docs/_snippets/portable-stories-playwright-ct.md
index c423a2ef1ff8..7f5b0eeb7589 100644
--- a/docs/_snippets/portable-stories-playwright-ct.md
+++ b/docs/_snippets/portable-stories-playwright-ct.md
@@ -45,4 +45,3 @@ test('renders primary button with overridden props', async ({ mount }) => {
   await expect(component.getByRole('button')).toHaveClass(/storybook-button--primary/);
 });
 ```
-
diff --git a/docs/_snippets/react-test-scripts-optional-config-scripts.md b/docs/_snippets/react-test-scripts-optional-config-scripts.md
deleted file mode 100644
index a819f2dcce00..000000000000
--- a/docs/_snippets/react-test-scripts-optional-config-scripts.md
+++ /dev/null
@@ -1,8 +0,0 @@
-```json renderer="react" language="json"
-{
-  "scripts": {
-    "test": "react-scripts test --setupFiles ./setupFile.js"
-  }
-}
-```
-
diff --git a/docs/_snippets/react-vite-add-framework.md b/docs/_snippets/react-vite-add-framework.md
index e0989e989ed9..239b6c661bbd 100644
--- a/docs/_snippets/react-vite-add-framework.md
+++ b/docs/_snippets/react-vite-add-framework.md
@@ -17,4 +17,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/react-vite-framework-options.md b/docs/_snippets/react-vite-framework-options.md
new file mode 100644
index 000000000000..dc37a8dd5ecf
--- /dev/null
+++ b/docs/_snippets/react-vite-framework-options.md
@@ -0,0 +1,25 @@
+```js filename=".storybook/main.js" renderer="react" language="js"
+export default {
+  framework: {
+    name: '@storybook/react-vite',
+    options: {
+      // ...
+    },
+  },
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts"
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  framework: {
+    name: '@storybook/react-vite',
+    options: {
+      // ...
+    },
+  },
+};
+
+export default config;
+```
diff --git a/docs/_snippets/react-vite-install.md b/docs/_snippets/react-vite-install.md
index 1a9b6a3439b7..92880b1a4255 100644
--- a/docs/_snippets/react-vite-install.md
+++ b/docs/_snippets/react-vite-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/react-vite
 ```shell renderer="react" language="js" packageManager="yarn"
 yarn add --dev @storybook/react-vite
 ```
-
diff --git a/docs/_snippets/react-webpack5-add-framework.md b/docs/_snippets/react-webpack5-add-framework.md
index 14bd2e484f8a..9dea87af6bc6 100644
--- a/docs/_snippets/react-webpack5-add-framework.md
+++ b/docs/_snippets/react-webpack5-add-framework.md
@@ -15,4 +15,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/react-webpack5-framework-options.md b/docs/_snippets/react-webpack5-framework-options.md
new file mode 100644
index 000000000000..6a251f4d19ff
--- /dev/null
+++ b/docs/_snippets/react-webpack5-framework-options.md
@@ -0,0 +1,25 @@
+```js filename=".storybook/main.js" renderer="react" language="js"
+export default {
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {
+      // ...
+    },
+  },
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts"
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {
+      // ...
+    },
+  },
+};
+
+export default config;
+```
diff --git a/docs/_snippets/react-webpack5-install.md b/docs/_snippets/react-webpack5-install.md
index 999a6dd52824..05c4082f05df 100644
--- a/docs/_snippets/react-webpack5-install.md
+++ b/docs/_snippets/react-webpack5-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/react-webpack5
 ```shell renderer="react" language="js" packageManager="yarn"
 yarn add --dev @storybook/react-webpack5
 ```
-
diff --git a/docs/_snippets/reuse-args-test.md b/docs/_snippets/reuse-args-test.md
index 77784d643a8d..a394512e6eb5 100644
--- a/docs/_snippets/reuse-args-test.md
+++ b/docs/_snippets/reuse-args-test.md
@@ -34,7 +34,7 @@ test('reuses args from composed story', () => {
 });
 ```
 
-```js filename="tests/Button.test.js" renderer="vue" language="js" tabTitle="3"
+```js filename="tests/Button.test.js" renderer="vue" language="js"
 import { render, screen } from '@testing-library/vue';
 
 import { composeStories } from '@storybook/vue3';
@@ -52,7 +52,7 @@ test('reuses args from composed story', () => {
 });
 ```
 
-```ts filename="tests/Button.test.ts" renderer="vue" language="ts" tabTitle="3"
+```ts filename="tests/Button.test.ts" renderer="vue" language="ts"
 import { render, screen } from '@testing-library/vue';
 
 import { composeStories } from '@storybook/vue3';
@@ -69,4 +69,3 @@ test('reuses args from composed story', () => {
   expect(buttonElement.textContent).toEqual(Primary.args.label);
 });
 ```
-
diff --git a/docs/_snippets/rsc-feature-flag.md b/docs/_snippets/rsc-feature-flag.md
index 4d0178c9ae03..9a2db0873a33 100644
--- a/docs/_snippets/rsc-feature-flag.md
+++ b/docs/_snippets/rsc-feature-flag.md
@@ -19,4 +19,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/rsc-parameter-in-meta.md b/docs/_snippets/rsc-parameter-in-meta.md
index cf593965f0f4..0820be0dd2ba 100644
--- a/docs/_snippets/rsc-parameter-in-meta.md
+++ b/docs/_snippets/rsc-parameter-in-meta.md
@@ -36,4 +36,3 @@ const meta: Meta<typeof MyServerComponent> = {
 };
 export default meta;
 ```
-
diff --git a/docs/_snippets/seo-description.md b/docs/_snippets/seo-description.md
index 04542626f0f6..ddb3af5fe47a 100644
--- a/docs/_snippets/seo-description.md
+++ b/docs/_snippets/seo-description.md
@@ -1,6 +1,3 @@
-```html renderer="common" language="ts" tabTitle="html"
-{/* .storybook/manager-head.html */}
-
+```html filename=".storybook/manager-head.html" renderer="common" language="js"
 <meta name="description" content="Components for my awesome project" key="desc" />
 ```
-
diff --git a/docs/_snippets/seo-noindex.md b/docs/_snippets/seo-noindex.md
index a373cb5d3bd1..2904002fef54 100644
--- a/docs/_snippets/seo-noindex.md
+++ b/docs/_snippets/seo-noindex.md
@@ -1,6 +1,3 @@
-```html renderer="common" language="ts" tabTitle="html"
-{/* .storybook/manager-head.html */}
-
+```html filename=".storybook/manager-head.html" renderer="common" language="js"
 <meta name="robots" content="noindex" />
 ```
-
diff --git a/docs/_snippets/simple-page-implementation.md b/docs/_snippets/simple-page-implementation.md
index 33b6dd0e246a..a44ac8ab1b16 100644
--- a/docs/_snippets/simple-page-implementation.md
+++ b/docs/_snippets/simple-page-implementation.md
@@ -100,9 +100,7 @@ function DocumentScreen({ user, document, subdocuments }) {
 }
 ```
 
-```html renderer="svelte" language="js"
-{/* YourPage.svelte */}
-
+```svelte filename="YourPage.svelte" renderer="svelte" language="js"
 <script>
   import PageLayout from './PageLayout.svelte';
   import DocumentHeader from './DocumentHeader.svelte';
@@ -121,9 +119,7 @@ function DocumentScreen({ user, document, subdocuments }) {
 </div>
 ```
 
-```html renderer="svelte" language="ts"
-{/* YourPage.svelte */}
-
+```svelte filename="YourPage.svelte" renderer="svelte" language="ts"
 <script lang="ts">
   import PageLayout from './PageLayout.svelte';
   import DocumentHeader from './DocumentHeader.svelte';
@@ -142,9 +138,7 @@ function DocumentScreen({ user, document, subdocuments }) {
 </div>
 ```
 
-```html renderer="vue" language="js" tabTitle="3"
-{/* YourPage.vue */}
-
+```html filename="YourPage.vue" renderer="vue" language="js"
 <template>
   <PageLayout :user="user">
     <DocumentHeader :document="document" />
@@ -254,4 +248,3 @@ declare global {
   }
 }
 ```
-
diff --git a/docs/_snippets/single-story-test.md b/docs/_snippets/single-story-test.md
index 5ba0de1dbef4..77466b35b67b 100644
--- a/docs/_snippets/single-story-test.md
+++ b/docs/_snippets/single-story-test.md
@@ -44,7 +44,7 @@ test('Validates form', async () => {
 });
 ```
 
-```js filename="tests/Form.test.js" renderer="vue" language="js" tabTitle="3"
+```js filename="tests/Form.test.js" renderer="vue" language="js"
 import { fireEvent, screen } from '@testing-library/vue';
 
 import { composeStory } from '@storybook/vue3';
@@ -67,7 +67,7 @@ test('Validates form', async () => {
 });
 ```
 
-```ts filename="tests/Form.test.ts" renderer="vue" language="ts" tabTitle="3"
+```ts filename="tests/Form.test.ts" renderer="vue" language="ts"
 import { fireEvent, screen } from '@testing-library/vue';
 
 import { composeStory } from '@storybook/vue3';
diff --git a/docs/_snippets/storybook-add-command.md b/docs/_snippets/storybook-add-command.md
index b05aae7b3e19..efc1547b33ea 100644
--- a/docs/_snippets/storybook-add-command.md
+++ b/docs/_snippets/storybook-add-command.md
@@ -9,4 +9,3 @@ pnpm dlx storybook@latest add @storybook/addon-a11y
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn dlx storybook@latest add @storybook/addon-a11y
 ```
-
diff --git a/docs/_snippets/storybook-addon-a11y-global-config.md b/docs/_snippets/storybook-addon-a11y-global-config.md
index aca1ec05390a..9477dbcd23db 100644
--- a/docs/_snippets/storybook-addon-a11y-global-config.md
+++ b/docs/_snippets/storybook-addon-a11y-global-config.md
@@ -60,4 +60,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-addon-actions-install.md b/docs/_snippets/storybook-addon-actions-install.md
index 65b3d1f57f51..67330880ee57 100644
--- a/docs/_snippets/storybook-addon-actions-install.md
+++ b/docs/_snippets/storybook-addon-actions-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/addon-actions
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn add --dev @storybook/addon-actions
 ```
-
diff --git a/docs/_snippets/storybook-addon-compiler-babel-auto-install.md b/docs/_snippets/storybook-addon-compiler-babel-auto-install.md
index 7b16b4eff4ac..21d3cac26c54 100644
--- a/docs/_snippets/storybook-addon-compiler-babel-auto-install.md
+++ b/docs/_snippets/storybook-addon-compiler-babel-auto-install.md
@@ -9,4 +9,3 @@ pnpm dlx storybook@latest add @storybook/addon-webpack5-compiler-babel
 ```sh renderer="common" language="js" packageManager="yarn"
 yarn dlx storybook@latest add @storybook/addon-webpack5-compiler-babel
 ```
-
diff --git a/docs/_snippets/storybook-addon-compiler-swc-auto-install.md b/docs/_snippets/storybook-addon-compiler-swc-auto-install.md
index 6514413071b4..eeb0fd91effd 100644
--- a/docs/_snippets/storybook-addon-compiler-swc-auto-install.md
+++ b/docs/_snippets/storybook-addon-compiler-swc-auto-install.md
@@ -9,4 +9,3 @@ pnpm dlx storybook@latest add @storybook/addon-webpack5-compiler-swc
 ```sh renderer="common" language="js" packageManager="yarn"
 yarn dlx storybook@latest add @storybook/addon-webpack5-compiler-swc
 ```
-
diff --git a/docs/_snippets/storybook-addon-controls-custom-matchers.md b/docs/_snippets/storybook-addon-controls-custom-matchers.md
index b3034ecc8fb4..80b0358eedc7 100644
--- a/docs/_snippets/storybook-addon-controls-custom-matchers.md
+++ b/docs/_snippets/storybook-addon-controls-custom-matchers.md
@@ -28,4 +28,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-addon-css-example.md b/docs/_snippets/storybook-addon-css-example.md
index aa1804c4345a..43717ddff9b7 100644
--- a/docs/_snippets/storybook-addon-css-example.md
+++ b/docs/_snippets/storybook-addon-css-example.md
@@ -400,4 +400,3 @@ export default function outlineCSS(selector: string) {
     }`;
 }
 ```
-
diff --git a/docs/_snippets/storybook-addon-css-helpers.md b/docs/_snippets/storybook-addon-css-helpers.md
index ca26b48c96aa..6042092b8a4d 100644
--- a/docs/_snippets/storybook-addon-css-helpers.md
+++ b/docs/_snippets/storybook-addon-css-helpers.md
@@ -28,4 +28,3 @@ export const addOutlineStyles = (selector: string, css: string) => {
   }
 };
 ```
-
diff --git a/docs/_snippets/storybook-addon-disable-addon.md b/docs/_snippets/storybook-addon-disable-addon.md
index ab13eb19dd0c..14425334d383 100644
--- a/docs/_snippets/storybook-addon-disable-addon.md
+++ b/docs/_snippets/storybook-addon-disable-addon.md
@@ -8,4 +8,3 @@ addons.register(ADDON_ID, () => {
   });
 });
 ```
-
diff --git a/docs/_snippets/storybook-addon-essentials-install.md b/docs/_snippets/storybook-addon-essentials-install.md
index 9356730d029f..bdae3e81827d 100644
--- a/docs/_snippets/storybook-addon-essentials-install.md
+++ b/docs/_snippets/storybook-addon-essentials-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/addon-essentials
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn add --dev @storybook/addon-essentials
 ```
-
diff --git a/docs/_snippets/storybook-addon-interactions-addon-full-install.md b/docs/_snippets/storybook-addon-interactions-addon-full-install.md
index 52fee5c9399c..7b1fdf2b596c 100644
--- a/docs/_snippets/storybook-addon-interactions-addon-full-install.md
+++ b/docs/_snippets/storybook-addon-interactions-addon-full-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/test @storybook/addon-interactions
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn add --dev @storybook/test @storybook/addon-interactions
 ```
-
diff --git a/docs/_snippets/storybook-addon-load-external-addons-preset.md b/docs/_snippets/storybook-addon-load-external-addons-preset.md
index c5ab753a784e..2f269cc80d89 100644
--- a/docs/_snippets/storybook-addon-load-external-addons-preset.md
+++ b/docs/_snippets/storybook-addon-load-external-addons-preset.md
@@ -12,4 +12,3 @@ export default {
   config,
 };
 ```
-
diff --git a/docs/_snippets/storybook-addon-manager-initial-state.md b/docs/_snippets/storybook-addon-manager-initial-state.md
index edfc8c4cebad..71d9fed8fc99 100644
--- a/docs/_snippets/storybook-addon-manager-initial-state.md
+++ b/docs/_snippets/storybook-addon-manager-initial-state.md
@@ -14,4 +14,3 @@ addons.register(ADDON_ID, () => {
   });
 });
 ```
-
diff --git a/docs/_snippets/storybook-addon-panel-example.md b/docs/_snippets/storybook-addon-panel-example.md
index d4a238b56d29..d3ad9292c3c9 100644
--- a/docs/_snippets/storybook-addon-panel-example.md
+++ b/docs/_snippets/storybook-addon-panel-example.md
@@ -18,4 +18,3 @@ addons.register('my/panel', () => {
   });
 });
 ```
-
diff --git a/docs/_snippets/storybook-addon-panel-initial.md b/docs/_snippets/storybook-addon-panel-initial.md
index db5a41c043d3..cf333e77f909 100644
--- a/docs/_snippets/storybook-addon-panel-initial.md
+++ b/docs/_snippets/storybook-addon-panel-initial.md
@@ -20,4 +20,3 @@ addons.register(ADDON_ID, (api) => {
   });
 });
 ```
-
diff --git a/docs/_snippets/storybook-addon-preset-example.md b/docs/_snippets/storybook-addon-preset-example.md
index a3d1576ff187..15e574b8afdc 100644
--- a/docs/_snippets/storybook-addon-preset-example.md
+++ b/docs/_snippets/storybook-addon-preset-example.md
@@ -18,4 +18,3 @@ export default {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-addon-release.md b/docs/_snippets/storybook-addon-release.md
index 9f259853945a..ec5283958eb2 100644
--- a/docs/_snippets/storybook-addon-release.md
+++ b/docs/_snippets/storybook-addon-release.md
@@ -9,4 +9,3 @@ pnpm run release
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn release
 ```
-
diff --git a/docs/_snippets/storybook-addon-run-dev-mode.md b/docs/_snippets/storybook-addon-run-dev-mode.md
index 5d42f499948f..5970f3f10942 100644
--- a/docs/_snippets/storybook-addon-run-dev-mode.md
+++ b/docs/_snippets/storybook-addon-run-dev-mode.md
@@ -9,4 +9,3 @@ pnpm run start
 ```sh renderer="common" language="js" packageManager="yarn"
 yarn start
 ```
-
diff --git a/docs/_snippets/storybook-addon-tab-example.md b/docs/_snippets/storybook-addon-tab-example.md
index 3a8bfe4e8c99..018512d70638 100644
--- a/docs/_snippets/storybook-addon-tab-example.md
+++ b/docs/_snippets/storybook-addon-tab-example.md
@@ -15,4 +15,3 @@ addons.register('my-addon', () => {
   });
 });
 ```
-
diff --git a/docs/_snippets/storybook-addon-themes-classname-decorator.md b/docs/_snippets/storybook-addon-themes-classname-decorator.md
index e631a59d6018..9537c10e27fe 100644
--- a/docs/_snippets/storybook-addon-themes-classname-decorator.md
+++ b/docs/_snippets/storybook-addon-themes-classname-decorator.md
@@ -61,4 +61,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-addon-themes-data-attribute-decorator.md b/docs/_snippets/storybook-addon-themes-data-attribute-decorator.md
index df1c98a1ba4a..80f962858e22 100644
--- a/docs/_snippets/storybook-addon-themes-data-attribute-decorator.md
+++ b/docs/_snippets/storybook-addon-themes-data-attribute-decorator.md
@@ -64,4 +64,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-addon-themes-jsx-provider-decorator.md b/docs/_snippets/storybook-addon-themes-jsx-provider-decorator.md
index d1410d95fff9..2a6fa61d7e4a 100644
--- a/docs/_snippets/storybook-addon-themes-jsx-provider-decorator.md
+++ b/docs/_snippets/storybook-addon-themes-jsx-provider-decorator.md
@@ -87,4 +87,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-addon-tool-initial-setup.md b/docs/_snippets/storybook-addon-tool-initial-setup.md
index 41d49160894f..c022750dbf69 100644
--- a/docs/_snippets/storybook-addon-tool-initial-setup.md
+++ b/docs/_snippets/storybook-addon-tool-initial-setup.md
@@ -36,4 +36,3 @@ export const Tool = memo(function MyAddonSelector() {
   );
 });
 ```
-
diff --git a/docs/_snippets/storybook-addon-toolbar-example.md b/docs/_snippets/storybook-addon-toolbar-example.md
index 07085331198e..1909cd698b03 100644
--- a/docs/_snippets/storybook-addon-toolbar-example.md
+++ b/docs/_snippets/storybook-addon-toolbar-example.md
@@ -20,4 +20,3 @@ addons.register('my-addon', () => {
   });
 });
 ```
-
diff --git a/docs/_snippets/storybook-addon-toolkit-panel-example.md b/docs/_snippets/storybook-addon-toolkit-panel-example.md
deleted file mode 100644
index 9a4a9f3ebd01..000000000000
--- a/docs/_snippets/storybook-addon-toolkit-panel-example.md
+++ /dev/null
@@ -1,42 +0,0 @@
-```tsx filename="src/Panel.tsx" renderer="common" language="ts" tabTitle="panel"
-import React from 'react';
-
-import { useAddonState, useChannel } from '@storybook/manager-api';
-import { AddonPanel } from '@storybook/components';
-import { ADDON_ID, EVENTS } from './constants';
-
-// See https://github.com/storybookjs/addon-kit/blob/main/src/components/PanelContent.tsx for an example of a PanelContent component
-import { PanelContent } from './components/PanelContent';
-
-interface PanelProps {
-  active: boolean;
-}
-
-export const Panel: React.FC<PanelProps> = (props) => {
-  // https://storybook.js.org/docs/addons/addons-api#useaddonstate
-  const [results, setState] = useAddonState(ADDON_ID, {
-    danger: [],
-    warning: [],
-  });
-
-  // https://storybook.js.org/docs/addons/addons-api#usechannel
-  const emit = useChannel({
-    [EVENTS.RESULT]: (newResults) => setState(newResults),
-  });
-
-  return (
-    <AddonPanel {...props}>
-      <PanelContent
-        results={results}
-        fetchData={() => {
-          emit(EVENTS.REQUEST);
-        }}
-        clearData={() => {
-          emit(EVENTS.CLEAR);
-        }}
-      />
-    </AddonPanel>
-  );
-};
-```
-
diff --git a/docs/_snippets/storybook-addon-toolkit-tab-example.md b/docs/_snippets/storybook-addon-toolkit-tab-example.md
deleted file mode 100644
index 414873d12743..000000000000
--- a/docs/_snippets/storybook-addon-toolkit-tab-example.md
+++ /dev/null
@@ -1,21 +0,0 @@
-```tsx filename="src/Tab.tsx" renderer="common" language="ts" tabTitle="tab"
-import React from 'react';
-
-import { useParameter } from '@storybook/manager-api';
-import { PARAM_KEY } from './constants';
-
-// See https://github.com/storybookjs/addon-kit/blob/main/src/components/TabContent.tsx for an example of a TabContent component
-import { TabContent } from './components/TabContent';
-
-interface TabProps {
-  active: boolean;
-}
-
-export const Tab: React.FC<TabProps> = ({ active }) => {
-  // https://storybook.js.org/docs/addons/addons-api#useparameter
-  const paramData = useParameter<string>(PARAM_KEY, '');
-
-  return active ? <TabContent code={paramData} /> : null;
-};
-```
-
diff --git a/docs/_snippets/storybook-addon-toolkit-toolbar-example.md b/docs/_snippets/storybook-addon-toolkit-toolbar-example.md
deleted file mode 100644
index 6b1cbb481cf1..000000000000
--- a/docs/_snippets/storybook-addon-toolkit-toolbar-example.md
+++ /dev/null
@@ -1,39 +0,0 @@
-```tsx filename="src/Tool.tsx" renderer="common" language="ts" tabTitle="toolbar"
-import React, { memo, useCallback, useEffect } from 'react';
-
-import { useGlobals, useStorybookApi } from '@storybook/manager-api';
-import { IconButton } from '@storybook/components';
-import { LightningIcon } from '@storybook/icons';
-
-import { ADDON_ID, PARAM_KEY, TOOL_ID } from './constants';
-
-export const Tool = memo(function MyAddonSelector() {
-  const [globals, updateGlobals] = useGlobals();
-  const api = useStorybookApi();
-
-  const isActive = [true, 'true'].includes(globals[PARAM_KEY]);
-
-  const toggleMyTool = useCallback(() => {
-    updateGlobals({
-      [PARAM_KEY]: !isActive,
-    });
-  }, [isActive]);
-
-  useEffect(() => {
-    api.setAddonShortcut(ADDON_ID, {
-      label: 'Toggle Measure [O]',
-      defaultShortcut: ['O'],
-      actionName: 'outline',
-      showInMenu: false,
-      action: toggleMyTool,
-    });
-  }, [toggleMyTool, api]);
-
-  return (
-    <IconButton key={TOOL_ID} active={isActive} title="Enable my addon" onClick={toggleMyTool}>
-      <LightningIcon />
-    </IconButton>
-  );
-});
-```
-
diff --git a/docs/_snippets/storybook-addon-toolkit-types.md b/docs/_snippets/storybook-addon-toolkit-types.md
new file mode 100644
index 000000000000..8f125c6384bd
--- /dev/null
+++ b/docs/_snippets/storybook-addon-toolkit-types.md
@@ -0,0 +1,103 @@
+```tsx filename="src/Tool.tsx" renderer="common" language="ts" tabTitle="Toolbar"
+import React, { memo, useCallback, useEffect } from 'react';
+
+import { useGlobals, useStorybookApi } from '@storybook/manager-api';
+import { IconButton } from '@storybook/components';
+import { LightningIcon } from '@storybook/icons';
+
+import { ADDON_ID, PARAM_KEY, TOOL_ID } from './constants';
+
+export const Tool = memo(function MyAddonSelector() {
+  const [globals, updateGlobals] = useGlobals();
+  const api = useStorybookApi();
+
+  const isActive = [true, 'true'].includes(globals[PARAM_KEY]);
+
+  const toggleMyTool = useCallback(() => {
+    updateGlobals({
+      [PARAM_KEY]: !isActive,
+    });
+  }, [isActive]);
+
+  useEffect(() => {
+    api.setAddonShortcut(ADDON_ID, {
+      label: 'Toggle Measure [O]',
+      defaultShortcut: ['O'],
+      actionName: 'outline',
+      showInMenu: false,
+      action: toggleMyTool,
+    });
+  }, [toggleMyTool, api]);
+
+  return (
+    <IconButton key={TOOL_ID} active={isActive} title="Enable my addon" onClick={toggleMyTool}>
+      <LightningIcon />
+    </IconButton>
+  );
+});
+```
+
+```tsx filename="src/Panel.tsx" renderer="common" language="ts" tabTitle="Panel"
+import React from 'react';
+
+import { useAddonState, useChannel } from '@storybook/manager-api';
+import { AddonPanel } from '@storybook/components';
+
+import { ADDON_ID, EVENTS } from './constants';
+
+// See https://github.com/storybookjs/addon-kit/blob/main/src/components/PanelContent.tsx for an example of a PanelContent component
+import { PanelContent } from './components/PanelContent';
+
+interface PanelProps {
+  active: boolean;
+}
+
+export const Panel: React.FC<PanelProps> = (props) => {
+  // https://storybook.js.org/docs/addons/addons-api#useaddonstate
+  const [results, setState] = useAddonState(ADDON_ID, {
+    danger: [],
+    warning: [],
+  });
+
+  // https://storybook.js.org/docs/addons/addons-api#usechannel
+  const emit = useChannel({
+    [EVENTS.RESULT]: (newResults) => setState(newResults),
+  });
+
+  return (
+    <AddonPanel {...props}>
+      <PanelContent
+        results={results}
+        fetchData={() => {
+          emit(EVENTS.REQUEST);
+        }}
+        clearData={() => {
+          emit(EVENTS.CLEAR);
+        }}
+      />
+    </AddonPanel>
+  );
+};
+```
+
+```tsx filename="src/Tab.tsx" renderer="common" language="ts" tabTitle="Tab"
+import React from 'react';
+
+import { useParameter } from '@storybook/manager-api';
+
+import { PARAM_KEY } from './constants';
+
+// See https://github.com/storybookjs/addon-kit/blob/main/src/components/TabContent.tsx for an example of a TabContent component
+import { TabContent } from './components/TabContent';
+
+interface TabProps {
+  active: boolean;
+}
+
+export const Tab: React.FC<TabProps> = ({ active }) => {
+  // https://storybook.js.org/docs/addons/addons-api#useparameter
+  const paramData = useParameter<string>(PARAM_KEY, '');
+
+  return active ? <TabContent code={paramData} /> : null;
+};
+```
diff --git a/docs/_snippets/storybook-addon-use-global.md b/docs/_snippets/storybook-addon-use-global.md
index d76efaa58d02..013cdc2424c0 100644
--- a/docs/_snippets/storybook-addon-use-global.md
+++ b/docs/_snippets/storybook-addon-use-global.md
@@ -39,4 +39,3 @@ export const withGlobals = (StoryFn: StoryFunction<Renderer>, context: StoryCont
   return StoryFn();
 };
 ```
-
diff --git a/docs/_snippets/storybook-addons-api-disablequeryparams.md b/docs/_snippets/storybook-addons-api-disablequeryparams.md
index 8821abe7b9bc..c4751243c004 100644
--- a/docs/_snippets/storybook-addons-api-disablequeryparams.md
+++ b/docs/_snippets/storybook-addons-api-disablequeryparams.md
@@ -5,4 +5,3 @@ addons.register('my-organisation/my-addon', (api) => {
   });
 });
 ```
-
diff --git a/docs/_snippets/storybook-addons-api-getchannel.md b/docs/_snippets/storybook-addons-api-getchannel.md
index 1ede828b92b4..6fcaa6fe7441 100644
--- a/docs/_snippets/storybook-addons-api-getchannel.md
+++ b/docs/_snippets/storybook-addons-api-getchannel.md
@@ -35,4 +35,3 @@ const ExampleToolbar = () => {
   );
 };
 ```
-
diff --git a/docs/_snippets/storybook-addons-api-getqueryparam.md b/docs/_snippets/storybook-addons-api-getqueryparam.md
index fa8f7851a408..3ef6b29445d3 100644
--- a/docs/_snippets/storybook-addons-api-getqueryparam.md
+++ b/docs/_snippets/storybook-addons-api-getqueryparam.md
@@ -3,4 +3,3 @@ addons.register('my-organisation/my-addon', (api) => {
   api.getQueryParam('exampleParameter');
 });
 ```
-
diff --git a/docs/_snippets/storybook-addons-api-geturlstate.md b/docs/_snippets/storybook-addons-api-geturlstate.md
index f0cc2cad0298..4b4c499a91a5 100644
--- a/docs/_snippets/storybook-addons-api-geturlstate.md
+++ b/docs/_snippets/storybook-addons-api-geturlstate.md
@@ -6,4 +6,3 @@ addons.register('my-organisation/my-addon', (api) => {
   }).url;
 });
 ```
-
diff --git a/docs/_snippets/storybook-addons-api-imports.md b/docs/_snippets/storybook-addons-api-imports.md
index 8781eb4e3294..8583f2557df1 100644
--- a/docs/_snippets/storybook-addons-api-imports.md
+++ b/docs/_snippets/storybook-addons-api-imports.md
@@ -3,4 +3,3 @@ import { addons } from '@storybook/preview-api';
 
 import { useStorybookApi } from '@storybook/manager-api';
 ```
-
diff --git a/docs/_snippets/storybook-addons-api-makedecorator.md b/docs/_snippets/storybook-addons-api-makedecorator.md
index cf81e50a500a..253c85674afa 100644
--- a/docs/_snippets/storybook-addons-api-makedecorator.md
+++ b/docs/_snippets/storybook-addons-api-makedecorator.md
@@ -14,4 +14,3 @@ export const withAddonDecorator = makeDecorator({
   },
 });
 ```
-
diff --git a/docs/_snippets/storybook-addons-api-on.md b/docs/_snippets/storybook-addons-api-on.md
index 2aeb8704466e..da4d48dfe1a2 100644
--- a/docs/_snippets/storybook-addons-api-on.md
+++ b/docs/_snippets/storybook-addons-api-on.md
@@ -4,4 +4,3 @@ addons.register('my-organisation/my-addon', (api) => {
   api.on('custom-addon-event', (eventData) => console.log(eventData));
 });
 ```
-
diff --git a/docs/_snippets/storybook-addons-api-register.md b/docs/_snippets/storybook-addons-api-register.md
index 24dc8753428f..a1d007bf85da 100644
--- a/docs/_snippets/storybook-addons-api-register.md
+++ b/docs/_snippets/storybook-addons-api-register.md
@@ -4,4 +4,3 @@ import { addons } from '@storybook/preview-api';
 // Register the addon with a unique name.
 addons.register('my-organisation/my-addon', (api) => {});
 ```
-
diff --git a/docs/_snippets/storybook-addons-api-selectincurrentkind.md b/docs/_snippets/storybook-addons-api-selectincurrentkind.md
index ade4ddb672ba..81c2666b11e4 100644
--- a/docs/_snippets/storybook-addons-api-selectincurrentkind.md
+++ b/docs/_snippets/storybook-addons-api-selectincurrentkind.md
@@ -3,4 +3,3 @@ addons.register('my-organisation/my-addon', (api) => {
   api.selectInCurrentKind('Default');
 });
 ```
-
diff --git a/docs/_snippets/storybook-addons-api-selectstory.md b/docs/_snippets/storybook-addons-api-selectstory.md
index 82f9189e9fac..7527b6a414f2 100644
--- a/docs/_snippets/storybook-addons-api-selectstory.md
+++ b/docs/_snippets/storybook-addons-api-selectstory.md
@@ -3,4 +3,3 @@ addons.register('my-organisation/my-addon', (api) => {
   api.selectStory('Button', 'Default');
 });
 ```
-
diff --git a/docs/_snippets/storybook-addons-api-setqueryparams.md b/docs/_snippets/storybook-addons-api-setqueryparams.md
index 6bcff839dcd6..0bada2cc3872 100644
--- a/docs/_snippets/storybook-addons-api-setqueryparams.md
+++ b/docs/_snippets/storybook-addons-api-setqueryparams.md
@@ -6,4 +6,3 @@ addons.register('my-organisation/my-addon', (api) => {
   });
 });
 ```
-
diff --git a/docs/_snippets/storybook-addons-api-useaddonstate.md b/docs/_snippets/storybook-addons-api-useaddonstate.md
index 1937c7430978..e93b21ab9555 100644
--- a/docs/_snippets/storybook-addons-api-useaddonstate.md
+++ b/docs/_snippets/storybook-addons-api-useaddonstate.md
@@ -31,4 +31,3 @@ export const Tool = () => {
   );
 };
 ```
-
diff --git a/docs/_snippets/storybook-addons-api-useapi.md b/docs/_snippets/storybook-addons-api-useapi.md
index ebb6ae16514f..4a814e88637a 100644
--- a/docs/_snippets/storybook-addons-api-useapi.md
+++ b/docs/_snippets/storybook-addons-api-useapi.md
@@ -29,4 +29,3 @@ export const Panel = () => {
   );
 };
 ```
-
diff --git a/docs/_snippets/storybook-addons-api-usechannel.md b/docs/_snippets/storybook-addons-api-usechannel.md
index d937a578f9b5..41d62c63362a 100644
--- a/docs/_snippets/storybook-addons-api-usechannel.md
+++ b/docs/_snippets/storybook-addons-api-usechannel.md
@@ -22,4 +22,3 @@ export const Panel = () => {
   );
 };
 ```
-
diff --git a/docs/_snippets/storybook-addons-api-useglobal.md b/docs/_snippets/storybook-addons-api-useglobal.md
index d38006e0c6d7..c865aa0c77a5 100644
--- a/docs/_snippets/storybook-addons-api-useglobal.md
+++ b/docs/_snippets/storybook-addons-api-useglobal.md
@@ -19,4 +19,3 @@ export const Panel = () => {
   );
 };
 ```
-
diff --git a/docs/_snippets/storybook-addons-api-useparameter.md b/docs/_snippets/storybook-addons-api-useparameter.md
index 0ec10728e7a4..589da852e380 100644
--- a/docs/_snippets/storybook-addons-api-useparameter.md
+++ b/docs/_snippets/storybook-addons-api-useparameter.md
@@ -20,4 +20,3 @@ export const Panel = () => {
   );
 };
 ```
-
diff --git a/docs/_snippets/storybook-addons-api-usestorybookstate.md b/docs/_snippets/storybook-addons-api-usestorybookstate.md
index 33de5d43a452..81b58b77e276 100644
--- a/docs/_snippets/storybook-addons-api-usestorybookstate.md
+++ b/docs/_snippets/storybook-addons-api-usestorybookstate.md
@@ -18,4 +18,3 @@ export const Panel = () => {
   );
 };
 ```
-
diff --git a/docs/_snippets/storybook-addons-local-preset.md b/docs/_snippets/storybook-addons-local-preset.md
index 9b550fac5beb..63f298ae2da6 100644
--- a/docs/_snippets/storybook-addons-local-preset.md
+++ b/docs/_snippets/storybook-addons-local-preset.md
@@ -21,4 +21,3 @@ export const viteFinal = vite as any;
 
 export const babelDefault = babel as any;
 ```
-
diff --git a/docs/_snippets/storybook-addons-preset-babelDefault.md b/docs/_snippets/storybook-addons-preset-babelDefault.md
index afb8140b74a7..b353cf4ff3d0 100644
--- a/docs/_snippets/storybook-addons-preset-babelDefault.md
+++ b/docs/_snippets/storybook-addons-preset-babelDefault.md
@@ -23,4 +23,3 @@ export function babelDefault(config: TransformOptions) {
   };
 }
 ```
-
diff --git a/docs/_snippets/storybook-addons-preset-preview.md b/docs/_snippets/storybook-addons-preset-preview.md
index 427ba4b3e27a..7c76b2b544de 100644
--- a/docs/_snippets/storybook-addons-preset-preview.md
+++ b/docs/_snippets/storybook-addons-preset-preview.md
@@ -27,4 +27,3 @@ const preview: ProjectAnnotations<Renderer> = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-addons-preset-viteFinal.md b/docs/_snippets/storybook-addons-preset-viteFinal.md
index 1bd9a2b364e7..90e285529f0f 100644
--- a/docs/_snippets/storybook-addons-preset-viteFinal.md
+++ b/docs/_snippets/storybook-addons-preset-viteFinal.md
@@ -3,7 +3,7 @@ export function ViteFinal(config, options = {}) {
   config.plugins.push(
     new MyCustomPlugin({
       someOption: true,
-    }),
+    })
   );
 
   return config;
@@ -15,10 +15,9 @@ export function ViteFinal(config: any, options: any = {}) {
   config.plugins.push(
     new MyCustomPlugin({
       someOption: true,
-    }),
+    })
   );
 
   return config;
 }
 ```
-
diff --git a/docs/_snippets/storybook-addons-preset-webpackFinal.md b/docs/_snippets/storybook-addons-preset-webpackFinal.md
index 7b9f572720fa..f9bc01b4cd48 100644
--- a/docs/_snippets/storybook-addons-preset-webpackFinal.md
+++ b/docs/_snippets/storybook-addons-preset-webpackFinal.md
@@ -29,4 +29,3 @@ export function webpackFinal(config: WebpackConfig, options: any = {}) {
   return config;
 }
 ```
-
diff --git a/docs/_snippets/storybook-addons-preset.md b/docs/_snippets/storybook-addons-preset.md
index ce5b88059d76..5520d1601cdb 100644
--- a/docs/_snippets/storybook-addons-preset.md
+++ b/docs/_snippets/storybook-addons-preset.md
@@ -9,4 +9,3 @@ export const previewAnnotations = (entry = [], options) => {
   return [...entry, require.resolve('./dist/preview')];
 };
 ```
-
diff --git a/docs/_snippets/storybook-addons-root-preset-manager-entries.md b/docs/_snippets/storybook-addons-root-preset-manager-entries.md
index 69b6fb88d02d..4fcba6772427 100644
--- a/docs/_snippets/storybook-addons-root-preset-manager-entries.md
+++ b/docs/_snippets/storybook-addons-root-preset-manager-entries.md
@@ -1,8 +1,5 @@
-```js renderer="common" language="js"
-//example-addon/preset.js
-
+```js filename="example-addon/preset.js" renderer="common" language="js"
 export const managerEntries = (entry = []) => {
   return [...entry, require.resolve('path-to-third-party-addon')];
 };
 ```
-
diff --git a/docs/_snippets/storybook-addons-root-preset-preview-annotations.md b/docs/_snippets/storybook-addons-root-preset-preview-annotations.md
index af473955e722..e4cda76b90c1 100644
--- a/docs/_snippets/storybook-addons-root-preset-preview-annotations.md
+++ b/docs/_snippets/storybook-addons-root-preset-preview-annotations.md
@@ -3,4 +3,3 @@ export const previewAnnotations = (entry = [], options) => {
   return [...entry, require.resolve('./dist/preview')];
 };
 ```
-
diff --git a/docs/_snippets/storybook-addons-root-preset.md b/docs/_snippets/storybook-addons-root-preset.md
index 8ac301891c48..2abfc784b82a 100644
--- a/docs/_snippets/storybook-addons-root-preset.md
+++ b/docs/_snippets/storybook-addons-root-preset.md
@@ -5,4 +5,3 @@ export const managerEntries = [require.resolve('./dist/manager')];
 
 export * from './dist/preset';
 ```
-
diff --git a/docs/_snippets/storybook-args-url-params-converted.md b/docs/_snippets/storybook-args-url-params-converted.md
index 1d42e5267ef1..5a8ec7a715bb 100644
--- a/docs/_snippets/storybook-args-url-params-converted.md
+++ b/docs/_snippets/storybook-args-url-params-converted.md
@@ -5,4 +5,3 @@
   nil: null
 }
 ```
-
diff --git a/docs/_snippets/storybook-argtypes-with-addon.md b/docs/_snippets/storybook-argtypes-with-addon.md
index c7657e7dc142..1914326e61ed 100644
--- a/docs/_snippets/storybook-argtypes-with-addon.md
+++ b/docs/_snippets/storybook-argtypes-with-addon.md
@@ -4,4 +4,3 @@ import { useArgTypes } from '@storybook/manager-api';
 // inside your panel
 const { argTypes } = useArgTypes();
 ```
-
diff --git a/docs/_snippets/storybook-auto-docs-full-config.md b/docs/_snippets/storybook-auto-docs-full-config.md
index 57c2f6a1537a..1a65731752cd 100644
--- a/docs/_snippets/storybook-auto-docs-full-config.md
+++ b/docs/_snippets/storybook-auto-docs-full-config.md
@@ -27,4 +27,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-auto-docs-main-mdx-config.md b/docs/_snippets/storybook-auto-docs-main-mdx-config.md
index 64f09e55a3c6..2d14f86e3f29 100644
--- a/docs/_snippets/storybook-auto-docs-main-mdx-config.md
+++ b/docs/_snippets/storybook-auto-docs-main-mdx-config.md
@@ -28,4 +28,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-automigrate.md b/docs/_snippets/storybook-automigrate.md
index 1f666ddd55a8..1757c0b23406 100644
--- a/docs/_snippets/storybook-automigrate.md
+++ b/docs/_snippets/storybook-automigrate.md
@@ -9,4 +9,3 @@ pnpm dlx storybook@latest automigrate
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn dlx storybook@latest automigrate
 ```
-
diff --git a/docs/_snippets/storybook-babel-configuration-example.md b/docs/_snippets/storybook-babel-configuration-example.md
index f2387da7de7d..411b2313e86d 100644
--- a/docs/_snippets/storybook-babel-configuration-example.md
+++ b/docs/_snippets/storybook-babel-configuration-example.md
@@ -7,4 +7,3 @@ export function babelDefault(config: TransformOptions) {
   };
 }
 ```
-
diff --git a/docs/_snippets/storybook-backgrounds-addon-default-params.md b/docs/_snippets/storybook-backgrounds-addon-default-params.md
index 27e5e756d1c5..74d28417e073 100644
--- a/docs/_snippets/storybook-backgrounds-addon-default-params.md
+++ b/docs/_snippets/storybook-backgrounds-addon-default-params.md
@@ -10,4 +10,3 @@ export default {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-backgrounds-preset-config.md b/docs/_snippets/storybook-backgrounds-preset-config.md
index 9dc431a89c0f..0f519253b03a 100644
--- a/docs/_snippets/storybook-backgrounds-preset-config.md
+++ b/docs/_snippets/storybook-backgrounds-preset-config.md
@@ -3,4 +3,3 @@ export function config(entry = []) {
   return [...entry, require.resolve('./defaultParameters')];
 }
 ```
-
diff --git a/docs/_snippets/storybook-build-test-flag.md b/docs/_snippets/storybook-build-test-flag.md
index 52eaf29d1762..98c9d4ddba15 100644
--- a/docs/_snippets/storybook-build-test-flag.md
+++ b/docs/_snippets/storybook-build-test-flag.md
@@ -9,4 +9,3 @@ pnpm run build-storybook --test
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn build-storybook --test
 ```
-
diff --git a/docs/_snippets/storybook-builder-api-build-server.md b/docs/_snippets/storybook-builder-api-build-server.md
index a8afc23b050f..2cf99eb3ddbf 100644
--- a/docs/_snippets/storybook-builder-api-build-server.md
+++ b/docs/_snippets/storybook-builder-api-build-server.md
@@ -32,4 +32,3 @@ export async function build(options: ExtendedOptions) {
   await viteBuild(finalConfig);
 }
 ```
-
diff --git a/docs/_snippets/storybook-builder-api-configuration-options.md b/docs/_snippets/storybook-builder-api-configuration-options.md
index 3b9ff0cf4cb0..83f9692e9278 100644
--- a/docs/_snippets/storybook-builder-api-configuration-options.md
+++ b/docs/_snippets/storybook-builder-api-configuration-options.md
@@ -32,4 +32,3 @@ export async function createViteServer(options: ExtendedOptions, devServer: Serv
   // Remainder implementation
 }
 ```
-
diff --git a/docs/_snippets/storybook-builder-api-dev-server.md b/docs/_snippets/storybook-builder-api-dev-server.md
index 0c7799f1a1dc..41dd09d2ef27 100644
--- a/docs/_snippets/storybook-builder-api-dev-server.md
+++ b/docs/_snippets/storybook-builder-api-dev-server.md
@@ -18,4 +18,3 @@ export async function createViteServer(options: ExtendedOptions, devServer: Serv
   });
 }
 ```
-
diff --git a/docs/_snippets/storybook-builder-api-interface.md b/docs/_snippets/storybook-builder-api-interface.md
index 42bcabc41f1b..69988858c26f 100644
--- a/docs/_snippets/storybook-builder-api-interface.md
+++ b/docs/_snippets/storybook-builder-api-interface.md
@@ -20,4 +20,3 @@ export interface Builder<Config, Stats> {
   overridePresets?: string[];
 }
 ```
-
diff --git a/docs/_snippets/storybook-builder-api-mdx.md b/docs/_snippets/storybook-builder-api-mdx.md
index 020ea42166ae..8475d18f736f 100644
--- a/docs/_snippets/storybook-builder-api-mdx.md
+++ b/docs/_snippets/storybook-builder-api-mdx.md
@@ -16,4 +16,3 @@ export function mdxPlugin() {
   });
 }
 ```
-
diff --git a/docs/_snippets/storybook-builder-api-preview-exports.md b/docs/_snippets/storybook-builder-api-preview-exports.md
index e6091e618d7b..3eefea3c09f3 100644
--- a/docs/_snippets/storybook-builder-api-preview-exports.md
+++ b/docs/_snippets/storybook-builder-api-preview-exports.md
@@ -78,4 +78,3 @@ export async function generateIframeScriptCode(options: ExtendedOptions) {
   return code;
 }
 ```
-
diff --git a/docs/_snippets/storybook-builder-api-shutdown-server.md b/docs/_snippets/storybook-builder-api-shutdown-server.md
index 310e41eb7ccc..c642a9c6fc01 100644
--- a/docs/_snippets/storybook-builder-api-shutdown-server.md
+++ b/docs/_snippets/storybook-builder-api-shutdown-server.md
@@ -16,4 +16,3 @@ export const start: ViteBuilder['start'] = async ({ options, server: devServer }
   };
 };
 ```
-
diff --git a/docs/_snippets/storybook-canvas-doc-block-story.md b/docs/_snippets/storybook-canvas-doc-block-story.md
index 07619d9f0fb7..ada5f64f9fa9 100644
--- a/docs/_snippets/storybook-canvas-doc-block-story.md
+++ b/docs/_snippets/storybook-canvas-doc-block-story.md
@@ -162,4 +162,3 @@ export const Colors: Story = {
   ),
 };
 ```
-
diff --git a/docs/_snippets/storybook-client-globals-example-file.md b/docs/_snippets/storybook-client-globals-example-file.md
index fb76daa7d184..49ffd3c3bd50 100644
--- a/docs/_snippets/storybook-client-globals-example-file.md
+++ b/docs/_snippets/storybook-client-globals-example-file.md
@@ -5,4 +5,3 @@ const { window: globalWindow } = global;
 
 globalWindow.STORYBOOK_ENV = 'vue';
 ```
-
diff --git a/docs/_snippets/storybook-client-preview.md b/docs/_snippets/storybook-client-preview.md
index 9602d622aa01..98f2d64ebb47 100644
--- a/docs/_snippets/storybook-client-preview.md
+++ b/docs/_snippets/storybook-client-preview.md
@@ -9,4 +9,3 @@ const api = start(render);
 
 // the boilerplate code
 ```
-
diff --git a/docs/_snippets/storybook-component-layout-param.md b/docs/_snippets/storybook-component-layout-param.md
index 56afcb84e22e..c24d0d683281 100644
--- a/docs/_snippets/storybook-component-layout-param.md
+++ b/docs/_snippets/storybook-component-layout-param.md
@@ -81,4 +81,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/storybook-config-layout.md b/docs/_snippets/storybook-config-layout.md
index 413a57d07576..59b5ac968c87 100644
--- a/docs/_snippets/storybook-config-layout.md
+++ b/docs/_snippets/storybook-config-layout.md
@@ -24,4 +24,3 @@ addons.setConfig({
   },
 });
 ```
-
diff --git a/docs/_snippets/storybook-coverage-addon-config-options.md b/docs/_snippets/storybook-coverage-addon-config-options.md
index 92890cfb44a0..6bbb3b9b551c 100644
--- a/docs/_snippets/storybook-coverage-addon-config-options.md
+++ b/docs/_snippets/storybook-coverage-addon-config-options.md
@@ -45,4 +45,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-coverage-addon-install.md b/docs/_snippets/storybook-coverage-addon-install.md
index 04b1a4b263c7..38d085bdcdc6 100644
--- a/docs/_snippets/storybook-coverage-addon-install.md
+++ b/docs/_snippets/storybook-coverage-addon-install.md
@@ -1,12 +1,11 @@
 ```shell renderer="common" language="js" packageManager="npm"
-npm install @storybook/addon-coverage --save-dev
+npx storybook@latest add @storybook/addon-coverage
 ```
 
 ```shell renderer="common" language="js" packageManager="pnpm"
-pnpm add --save-dev @storybook/addon-coverage
+pnpm dlx storybook@latest add @storybook/addon-coverage
 ```
 
 ```shell renderer="common" language="js" packageManager="yarn"
-yarn add --dev @storybook/addon-coverage
+yarn dlx storybook@latest add @storybook/addon-coverage
 ```
-
diff --git a/docs/_snippets/storybook-coverage-addon-registration.md b/docs/_snippets/storybook-coverage-addon-registration.md
deleted file mode 100644
index d775e1a7b229..000000000000
--- a/docs/_snippets/storybook-coverage-addon-registration.md
+++ /dev/null
@@ -1,25 +0,0 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
-export default {
-  stories: [],
-  addons: [
-    // Other Storybook addons
-    '@storybook/addon-coverage', //👈 Registers the addon
-  ],
-};
-```
-
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework and builder you are using (e.g., react-webpack5, vue3-webpack5)
-import type { StorybookConfig } from '@storybook/your-framework';
-
-const config: StorybookConfig = {
-  stories: [],
-  addons: [
-    // Other Storybook addons
-    '@storybook/addon-coverage', //👈 Registers the addon
-  ],
-};
-
-export default config;
-```
-
diff --git a/docs/_snippets/storybook-coverage-report-lcov.md b/docs/_snippets/storybook-coverage-report-lcov.md
index 338131fa9c66..72f9699d5316 100644
--- a/docs/_snippets/storybook-coverage-report-lcov.md
+++ b/docs/_snippets/storybook-coverage-report-lcov.md
@@ -1,4 +1,3 @@
 ```shell renderer="common" language="js"
 npx nyc report --reporter=lcov -t coverage/storybook --report-dir coverage/storybook
 ```
-
diff --git a/docs/_snippets/storybook-coverage-report-vue.md b/docs/_snippets/storybook-coverage-report-vue.md
index 037434637162..276690bac0eb 100644
--- a/docs/_snippets/storybook-coverage-report-vue.md
+++ b/docs/_snippets/storybook-coverage-report-vue.md
@@ -1,13 +1,12 @@
-```js filename=".nyc.config.js" renderer="common" language="js"
+```js filename=".nyc.config.js" renderer="common" language="js" tabTitle="JavaScript configuration"
 export default {
   // Other configuration options
   extension: ['.js', '.cjs', '.mjs', '.ts', '.tsx', '.jsx', '.vue'],
 };
 ```
 
-```json renderer="common" language="json"
+```json filename=".nycrc.json" renderer="common" language="json" tabTitle="JSON configuration"
 {
   "extension": [".js", ".cjs", ".mjs", ".ts", ".tsx", ".jsx", ".vue"]
 }
 ```
-
diff --git a/docs/_snippets/storybook-csf-3-auto-title-redundant.md b/docs/_snippets/storybook-csf-3-auto-title-redundant.md
index ee593ca87dc0..557977ef1af6 100644
--- a/docs/_snippets/storybook-csf-3-auto-title-redundant.md
+++ b/docs/_snippets/storybook-csf-3-auto-title-redundant.md
@@ -117,4 +117,3 @@ export const Default: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-custom-manager-head.md b/docs/_snippets/storybook-custom-manager-head.md
index 81364cd10cb3..46c400359df9 100644
--- a/docs/_snippets/storybook-custom-manager-head.md
+++ b/docs/_snippets/storybook-custom-manager-head.md
@@ -20,4 +20,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-debug-webpack-dev.md b/docs/_snippets/storybook-debug-webpack-dev.md
index 1f7c0ace4f93..21009cff84c0 100644
--- a/docs/_snippets/storybook-debug-webpack-dev.md
+++ b/docs/_snippets/storybook-debug-webpack-dev.md
@@ -5,4 +5,3 @@ npm run storybook -- --debug-webpack
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn storybook --debug-webpack
 ```
-
diff --git a/docs/_snippets/storybook-debug-webpack-prod.md b/docs/_snippets/storybook-debug-webpack-prod.md
index 4c181925d55c..151420844f2d 100644
--- a/docs/_snippets/storybook-debug-webpack-prod.md
+++ b/docs/_snippets/storybook-debug-webpack-prod.md
@@ -5,4 +5,3 @@ npm run build-storybook -- --debug-webpack
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn build-storybook --debug-webpack
 ```
-
diff --git a/docs/_snippets/storybook-disable-telemetry-env.md b/docs/_snippets/storybook-disable-telemetry-env.md
index c9cceef0212c..a6b2a0a94a45 100644
--- a/docs/_snippets/storybook-disable-telemetry-env.md
+++ b/docs/_snippets/storybook-disable-telemetry-env.md
@@ -1,4 +1,3 @@
-```shell renderer="common" language="js" tabTitle="env-var"
+```shell renderer="common" language="js"
 STORYBOOK_DISABLE_TELEMETRY=1 yarn storybook
 ```
-
diff --git a/docs/_snippets/storybook-disable-telemetry-flag.md b/docs/_snippets/storybook-disable-telemetry-flag.md
index 53b5af66bc8d..00626b39e6ad 100644
--- a/docs/_snippets/storybook-disable-telemetry-flag.md
+++ b/docs/_snippets/storybook-disable-telemetry-flag.md
@@ -9,4 +9,3 @@ pnpm run storybook --disable-telemetry
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn storybook --disable-telemetry
 ```
-
diff --git a/docs/_snippets/storybook-doctor.md b/docs/_snippets/storybook-doctor.md
index 55550037ce75..a17f1d873466 100644
--- a/docs/_snippets/storybook-doctor.md
+++ b/docs/_snippets/storybook-doctor.md
@@ -9,4 +9,3 @@ pnpm dlx storybook@latest doctor
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn dlx storybook@latest doctor
 ```
-
diff --git a/docs/_snippets/storybook-ember-cli-build.md b/docs/_snippets/storybook-ember-cli-build.md
index 4e46b197d13c..468daf86cb91 100644
--- a/docs/_snippets/storybook-ember-cli-build.md
+++ b/docs/_snippets/storybook-ember-cli-build.md
@@ -13,4 +13,3 @@ module.exports = function (defaults) {
   return app.toTree();
 };
 ```
-
diff --git a/docs/_snippets/storybook-extract-specific-version.md b/docs/_snippets/storybook-extract-specific-version.md
index ba8fd3fa0323..82bdb0189c5b 100644
--- a/docs/_snippets/storybook-extract-specific-version.md
+++ b/docs/_snippets/storybook-extract-specific-version.md
@@ -1,4 +1,4 @@
-```shell renderer="common" language="js" packageManager="npx"
+```shell renderer="common" language="js" packageManager="npm"
 npx storybook@7.5.3 extract
 ```
 
@@ -9,4 +9,3 @@ pnpm dlx storybook@7.5.3 extract
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn dlx storybook@7.5.3 extract
 ```
-
diff --git a/docs/_snippets/storybook-figma-addon-install.md b/docs/_snippets/storybook-figma-addon-install.md
index 1d547af33fd1..aa21ff5491a6 100644
--- a/docs/_snippets/storybook-figma-addon-install.md
+++ b/docs/_snippets/storybook-figma-addon-install.md
@@ -1,12 +1,11 @@
 ```shell renderer="common" language="js" packageManager="npm"
-npm install --save-dev @storybook/addon-designs
+npx storybook@latest add @storybook/addon-designs
 ```
 
 ```shell renderer="common" language="js" packageManager="pnpm"
-pnpm add --save-dev @storybook/addon-designs
+pnpm dlx storybook@latest add @storybook/addon-designs
 ```
 
 ```shell renderer="common" language="js" packageManager="yarn"
-yarn add --dev @storybook/addon-designs
+yarn dlx storybook@latest add @storybook/addon-designs
 ```
-
diff --git a/docs/_snippets/storybook-fix-imports-autodocs-monorepo.md b/docs/_snippets/storybook-fix-imports-autodocs-monorepo.md
index e64d33a957c5..8a1cef5486ed 100644
--- a/docs/_snippets/storybook-fix-imports-autodocs-monorepo.md
+++ b/docs/_snippets/storybook-fix-imports-autodocs-monorepo.md
@@ -58,4 +58,3 @@ const meta: Meta<typeof MyComponent> = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/storybook-framework-render-function.md b/docs/_snippets/storybook-framework-render-function.md
index 79dd68a4cae7..814368a6e2fa 100644
--- a/docs/_snippets/storybook-framework-render-function.md
+++ b/docs/_snippets/storybook-framework-render-function.md
@@ -7,4 +7,3 @@ export default function renderMain({ storyFn }: RenderMainArgs) {
   rootElement.innerHTML = html;
 }
 ```
-
diff --git a/docs/_snippets/storybook-generated-argtypes.md b/docs/_snippets/storybook-generated-argtypes.md
index 1f28e69a13e1..3250ac217846 100644
--- a/docs/_snippets/storybook-generated-argtypes.md
+++ b/docs/_snippets/storybook-generated-argtypes.md
@@ -15,4 +15,3 @@ const argTypes = {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-init-v7.md b/docs/_snippets/storybook-init-v7.md
index e74bfce11ce4..3966bc1efaf5 100644
--- a/docs/_snippets/storybook-init-v7.md
+++ b/docs/_snippets/storybook-init-v7.md
@@ -1,4 +1,4 @@
-```shell renderer="common" language="js" packageManager="npx"
+```shell renderer="common" language="js" packageManager="npm"
 npx storybook@^7 init
 ```
 
@@ -9,4 +9,3 @@ pnpm dlx storybook@^7 init
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn dlx storybook@^7 init
 ```
-
diff --git a/docs/_snippets/storybook-interactions-addon-registration.md b/docs/_snippets/storybook-interactions-addon-registration.md
index c56c6e8a7154..dae3fa856fe8 100644
--- a/docs/_snippets/storybook-interactions-addon-registration.md
+++ b/docs/_snippets/storybook-interactions-addon-registration.md
@@ -25,4 +25,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-interactions-play-function.md b/docs/_snippets/storybook-interactions-play-function.md
index fcc0c3bb20cb..adb5900352b1 100644
--- a/docs/_snippets/storybook-interactions-play-function.md
+++ b/docs/_snippets/storybook-interactions-play-function.md
@@ -232,4 +232,3 @@ export const Submitted: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-interactions-step-function.md b/docs/_snippets/storybook-interactions-step-function.md
index 96d5c8847162..1283c93bdcf5 100644
--- a/docs/_snippets/storybook-interactions-step-function.md
+++ b/docs/_snippets/storybook-interactions-step-function.md
@@ -190,4 +190,3 @@ export const Submitted: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-main-advanced-config-example.md b/docs/_snippets/storybook-main-advanced-config-example.md
index 65752e8ff26c..b09dfe148cf3 100644
--- a/docs/_snippets/storybook-main-advanced-config-example.md
+++ b/docs/_snippets/storybook-main-advanced-config-example.md
@@ -34,4 +34,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-auto-title-custom.md b/docs/_snippets/storybook-main-auto-title-custom.md
index 9abaa4459c30..ee1abb62d8b2 100644
--- a/docs/_snippets/storybook-main-auto-title-custom.md
+++ b/docs/_snippets/storybook-main-auto-title-custom.md
@@ -27,4 +27,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-config-remark-options.md b/docs/_snippets/storybook-main-config-remark-options.md
index e8fc5c45d007..2126d1c26c2c 100644
--- a/docs/_snippets/storybook-main-config-remark-options.md
+++ b/docs/_snippets/storybook-main-config-remark-options.md
@@ -47,4 +47,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-configuration-src-dir.md b/docs/_snippets/storybook-main-configuration-src-dir.md
index 591ac0188c2f..ecc36c851e55 100644
--- a/docs/_snippets/storybook-main-configuration-src-dir.md
+++ b/docs/_snippets/storybook-main-configuration-src-dir.md
@@ -1,4 +1,4 @@
-```js filename="./storybook/main.js" renderer="common" language="js" tabTitle="main-js"
+```js filename="./storybook/main.js" renderer="common" language="js"
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
@@ -6,7 +6,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="main-ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts"
 // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -17,4 +17,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-disable-addon.md b/docs/_snippets/storybook-main-disable-addon.md
index 725234295c06..ddf6350af496 100644
--- a/docs/_snippets/storybook-main-disable-addon.md
+++ b/docs/_snippets/storybook-main-disable-addon.md
@@ -33,4 +33,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-disable-telemetry.md b/docs/_snippets/storybook-main-disable-telemetry.md
index da402967d828..fd28e548ce3c 100644
--- a/docs/_snippets/storybook-main-disable-telemetry.md
+++ b/docs/_snippets/storybook-main-disable-telemetry.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="main-js"
+```js filename=".storybook/main.js" renderer="common" language="js"
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
@@ -9,7 +9,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="main-ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts"
 // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -23,4 +23,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-extend-ts-config.md b/docs/_snippets/storybook-main-extend-ts-config.md
index efb9579b81b0..e8548fe59bfe 100644
--- a/docs/_snippets/storybook-main-extend-ts-config.md
+++ b/docs/_snippets/storybook-main-extend-ts-config.md
@@ -33,4 +33,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-figma-addon-register.md b/docs/_snippets/storybook-main-figma-addon-register.md
deleted file mode 100644
index bd02a21c1cb5..000000000000
--- a/docs/_snippets/storybook-main-figma-addon-register.md
+++ /dev/null
@@ -1,26 +0,0 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
-export default {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    // Other Storybook addons
-    '@storybook/addon-designs', // 👈 Addon is registered here
-  ],
-};
-```
-
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
-import type { StorybookConfig } from '@storybook/your-framework';
-
-const config: StorybookConfig = {
-  framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    // Other Storybook addons
-    '@storybook/addon-designs', // 👈 Addon is registered here
-  ],
-};
-
-export default config;
-```
-
diff --git a/docs/_snippets/storybook-main-fix-imports-autodocs-monorepo.md b/docs/_snippets/storybook-main-fix-imports-autodocs-monorepo.md
index 25e273b4af49..fe3e0f978416 100644
--- a/docs/_snippets/storybook-main-fix-imports-autodocs-monorepo.md
+++ b/docs/_snippets/storybook-main-fix-imports-autodocs-monorepo.md
@@ -27,4 +27,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-full-individual-essentials-config.md b/docs/_snippets/storybook-main-full-individual-essentials-config.md
index 93e1c35cd744..85e0e4612767 100644
--- a/docs/_snippets/storybook-main-full-individual-essentials-config.md
+++ b/docs/_snippets/storybook-main-full-individual-essentials-config.md
@@ -59,4 +59,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-js-md-files.md b/docs/_snippets/storybook-main-js-md-files.md
index 161d7f303ff3..96ec0d8622ac 100644
--- a/docs/_snippets/storybook-main-js-md-files.md
+++ b/docs/_snippets/storybook-main-js-md-files.md
@@ -17,4 +17,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-pnpm-with-module-resolution.md b/docs/_snippets/storybook-main-pnpm-with-module-resolution.md
index 4be87978a4f7..f022bd2f611b 100644
--- a/docs/_snippets/storybook-main-pnpm-with-module-resolution.md
+++ b/docs/_snippets/storybook-main-pnpm-with-module-resolution.md
@@ -42,4 +42,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-preview-head.md b/docs/_snippets/storybook-main-preview-head.md
index a7a8ee7bd1dd..30beffbf60b7 100644
--- a/docs/_snippets/storybook-main-preview-head.md
+++ b/docs/_snippets/storybook-main-preview-head.md
@@ -10,4 +10,3 @@ export default {
   `);
 };
 ```
-
diff --git a/docs/_snippets/storybook-main-prop-filter.md b/docs/_snippets/storybook-main-prop-filter.md
index 359b951ce491..bdb28d02e8bd 100644
--- a/docs/_snippets/storybook-main-prop-filter.md
+++ b/docs/_snippets/storybook-main-prop-filter.md
@@ -21,4 +21,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-react-docgen-typescript.md b/docs/_snippets/storybook-main-react-docgen-typescript.md
index 727b5c8a7cdb..71f562f3fe1a 100644
--- a/docs/_snippets/storybook-main-react-docgen-typescript.md
+++ b/docs/_snippets/storybook-main-react-docgen-typescript.md
@@ -15,4 +15,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-ref-local.md b/docs/_snippets/storybook-main-ref-local.md
index cf7f06c1529c..7cdea926c5ed 100644
--- a/docs/_snippets/storybook-main-ref-local.md
+++ b/docs/_snippets/storybook-main-ref-local.md
@@ -37,4 +37,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-register-addon.md b/docs/_snippets/storybook-main-register-addon.md
index ab10b1976599..166793a4632b 100644
--- a/docs/_snippets/storybook-main-register-addon.md
+++ b/docs/_snippets/storybook-main-register-addon.md
@@ -3,4 +3,3 @@ export default {
   addons: ['path/to/manager.js'],
 };
 ```
-
diff --git a/docs/_snippets/storybook-main-register-essentials-addon.md b/docs/_snippets/storybook-main-register-essentials-addon.md
index 59f397a9dd5d..a12e9e58c48f 100644
--- a/docs/_snippets/storybook-main-register-essentials-addon.md
+++ b/docs/_snippets/storybook-main-register-essentials-addon.md
@@ -18,4 +18,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-register-example-addon.md b/docs/_snippets/storybook-main-register-example-addon.md
index 024dd6b7e5fa..ac59dd73e354 100644
--- a/docs/_snippets/storybook-main-register-example-addon.md
+++ b/docs/_snippets/storybook-main-register-example-addon.md
@@ -20,4 +20,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-register-individual-actions-addon.md b/docs/_snippets/storybook-main-register-individual-actions-addon.md
index 45cb5261b754..248a85c4afb9 100644
--- a/docs/_snippets/storybook-main-register-individual-actions-addon.md
+++ b/docs/_snippets/storybook-main-register-individual-actions-addon.md
@@ -19,4 +19,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-register-presets-managerentry.md b/docs/_snippets/storybook-main-register-presets-managerentry.md
index fca4f44e6419..4aa96883322d 100644
--- a/docs/_snippets/storybook-main-register-presets-managerentry.md
+++ b/docs/_snippets/storybook-main-register-presets-managerentry.md
@@ -5,4 +5,3 @@ export default {
   ],
 };
 ```
-
diff --git a/docs/_snippets/storybook-main-simplified-config.md b/docs/_snippets/storybook-main-simplified-config.md
index b1f9a6a5872e..c324634836c8 100644
--- a/docs/_snippets/storybook-main-simplified-config.md
+++ b/docs/_snippets/storybook-main-simplified-config.md
@@ -25,4 +25,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-ts-module-resolution-atsign-import.md b/docs/_snippets/storybook-main-ts-module-resolution-atsign-import.md
index ac281eb91a65..6149c57438be 100644
--- a/docs/_snippets/storybook-main-ts-module-resolution-atsign-import.md
+++ b/docs/_snippets/storybook-main-ts-module-resolution-atsign-import.md
@@ -38,4 +38,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-ts-module-resolution.md b/docs/_snippets/storybook-main-ts-module-resolution.md
index 3473115ae6e2..c6932f0cc9be 100644
--- a/docs/_snippets/storybook-main-ts-module-resolution.md
+++ b/docs/_snippets/storybook-main-ts-module-resolution.md
@@ -43,4 +43,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-use-manager-entries.md b/docs/_snippets/storybook-main-use-manager-entries.md
index f3686ea18d51..9f70558000bd 100644
--- a/docs/_snippets/storybook-main-use-manager-entries.md
+++ b/docs/_snippets/storybook-main-use-manager-entries.md
@@ -3,4 +3,3 @@ export default {
   managerEntries: ['some-storybook-addon/entry-point.js'],
 };
 ```
-
diff --git a/docs/_snippets/storybook-main-using-existing-config.md b/docs/_snippets/storybook-main-using-existing-config.md
index 5c36cbf42766..e7c60a8f8b20 100644
--- a/docs/_snippets/storybook-main-using-existing-config.md
+++ b/docs/_snippets/storybook-main-using-existing-config.md
@@ -33,4 +33,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-versioned-webpack.md b/docs/_snippets/storybook-main-versioned-webpack.md
index eab56d99cf4a..f4b00f27abf8 100644
--- a/docs/_snippets/storybook-main-versioned-webpack.md
+++ b/docs/_snippets/storybook-main-versioned-webpack.md
@@ -7,4 +7,3 @@ export function webpackFinal(config, { presets }) {
   return config;
 }
 ```
-
diff --git a/docs/_snippets/storybook-main-webpack-options.md b/docs/_snippets/storybook-main-webpack-options.md
index 07adfc8fa696..bbb9728f62ff 100644
--- a/docs/_snippets/storybook-main-webpack-options.md
+++ b/docs/_snippets/storybook-main-webpack-options.md
@@ -35,4 +35,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-webpack-preset-config.md b/docs/_snippets/storybook-main-webpack-preset-config.md
index bf5e1656c94e..1967202f9119 100644
--- a/docs/_snippets/storybook-main-webpack-preset-config.md
+++ b/docs/_snippets/storybook-main-webpack-preset-config.md
@@ -19,4 +19,3 @@ export async function webpack(baseConfig, options) {
   };
 }
 ```
-
diff --git a/docs/_snippets/storybook-main-webpack5-fsCache.md b/docs/_snippets/storybook-main-webpack5-fsCache.md
index ccb14a9cdddc..9ca18b587cf7 100644
--- a/docs/_snippets/storybook-main-webpack5-fsCache.md
+++ b/docs/_snippets/storybook-main-webpack5-fsCache.md
@@ -10,4 +10,3 @@ export default {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-main-webpack5-lazyCompilation.md b/docs/_snippets/storybook-main-webpack5-lazyCompilation.md
index 7e95269a8e27..182c2187fd9c 100644
--- a/docs/_snippets/storybook-main-webpack5-lazyCompilation.md
+++ b/docs/_snippets/storybook-main-webpack5-lazyCompilation.md
@@ -10,4 +10,3 @@ export default {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-main-webpack5.md b/docs/_snippets/storybook-main-webpack5.md
index 8103e08a0ca5..f5e399b77ef4 100644
--- a/docs/_snippets/storybook-main-webpack5.md
+++ b/docs/_snippets/storybook-main-webpack5.md
@@ -5,4 +5,3 @@ export default {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-main-webpackfinal-example.md b/docs/_snippets/storybook-main-webpackfinal-example.md
index a1c504de8932..5ec6c4b7646e 100644
--- a/docs/_snippets/storybook-main-webpackfinal-example.md
+++ b/docs/_snippets/storybook-main-webpackfinal-example.md
@@ -9,4 +9,3 @@ export function webpackFinal(config, { configDir }) {
   return applyCRAWebpackConfig(config, configDir);
 }
 ```
-
diff --git a/docs/_snippets/storybook-manager-custom-theme.md b/docs/_snippets/storybook-manager-custom-theme.md
index 6a592e294fe2..c8f06b738d16 100644
--- a/docs/_snippets/storybook-manager-custom-theme.md
+++ b/docs/_snippets/storybook-manager-custom-theme.md
@@ -6,4 +6,3 @@ addons.setConfig({
   theme: yourTheme,
 });
 ```
-
diff --git a/docs/_snippets/storybook-manager-dark-theme.md b/docs/_snippets/storybook-manager-dark-theme.md
index 04ffcbf1f6d9..399c33fd37b7 100644
--- a/docs/_snippets/storybook-manager-dark-theme.md
+++ b/docs/_snippets/storybook-manager-dark-theme.md
@@ -6,4 +6,3 @@ addons.setConfig({
   theme: themes.dark,
 });
 ```
-
diff --git a/docs/_snippets/storybook-manager-disable-roots.md b/docs/_snippets/storybook-manager-disable-roots.md
index f2bcba560e30..a6bf68ed0ff3 100644
--- a/docs/_snippets/storybook-manager-disable-roots.md
+++ b/docs/_snippets/storybook-manager-disable-roots.md
@@ -7,4 +7,3 @@ addons.setConfig({
   },
 });
 ```
-
diff --git a/docs/_snippets/storybook-manager-render-label-stories.md b/docs/_snippets/storybook-manager-render-label-stories.md
index 621b2c863d5d..98a988631941 100644
--- a/docs/_snippets/storybook-manager-render-label-stories.md
+++ b/docs/_snippets/storybook-manager-render-label-stories.md
@@ -9,4 +9,3 @@ addons.setConfig({
   },
 });
 ```
-
diff --git a/docs/_snippets/storybook-mdx-template-with-prop.md b/docs/_snippets/storybook-mdx-template-with-prop.md
index 340277699165..83533422aa56 100644
--- a/docs/_snippets/storybook-mdx-template-with-prop.md
+++ b/docs/_snippets/storybook-mdx-template-with-prop.md
@@ -1,9 +1,7 @@
-```mdx renderer="common" language="mdx"
-{/* DocumentationTemplate.mdx */}
-
+```mdx filename="DocumentationTemplate.mdx" renderer="common" language="mdx"
 import { Meta, Title, Primary, Controls, Stories } from '@storybook/blocks';
 
-{/* 
+{/*
   * 👇 The isTemplate property is required to tell Storybook that this is a template
   * See https://storybook.js.org/docs/api/doc-blocks/doc-block-meta
   * to learn how to use
@@ -32,4 +30,3 @@ Listed below are additional variations of the component.
 <Stories />
 
 ```
-
diff --git a/docs/_snippets/storybook-merged-argtypes.md b/docs/_snippets/storybook-merged-argtypes.md
index bc6a0660d079..e3a13a0a5392 100644
--- a/docs/_snippets/storybook-merged-argtypes.md
+++ b/docs/_snippets/storybook-merged-argtypes.md
@@ -18,4 +18,3 @@ const argTypes = {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-migrate-csf-2-to-3.md b/docs/_snippets/storybook-migrate-csf-2-to-3.md
index cf4e292d874a..502aa31d6b2d 100644
--- a/docs/_snippets/storybook-migrate-csf-2-to-3.md
+++ b/docs/_snippets/storybook-migrate-csf-2-to-3.md
@@ -12,4 +12,3 @@ pnpm dlx storybook@latest migrate csf-2-to-3 --glob="**/*.stories.tsx" --parser=
 # Convert CSF 2 to CSF 3
 yarn dlx storybook@latest migrate csf-2-to-3 --glob="**/*.stories.tsx" --parser=tsx
 ```
-
diff --git a/docs/_snippets/storybook-migrate-mdx-to-csf.md b/docs/_snippets/storybook-migrate-mdx-to-csf.md
index 48ed3b60de91..daa7baf83b0d 100644
--- a/docs/_snippets/storybook-migrate-mdx-to-csf.md
+++ b/docs/_snippets/storybook-migrate-mdx-to-csf.md
@@ -12,4 +12,3 @@ pnpm dlx storybook@latest migrate mdx-to-csf --glob "src/**/*.stories.mdx"
 # Convert stories in MDX to CSF
 yarn dlx storybook@latest migrate mdx-to-csf --glob "src/**/*.stories.mdx"
 ```
-
diff --git a/docs/_snippets/storybook-migrate-stories-of-to-csf.md b/docs/_snippets/storybook-migrate-stories-of-to-csf.md
index 0f73203fd378..392ca32e5e6b 100644
--- a/docs/_snippets/storybook-migrate-stories-of-to-csf.md
+++ b/docs/_snippets/storybook-migrate-stories-of-to-csf.md
@@ -12,4 +12,3 @@ pnpm dlx storybook@latest migrate storiesof-to-csf --glob="**/*.stories.tsx" --p
 # Convert storiesOf to CSF 1
 yarn dlx storybook@latest migrate storiesof-to-csf --glob="**/*.stories.tsx" --parser=tsx
 ```
-
diff --git a/docs/_snippets/storybook-preset-full-config-object.md b/docs/_snippets/storybook-preset-full-config-object.md
index 06cf12f99b02..d744586ea9f0 100644
--- a/docs/_snippets/storybook-preset-full-config-object.md
+++ b/docs/_snippets/storybook-preset-full-config-object.md
@@ -12,4 +12,3 @@ export default {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-preview-auto-docs-custom-docs-container.md b/docs/_snippets/storybook-preview-auto-docs-custom-docs-container.md
index 9e0828acd150..52d25e847a61 100644
--- a/docs/_snippets/storybook-preview-auto-docs-custom-docs-container.md
+++ b/docs/_snippets/storybook-preview-auto-docs-custom-docs-container.md
@@ -50,4 +50,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-auto-docs-custom-mdx-template.md b/docs/_snippets/storybook-preview-auto-docs-custom-mdx-template.md
index 1b11d0d702fb..0e97c75f2b19 100644
--- a/docs/_snippets/storybook-preview-auto-docs-custom-mdx-template.md
+++ b/docs/_snippets/storybook-preview-auto-docs-custom-mdx-template.md
@@ -9,4 +9,3 @@ export default {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-preview-auto-docs-custom-template-function.md b/docs/_snippets/storybook-preview-auto-docs-custom-template-function.md
index 0d6d10c90fa7..b7a8a420f8eb 100644
--- a/docs/_snippets/storybook-preview-auto-docs-custom-template-function.md
+++ b/docs/_snippets/storybook-preview-auto-docs-custom-template-function.md
@@ -56,4 +56,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-auto-docs-override-mdx-container.md b/docs/_snippets/storybook-preview-auto-docs-override-mdx-container.md
index 03d642e2cd77..315429659e90 100644
--- a/docs/_snippets/storybook-preview-auto-docs-override-mdx-container.md
+++ b/docs/_snippets/storybook-preview-auto-docs-override-mdx-container.md
@@ -68,4 +68,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-auto-docs-override-theme.md b/docs/_snippets/storybook-preview-auto-docs-override-theme.md
index 7b1b355b42fd..8639496e6d8d 100644
--- a/docs/_snippets/storybook-preview-auto-docs-override-theme.md
+++ b/docs/_snippets/storybook-preview-auto-docs-override-theme.md
@@ -38,4 +38,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-body-example.md b/docs/_snippets/storybook-preview-body-example.md
index 07ec6f9144ed..21886170b09d 100644
--- a/docs/_snippets/storybook-preview-body-example.md
+++ b/docs/_snippets/storybook-preview-body-example.md
@@ -1,6 +1,3 @@
-```html renderer="common" language="ts" tabTitle="html"
-{/*  .storybook/preview-body.html */}
-
+```html filename=".storybook/preview-body.html" renderer="common" language="js"
 <div id="custom-root"></div>
 ```
-
diff --git a/docs/_snippets/storybook-preview-body-font-size.md b/docs/_snippets/storybook-preview-body-font-size.md
index 1aaa3031d097..99c62f5d7726 100644
--- a/docs/_snippets/storybook-preview-body-font-size.md
+++ b/docs/_snippets/storybook-preview-body-font-size.md
@@ -1,10 +1,7 @@
-```html renderer="common" language="ts" tabTitle="html"
-{/* .storybook/preview-body.html */}
-
+```html filename=".storybook/preview-body.html" renderer="common" language="js"
 <style>
   html {
     font-size: 15px;
   }
 </style>
 ```
-
diff --git a/docs/_snippets/storybook-preview-compodoc-config.md b/docs/_snippets/storybook-preview-compodoc-config.md
index 776249642ba2..17d7af9cf4e8 100644
--- a/docs/_snippets/storybook-preview-compodoc-config.md
+++ b/docs/_snippets/storybook-preview-compodoc-config.md
@@ -20,4 +20,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-configure-globaltypes.md b/docs/_snippets/storybook-preview-configure-globaltypes.md
index a5504e518507..bbf1c6dd7af8 100644
--- a/docs/_snippets/storybook-preview-configure-globaltypes.md
+++ b/docs/_snippets/storybook-preview-configure-globaltypes.md
@@ -75,4 +75,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-custom-canvas.md b/docs/_snippets/storybook-preview-custom-canvas.md
index 4f5f90024f3b..05fccc7d5366 100644
--- a/docs/_snippets/storybook-preview-custom-canvas.md
+++ b/docs/_snippets/storybook-preview-custom-canvas.md
@@ -30,4 +30,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-custom-code-renderer.md b/docs/_snippets/storybook-preview-custom-code-renderer.md
index d32357ab45a6..a70653aee1cb 100644
--- a/docs/_snippets/storybook-preview-custom-code-renderer.md
+++ b/docs/_snippets/storybook-preview-custom-code-renderer.md
@@ -30,4 +30,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-custom-elements-config.md b/docs/_snippets/storybook-preview-custom-elements-config.md
index 7d0db859cb9c..8ba526e80655 100644
--- a/docs/_snippets/storybook-preview-custom-elements-config.md
+++ b/docs/_snippets/storybook-preview-custom-elements-config.md
@@ -38,4 +38,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-custom-metadata.md b/docs/_snippets/storybook-preview-custom-metadata.md
index 50e6530eb191..17334b597d4b 100644
--- a/docs/_snippets/storybook-preview-custom-metadata.md
+++ b/docs/_snippets/storybook-preview-custom-metadata.md
@@ -15,4 +15,3 @@ export default {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-preview-custom-params.md b/docs/_snippets/storybook-preview-custom-params.md
index b9c1908beb62..862749b58ccc 100644
--- a/docs/_snippets/storybook-preview-custom-params.md
+++ b/docs/_snippets/storybook-preview-custom-params.md
@@ -28,4 +28,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-custom-toc.md b/docs/_snippets/storybook-preview-custom-toc.md
index c3846775abf1..25ea41c85db4 100644
--- a/docs/_snippets/storybook-preview-custom-toc.md
+++ b/docs/_snippets/storybook-preview-custom-toc.md
@@ -40,4 +40,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-doc-blocks-controls-exclude-prop.md b/docs/_snippets/storybook-preview-doc-blocks-controls-exclude-prop.md
index 08ac32cb8132..5a7a9535a138 100644
--- a/docs/_snippets/storybook-preview-doc-blocks-controls-exclude-prop.md
+++ b/docs/_snippets/storybook-preview-doc-blocks-controls-exclude-prop.md
@@ -22,4 +22,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-docs-dark-theme.md b/docs/_snippets/storybook-preview-docs-dark-theme.md
index 423d1c9cb4d1..a356b6176019 100644
--- a/docs/_snippets/storybook-preview-docs-dark-theme.md
+++ b/docs/_snippets/storybook-preview-docs-dark-theme.md
@@ -26,4 +26,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-empty-sort-object.md b/docs/_snippets/storybook-preview-empty-sort-object.md
index dc73686f2f7a..669f71ed8cef 100644
--- a/docs/_snippets/storybook-preview-empty-sort-object.md
+++ b/docs/_snippets/storybook-preview-empty-sort-object.md
@@ -30,4 +30,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-enable-toc.md b/docs/_snippets/storybook-preview-enable-toc.md
index 0f131ecbab23..a4d0c95e3203 100644
--- a/docs/_snippets/storybook-preview-enable-toc.md
+++ b/docs/_snippets/storybook-preview-enable-toc.md
@@ -22,4 +22,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-expanded-controls.md b/docs/_snippets/storybook-preview-expanded-controls.md
index 522860eda7ed..e168a359868a 100644
--- a/docs/_snippets/storybook-preview-expanded-controls.md
+++ b/docs/_snippets/storybook-preview-expanded-controls.md
@@ -18,4 +18,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-extended-theme-variables.md b/docs/_snippets/storybook-preview-extended-theme-variables.md
index d1ca5e3db5cf..e6df84d48ec4 100644
--- a/docs/_snippets/storybook-preview-extended-theme-variables.md
+++ b/docs/_snippets/storybook-preview-extended-theme-variables.md
@@ -5,4 +5,3 @@ addonActionsTheme: {
   BASE_BACKGROUND_COLOR: 'transparent',
 }
 ```
-
diff --git a/docs/_snippets/storybook-preview-global-decorator.md b/docs/_snippets/storybook-preview-global-decorator.md
index 492cb13867d6..041dd4dfd4d7 100644
--- a/docs/_snippets/storybook-preview-global-decorator.md
+++ b/docs/_snippets/storybook-preview-global-decorator.md
@@ -121,4 +121,3 @@ export default {
   decorators: [(story) => html`<div style="margin: 3em">${story()}</div>`],
 };
 ```
-
diff --git a/docs/_snippets/storybook-preview-global-loader.md b/docs/_snippets/storybook-preview-global-loader.md
index 3c84596ad58d..d63d87dc76e7 100644
--- a/docs/_snippets/storybook-preview-global-loader.md
+++ b/docs/_snippets/storybook-preview-global-loader.md
@@ -22,4 +22,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-global-parameters.md b/docs/_snippets/storybook-preview-global-parameters.md
index b9c1908beb62..862749b58ccc 100644
--- a/docs/_snippets/storybook-preview-global-parameters.md
+++ b/docs/_snippets/storybook-preview-global-parameters.md
@@ -28,4 +28,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-head-example.md b/docs/_snippets/storybook-preview-head-example.md
index 3afab4ac7d2d..8b744dd19bdc 100644
--- a/docs/_snippets/storybook-preview-head-example.md
+++ b/docs/_snippets/storybook-preview-head-example.md
@@ -1,12 +1,13 @@
-```html renderer="common" language="ts" tabTitle="html"
-{/* .storybook/preview-head.html */}
-
-{/* Pull in static files served from your Static directory or the internet */}
-{/* Example: `main.js|ts` is configured with staticDirs: ['../public'] and your font is located in the `fonts` directory inside your `public` directory */}
+```html filename=".storybook/preview-head.html" renderer="common" language="js"
+<!--
+Pull in static files served from your Static directory or the internet
+Example:
+`main.js|ts` is configured with staticDirs: ['../public'] and your font is located in the `fonts`
+directory inside your `public` directory
+-->
 <link rel="preload" href="/fonts/my-font.woff2" />
 
-{/* Or you can load custom head-tag JavaScript: */}
-
+<!-- Or you can load custom head-tag JavaScript: -->
 <script src="https://use.typekit.net/xxxyyy.js"></script>
 <script>
   try {
@@ -14,4 +15,3 @@
   } catch (e) {}
 </script>
 ```
-
diff --git a/docs/_snippets/storybook-preview-head-import-global-styles.md b/docs/_snippets/storybook-preview-head-import-global-styles.md
index aab04dfd4795..7f1c18be7155 100644
--- a/docs/_snippets/storybook-preview-head-import-global-styles.md
+++ b/docs/_snippets/storybook-preview-head-import-global-styles.md
@@ -1,14 +1,11 @@
-```html renderer="common" language="ts" tabTitle="html"
-{/* .storybook/preview-head.html */}
-
-{/* Loads a font from a CDN */}
+```html filename=".storybook/preview-head.html" renderer="common" language="ts"
+<!-- Loads a font from a CDN -->
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <link
   href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
   rel="stylesheet"
 />
-{/* Load your CSS file */}
+<!-- Load your CSS file -->
 <link rel="stylesheet" href="path/to/your/styles.css" />
 ```
-
diff --git a/docs/_snippets/storybook-preview-import-global-styles.md b/docs/_snippets/storybook-preview-import-global-styles.md
index d73c34e4776b..17219d409cda 100644
--- a/docs/_snippets/storybook-preview-import-global-styles.md
+++ b/docs/_snippets/storybook-preview-import-global-styles.md
@@ -18,4 +18,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-layout-param.md b/docs/_snippets/storybook-preview-layout-param.md
index 3e2d7fd520d0..4b6c649d9a83 100644
--- a/docs/_snippets/storybook-preview-layout-param.md
+++ b/docs/_snippets/storybook-preview-layout-param.md
@@ -18,4 +18,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-locales-globaltype.md b/docs/_snippets/storybook-preview-locales-globaltype.md
index d96bf310cc3a..c0928d584a98 100644
--- a/docs/_snippets/storybook-preview-locales-globaltype.md
+++ b/docs/_snippets/storybook-preview-locales-globaltype.md
@@ -78,4 +78,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-matching-argtypes.md b/docs/_snippets/storybook-preview-matching-argtypes.md
index 6d2f2212593e..61e2beae5c28 100644
--- a/docs/_snippets/storybook-preview-matching-argtypes.md
+++ b/docs/_snippets/storybook-preview-matching-argtypes.md
@@ -18,4 +18,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-optout-inline.md b/docs/_snippets/storybook-preview-optout-inline.md
index 81e32f4b4399..60991af50570 100644
--- a/docs/_snippets/storybook-preview-optout-inline.md
+++ b/docs/_snippets/storybook-preview-optout-inline.md
@@ -24,4 +24,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-parameters-color-swatches.md b/docs/_snippets/storybook-preview-parameters-color-swatches.md
index 5029cb279168..a018de4b7a09 100644
--- a/docs/_snippets/storybook-preview-parameters-color-swatches.md
+++ b/docs/_snippets/storybook-preview-parameters-color-swatches.md
@@ -22,4 +22,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-prepareforinline.md b/docs/_snippets/storybook-preview-prepareforinline.md
index e0940ccf9819..443f62a6b1de 100644
--- a/docs/_snippets/storybook-preview-prepareforinline.md
+++ b/docs/_snippets/storybook-preview-prepareforinline.md
@@ -11,4 +11,3 @@ export default {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-preview-register-language-globally.md b/docs/_snippets/storybook-preview-register-language-globally.md
index 4d798c0e46d0..6fb0772bb4a3 100644
--- a/docs/_snippets/storybook-preview-register-language-globally.md
+++ b/docs/_snippets/storybook-preview-register-language-globally.md
@@ -40,4 +40,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-sort-function.md b/docs/_snippets/storybook-preview-sort-function.md
index 6c0d87e7a88a..d55ba7643036 100644
--- a/docs/_snippets/storybook-preview-sort-function.md
+++ b/docs/_snippets/storybook-preview-sort-function.md
@@ -25,4 +25,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-use-global-type.md b/docs/_snippets/storybook-preview-use-global-type.md
index 0f9a8737f699..994fb264a6e4 100644
--- a/docs/_snippets/storybook-preview-use-global-type.md
+++ b/docs/_snippets/storybook-preview-use-global-type.md
@@ -8,7 +8,7 @@ const preview: Preview = {
       (story) => `<div [class]="myTheme">${story}</div>`,
       ({ globals }) => {
         return { myTheme: globals['theme'] };
-      },
+      }
     ),
   ],
 };
@@ -143,7 +143,7 @@ const preview: Preview = {
 export default preview;
 ```
 
-```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="3"
+```js filename=".storybook/preview.js" renderer="vue" language="js"
 import { setup } from '@storybook/vue3';
 
 import { VApp } from 'vuetify/components';
@@ -176,7 +176,7 @@ const preview = {
 export default preview;
 ```
 
-```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="3"
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts"
 import type { Preview } from '@storybook/vue3';
 import { setup } from '@storybook/vue3';
 
@@ -243,4 +243,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-with-angular-polyfills.md b/docs/_snippets/storybook-preview-with-angular-polyfills.md
deleted file mode 100644
index 26dc3eb44ddb..000000000000
--- a/docs/_snippets/storybook-preview-with-angular-polyfills.md
+++ /dev/null
@@ -1,21 +0,0 @@
-```js filename=".storybook/preview.js" renderer="angular" language="js"
-import { setCompodocJson } from '@storybook/addon-docs/angular';
-import docJson from '../documentation.json';
-
-import '../src/polyfills';
-
-setCompodocJson(docJson);
-
-export default {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/,
-      },
-    },
-    docs: { story: { inline: true } },
-  },
-};
-```
-
diff --git a/docs/_snippets/storybook-preview-with-hoc-component-decorator.md b/docs/_snippets/storybook-preview-with-hoc-component-decorator.md
deleted file mode 100644
index 2b8a1d70b738..000000000000
--- a/docs/_snippets/storybook-preview-with-hoc-component-decorator.md
+++ /dev/null
@@ -1,50 +0,0 @@
-```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="component-3"
-import { setup } from '@storybook/vue3';
-
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faPlusSquare as fasPlusSquare } from '@fortawesome/free-solid-svg-icons';
-
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-
-setup((app) => {
-  //👇 Adds the icon to the library so you can use it in your story.
-  library.add(fasPlusSquare);
-  app.component('font-awesome-icon', FontAwesomeIcon);
-});
-
-export default {
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: '<div style="margin: 3em;"><story /></div>',
-    }),
-  ],
-};
-```
-
-```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="component-3"
-import { setup, Preview } from '@storybook/vue3';
-
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faPlusSquare as fasPlusSquare } from '@fortawesome/free-solid-svg-icons';
-
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-
-setup((app) => {
-  //👇 Adds the icon to the library so you can use it in your story.
-  library.add(fasPlusSquare);
-  app.component('font-awesome-icon', FontAwesomeIcon);
-});
-
-const preview: Preview = {
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: '<div style="margin: 3em;"><story /></div>',
-    }),
-  ],
-};
-
-export default preview;
-```
-
diff --git a/docs/_snippets/storybook-preview-with-library-decorator.md b/docs/_snippets/storybook-preview-with-library-decorator.md
index 8e90b2747784..6c9b9219bf3e 100644
--- a/docs/_snippets/storybook-preview-with-library-decorator.md
+++ b/docs/_snippets/storybook-preview-with-library-decorator.md
@@ -1,4 +1,33 @@
-```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="library-3"
+```js filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="preview"
+import type { Preview } from '@storybook/angular';
+
+import { setCompodocJson } from '@storybook/addon-docs/angular';
+
+import docJson from '../documentation.json';
+
+import '../src/polyfills';
+
+setCompodocJson(docJson);
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;
+```
+
+```ts filename="src/polyfills.ts" renderer="angular" language="ts" tabTitle="polyfills"
+import '@angular/localize/init';
+```
+
+```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="library"
 import { setup } from '@storybook/vue3';
 
 import { createPinia } from 'pinia';
@@ -18,7 +47,31 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="library-3"
+```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="component"
+import { setup } from '@storybook/vue3';
+
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faPlusSquare as fasPlusSquare } from '@fortawesome/free-solid-svg-icons';
+
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
+setup((app) => {
+  //👇 Adds the icon to the library so you can use it in your story.
+  library.add(fasPlusSquare);
+  app.component('font-awesome-icon', FontAwesomeIcon);
+});
+
+export default {
+  decorators: [
+    (story) => ({
+      components: { story },
+      template: '<div style="margin: 3em;"><story /></div>',
+    }),
+  ],
+};
+```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="library"
 import { setup, Preview } from '@storybook/vue3';
 
 import { createPinia } from 'pinia';
@@ -40,3 +93,28 @@ const preview: Preview = {
 export default preview;
 ```
 
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="component"
+import { setup, Preview } from '@storybook/vue3';
+
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faPlusSquare as fasPlusSquare } from '@fortawesome/free-solid-svg-icons';
+
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
+setup((app) => {
+  //👇 Adds the icon to the library so you can use it in your story.
+  library.add(fasPlusSquare);
+  app.component('font-awesome-icon', FontAwesomeIcon);
+});
+
+const preview: Preview = {
+  decorators: [
+    (story) => ({
+      components: { story },
+      template: '<div style="margin: 3em;"><story /></div>',
+    }),
+  ],
+};
+
+export default preview;
+```
diff --git a/docs/_snippets/storybook-preview-with-ordered-pages-and-wildcard.md b/docs/_snippets/storybook-preview-with-ordered-pages-and-wildcard.md
index b1b61605b116..04bf16d2d20e 100644
--- a/docs/_snippets/storybook-preview-with-ordered-pages-and-wildcard.md
+++ b/docs/_snippets/storybook-preview-with-ordered-pages-and-wildcard.md
@@ -26,4 +26,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-with-ordered-pages.md b/docs/_snippets/storybook-preview-with-ordered-pages.md
index 1bf1a7ec0a4c..72b79e145c55 100644
--- a/docs/_snippets/storybook-preview-with-ordered-pages.md
+++ b/docs/_snippets/storybook-preview-with-ordered-pages.md
@@ -26,4 +26,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-read-environment-variables.md b/docs/_snippets/storybook-read-environment-variables.md
index 7c8f1c8a6c4c..608b90bbc845 100644
--- a/docs/_snippets/storybook-read-environment-variables.md
+++ b/docs/_snippets/storybook-read-environment-variables.md
@@ -7,4 +7,3 @@ console.log(process.env.STORYBOOK_DATA_KEY);
 console.log(import.meta.env.STORYBOOK_THEME);
 console.log(import.meta.env.STORYBOOK_DATA_KEY);
 ```
-
diff --git a/docs/_snippets/storybook-remove-command.md b/docs/_snippets/storybook-remove-command.md
index ba8c815f8f48..43f8d804617a 100644
--- a/docs/_snippets/storybook-remove-command.md
+++ b/docs/_snippets/storybook-remove-command.md
@@ -9,4 +9,3 @@ pnpm dlx storybook@latest remove @storybook/addon-a11y
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn dlx storybook@latest remove @storybook/addon-a11y
 ```
-
diff --git a/docs/_snippets/storybook-run-dev.md b/docs/_snippets/storybook-run-dev.md
index d1b093f92486..4c562b86bf86 100644
--- a/docs/_snippets/storybook-run-dev.md
+++ b/docs/_snippets/storybook-run-dev.md
@@ -13,4 +13,3 @@ pnpm run storybook
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn storybook
 ```
-
diff --git a/docs/_snippets/storybook-server-framework-options.md b/docs/_snippets/storybook-server-framework-options.md
index b16de7b63cc8..56916a549d33 100644
--- a/docs/_snippets/storybook-server-framework-options.md
+++ b/docs/_snippets/storybook-server-framework-options.md
@@ -8,4 +8,3 @@ export default {
   frameworkPresets: [require.resolve('./framework-preset-my-framework.js')],
 };
 ```
-
diff --git a/docs/_snippets/storybook-server-options.md b/docs/_snippets/storybook-server-options.md
index 5af66e203bb7..ce8b458fc199 100644
--- a/docs/_snippets/storybook-server-options.md
+++ b/docs/_snippets/storybook-server-options.md
@@ -7,4 +7,3 @@ export default {
   frameworkPresets: [require.resolve('./framework-preset-vue.js')],
 };
 ```
-
diff --git a/docs/_snippets/storybook-start-dev-server.md b/docs/_snippets/storybook-start-dev-server.md
index b8cb5ef811b0..62b5e0df161b 100644
--- a/docs/_snippets/storybook-start-dev-server.md
+++ b/docs/_snippets/storybook-start-dev-server.md
@@ -5,4 +5,3 @@ import options from './options';
 
 buildDev(options);
 ```
-
diff --git a/docs/_snippets/storybook-story-layout-param.md b/docs/_snippets/storybook-story-layout-param.md
index 8594ccdda3a5..f0403f7993e4 100644
--- a/docs/_snippets/storybook-story-layout-param.md
+++ b/docs/_snippets/storybook-story-layout-param.md
@@ -99,4 +99,3 @@ export const WithLayout: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-storyloading-with-directory.md b/docs/_snippets/storybook-storyloading-with-directory.md
index efd3ad885d4f..1f9f22e37611 100644
--- a/docs/_snippets/storybook-storyloading-with-directory.md
+++ b/docs/_snippets/storybook-storyloading-with-directory.md
@@ -19,4 +19,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-storysource-manager-entries.md b/docs/_snippets/storybook-storysource-manager-entries.md
index 1eac3840ec4b..7f2a65c8cf15 100644
--- a/docs/_snippets/storybook-storysource-manager-entries.md
+++ b/docs/_snippets/storybook-storysource-manager-entries.md
@@ -1,4 +1,3 @@
 ```js filename="storysource/preset.js" renderer="common" language="js"
 /* nothing needed */
 ```
-
diff --git a/docs/_snippets/storybook-telemetry-crash-report-event.md b/docs/_snippets/storybook-telemetry-crash-report-event.md
index 5b307df850b6..118bd8b6c179 100644
--- a/docs/_snippets/storybook-telemetry-crash-report-event.md
+++ b/docs/_snippets/storybook-telemetry-crash-report-event.md
@@ -11,4 +11,3 @@
   message: 'Your button is not working'
 }
 ```
-
diff --git a/docs/_snippets/storybook-telemetry-main-enable-crash-reports.md b/docs/_snippets/storybook-telemetry-main-enable-crash-reports.md
index aa80c4375fe0..32f436b273ae 100644
--- a/docs/_snippets/storybook-telemetry-main-enable-crash-reports.md
+++ b/docs/_snippets/storybook-telemetry-main-enable-crash-reports.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="main-js"
+```js filename=".storybook/main.js" renderer="common" language="js"
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
@@ -9,7 +9,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="main-ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts"
 // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -23,4 +23,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-telemetry-preview-event.md b/docs/_snippets/storybook-telemetry-preview-event.md
index 8cc060bbafd6..275db577eef9 100644
--- a/docs/_snippets/storybook-telemetry-preview-event.md
+++ b/docs/_snippets/storybook-telemetry-preview-event.md
@@ -5,4 +5,3 @@ STORYBOOK_TELEMETRY_DEBUG=1 npm run storybook
 ```shell renderer="common" language="js" packageManager="yarn"
 STORYBOOK_TELEMETRY_DEBUG=1 yarn storybook
 ```
-
diff --git a/docs/_snippets/storybook-telemetry-storybook-enable-crash-reports-env.md b/docs/_snippets/storybook-telemetry-storybook-enable-crash-reports-env.md
new file mode 100644
index 000000000000..cc5eb3bd9da9
--- /dev/null
+++ b/docs/_snippets/storybook-telemetry-storybook-enable-crash-reports-env.md
@@ -0,0 +1,3 @@
+```shell renderer="common" language="js"
+STORYBOOK_ENABLE_CRASH_REPORTS=1 yarn storybook
+```
diff --git a/docs/_snippets/storybook-telemetry-storybook-enable-crash-reports.md b/docs/_snippets/storybook-telemetry-storybook-enable-crash-reports-flag.md
similarity index 74%
rename from docs/_snippets/storybook-telemetry-storybook-enable-crash-reports.md
rename to docs/_snippets/storybook-telemetry-storybook-enable-crash-reports-flag.md
index 4eebe6003d03..5724a59ee45e 100644
--- a/docs/_snippets/storybook-telemetry-storybook-enable-crash-reports.md
+++ b/docs/_snippets/storybook-telemetry-storybook-enable-crash-reports-flag.md
@@ -1,7 +1,3 @@
-```shell renderer="common" language="js" tabTitle="env-var"
-STORYBOOK_ENABLE_CRASH_REPORTS=1 yarn storybook
-```
-
 ```shell renderer="common" language="js" packageManager="npm"
 npm run storybook -- --enable-crash-reports
 ```
@@ -13,4 +9,3 @@ pnpm run storybook --enable-crash-reports
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn storybook --enable-crash-reports
 ```
-
diff --git a/docs/_snippets/storybook-test-fn-mock-spy.md b/docs/_snippets/storybook-test-fn-mock-spy.md
index 62760213efbb..d371d0abb66f 100644
--- a/docs/_snippets/storybook-test-fn-mock-spy.md
+++ b/docs/_snippets/storybook-test-fn-mock-spy.md
@@ -5,6 +5,7 @@ import { expect, userEvent, within } from '@storybook/test';
 // 👇 Must include the `.mock` portion of filename to have mocks typed correctly
 import { saveNote } from '#app/actions.mock';
 import { createNotes } from '#mocks/notes';
+
 import NoteUI from './note-ui';
 
 const meta: Meta<NoteUI> = {
@@ -39,6 +40,7 @@ import { expect, userEvent, within } from '@storybook/test';
 
 import { saveNote } from '#app/actions.mock';
 import { createNotes } from '#mocks/notes';
+
 import NoteUI from './note-ui';
 
 export default {
@@ -73,6 +75,7 @@ import { expect, userEvent, within } from '@storybook/test';
 // 👇 Must include the `.mock` portion of filename to have mocks typed correctly
 import { saveNote } from '#app/actions.mock';
 import { createNotes } from '#mocks/notes';
+
 import NoteUI from './note-ui';
 
 const meta = {
@@ -203,4 +206,3 @@ export const SaveFlow: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-test-mock-file-example.md b/docs/_snippets/storybook-test-mock-file-example.md
index 594f84887875..6313dcf2147c 100644
--- a/docs/_snippets/storybook-test-mock-file-example.md
+++ b/docs/_snippets/storybook-test-mock-file-example.md
@@ -5,4 +5,3 @@ import * as actual from './session';
 export * from './session';
 export const getUserFromSession = fn(actual.getUserFromSession).mockName('getUserFromSession');
 ```
-
diff --git a/docs/_snippets/storybook-test-mock-return-value.md b/docs/_snippets/storybook-test-mock-return-value.md
index e552bc061e06..4017f205a00b 100644
--- a/docs/_snippets/storybook-test-mock-return-value.md
+++ b/docs/_snippets/storybook-test-mock-return-value.md
@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 
 // 👇 Must include the `.mock` portion of filename to have mocks typed correctly
 import { getUserFromSession } from '#api/session.mock';
+
 import { Page } from './Page';
 
 const meta: Meta<Page> = {
@@ -22,6 +23,7 @@ export const Default: Story = {
 
 ```js filename="Page.stories.js" renderer="common" language="js"
 import { getUserFromSession } from '#api/session.mock';
+
 import { Page } from './Page';
 
 export default {
@@ -42,6 +44,7 @@ import type { Meta, StoryObj } from '@storybook/your-renderer';
 
 // 👇 Must include the `.mock` portion of filename to have mocks typed correctly
 import { getUserFromSession } from '#api/session.mock';
+
 import { Page } from './Page';
 
 const meta = {
@@ -66,6 +69,7 @@ import type { Meta, StoryObj } from '@storybook/your-renderer';
 
 // 👇 Must include the `.mock` portion of filename to have mocks typed correctly
 import { getUserFromSession } from '#api/session.mock';
+
 import { Page } from './Page';
 
 const meta: Meta<typeof Page> = {
@@ -118,4 +122,3 @@ export const Default: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-test-with-storyname.md b/docs/_snippets/storybook-test-with-storyname.md
index e09ae2cec29b..8cabc5577c1b 100644
--- a/docs/_snippets/storybook-test-with-storyname.md
+++ b/docs/_snippets/storybook-test-with-storyname.md
@@ -13,4 +13,3 @@ it('should format CSF exports with sensible defaults', () => {
   });
 });
 ```
-
diff --git a/docs/_snippets/storybook-theme-example-variables.md b/docs/_snippets/storybook-theme-example-variables.md
index 0f045dc6c52e..aca575cad984 100644
--- a/docs/_snippets/storybook-theme-example-variables.md
+++ b/docs/_snippets/storybook-theme-example-variables.md
@@ -9,4 +9,3 @@ export default create({
   brandTarget: '_self',
 });
 ```
-
diff --git a/docs/_snippets/storybook-theming-packages-install.md b/docs/_snippets/storybook-theming-packages-install.md
index a4e031c514d8..36a076f0b8f3 100644
--- a/docs/_snippets/storybook-theming-packages-install.md
+++ b/docs/_snippets/storybook-theming-packages-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/manager-api @storybook/theming
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn add --dev @storybook/manager-api @storybook/theming
 ```
-
diff --git a/docs/_snippets/storybook-theming-styled-import.md b/docs/_snippets/storybook-theming-styled-import.md
index 112d6d7497d2..5c1f84ea8b6c 100644
--- a/docs/_snippets/storybook-theming-styled-import.md
+++ b/docs/_snippets/storybook-theming-styled-import.md
@@ -1,4 +1,3 @@
 ```js filename="YourTheme.js" renderer="common" language="js"
 import { styled } from '@storybook/theming';
 ```
-
diff --git a/docs/_snippets/storybook-upgrade-prerelease.md b/docs/_snippets/storybook-upgrade-prerelease.md
index 882153c1a175..3b71ef4c4d98 100644
--- a/docs/_snippets/storybook-upgrade-prerelease.md
+++ b/docs/_snippets/storybook-upgrade-prerelease.md
@@ -9,4 +9,3 @@ pnpm dlx storybook@next upgrade
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn dlx storybook@next upgrade
 ```
-
diff --git a/docs/_snippets/storybook-upgrade-to-prior-major.md b/docs/_snippets/storybook-upgrade-to-prior-major.md
index 58295bb021e3..a8a0de4ad9ba 100644
--- a/docs/_snippets/storybook-upgrade-to-prior-major.md
+++ b/docs/_snippets/storybook-upgrade-to-prior-major.md
@@ -9,4 +9,3 @@ pnpm dlx storybook@^7 upgrade
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn dlx storybook@^7 upgrade
 ```
-
diff --git a/docs/_snippets/storybook-upgrade.md b/docs/_snippets/storybook-upgrade.md
index ddc92f704cb2..7d1921e6bd44 100644
--- a/docs/_snippets/storybook-upgrade.md
+++ b/docs/_snippets/storybook-upgrade.md
@@ -9,4 +9,3 @@ pnpm dlx storybook@latest upgrade
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn dlx storybook@latest upgrade
 ```
-
diff --git a/docs/_snippets/storybook-vite-builder-install.md b/docs/_snippets/storybook-vite-builder-install.md
index 0de50e2116b3..9bc49e64fbf8 100644
--- a/docs/_snippets/storybook-vite-builder-install.md
+++ b/docs/_snippets/storybook-vite-builder-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/builder-vite
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn add --dev @storybook/builder-vite
 ```
-
diff --git a/docs/_snippets/storybook-vite-builder-jest-mock.md b/docs/_snippets/storybook-vite-builder-jest-mock.md
index 1a864be1d6e2..51a05104a0dc 100644
--- a/docs/_snippets/storybook-vite-builder-jest-mock.md
+++ b/docs/_snippets/storybook-vite-builder-jest-mock.md
@@ -1,8 +1,5 @@
-```html renderer="common" language="ts" tabTitle="html"
-{/* .storybook/preview-head.html */}
-
+```html filename=".storybook/preview-head.html" renderer="common" language="js"
 <script>
   window.global = window;
 </script>
 ```
-
diff --git a/docs/_snippets/storybook-vite-builder-ts-configure.md b/docs/_snippets/storybook-vite-builder-ts-configure.md
index f9fb98a7e6a6..61ec1ecce1ea 100644
--- a/docs/_snippets/storybook-vite-builder-ts-configure.md
+++ b/docs/_snippets/storybook-vite-builder-ts-configure.md
@@ -29,4 +29,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/subpath-imports-config.md b/docs/_snippets/subpath-imports-config.md
index 676b3e461631..9d61b031d0f9 100644
--- a/docs/_snippets/subpath-imports-config.md
+++ b/docs/_snippets/subpath-imports-config.md
@@ -23,4 +23,3 @@
   }
 }
 ```
-
diff --git a/docs/_snippets/svelte-csf-addon-install.md b/docs/_snippets/svelte-csf-addon-install.md
index 3b036e9fecf0..45120afac465 100644
--- a/docs/_snippets/svelte-csf-addon-install.md
+++ b/docs/_snippets/svelte-csf-addon-install.md
@@ -9,4 +9,3 @@ pnpm dlx storybook@latest add @storybook/addon-svelte-csf
 ```shell renderer="svelte" language="js" packageManager="yarn"
 yarn storybook@latest add @storybook/addon-svelte-csf
 ```
-
diff --git a/docs/_snippets/svelte-vite-add-framework.md b/docs/_snippets/svelte-vite-add-framework.md
index 13b0ad47f572..200d3fefe6cc 100644
--- a/docs/_snippets/svelte-vite-add-framework.md
+++ b/docs/_snippets/svelte-vite-add-framework.md
@@ -15,4 +15,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/svelte-vite-install.md b/docs/_snippets/svelte-vite-install.md
index 3285ba245fd1..aae2ef5541bb 100644
--- a/docs/_snippets/svelte-vite-install.md
+++ b/docs/_snippets/svelte-vite-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/svelte-vite
 ```shell renderer="svelte" language="js" packageManager="yarn"
 yarn add --dev @storybook/svelte-vite
 ```
-
diff --git a/docs/_snippets/svelte-webpack5-add-framework.md b/docs/_snippets/svelte-webpack5-add-framework.md
index e93100f0043e..2ababfd97736 100644
--- a/docs/_snippets/svelte-webpack5-add-framework.md
+++ b/docs/_snippets/svelte-webpack5-add-framework.md
@@ -15,4 +15,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/svelte-webpack5-install.md b/docs/_snippets/svelte-webpack5-install.md
index a8d7089adfa1..85d5fd91e779 100644
--- a/docs/_snippets/svelte-webpack5-install.md
+++ b/docs/_snippets/svelte-webpack5-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/svelte-webpack5
 ```shell renderer="svelte" language="js" packageManager="yarn"
 yarn add --dev @storybook/svelte-webpack5
 ```
-
diff --git a/docs/_snippets/sveltekit-add-framework.md b/docs/_snippets/sveltekit-add-framework.md
index b712a957b5f5..986845f37c15 100644
--- a/docs/_snippets/sveltekit-add-framework.md
+++ b/docs/_snippets/sveltekit-add-framework.md
@@ -7,7 +7,7 @@ export default {
 ```
 
 ```ts filename=".storybook/main.ts" renderer="svelte" language="ts"
-import { StorybookConfig } from '@storybook/nextjs';
+import { StorybookConfig } from '@storybook/sveltekit';
 
 const config: StorybookConfig = {
   // ...
@@ -17,4 +17,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/sveltekit-install.md b/docs/_snippets/sveltekit-install.md
index e7010dd695a8..0ffa2c676836 100644
--- a/docs/_snippets/sveltekit-install.md
+++ b/docs/_snippets/sveltekit-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/sveltekit
 ```shell renderer="svelte" language="js" packageManager="yarn"
 yarn add --dev @storybook/sveltekit
 ```
-
diff --git a/docs/_snippets/tags-autodocs-in-preview.md b/docs/_snippets/tags-autodocs-in-preview.md
index 9f3f8c030498..7d96acbe053d 100644
--- a/docs/_snippets/tags-autodocs-in-preview.md
+++ b/docs/_snippets/tags-autodocs-in-preview.md
@@ -18,4 +18,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/tags-combo-example.md b/docs/_snippets/tags-combo-example.md
index 46086937d727..26c529261071 100644
--- a/docs/_snippets/tags-combo-example.md
+++ b/docs/_snippets/tags-combo-example.md
@@ -28,8 +28,8 @@ export const Combo: Story = {
   render: () => ({
     template: `
       <div>
-        <demo-button variant={1}>
-        <demo-button variant={2}>
+        <demo-button [variant]="1"></demo-button>
+        <demo-button [variant]="2"></demo-button>
       </div>
     `,
   }),
@@ -60,8 +60,8 @@ export const Combo = {
   tags: ['!test'],
   render: () => (
     <>
-      <Button variant={1}>
-      <Button variant={2}>
+      <Button variant={1} />
+      <Button variant={2} />
     </>
   ),
 };
@@ -96,8 +96,8 @@ export const Combo: Story = {
   tags: ['!test'],
   render: () => (
     <>
-      <Button variant={1}>
-      <Button variant={2}>
+      <Button variant={1} />
+      <Button variant={2} />
     </>
   ),
 };
@@ -132,8 +132,8 @@ export const Combo: Story = {
   tags: ['!test'],
   render: () => (
     <>
-      <Button variant={1}>
-      <Button variant={2}>
+      <Button variant={1} />
+      <Button variant={2} />
     </>
   ),
 };
@@ -163,8 +163,8 @@ export const Combo = {
   tags: ['!test'],
   render: () => (
     <>
-      <Button variant={1}>
-      <Button variant={2}>
+      <Button variant={1} />
+      <Button variant={2} />
     </>
   ),
 };
@@ -199,8 +199,8 @@ export const Combo: Story = {
   tags: ['!test'],
   render: () => (
     <>
-      <Button variant={1}>
-      <Button variant={2}>
+      <Button variant={1} />
+      <Button variant={2} />
     </>
   ),
 };
@@ -235,8 +235,8 @@ export const Combo: Story = {
   tags: ['!test'],
   render: () => (
     <>
-      <Button variant={1}>
-      <Button variant={2}>
+      <Button variant={1} />
+      <Button variant={2} />
     </>
   ),
 };
@@ -299,8 +299,8 @@ export const Combo: Story = {
 
 <!-- 👇 This story should not be tested, but will appear in the sidebar and docs page -->
 <Story name="Combo" tags={['!test']}>
-  <Button variant={1}>
-  <Button variant={2}>
+  <Button variant={1} />
+  <Button variant={2} />
 </Story>
 ```
 
@@ -330,8 +330,8 @@ export const Combo: Story = {
 
 <!-- 👇 This story should not be tested, but will appear in the sidebar and docs page -->
 <Story name="Combo" tags={['!test']}>
-  <Button variant={1}>
-  <Button variant={2}>
+  <Button variant={1} />
+  <Button variant={2} />
 </Story>
 ```
 
@@ -361,8 +361,8 @@ export const Combo = {
     components: { Button },
     template: `
       <div>
-        <Button variant={1}>
-        <Button variant={2}>
+        <Button :variant="1" />
+        <Button :variant="2" />
       </div>
     `,
   }),
@@ -400,8 +400,8 @@ export const Combo: Story = {
     components: { Button },
     template: `
       <div>
-        <Button variant={1}>
-        <Button variant={2}>
+        <Button :variant="1" />
+        <Button :variant="2" />
       </div>
     `,
   }),
@@ -439,15 +439,15 @@ export const Combo: Story = {
     components: { Button },
     template: `
       <div>
-        <Button variant={1}>
-        <Button variant={2}>
+        <Button :variant="1" />
+        <Button :variant="2" />
       </div>
     `,
   }),
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="js"
+```ts filename="Button.stories.js" renderer="web-components" language="js"
 import { html } from 'lit';
 
 export default {
@@ -472,9 +472,8 @@ export const Combo = {
   tags: ['!test'],
   render: () => html`
     <div>
-      <demo-button variant="1">
-      <demo-button variant="2">
-      {/* Etc... */}
+      <demo-button variant="1" />
+      <demo-button variant="2" />
     </div>
   `,
 };
@@ -509,8 +508,8 @@ export const Combo: Story = {
   tags: ['!test'],
   render: () => html`
     <div>
-      <demo-button variant="1">
-      <demo-button variant="2">
+      <demo-button variant="1" />
+      <demo-button variant="2" />
     </div>
   `,
 };
diff --git a/docs/_snippets/test-runner-a11y-config.md b/docs/_snippets/test-runner-a11y-config.md
index de01dce91393..14824205701b 100644
--- a/docs/_snippets/test-runner-a11y-config.md
+++ b/docs/_snippets/test-runner-a11y-config.md
@@ -44,4 +44,3 @@ const config: TestRunnerConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/test-runner-a11y-disable.md b/docs/_snippets/test-runner-a11y-disable.md
index 4acc306f653c..e1b176bc4a0f 100644
--- a/docs/_snippets/test-runner-a11y-disable.md
+++ b/docs/_snippets/test-runner-a11y-disable.md
@@ -61,4 +61,3 @@ const config: TestRunnerConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/test-runner-auth.md b/docs/_snippets/test-runner-auth.md
index 7712fc4b47bf..3733b0a8ca52 100644
--- a/docs/_snippets/test-runner-auth.md
+++ b/docs/_snippets/test-runner-auth.md
@@ -23,4 +23,3 @@ const config: TestRunnerConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/test-runner-axe-playwright.md b/docs/_snippets/test-runner-axe-playwright.md
index b9eb9e8f7162..2f09c11027a1 100644
--- a/docs/_snippets/test-runner-axe-playwright.md
+++ b/docs/_snippets/test-runner-axe-playwright.md
@@ -9,4 +9,3 @@ pnpm add --save-dev axe-playwright
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn add --dev axe-playwright
 ```
-
diff --git a/docs/_snippets/test-runner-config-serializer.md b/docs/_snippets/test-runner-config-serializer.md
index 460b1da8c524..ea1110eecef0 100644
--- a/docs/_snippets/test-runner-config-serializer.md
+++ b/docs/_snippets/test-runner-config-serializer.md
@@ -14,4 +14,3 @@ const config = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/test-runner-config-snapshot-resolver.md b/docs/_snippets/test-runner-config-snapshot-resolver.md
index e4bf8639d2d8..634d9303c607 100644
--- a/docs/_snippets/test-runner-config-snapshot-resolver.md
+++ b/docs/_snippets/test-runner-config-snapshot-resolver.md
@@ -11,4 +11,3 @@ const config = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/test-runner-coverage.md b/docs/_snippets/test-runner-coverage.md
index 06200c3930fe..42c44817f6f9 100644
--- a/docs/_snippets/test-runner-coverage.md
+++ b/docs/_snippets/test-runner-coverage.md
@@ -9,4 +9,3 @@ pnpm run test-storybook --coverage
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn test-storybook --coverage
 ```
-
diff --git a/docs/_snippets/test-runner-custom-page-viewport.md b/docs/_snippets/test-runner-custom-page-viewport.md
index d15eaa4d0da3..bc6342e0d86c 100644
--- a/docs/_snippets/test-runner-custom-page-viewport.md
+++ b/docs/_snippets/test-runner-custom-page-viewport.md
@@ -18,7 +18,7 @@ module.exports = {
           // Converts the viewport size from percentages to numbers
           [screen]: parseInt(size),
         }),
-        {},
+        {}
       );
       // Configures the Playwright page to use the viewport size
       page.setViewportSize(viewportSize);
@@ -51,7 +51,7 @@ const config: TestRunnerConfig = {
           // Converts the viewport size from percentages to numbers
           [screen]: parseInt(size),
         }),
-        {},
+        {}
       );
       // Configures the Playwright page to use the viewport size
       page.setViewportSize(viewportSize);
@@ -63,4 +63,3 @@ const config: TestRunnerConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/test-runner-custom-snapshot-resolver.md b/docs/_snippets/test-runner-custom-snapshot-resolver.md
index 0fd336b41b18..dba1c8c745fd 100644
--- a/docs/_snippets/test-runner-custom-snapshot-resolver.md
+++ b/docs/_snippets/test-runner-custom-snapshot-resolver.md
@@ -15,4 +15,3 @@ export default {
   testPathForConsistencyCheck: 'example.storyshot',
 };
 ```
-
diff --git a/docs/_snippets/test-runner-custom-snapshot-serializer.md b/docs/_snippets/test-runner-custom-snapshot-serializer.md
index dc544953701f..ced9e33f3731 100644
--- a/docs/_snippets/test-runner-custom-snapshot-serializer.md
+++ b/docs/_snippets/test-runner-custom-snapshot-serializer.md
@@ -19,4 +19,3 @@ module.exports = {
   },
 };
 ```
-
diff --git a/docs/_snippets/test-runner-dom-snapshot-testing.md b/docs/_snippets/test-runner-dom-snapshot-testing.md
index 6fb40633207b..f17021eeedb3 100644
--- a/docs/_snippets/test-runner-dom-snapshot-testing.md
+++ b/docs/_snippets/test-runner-dom-snapshot-testing.md
@@ -23,4 +23,3 @@ const config: TestRunnerConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/test-runner-eject-config.md b/docs/_snippets/test-runner-eject-config.md
index cd5e7cf708a6..133a87c294df 100644
--- a/docs/_snippets/test-runner-eject-config.md
+++ b/docs/_snippets/test-runner-eject-config.md
@@ -9,4 +9,3 @@ pnpm run test-storybook --eject
 ```sh renderer="common" language="js" packageManager="yarn"
 yarn test-storybook --eject
 ```
-
diff --git a/docs/_snippets/test-runner-execute-with-flags.md b/docs/_snippets/test-runner-execute-with-flags.md
index 922856044f9c..a4f710f89612 100644
--- a/docs/_snippets/test-runner-execute-with-flags.md
+++ b/docs/_snippets/test-runner-execute-with-flags.md
@@ -9,4 +9,3 @@ pnpm run test-storybook --watch
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn test-storybook --watch
 ```
-
diff --git a/docs/_snippets/test-runner-execute.md b/docs/_snippets/test-runner-execute.md
index a99bf77236b6..af9470fd2999 100644
--- a/docs/_snippets/test-runner-execute.md
+++ b/docs/_snippets/test-runner-execute.md
@@ -9,4 +9,3 @@ pnpm run test-storybook
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn test-storybook
 ```
-
diff --git a/docs/_snippets/test-runner-helper-function.md b/docs/_snippets/test-runner-helper-function.md
index c88743d7b1f4..8d600e464560 100644
--- a/docs/_snippets/test-runner-helper-function.md
+++ b/docs/_snippets/test-runner-helper-function.md
@@ -62,4 +62,3 @@ const config: TestRunnerConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/test-runner-hooks-example.md b/docs/_snippets/test-runner-hooks-example.md
index 77caddb91dd6..a055ab35f9b5 100644
--- a/docs/_snippets/test-runner-hooks-example.md
+++ b/docs/_snippets/test-runner-hooks-example.md
@@ -47,4 +47,3 @@ const config: TestRunnerConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/test-runner-image-snapshot-testing.md b/docs/_snippets/test-runner-image-snapshot-testing.md
index 1f19377922a4..03d1a0c1faa8 100644
--- a/docs/_snippets/test-runner-image-snapshot-testing.md
+++ b/docs/_snippets/test-runner-image-snapshot-testing.md
@@ -49,4 +49,3 @@ const config: TestRunnerConfig = {
 };
 export default config;
 ```
-
diff --git a/docs/_snippets/test-runner-install.md b/docs/_snippets/test-runner-install.md
index 3fe38c3dd3f8..aa64481319fb 100644
--- a/docs/_snippets/test-runner-install.md
+++ b/docs/_snippets/test-runner-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/test-runner
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn add --dev @storybook/test-runner
 ```
-
diff --git a/docs/_snippets/test-runner-local-build-workflow.md b/docs/_snippets/test-runner-local-build-workflow.md
index b429c34cfaeb..c5e72c546b82 100644
--- a/docs/_snippets/test-runner-local-build-workflow.md
+++ b/docs/_snippets/test-runner-local-build-workflow.md
@@ -1,8 +1,8 @@
-```yml renderer="common" language="ts" tabTitle="yml"
-# .github/workflows/storybook-tests.yml
-
+```yml filename=".github/workflows/storybook-tests.yml" renderer="common" language="ts" tabTitle="yml"
 name: 'Storybook Tests'
+
 on: push
+
 jobs:
   test:
     timeout-minutes: 60
@@ -24,4 +24,3 @@ jobs:
             "npx http-server storybook-static --port 6006 --silent" \
             "npx wait-on tcp:127.0.0.1:6006 && yarn test-storybook"
 ```
-
diff --git a/docs/_snippets/test-runner-no-index-json.md b/docs/_snippets/test-runner-no-index-json.md
index c84436d8ee80..6f576c6494c8 100644
--- a/docs/_snippets/test-runner-no-index-json.md
+++ b/docs/_snippets/test-runner-no-index-json.md
@@ -9,4 +9,3 @@ pnpm run test-storybook --no-index-json
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn test-storybook --no-index-json
 ```
-
diff --git a/docs/_snippets/test-runner-snapshot-resolver-custom-directory.md b/docs/_snippets/test-runner-snapshot-resolver-custom-directory.md
index b76fb087f375..023ec13fb63d 100644
--- a/docs/_snippets/test-runner-snapshot-resolver-custom-directory.md
+++ b/docs/_snippets/test-runner-snapshot-resolver-custom-directory.md
@@ -16,4 +16,3 @@ export default {
   testPathForConsistencyCheck: 'example',
 };
 ```
-
diff --git a/docs/_snippets/test-runner-tags-include.md b/docs/_snippets/test-runner-tags-include.md
index 60be0f9361c7..4000cde41e51 100644
--- a/docs/_snippets/test-runner-tags-include.md
+++ b/docs/_snippets/test-runner-tags-include.md
@@ -17,4 +17,3 @@ const config: TestRunnerConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/test-runner-waitpageready.md b/docs/_snippets/test-runner-waitpageready.md
index 0601ff1aed77..b608c4180388 100644
--- a/docs/_snippets/test-runner-waitpageready.md
+++ b/docs/_snippets/test-runner-waitpageready.md
@@ -51,4 +51,3 @@ const config: TestRunnerConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/test-runner-with-deploy-event-workflow.md b/docs/_snippets/test-runner-with-deploy-event-workflow.md
index 61ece061f2a6..201aa115692b 100644
--- a/docs/_snippets/test-runner-with-deploy-event-workflow.md
+++ b/docs/_snippets/test-runner-with-deploy-event-workflow.md
@@ -1,8 +1,8 @@
-```yml renderer="common" language="ts" tabTitle="yml"
-# .github/workflows/storybook-tests.yml
-
+```yml filename=".github/workflows/storybook-tests.yml" renderer="common" language="ts" tabTitle="yml"
 name: Storybook Tests
+
 on: deployment_status
+
 jobs:
   test:
     timeout-minutes: 60
@@ -22,4 +22,3 @@ jobs:
         env:
           TARGET_URL: '${{ github.event.deployment_status.target_url }}'
 ```
-
diff --git a/docs/_snippets/test-runner-with-index-json.md b/docs/_snippets/test-runner-with-index-json.md
index 578e05423cf9..c364b50f6c25 100644
--- a/docs/_snippets/test-runner-with-index-json.md
+++ b/docs/_snippets/test-runner-with-index-json.md
@@ -9,4 +9,3 @@ pnpm run test-storybook --index-json
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn test-storybook --index-json
 ```
-
diff --git a/docs/_snippets/typed-csf-file.md b/docs/_snippets/typed-csf-file.md
index 41bac1d67f61..02e76c156f89 100644
--- a/docs/_snippets/typed-csf-file.md
+++ b/docs/_snippets/typed-csf-file.md
@@ -81,4 +81,3 @@ export const Primary: StoryObj = {
   },
 };
 ```
-
diff --git a/docs/_snippets/upgrade-command-specific-version.md b/docs/_snippets/upgrade-command-specific-version.md
index edd9ce329bc4..606cd1d64610 100644
--- a/docs/_snippets/upgrade-command-specific-version.md
+++ b/docs/_snippets/upgrade-command-specific-version.md
@@ -1,4 +1,4 @@
-```shell renderer="common" language="js" packageManager="npx"
+```shell renderer="common" language="js" packageManager="npm"
 npx storybook@7.6.6 upgrade
 ```
 
@@ -9,4 +9,3 @@ pnpm dlx storybook@7.6.6 upgrade
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn dlx storybook@7.6.6 upgrade
 ```
-
diff --git a/docs/_snippets/vue-jest-optional-config-scripts.md b/docs/_snippets/vue-jest-optional-config-scripts.md
deleted file mode 100644
index 16e373f80638..000000000000
--- a/docs/_snippets/vue-jest-optional-config-scripts.md
+++ /dev/null
@@ -1,16 +0,0 @@
-```json renderer="vue" language="js" tabTitle="jest"
-{
-  "scripts": {
-    "test": "jest --setupFiles ./setupFile.js"
-  }
-}
-```
-
-```json renderer="vue" language="ts" tabTitle="jest"
-{
-  "scripts": {
-    "test": "jest --setupFiles ./setupFile.js"
-  }
-}
-```
-
diff --git a/docs/_snippets/vue-vite-framework-options.md b/docs/_snippets/vue-vite-framework-options.md
new file mode 100644
index 000000000000..ce87365d5614
--- /dev/null
+++ b/docs/_snippets/vue-vite-framework-options.md
@@ -0,0 +1,25 @@
+```js filename=".storybook/main.js" renderer="vue" language="js"
+export default {
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {
+      docgen: 'vue-component-meta',
+    },
+  },
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts"
+import type { StorybookConfig } from '@storybook/vue3-vite';
+
+const config: StorybookConfig = {
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {
+      docgen: 'vue-component-meta',
+    },
+  },
+};
+
+export default config;
+```
diff --git a/docs/_snippets/vue-webpack5-framework-options.md b/docs/_snippets/vue-webpack5-framework-options.md
new file mode 100644
index 000000000000..7661567b00e9
--- /dev/null
+++ b/docs/_snippets/vue-webpack5-framework-options.md
@@ -0,0 +1,25 @@
+```js filename=".storybook/main.js" renderer="vue" language="js"
+export default {
+  framework: {
+    name: '@storybook/vue3-webpack5',
+    options: {
+      // ...
+    },
+  },
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts"
+import type { StorybookConfig } from '@storybook/vue-webpack5';
+
+const config: StorybookConfig = {
+  framework: {
+    name: '@storybook/vue3-webpack5',
+    options: {
+      // ...
+    },
+  },
+};
+
+export default config;
+```
diff --git a/docs/_snippets/vue3-vite-add-framework.md b/docs/_snippets/vue3-vite-add-framework.md
index 2d4e13180f0a..5c617faae463 100644
--- a/docs/_snippets/vue3-vite-add-framework.md
+++ b/docs/_snippets/vue3-vite-add-framework.md
@@ -15,4 +15,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/vue3-vite-install.md b/docs/_snippets/vue3-vite-install.md
index f2ea6a46843c..45a4b77c3dcd 100644
--- a/docs/_snippets/vue3-vite-install.md
+++ b/docs/_snippets/vue3-vite-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/vue3-vite
 ```shell renderer="vue" language="js" packageManager="yarn"
 yarn add --dev @storybook/vue3-vite
 ```
-
diff --git a/docs/_snippets/vue3-webpack5-add-framework.md b/docs/_snippets/vue3-webpack5-add-framework.md
index 02c792ac8262..7c83b82bd090 100644
--- a/docs/_snippets/vue3-webpack5-add-framework.md
+++ b/docs/_snippets/vue3-webpack5-add-framework.md
@@ -15,4 +15,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/vue3-webpack5-install.md b/docs/_snippets/vue3-webpack5-install.md
index b77fa45d7b3e..55eb9006b2ca 100644
--- a/docs/_snippets/vue3-webpack5-install.md
+++ b/docs/_snippets/vue3-webpack5-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/vue3-webpack5
 ```shell renderer="vue" language="js" packageManager="yarn"
 yarn add --dev @storybook/vue3-webpack5
 ```
-
diff --git a/docs/_snippets/web-components-vite-add-framework.md b/docs/_snippets/web-components-vite-add-framework.md
index f9a5c03598a0..140ad899ff0a 100644
--- a/docs/_snippets/web-components-vite-add-framework.md
+++ b/docs/_snippets/web-components-vite-add-framework.md
@@ -15,4 +15,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/web-components-vite-framework-options.md b/docs/_snippets/web-components-vite-framework-options.md
new file mode 100644
index 000000000000..39946561e2d8
--- /dev/null
+++ b/docs/_snippets/web-components-vite-framework-options.md
@@ -0,0 +1,25 @@
+```js filename=".storybook/main.js" renderer="web-components" language="js"
+export default {
+  framework: {
+    name: '@storybook/web-components-vite',
+    options: {
+      // ...
+    },
+  },
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts"
+import type { StorybookConfig } from '@storybook/web-components-vite';
+
+const config: StorybookConfig = {
+  framework: {
+    name: '@storybook/web-components-vite',
+    options: {
+      // ...
+    },
+  },
+};
+
+export default config;
+```
diff --git a/docs/_snippets/web-components-vite-install.md b/docs/_snippets/web-components-vite-install.md
index 2bb35f1e280a..c1bb0f6f47d9 100644
--- a/docs/_snippets/web-components-vite-install.md
+++ b/docs/_snippets/web-components-vite-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/web-components-vite
 ```shell renderer="web-components" language="js" packageManager="yarn"
 yarn add --dev @storybook/web-components-vite
 ```
-
diff --git a/docs/_snippets/web-components-webpack5-add-framework.md b/docs/_snippets/web-components-webpack5-add-framework.md
index 7df40eb92288..5fbc8b5f5abf 100644
--- a/docs/_snippets/web-components-webpack5-add-framework.md
+++ b/docs/_snippets/web-components-webpack5-add-framework.md
@@ -1,8 +1,7 @@
 ```js filename=".storybook/main.js" renderer="web-components" language="js"
 export default {
   // ...
-  // framework: '@storybook/react-webpack5', 👈 Remove this
-  framework: '@storybook/nextjs', // 👈 Add this
+  framework: '@storybook/web-components-webpack5', // 👈 Add this
 };
 ```
 
@@ -16,4 +15,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/web-components-webpack5-framework-options.md b/docs/_snippets/web-components-webpack5-framework-options.md
new file mode 100644
index 000000000000..e2271207d624
--- /dev/null
+++ b/docs/_snippets/web-components-webpack5-framework-options.md
@@ -0,0 +1,26 @@
+```js filename=".storybook/main.js" renderer="web-components" language="js"
+export default {
+  // ...
+  framework: {
+    name: '@storybook/web-components-webpack5',
+    options: {
+      // ...
+    },
+  },
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts"
+import type { StorybookConfig } from '@storybook/web-components-webpack5';
+
+const config: StorybookConfig = {
+  framework: {
+    name: '@storybook/web-components-webpack5',
+    options: {
+      // ...
+    },
+  },
+};
+
+export default config;
+```
diff --git a/docs/_snippets/web-components-webpack5-install.md b/docs/_snippets/web-components-webpack5-install.md
index 23529f1184c4..633c15e1777c 100644
--- a/docs/_snippets/web-components-webpack5-install.md
+++ b/docs/_snippets/web-components-webpack5-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/web-components-webpack5
 ```shell renderer="web-components" language="js" packageManager="yarn"
 yarn add --dev @storybook/web-components-webpack5
 ```
-
diff --git a/docs/_snippets/web-components-webpack5-transpilation.md b/docs/_snippets/web-components-webpack5-transpilation.md
new file mode 100644
index 000000000000..5c7bf66bcecf
--- /dev/null
+++ b/docs/_snippets/web-components-webpack5-transpilation.md
@@ -0,0 +1,33 @@
+```js filename=".storybook/main.js" renderer="web-components" language="js"
+export default {
+  webpackFinal: async (config) => {
+    // Find web-components rule for extra transpilation
+    const webComponentsRule = config.module.rules.find(
+      (rule) => rule.use && rule.use.options && rule.use.options.babelrc === false
+    );
+    // Add your own `my-library`
+    webComponentsRule.test.push(new RegExp(`node_modules(\\/|\\\\)my-library(.*)\\.js$`));
+
+    return config;
+  },
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts"
+import type { StorybookConfig } from '@storybook/web-components-webpack5';
+
+const config: StorybookConfig = {
+  webpackFinal: async (config) => {
+    // Find web-components rule for extra transpilation
+    const webComponentsRule = config.module.rules.find(
+      (rule) => rule.use && rule.use.options && rule.use.options.babelrc === false
+    );
+    // Add your own `my-library`
+    webComponentsRule.test.push(new RegExp(`node_modules(\\/|\\\\)my-library(.*)\\.js$`));
+
+    return config;
+  },
+};
+
+export default config;
+```
diff --git a/docs/_snippets/your-component.md b/docs/_snippets/your-component.md
index 34d5c4f5a7d2..689566b0323d 100644
--- a/docs/_snippets/your-component.md
+++ b/docs/_snippets/your-component.md
@@ -322,7 +322,7 @@ export const FirstStory: Story = {
 };
 ```
 
-```js filename="YourComponent.stories.js" renderer="vue" language="js" tabTitle="3"
+```js filename="YourComponent.stories.js" renderer="vue" language="js"
 import YourComponent from './YourComponent.vue';
 
 //👇 This default export determines where your story goes in the story list
@@ -349,9 +349,7 @@ export const FirstStory = {
 };
 ```
 
-```ts filename="YourComponent.stories.js" renderer="vue" language="ts-4-9" tabTitle="3"
-import type { Meta, StoryObj } from '@storybook/vue3';
-
+```ts filename="YourComponent.stories.js" renderer="vue" language="ts-4-9"
 import YourComponent from './YourComponent.vue';
 
 const meta = {
@@ -381,7 +379,7 @@ export const Primary: Story = {
 };
 ```
 
-```ts filename="YourComponent.stories.ts" renderer="vue" language="ts" tabTitle="3"
+```ts filename="YourComponent.stories.ts" renderer="vue" language="ts"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import YourComponent from './YourComponent.vue';
diff --git a/docs/_snippets/your-theme.md b/docs/_snippets/your-theme.md
index b491ad8b608f..85b8021fd87c 100644
--- a/docs/_snippets/your-theme.md
+++ b/docs/_snippets/your-theme.md
@@ -40,4 +40,3 @@ export default create({
   inputBorderRadius: 2,
 });
 ```
-
diff --git a/docs/addons/addon-knowledge-base.mdx b/docs/addons/addon-knowledge-base.mdx
index c2dbdb497d30..ab0ef1268d52 100644
--- a/docs/addons/addon-knowledge-base.mdx
+++ b/docs/addons/addon-knowledge-base.mdx
@@ -79,7 +79,7 @@ Complementing the components, also included is a set of UI primitives. Use the c
 
 When you're developing your addon as a package, you can’t use `npm link` to add it to your project. List your addon as a local dependency into your package.json:
 
-```json
+```json title="package.json"
 {
   "dependencies": {
     "@storybook/addon-controls": "file:///home/username/myrepo"
@@ -99,7 +99,7 @@ While developing your addon, you can configure HMR (hot module replacement) to r
 
 If you're developing a standalone addon, add a new script to `package.json` with the following:
 
-```json
+```json title="package.json"
 {
   "scripts": {
     "start": "npm run build -- --watch"
diff --git a/docs/addons/addon-migration-guide.mdx b/docs/addons/addon-migration-guide.mdx
index bf1c26309f04..cc032f6f24c1 100644
--- a/docs/addons/addon-migration-guide.mdx
+++ b/docs/addons/addon-migration-guide.mdx
@@ -15,7 +15,7 @@ We sincerely appreciate the dedication and effort addon creators put into keepin
 
 Begin by updating your Storybook dependencies. Use the `next` tag for pre-release versions, `latest` for the most recent stable release, or specify the version directly.
 
-```jsonc
+```jsonc title="package.json"
 {
   "dependencies": {
     "@storybook/client-logger": "next" // or "latest", or "^8.0.0"
diff --git a/docs/addons/addon-types.mdx b/docs/addons/addon-types.mdx
index 8b2aef939ff8..5c540cd0bdb0 100644
--- a/docs/addons/addon-types.mdx
+++ b/docs/addons/addon-types.mdx
@@ -40,11 +40,7 @@ Use this boilerplate code to add a new `button` to Storybook's Toolbar:
 {/* prettier-ignore-end */}
 
 <Callout variant="info">
-  The `match` property allows you to conditionally render your toolbar addon, [based on the current view](./writing-addons.mdx#conditionally-render-the-addon).
-
-  <hr style={{ margin: '-0.75em 0 0.75em' }} />
-
-  The `icon` element used in the example loads the icons from the `@storybook/components` package. See [here](../faq.mdx#what-icons-are-available-for-my-toolbar-or-my-addon) for the list of available icons that you can use.
+  The `match` property allows you to conditionally render your toolbar addon, [based on the current view](./writing-addons.mdx#conditionally-render-the-addon). The `icon` element used in the example loads the icons from the `@storybook/components` package. See [here](../faq.mdx#what-icons-are-available-for-my-toolbar-or-my-addon) for the list of available icons that you can use.
 </Callout>
 
 ### Tabs
diff --git a/docs/addons/addons-api.mdx b/docs/addons/addons-api.mdx
index 42cbb56c3a90..e5b580597b4f 100644
--- a/docs/addons/addons-api.mdx
+++ b/docs/addons/addons-api.mdx
@@ -95,7 +95,7 @@ The `selectStory` API method allows you to select a single story. It accepts the
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-with-addon-example.md" usesCsf3 csf2Path="addons/addons-api#snippet-button-story-with-addon-example" />
+<CodeSnippets path="button-story-with-addon-example.md" />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/addons/integration-catalog.mdx b/docs/addons/integration-catalog.mdx
index f1b6e63fe9da..8439c033f847 100644
--- a/docs/addons/integration-catalog.mdx
+++ b/docs/addons/integration-catalog.mdx
@@ -59,10 +59,8 @@ Use the list below as a reference when filling in the values for both the `suppo
   Make sure to copy each item **exactly** as listed so that we can properly index your addon in our catalog.
 </Callout>
 
-```json
+```json title="package.json"
 {
-  // package.json
-
   "name": "storybook-addon-outline",
   "version": "1.0.0",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
diff --git a/docs/addons/writing-addons.mdx b/docs/addons/writing-addons.mdx
index fe3cb45ffd1b..b31aec29f869 100644
--- a/docs/addons/writing-addons.mdx
+++ b/docs/addons/writing-addons.mdx
@@ -26,7 +26,7 @@ The addon built in this guide is a UI-based addon, specifically a [toolbar](./ad
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="storybook-addon-toolkit-toolbar-example.md" />
+<CodeSnippets path="storybook-addon-toolkit-types.md" />
 
 {/* prettier-ignore-end */}
 
@@ -68,9 +68,7 @@ By default, code for the UI-based addons is located in one of the following file
 
 Going through the code blocks in sequence:
 
-```ts
-// src/Tool.tsx
-
+```ts title="src/Tool.tsx"
 import { useGlobals, useStorybookApi } from '@storybook/manager-api';
 import { IconButton } from '@storybook/components';
 import { LightningIcon } from '@storybook/icons';
@@ -80,9 +78,7 @@ The [`useGlobals`](./addons-api.mdx#useglobals) and [`useStorybookApi`](./addons
 
 The `IconButton` or `Button` component from the [`@storybook/components`](https://www.npmjs.com/package/@storybook/components) package can be used to render the buttons in the toolbar. The [`@storybook/icons`](https://github.com/storybookjs/icons) package provides a large set of appropriately sized and styled icons to choose from.
 
-```ts
-// src/Tool.tsx
-
+```ts title="src/Tool.tsx"
 export const Tool = memo(function MyAddonSelector() {
   const [globals, updateGlobals] = useGlobals();
   const api = useStorybookApi();
@@ -175,7 +171,7 @@ Storybook addons, similar to most packages in the JavaScript ecosystem, are dist
 
 The first category of metadata is related to the addon itself. This includes the entry for the module, which files to include when the addon is published. And the required configuration to integrate the addon with Storybook, allowing it to be used by its consumers.
 
-```json
+```json title="package.json"
 {
   "exports": {
     ".": {
@@ -213,7 +209,7 @@ The first category of metadata is related to the addon itself. This includes the
 
 The second metadata category is related to the [integration catalog](https://storybook.js.org/integrations). Most of this information is already pre-configured by the Addon Kit. However, items like the display name, icon, and frameworks must be configured via the `storybook` property to be displayed in the catalog.
 
-```json
+```json title="package.json"
 {
   "name": "my-storybook-addon",
   "version": "1.0.0",
diff --git a/docs/api/csf.mdx b/docs/api/csf.mdx
index 68f2d2f37266..efe4c1394d6a 100644
--- a/docs/api/csf.mdx
+++ b/docs/api/csf.mdx
@@ -10,7 +10,7 @@ sidebar:
 Component Story Format (CSF) is the recommended way to [write stories](../writing-stories/index.mdx). It's an [open standard](https://github.com/ComponentDriven/csf) based on ES6 modules that is portable beyond Storybook.
 
 <Callout variant="info" icon="💡">
-  If you have stories written in the older `storiesOf()` syntax, it was removed in Storybook 8.0 and is no longer maintained. We recommend migrating your stories to CSF. See the [migration guide](../migration-guide/index.mdx#storiesof-to-csf) for more information.
+  If you have stories written in the older `storiesOf()` syntax, it was removed in Storybook 8.0 and is no longer maintained. We recommend migrating your stories to CSF. See the [migration guide](../migration-guide/index.mdx#major-breaking-changes) for more information.
 </Callout>
 
 In CSF, stories and component metadata are defined as ES Modules. Every component story file consists of a required [default export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_the_default_export) and one or more [named exports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export).
@@ -35,7 +35,7 @@ With CSF, every named export in the file represents a story object by default.
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="my-component-story-basic-and-props.md" usesCsf3 csf2Path="api/csf#snippet-my-component-story-basic-and-props" />
+<CodeSnippets path="my-component-story-basic-and-props.md" />
 
 {/* prettier-ignore-end */}
 
@@ -57,7 +57,7 @@ Storybook's `name` configuration element is helpful in specific circumstances. C
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="my-component-story-with-storyname.md" usesCsf3 csf2Path="api/csf#snippet-my-component-story-with-storyname" />
+<CodeSnippets path="my-component-story-with-storyname.md" />
 
 {/* prettier-ignore-end */}
 
@@ -69,7 +69,7 @@ Consider Storybook’s ["Button" example](../writing-stories/index.mdx#defining-
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-click-handler.md" usesCsf3 csf2Path="api/csf#snippet-button-story-click-handler" />
+<CodeSnippets path="button-story-click-handler.md" />
 
 {/* prettier-ignore-end */}
 
@@ -77,7 +77,7 @@ Now consider the same example, re-written with args:
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-click-handler-args.md" usesCsf3 csf2Path="api/csf#snippet-button-story-click-handler-args" />
+<CodeSnippets path="button-story-click-handler-args.md" />
 
 {/* prettier-ignore-end */}
 
@@ -85,7 +85,7 @@ Or even more simply:
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-click-handler-simplificated.md" usesCsf3 csf2Path="api/csf#snippet-button-story-click-handler-simplificated" />
+<CodeSnippets path="button-story-click-handler-simplificated.md" />
 
 {/* prettier-ignore-end */}
 
@@ -101,7 +101,7 @@ A good use case for the `play` function is a form component. With previous Story
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="login-form-with-play-function.md" usesCsf3 csf2Path="api/csf#snippet-login-form-with-play-function" />
+<CodeSnippets path="login-form-with-play-function.md" />
 
 {/* prettier-ignore-end */}
 
@@ -114,7 +114,7 @@ When the story renders in the UI, Storybook executes each step defined in the `p
 
   {/* prettier-ignore-start */}
 
-  <CodeSnippets path="component-story-with-custom-render-function.md" usesCsf3 csf2Path="api/csf#snippet-component-story-with-custom-render-function" />
+  <CodeSnippets path="component-story-with-custom-render-function.md" />
 
   {/* prettier-ignore-end */}
 
@@ -152,7 +152,7 @@ Consider the following story file:
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="my-component-story-with-nonstory.md" usesCsf3 csf2Path="api/csf#snippet-my-component-story-with-nonstory" />
+<CodeSnippets path="my-component-story-with-nonstory.md" />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/api/doc-blocks/doc-block-argtypes.mdx b/docs/api/doc-blocks/doc-block-argtypes.mdx
index f7009dd1ee32..62223e753138 100644
--- a/docs/api/doc-blocks/doc-block-argtypes.mdx
+++ b/docs/api/doc-blocks/doc-block-argtypes.mdx
@@ -17,9 +17,7 @@ The `ArgTypes` block can be used to show a static table of [arg types](../arg-ty
 
 {/* prettier-ignore-start */}
 
-```md
-{/* ButtonDocs.mdx */}
-
+```md title="ButtonDocs.mdx"
 import { Meta, ArgTypes } from '@storybook/blocks';
 import * as ButtonStories from './Button.stories';
 
@@ -51,9 +49,7 @@ import { ArgTypes } from '@storybook/blocks';
 
   {/* prettier-ignore-start */}
 
-  ```md
-  {/* ButtonDocs.mdx */}
-
+  ```md title="ButtonDocs.mdx"
   <ArgTypes of={ButtonStories} exclude={['style']} />
   ```
 
diff --git a/docs/api/doc-blocks/doc-block-canvas.mdx b/docs/api/doc-blocks/doc-block-canvas.mdx
index bee523de54be..1202bdd25abd 100644
--- a/docs/api/doc-blocks/doc-block-canvas.mdx
+++ b/docs/api/doc-blocks/doc-block-canvas.mdx
@@ -15,9 +15,7 @@ When using the Canvas block in MDX, it references a story with the `of` prop:
 
 {/* prettier-ignore-start */}
 
-```md
-{/* ButtonDocs.mdx */}
-
+```md title="ButtonDocs.mdx"
 import { Meta, Canvas } from '@storybook/blocks';
 import * as ButtonStories from './Button.stories';
 
@@ -53,9 +51,7 @@ import { Canvas } from '@storybook/blocks';
 
   {/* prettier-ignore-start */}
 
-  ```md
-  {/* ButtonDocs.mdx */}
-
+  ```md title="ButtonDocs.mdx"
   <Canvas of={ButtonStories.Basic} sourceState="shown" />
   ```
 
@@ -87,15 +83,13 @@ Provides any additional custom actions to show in the bottom right corner. These
 
 {/* prettier-ignore-start */}
 
-```md
-{/* ButtonDocs.mdx */}
-
+```md title="ButtonDocs.mdx"
 import { Meta, Story, Canvas, SourceState } from '@storybook/blocks';
 import * as ButtonStories from './Button.stories';
 
 <Meta of={ButtonStories} />
 
-{/* with an additional action */}
+{/* With an additional action */}
 <Canvas
   additionalActions={[
     {
@@ -146,9 +140,7 @@ You can render a story from a CSF file that you haven’t attached to the MDX fi
 
 {/* prettier-ignore-start */}
 
-```md
-{/* ButtonDocs.mdx */}
-
+```md title="ButtonDocs.mdx"
 import { Meta, Canvas } from '@storybook/blocks';
 import * as ButtonStories from './Button.stories';
 import * as HeaderStories from './Header.stories';
diff --git a/docs/api/doc-blocks/doc-block-colorpalette.mdx b/docs/api/doc-blocks/doc-block-colorpalette.mdx
index a0f31720ea4f..0459af784b06 100644
--- a/docs/api/doc-blocks/doc-block-colorpalette.mdx
+++ b/docs/api/doc-blocks/doc-block-colorpalette.mdx
@@ -13,9 +13,7 @@ The `ColorPalette` block allows you to document all color-related items (e.g., s
 
 {/* prettier-ignore-start */}
 
-```md
-{/* Colors.mdx */}
-
+```md title="Colors.mdx"
 import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
 
 <Meta title="Colors" />
diff --git a/docs/api/doc-blocks/doc-block-controls.mdx b/docs/api/doc-blocks/doc-block-controls.mdx
index 5c11708a0019..32bce38ca5ec 100644
--- a/docs/api/doc-blocks/doc-block-controls.mdx
+++ b/docs/api/doc-blocks/doc-block-controls.mdx
@@ -17,9 +17,7 @@ The `Controls` block can be used to show a dynamic table of args for a given sto
 
 {/* prettier-ignore-start */}
 
-```md
-{/* ButtonDocs.mdx */}
-
+```md title="ButtonDocs.mdx"
 import { Meta, Canvas, Controls } from '@storybook/blocks';
 import * as ButtonStories from './Button.stories'
 
@@ -59,9 +57,7 @@ import { Controls } from '@storybook/blocks';
 
   {/* prettier-ignore-start */}
 
-  ```md
-  {/* ButtonDocs.mdx */}
-
+  ```md title="ButtonDocs.mdx"
   <Controls of={ButtonStories} exclude={['style']} />
   ```
 
diff --git a/docs/api/doc-blocks/doc-block-description.mdx b/docs/api/doc-blocks/doc-block-description.mdx
index 15cbf9843764..538306e76a75 100644
--- a/docs/api/doc-blocks/doc-block-description.mdx
+++ b/docs/api/doc-blocks/doc-block-description.mdx
@@ -13,9 +13,7 @@ The `Description` block displays the description for a component, story, or meta
 
 {/* prettier-ignore-start */}
 
-```md
-{/* ButtonDocs.mdx */}
-
+```md title="ButtonDocs.mdx"
 import { Meta, Description } from '@storybook/blocks';
 import * as ButtonStories from './Button.stories';
 
@@ -63,12 +61,9 @@ When documenting a component, reference a meta export in the `of` prop (see belo
 
 This flow gives you powerful ways to override the description for each scenario. Take the following example:
 
-```jsx
-// Button.jsx
-
+```jsx title="Button.jsx"
 /**
- * # The Button component
- * Shows a button
+ * The Button component shows a button
  */
 export const Button = () => <button>Click me</button>;
 ```
@@ -81,9 +76,7 @@ export const Button = () => <button>Click me</button>;
 
 {/* prettier-ignore-start */}
 
-```md
-{/* ButtonDocs.mdx */}
-
+```md title="ButtonDocs.mdx"
 import { Meta, Description } from '@storybook/blocks';
 import * as ButtonStories from './Button.stories';
 
diff --git a/docs/api/doc-blocks/doc-block-icongallery.mdx b/docs/api/doc-blocks/doc-block-icongallery.mdx
index 7da3d7960cc2..be79b79e9213 100644
--- a/docs/api/doc-blocks/doc-block-icongallery.mdx
+++ b/docs/api/doc-blocks/doc-block-icongallery.mdx
@@ -11,12 +11,14 @@ The `IconGallery` block enables you to easily document React icon components ass
 
 ![Screenshot of IconGallery and IconItem blocks](../../_assets/api/doc-block-icongallery.png)
 
-{/* prettier-ignore-start */}
+## Documenting icons
+
+To document a set of icons, use the `IconGallery` block to display them in a grid. Each icon is wrapped in an `IconItem` block, enabling you to specify its properties, such as the name and the icon itself.
 
-```md
-{/* Iconography.mdx */}
+{/* prettier-ignore-start */}
 
-import { Meta, Title, IconGallery, IconItem } from '@storybook/blocks';
+```md title="Iconography.mdx"
+import { Meta, IconGallery, IconItem } from '@storybook/blocks';
 
 import { Icon as IconExample } from './Icon';
 
@@ -60,6 +62,31 @@ import { Icon as IconExample } from './Icon';
 
 {/* prettier-ignore-end */}
 
+### Automate icon documentation
+
+If you're working on a project that contains a large number of icons that you want to document, you can extend the `IconGallery` block, wrap `IconItem` in a loop, and iterate over the icons you want to document, including their properties. For example:
+
+{/* prettier-ignore-start */}
+
+```md title="Iconography.mdx"
+import { Meta, IconGallery, IconItem } from '@storybook/blocks';
+
+import { Icon as IconExample } from './Icon';
+import * as icons from './icons';
+
+# Iconography
+
+<IconGallery>
+  {Object.keys(icons).map((icon) => (
+    <IconItem name={icon}>
+      <IconExample icon={icon} />
+    </IconItem>
+  ))}
+</IconGallery>
+```
+
+{/* prettier-ignore-end */}
+
 ## IconGallery
 
 ```js
diff --git a/docs/api/doc-blocks/doc-block-markdown.mdx b/docs/api/doc-blocks/doc-block-markdown.mdx
index ea807584bbe2..2732cd9b2cb5 100644
--- a/docs/api/doc-blocks/doc-block-markdown.mdx
+++ b/docs/api/doc-blocks/doc-block-markdown.mdx
@@ -13,9 +13,7 @@ When importing markdown files, it’s important to use the `?raw` suffix on the
 
 {/* prettier-ignore-start */}
 
-````md
-{/* README.md */}
-
+````md title="README.md"
 # Button
 
 Primary UI component for user interaction
@@ -29,9 +27,7 @@ import { Button } from "@storybook/design-system";
 
 {/* prettier-ignore-start */}
 
-```md
-{/* Header.mdx */}
-
+```md title="Header.mdx"
 // DON'T do this, will error
 import ReadMe from './README.md';
 // DO this, will work
diff --git a/docs/api/doc-blocks/doc-block-meta.mdx b/docs/api/doc-blocks/doc-block-meta.mdx
index f0121df062e1..7d7cc0f724fa 100644
--- a/docs/api/doc-blocks/doc-block-meta.mdx
+++ b/docs/api/doc-blocks/doc-block-meta.mdx
@@ -12,9 +12,7 @@ The `Meta` block is used to [attach](#attached-vs-unattached) a custom MDX docs
 
 {/* prettier-ignore-start */}
 
-```md
-{/* ButtonDocs.mdx */}
-
+```md title="ButtonDocs.mdx"
 import { Meta } from '@storybook/blocks';
 import * as ButtonStories from './Button.stories';
 
@@ -49,9 +47,7 @@ Sets the name of the [attached](#attached-vs-unattached) doc entry. You can atta
 
 {/* prettier-ignore-start */}
 
-```md
-{/* Component.mdx */}
-
+```md title="Component.mdx"
 import { Meta } from '@storybook/blocks';
 import * as ComponentStories from './component.stories';
 
@@ -69,9 +65,7 @@ Specifies which CSF file is [attached](#attached-vs-unattached) to this MDX file
 
 {/* prettier-ignore-start */}
 
-```md
-{/* ButtonDocs.mdx */}
-
+```md title="ButtonDocs.mdx"
 import { Meta, Story } from '@storybook/blocks';
 import * as ButtonStories from './Button.stories';
 
diff --git a/docs/api/doc-blocks/doc-block-primary.mdx b/docs/api/doc-blocks/doc-block-primary.mdx
index 62882f3a1d88..28dd3d678fd2 100644
--- a/docs/api/doc-blocks/doc-block-primary.mdx
+++ b/docs/api/doc-blocks/doc-block-primary.mdx
@@ -13,9 +13,7 @@ The `Primary` block displays the primary (first defined in the stories file) sto
 
 {/* prettier-ignore-start */}
 
-```md
-{/* ButtonDocs.mdx */}
-
+```md title="ButtonDocs.mdx"
 import { Meta, Primary } from '@storybook/blocks';
 import * as ButtonStories from './Button.stories';
 
diff --git a/docs/api/doc-blocks/doc-block-source.mdx b/docs/api/doc-blocks/doc-block-source.mdx
index e2d5f94d5985..f3edb6d6df9d 100644
--- a/docs/api/doc-blocks/doc-block-source.mdx
+++ b/docs/api/doc-blocks/doc-block-source.mdx
@@ -13,9 +13,7 @@ The `Source` block is used to render a snippet of source code directly.
 
 {/* prettier-ignore-start */}
 
-```md
-{/* ButtonDocs.mdx */}
-
+```md title="ButtonDocs.mdx"
 import { Meta, Source } from '@storybook/blocks';
 import * as ButtonStories from './Button.stories';
 
@@ -47,9 +45,7 @@ import { Source } from '@storybook/blocks';
 
   {/* prettier-ignore-start */}
 
-  ```md
-  {/* ButtonDocs.mdx */}
-
+  ```md title="ButtonDocs.mdx"
   <Source of={ButtonStories.Basic} language="tsx" />
   ```
 
@@ -68,9 +64,7 @@ Provides the source code to be rendered.
 
 {/* prettier-ignore-start */}
 
-```md
-{/* ButtonDocs.mdx */}
-
+```md title="ButtonDocs.mdx"
 import { Meta, Source } from '@storybook/blocks';
 import * as ButtonStories from './Button.stories';
 
diff --git a/docs/api/doc-blocks/doc-block-stories.mdx b/docs/api/doc-blocks/doc-block-stories.mdx
index 42cd9fcc2c95..6dcd5e0bff59 100644
--- a/docs/api/doc-blocks/doc-block-stories.mdx
+++ b/docs/api/doc-blocks/doc-block-stories.mdx
@@ -13,9 +13,7 @@ The `Stories` block renders the full collection of stories in a stories file.
 
 {/* prettier-ignore-start */}
 
-```md
-{/* ButtonDocs.mdx */}
-
+```md title="ButtonDocs.mdx"
 import { Meta, Stories } from '@storybook/blocks';
 import * as ButtonStories from './Button.stories';
 
diff --git a/docs/api/doc-blocks/doc-block-story.mdx b/docs/api/doc-blocks/doc-block-story.mdx
index c5a8828f421f..df1446ecb550 100644
--- a/docs/api/doc-blocks/doc-block-story.mdx
+++ b/docs/api/doc-blocks/doc-block-story.mdx
@@ -21,9 +21,7 @@ In Storybook Docs, you can render any of your stories from your CSF files in the
 
 {/* prettier-ignore-start */}
 
-```md
-{/* ButtonDocs.mdx */}
-
+```md title="ButtonDocs.mdx"+
 import { Meta, Story } from '@storybook/blocks';
 import * as ButtonStories from './Button.stories';
 
@@ -55,9 +53,7 @@ import { Story } from '@storybook/blocks';
 
   {/* prettier-ignore-start */}
 
-  ```md
-  {/* ButtonDocs.mdx */}
-
+  ```md title="ButtonDocs.mdx"
   <Story of={ButtonStories.Basic} autoplay />
   ```
 
@@ -114,9 +110,7 @@ You can render a story from a CSF file that you haven’t attached to the MDX fi
 
 {/* prettier-ignore-start */}
 
-```md
-{/* ButtonDocs.mdx */}
-
+```md title="ButtonDocs.mdx"
 import { Meta, Story } from '@storybook/blocks';
 import * as ButtonStories from './Button.stories';
 import * as HeaderStories from './Header.stories';
diff --git a/docs/api/doc-blocks/doc-block-subtitle.mdx b/docs/api/doc-blocks/doc-block-subtitle.mdx
index a04da42c328d..dee2b243f534 100644
--- a/docs/api/doc-blocks/doc-block-subtitle.mdx
+++ b/docs/api/doc-blocks/doc-block-subtitle.mdx
@@ -13,9 +13,7 @@ The `Subtitle` block can serve as a secondary heading for your docs entry.
 
 {/* prettier-ignore-start */}
 
-```md
-{/* ButtonDocs.mdx */}
-
+```md title="ButtonDocs.mdx"
 import { Subtitle } from '@storybook/blocks';
 
 <Subtitle>This is the subtitle</Subtitle>
diff --git a/docs/api/doc-blocks/doc-block-title.mdx b/docs/api/doc-blocks/doc-block-title.mdx
index 3d8c74c25949..54a474b738f7 100644
--- a/docs/api/doc-blocks/doc-block-title.mdx
+++ b/docs/api/doc-blocks/doc-block-title.mdx
@@ -13,9 +13,7 @@ The `Title` block serves as the primary heading for your docs entry. It is typic
 
 {/* prettier-ignore-start */}
 
-```md
-{/* ButtonDocs.mdx */}
-
+```md title="ButtonDocs.mdx"
 import { Title } from '@storybook/blocks';
 
 <Title>This is the title</Title>
diff --git a/docs/api/doc-blocks/doc-block-typeset.mdx b/docs/api/doc-blocks/doc-block-typeset.mdx
index 8ceb2ab7b67d..5cedbf8ab772 100644
--- a/docs/api/doc-blocks/doc-block-typeset.mdx
+++ b/docs/api/doc-blocks/doc-block-typeset.mdx
@@ -13,9 +13,7 @@ The `Typeset` block helps document the fonts used throughout your project.
 
 {/* prettier-ignore-start */}
 
-```md
-{/* Typography.mdx */}
-
+```md title="Typography.mdx"
 import { Meta, Typeset } from '@storybook/blocks';
 
 <Meta title="Typography" />
diff --git a/docs/api/doc-blocks/doc-block-unstyled.mdx b/docs/api/doc-blocks/doc-block-unstyled.mdx
index 4e9e56a8ade3..dce273c69d0b 100644
--- a/docs/api/doc-blocks/doc-block-unstyled.mdx
+++ b/docs/api/doc-blocks/doc-block-unstyled.mdx
@@ -11,7 +11,7 @@ By default, most elements (like `h1`, `p`, etc.) in docs have a few default styl
 
 {/* prettier-ignore-start */}
 
-```md
+```md title="ButtonDocs.mdx"
 import { Meta, Unstyled } from "@storybook/blocks";
 import { Header } from "./Header.tsx";
 
diff --git a/docs/api/doc-blocks/doc-block-useof.mdx b/docs/api/doc-blocks/doc-block-useof.mdx
index 7e5944c07869..89a7fb7c7d05 100644
--- a/docs/api/doc-blocks/doc-block-useof.mdx
+++ b/docs/api/doc-blocks/doc-block-useof.mdx
@@ -11,9 +11,7 @@ If your own doc blocks need to interface with annotations from Storybook—that
 
 Here’s an example of how the`useOf` hook could be used to create a custom block that displays the name of the story:
 
-```jsx
-// .storybook/blocks/StoryName.jsx
-
+```jsx title=".storybook/blocks/StoryName.jsx"
 import { useOf } from '@storybook/blocks';
 
 /**
@@ -38,22 +36,20 @@ export const StoryName = ({ of }) => {
 
 {/* prettier-ignore-start */}
 
-```md
-{/* ButtonDocs.mdx */}
-
+```md title="ButtonDocs.mdx"
 import { Meta } from '@storybook/blocks';
 import { StoryName } from '../.storybook/blocks/StoryName';
 import * as ButtonStories from './Button.stories';
 
 <Meta of={ButtonStories} />
 
-{/* renders "Secondary" */}
+{/* Renders "Secondary" */}
 <StoryName of={ButtonStories.Secondary} />
 
-{/* renders "Primary" */}
+{/* Renders "Primary" */}
 <StoryName />
 
-{/* renders "Button" */}
+{/* Renders "Button" */}
 <StoryName of={ButtonStories} />
 ```
 
diff --git a/docs/api/new-frameworks.mdx b/docs/api/new-frameworks.mdx
index edd780db1191..11d8b8407f13 100644
--- a/docs/api/new-frameworks.mdx
+++ b/docs/api/new-frameworks.mdx
@@ -33,7 +33,7 @@ Storybook has the concept of [presets](../addons/writing-presets.mdx), which are
 
 It's helpful to understand Storybook's package structure before adding a framework preset. Each framework typically exposes two executables in its `package.json`:
 
-```json
+```json title="package.json"
 {
   "bin": {
     "storybook": "./bin/index.js",
@@ -94,7 +94,7 @@ Consider the following React story:
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-with-sample.md" usesCsf3 csf2Path="api/new-frameworks#snippet-button-story-with-sample" />
+<CodeSnippets path="button-story-with-sample.md" />
 
 {/* prettier-ignore-end */}
 
@@ -106,7 +106,7 @@ Consider the following hypothetical example:
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-hypothetical-example.md" usesCsf3 csf2Path="api/new-frameworks#snippet-button-story-hypothetical-example" />
+<CodeSnippets path="button-story-hypothetical-example.md" />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/api/parameters.mdx b/docs/api/parameters.mdx
index 8f1313203871..28362afe6a5a 100644
--- a/docs/api/parameters.mdx
+++ b/docs/api/parameters.mdx
@@ -9,10 +9,6 @@ Parameters are static metadata used to configure your [stories](../get-started/w
 
 ## Story parameters
 
-<div class="aside">
-  ℹ️ Parameters specified at the story level will [override](#parameter-inheritance) those specified at the project level and meta (component) level.
-</div>
-
 Parameters specified at the story level apply to that story only. They are defined in the `parameters` property of the story (named export):
 
 {/* prettier-ignore-start */}
@@ -21,11 +17,11 @@ Parameters specified at the story level apply to that story only. They are defin
 
 {/* prettier-ignore-end */}
 
-## Meta parameters
+<Callout variant="info">
+  Parameters specified at the story level will [override](#parameter-inheritance) those specified at the project level and meta (component) level.
+</Callout>
 
-<div class="aside">
-  ℹ️ Parameters specified at the meta (component) level will [override](#parameter-inheritance) those specified at the project level.
-</div>
+## Meta parameters
 
 Parameter's specified in a [CSF](../writing-stories/index.mdx#component-story-format-csf) file's meta configuration apply to all stories in that file. They are defined in the `parameters` property of the `meta` (default export):
 
@@ -35,6 +31,10 @@ Parameter's specified in a [CSF](../writing-stories/index.mdx#component-story-fo
 
 {/* prettier-ignore-end */}
 
+<Callout variant="info">
+  Parameters specified at the meta (component) level will [override](#parameter-inheritance) those specified at the project level.
+</Callout>
+
 ## Project parameters
 
 Parameters specified at the project (global) level apply to **all stories** in your Storybook. They are defined in the `parameters` property of the default export in your `.storybook/preview.js|ts` file:
@@ -172,7 +172,6 @@ All other parameters are contributed by addons. The [essential addon's](../essen
 * [Backgrounds](../essentials/backgrounds.mdx#parameters)
 * [Controls](../essentials/controls.mdx#parameters)
 * [Highlight](../essentials/highlight.mdx#parameters)
-* [Interactions](../essentials/interactions.mdx#parameters)
 * [Measure & Outline](../essentials/measure-and-outline.mdx#parameters)
 * [Viewport](../essentials/viewport.mdx#parameters)
 
@@ -186,15 +185,13 @@ When specifying parameters, they are merged together in order of increasing spec
 2. Meta (component) parameters
 3. Story parameters
 
-<div class="aside">
-  ℹ️ Parameters are **merged**, so objects are deep-merged, but arrays and other properties are overwritten.
-</div>
+<Callout variant="info">
+  Parameters are **merged**, so objects are deep-merged, but arrays and other properties are overwritten.
+</Callout>
 
 In other words, the following specifications of parameters:
 
-```js
-// .storybook/preview.js|ts
-
+```js title=".storybook/preview.js|ts"
 const preview = {
   // 👇 Project-level parameters
   parameters: {
@@ -209,9 +206,7 @@ const preview = {
 export default preview;
 ```
 
-```js
-// Dialog.stories.js|ts
-
+```js title="Dialog.stories.js|ts"
 const meta = {
   component: Dialog,
   // 👇 Meta-level parameters
diff --git a/docs/configure/environment-variables.mdx b/docs/configure/environment-variables.mdx
index 1403cc371c69..f1b14c9a4c5c 100644
--- a/docs/configure/environment-variables.mdx
+++ b/docs/configure/environment-variables.mdx
@@ -90,7 +90,7 @@ When Storybook loads, it will enable you to access them in your stories similar
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="my-component-env-var-config.md" usesCsf3 csf2Path="configure/environment-variables#snippet-my-component-env-var-config" />
+<CodeSnippets path="my-component-env-var-config.md" />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/configure/integration/frameworks-feature-support.mdx b/docs/configure/integration/frameworks-feature-support.mdx
index aead9b265217..006673db19f1 100644
--- a/docs/configure/integration/frameworks-feature-support.mdx
+++ b/docs/configure/integration/frameworks-feature-support.mdx
@@ -1,5 +1,6 @@
 ---
 title: 'Feature support for frameworks'
+hideRendererSelector: true
 sidebar:
   order: 2
   title: Feature support for frameworks
@@ -117,4 +118,4 @@ To align the Storybook ecosystem with the current state of frontend development,
 | ---------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | [Knobs](https://github.com/storybookjs/addon-knobs)                                | The Knobs addon was officially deprecated with the release of Storybook 6.3 and is no longer actively maintained. We recommend using the [controls](../../essentials/controls.mdx) instead.                                                                                                           |
 | [Storyshots](../../writing-tests/snapshot-testing/storyshots-migration-guide.mdx)  | The Storyshots addon was officially deprecated with the release of Storybook 7.6, is no longer actively maintained and was removed in Storybook 8. See the [migration guide](../../writing-tests/snapshot-testing/storyshots-migration-guide.mdx) for the available alternatives.                     |
-| StoriesOf                                                                          | The `storiesOf` API was officially removed with the release of Storybook 8 and is no longer maintained. We recommend using the [CSF API](../../api/csf.mdx) instead for writing stories.<br />See the [migration guide](../../migration-guide/index.mdx#storiesof-to-csf) for more information.       |
+| StoriesOf                                                                          | The `storiesOf` API was officially removed with the release of Storybook 8 and is no longer maintained. We recommend using the [CSF API](../../api/csf.mdx) instead for writing stories.<br />See the [migration guide](../../migration-guide/index.mdx#major-breaking-changes) for more information. |
diff --git a/docs/configure/integration/images-and-assets.mdx b/docs/configure/integration/images-and-assets.mdx
index c500de8d210c..5d125c16d41a 100644
--- a/docs/configure/integration/images-and-assets.mdx
+++ b/docs/configure/integration/images-and-assets.mdx
@@ -15,7 +15,7 @@ Afterward, you can use any asset in your stories:
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="component-story-static-asset-with-import.md" usesCsf3 csf2Path="configure/images-and-assets#snippet-component-story-static-asset-with-import" />
+<CodeSnippets path="component-story-static-asset-with-import.md" />
 
 {/* prettier-ignore-end */}
 
@@ -35,7 +35,7 @@ Here `../public` is your static directory. Now use it in a component or story li
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="component-story-static-asset-without-import.md" usesCsf3 csf2Path="configure/images-and-assets#snippet-component-story-static-asset-without-import" />
+<CodeSnippets path="component-story-static-asset-without-import.md" />
 
 {/* prettier-ignore-end */}
 
@@ -61,7 +61,7 @@ Upload your files to an online CDN and reference them. In this example, we’re
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="component-story-static-asset-cdn.md" usesCsf3 csf2Path="configure/images-and-assets#snippet-component-story-static-asset-cdn" />
+<CodeSnippets path="component-story-static-asset-cdn.md" />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/configure/story-layout.mdx b/docs/configure/story-layout.mdx
index c17f520d3579..deac6de3b8e7 100644
--- a/docs/configure/story-layout.mdx
+++ b/docs/configure/story-layout.mdx
@@ -41,6 +41,6 @@ Or even apply it to specific stories like so:
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="storybook-story-layout-param.md" usesCsf3 csf2Path="configure/story-layout#snippet-storybook-story-layout-param" />
+<CodeSnippets path="storybook-story-layout-param.md" />
 
 {/* prettier-ignore-end */}
diff --git a/docs/configure/story-rendering.mdx b/docs/configure/story-rendering.mdx
index dccc3e518d1e..3749a925e9c8 100644
--- a/docs/configure/story-rendering.mdx
+++ b/docs/configure/story-rendering.mdx
@@ -14,8 +14,7 @@ Code executed in the preview file (`.storybook/preview.js|ts`) runs for every st
 <If notRenderer={['angular', 'vue']}>
   Here's an example of how you might use the preview file to initialize a library that must run before your components render:
 
-  ```ts
-  // .storybook/preview.ts
+  ```ts title=".storybook/preview.ts"
   // Replace your-renderer with the renderer you are using (e.g., react, vue3)
   import { Preview } from '@storybook/your-renderer';
 
diff --git a/docs/configure/styling-and-css.mdx b/docs/configure/styling-and-css.mdx
index ceebd2bb6957..70c0b4303c3f 100644
--- a/docs/configure/styling-and-css.mdx
+++ b/docs/configure/styling-and-css.mdx
@@ -111,7 +111,7 @@ sidebar:
 
   Don't forget to also add your global styles to your `build-storybook` target in your `angular.json` file. This will ensure that your global styles are included in the static build of your Storybook as well.
 
-  ```json
+  ```json title="angular.json"
   {
     "storybook": {
       "builder": "@storybook/angular:start-storybook",
@@ -162,8 +162,9 @@ sidebar:
 
   For earlier Nx versions (before 14.1.8), your configuration would look like this:
 
-  ```json
-   "build-storybook": {
+  ```json title="project.json"
+  {
+    "build-storybook": {
       "executor": "@nrwl/storybook:build",
       "outputs": ["{options.outputPath}"],
       "options": {
@@ -175,34 +176,37 @@ sidebar:
         "projectBuildConfig": "example-lib:build-storybook",
         "styles": ["apps/example-app/src/styles.scss"]
       }
-    }
+    },
+  }
   ```
 
   Starting with version 14.1.8, Nx uses the Storybook builder directly, which means any configuration supplied to the builder also applies to the NX setup. If you're working with a library, you'll need to configure the styling options ( e.g., preprocessors) inside the `build-storybook` options configuration object. For example:
 
-  ```json
-      "storybook": {
-        "executor": "@storybook/angular:start-storybook",
-        "options": {
-          "configDir": "apps/example-lib/.storybook",
-          "browserTarget": "example-lib:build-storybook",
-        },
+  ```json title="workspace.json"
+  {
+    "storybook": {
+      "executor": "@storybook/angular:start-storybook",
+      "options": {
+        "configDir": "apps/example-lib/.storybook",
+        "browserTarget": "example-lib:build-storybook",
       },
-      "build-storybook": {
-        "executor": "@storybook/angular:build-storybook",
-        "outputs": ["{options.outputPath}"],
-        "options": {
-          "outputDir": "dist/storybook/example-lib",
-          "configDir": "apps/example-lib/.storybook",
-          "browserTarget": "example-lib:build-storybook",
-          "styles": [".storybook/custom-styles.scss"],
-          "stylePreprocessorOptions": {
-            "includePaths": [
-              "libs/design-system/src/lib"
-            ]
-          }
+    },
+    "build-storybook": {
+      "executor": "@storybook/angular:build-storybook",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputDir": "dist/storybook/example-lib",
+        "configDir": "apps/example-lib/.storybook",
+        "browserTarget": "example-lib:build-storybook",
+        "styles": [".storybook/custom-styles.scss"],
+        "stylePreprocessorOptions": {
+          "includePaths": [
+            "libs/design-system/src/lib"
+          ]
         }
       }
+    },
+  }
   ```
 
   When Nx runs, it will load Storybook's configuration and styling based on [`storybook.browserTarget`](https://nx.dev/storybook/extra-topics-for-angular-projects#setting-up-browsertarget).
diff --git a/docs/configure/telemetry.mdx b/docs/configure/telemetry.mdx
index d4c3af5804da..56a6ef8cc707 100644
--- a/docs/configure/telemetry.mdx
+++ b/docs/configure/telemetry.mdx
@@ -1,5 +1,6 @@
 ---
 title: 'Telemetry'
+hideRendererSelector: true
 sidebar:
   order: 3
   title: Telemetry
@@ -163,7 +164,7 @@ In the future, we plan to share relevant data with the community through public
 
 ## How to opt-out
 
-You may opt-out of the telemetry by setting Storybook's configuration element `disableTelemetry` to `true`, using the `--disable-telemetry` flag, or setting the environment variable`STORYBOOK_DISABLE_TELEMETRY` to `1`. For example:
+You may opt out of the telemetry within your Storybook configuration by setting the `disableTelemetry` configuration element to `true`.
 
 {/* prettier-ignore-start */}
 
@@ -171,13 +172,29 @@ You may opt-out of the telemetry by setting Storybook's configuration element `d
 
 {/* prettier-ignore-end */}
 
+If necessary, you can also turn off telemetry via the command line with the `--disable-telemetry` flag.
+
+{/* prettier-ignore-start */}
+
+<CodeSnippets path="storybook-disable-telemetry-flag.md" />
+
+{/* prettier-ignore-end */}
+
+Or via the `STORYBOOK_DISABLE_TELEMETRY` environment variable.
+
+{/* prettier-ignore-start */}
+
+<CodeSnippets path="storybook-disable-telemetry-env.md" />
+
+{/* prettier-ignore-end */}
+
 <Callout variant="info" icon="💡">
   There is a `boot` event containing no metadata (used to ensure the telemetry is working). It is sent prior to evaluating your [Storybook configuration file](../api/main-config/main-config.mdx) (i.e., `main.js|ts`), so it is unaffected by the `disableTelemetry` option. If you want to ensure that the event is not sent, use the `STORYBOOK_DISABLE_TELEMETRY` environment variable.
 </Callout>
 
 ## Crash reports (disabled by default)
 
-In addition to general usage telemetry, you may also choose to share crash reports. Storybook will then sanitize the error object (removing all user paths) and append it to the telemetry event. To enable crash reporting, you can set the `enableCrashReports` configuration element to `true`, using the `--enable-crash-reports` flag, or set the `STORYBOOK_ENABLE_CRASH_REPORTS` environment variable to `1`. For example:
+In addition to general usage telemetry, you may also choose to share crash reports. Storybook will then sanitize the error object (removing all user paths) and append it to the telemetry event. To enable crash reporting, you can set the `enableCrashReports` configuration element to `true`.
 
 {/* prettier-ignore-start */}
 
@@ -185,7 +202,23 @@ In addition to general usage telemetry, you may also choose to share crash repor
 
 {/* prettier-ignore-end */}
 
-Generates the following item in the telemetry event:
+You can also enable crash reporting via the command line with the `--enable-crash-reports` flag.
+
+{/* prettier-ignore-start */}
+
+<CodeSnippets path="storybook-telemetry-storybook-enable-crash-reports-flag.md" />
+
+{/* prettier-ignore-end */}
+
+Or by setting the `STORYBOOK_ENABLE_CRASH_REPORTS` environment variable to `1`.
+
+{/* prettier-ignore-start */}
+
+<CodeSnippets path="storybook-telemetry-storybook-enable-crash-reports-env.md" />
+
+{/* prettier-ignore-end */}
+
+Enabling any of the options will generate the following item in the telemetry event:
 
 {/* prettier-ignore-start */}
 
diff --git a/docs/configure/user-interface/sidebar-and-urls.mdx b/docs/configure/user-interface/sidebar-and-urls.mdx
index 55537246e214..8ee6ecd62f3d 100644
--- a/docs/configure/user-interface/sidebar-and-urls.mdx
+++ b/docs/configure/user-interface/sidebar-and-urls.mdx
@@ -35,7 +35,7 @@ Consider the following story:
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="foo-bar-baz-story.md" usesCsf3 csf2Path="configure/sidebar-and-urls#snippet-foo-bar-baz-story" />
+<CodeSnippets path="foo-bar-baz-story.md" />
 
 {/* prettier-ignore-end */}
 
@@ -45,7 +45,7 @@ It is possible to manually set the story's id, which is helpful if you want to r
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="other-foo-bar-story.md" usesCsf3 csf2Path="configure/sidebar-and-urls#snippet-other-foo-bar-story" />
+<CodeSnippets path="other-foo-bar-story.md" />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/contribute/RFC.mdx b/docs/contribute/RFC.mdx
index 32f1aae9b636..d67f71e9a179 100644
--- a/docs/contribute/RFC.mdx
+++ b/docs/contribute/RFC.mdx
@@ -1,5 +1,6 @@
 ---
 title: 'RFC process'
+hideRendererSelector: true
 sidebar:
   order: 1
   title: RFC process
@@ -55,4 +56,4 @@ This RFC process took heavy inspiration from the RFC processes from [Rust](https
 * [Code](./code.mdx) for features and bug fixes
 * [Frameworks](./framework.mdx) to get started with a new framework
 * [Documentation](./documentation/documentation-updates.mdx) for documentation improvements, typos, and clarifications
-* [Examples](./documentation/new-snippets.mdx) for new snippets and examples
+* [Examples](./documentation/new-snippets.mdx) for new snippets
diff --git a/docs/contribute/code.mdx b/docs/contribute/code.mdx
index e3b2e3bd0ceb..d75a013b8590 100644
--- a/docs/contribute/code.mdx
+++ b/docs/contribute/code.mdx
@@ -1,5 +1,6 @@
 ---
 title: 'Code contributions'
+hideRendererSelector: true
 sidebar:
   order: 2
   title: Code
@@ -264,4 +265,4 @@ Once the PR is merged, the template will be generated on a nightly cadence and y
 * Code for features and bug fixes
 * [Frameworks](./framework.mdx) to get started with a new framework
 * [Documentation](./documentation/documentation-updates.mdx) for documentation improvements, typos, and clarifications
-* [Examples](./documentation/new-snippets.mdx) for new snippets and examples
+* [Examples](./documentation/new-snippets.mdx) for new snippets
diff --git a/docs/contribute/documentation/documentation-updates.mdx b/docs/contribute/documentation/documentation-updates.mdx
index 3e62a5a4d225..51e38f8a523a 100644
--- a/docs/contribute/documentation/documentation-updates.mdx
+++ b/docs/contribute/documentation/documentation-updates.mdx
@@ -1,5 +1,6 @@
 ---
 title: 'Documentation updates'
+hideRendererSelector: true
 sidebar:
   order: 1
   title: Content
@@ -31,4 +32,4 @@ In the Storybook repository, create a pull request that describes changes and in
 * [Code](../code.mdx) for features and bug fixes
 * [Frameworks](../framework.mdx) to get started with a new framework
 * Documentation for documentation improvements, typos, and clarifications
-* [Examples](./new-snippets.mdx) for new snippets and examples
+* [Examples](./new-snippets.mdx) for new snippets
diff --git a/docs/contribute/documentation/new-snippets.mdx b/docs/contribute/documentation/new-snippets.mdx
index 1a7cf0c0b601..b2bf813c91a5 100644
--- a/docs/contribute/documentation/new-snippets.mdx
+++ b/docs/contribute/documentation/new-snippets.mdx
@@ -1,5 +1,6 @@
 ---
 title: 'Code snippets contributions'
+hideRendererSelector: true
 sidebar:
   order: 2
   title: Code snippets
@@ -9,129 +10,288 @@ Add or update the code snippets in the documentation. This page outlines how the
 
 ## Documented frameworks
 
-Storybook maintains code snippets for a [variety of frameworks](../../configure/integration/frameworks-feature-support.mdx). We try to keep them up to date as framework APIs evolve. But it's tricky to keep track of every API change in every framework.
+Storybook maintains code snippets for a [variety of frameworks](../../configure/integration/frameworks-feature-support.mdx). We try to keep them up to date as framework APIs evolve. But keeping track of every API change in every framework is tricky.
 
-We welcome community contributions to the code snippets. Here's a matrix of the frameworks we have snippets for. Help us add snippets for your favorite framework.
+We welcome community contributions to the code snippets. Here's a matrix of the frameworks for which we have snippets. Help us add snippets for your favorite framework.
 
-| React                                                                        | Vue 3                                                                      | Angular                                                                        | Web Components                                                                        | Svelte                                                                        | Solid                                                                        | Ember | HTML | Preact |
-| ---------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | ----- | ---- | ------ |
-| [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/react) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/vue) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/angular) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/web-components) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/svelte) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/solid) | ❌    | ❌   | ❌     |
 
-## Setup
+| React  | Vue 3 | Angular   | Web Components | Svelte | Solid  | Ember | HTML | Preact | Qwik |
+| ------ | ----- | --------- | ---------------|--------|--------|-------|------| -------|------|
+| ✅     | ✅    | ✅        | ✅             | ✅     | ✅     | ❌    | ❌   | ❌     | ❌  |
 
-Assuming you've already followed the [local environment guide](../code.mdx#initial-setup), the first thing you need to do is create a branch on your local Storybook monorepo by running the following command:
 
-```shell
-git checkout -b code-snippets-for-framework
+## Snippet syntax
+
+The code snippets referenced throughout the Storybook documentation are located in the [`docs/_snippets`](https://github.com/storybookjs/storybook/tree/next/docs/_snippets) directory inside individual Markdown files, containing the [supported frameworks](../../configure/integration/frameworks-feature-support.mdx), features and languages (i.e., JavaScript, MDX, TypeScript).
+
+### Example
+
+The following code block demonstrates how to structure a code snippet in the Storybook documentation and the attributes you can use to provide additional context to the code snippet.
+
+{/* prettier-ignore-start */}
+
+````md title="docs/_snippets/button-group-story.md"
+```ts filename="ButtonGroup.stories.ts" renderer="vue" language="ts" tabTitle="3"
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import ButtonGroup from './ButtonGroup.vue';
+
+//👇 Imports the Button stories
+import * as ButtonStories from './Button.stories';
+
+const meta: Meta<typeof ButtonGroup> = {
+ component: ButtonGroup,
+};
+
+export default meta;
+type Story = StoryObj<typeof ButtonGroup>;
+
+export const Pair: Story = {
+  render: (args) => ({
+ components: { ButtonGroup },
+    setup() {
+ return { args };
+    },
+ template: '<ButtonGroup v-bind="args" />',
+  }),
+ args: {
+ buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+ orientation: 'horizontal',
+  },
+};
+``` 
+````
+
+{/* prettier-ignore-end */}
+
+
+## Common attributes for code snippets
+
+Following are the attributes you'll use most often in the Storybook documentation code snippets, as well as a brief explanation of each to help you understand the context in which they are used.
+
+### File name as title
+
+Most code examples should include a file name so readers can understand which file they relate to and where to paste it into their project. For code examples, include the `filename` attribute wrapped with quotation marks to indicate the file name. This is not required if the example relates to a terminal command.
+
+{/* prettier-ignore-start */}
+
+````md title="docs/_snippets/button-stories.md"
+```ts filename="Button.stories.ts"
 ```
+````
 
-Before adding your snippets, open the `docs` folder with your editor of choice. Get familiarized with the documentation, including how the snippets are organized and their contents.
+{/* prettier-ignore-end */}
 
-Then inside the root folder of the Storybook monorepo, run the following command:
+### Language configuration
 
-```shell
-yarn task
+Use the `language` attribute to define the language to which the code snippet applies. The documentation uses this attribute to determine which variant to display (e.g., JavaScript, TypeScript, TypeScript 4.9, MDX).
+
+{/* prettier-ignore-start */}
+
+````md title="docs/_snippets/button-stories.md"
+```ts filename="Button.stories.ts" language="js|ts|ts-4-9|mdx"
 ```
+````
 
-Select the option `Synchronize documentation (sync-docs)` and type the path of your `frontpage` project folder. Now every file change inside the monorepo `docs` folder will be reflected in the frontpage repo at `src/content/docs`.
+{/* prettier-ignore-end */}
 
-### Add your first snippet
+### Framework-specific code
 
-Now that you're familiar with how the documentation is structured, it's time to add the code snippets. First, go to the `docs/snippets/` folder and create a new directory for your framework of choice (e.g., `ember`).
+Use the `renderer` attribute to indicate which of the [supported frameworks](../../configure/integration/frameworks-feature-support.mdx) the code snippet belongs to.
 
-Browse the documentation and look for the code snippets you're willing to contribute. For example, on the [setup page](https://github.com/storybookjs/storybook/blob/next/docs/get-started/setup.mdx), you should see something similar to:
+{/* prettier-ignore-start */}
 
-```jsx
-// /docs/get-started/setup.md
+````md title="docs/_snippets/button-stories.md"
+```ts filename="Button.stories.ts" language="ts" renderer="react|vue|angular|web-components|ember|html|svelte|preact|qwik|solid"
+```
+````
+
+{/* prettier-ignore-end */}
+
+Alternatively, if you're documenting examples that apply to multiple frameworks, use the `renderer` attribute with the `common` value to indicate that the code snippet is framework-agnostic.
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets
-  paths={[
-    'react/your-component.js.mdx',
-    'react/your-component.ts.mdx',
-    'angular/your-component.ts.mdx',
-    'vue/your-component.3.js.mdx',
-    'svelte/your-component.js.mdx',
-    'web-components/your-component.js.mdx',
-    'solid/your-component.js.mdx',
-    'solid/your-component.ts.mdx',
-  ]}
-/>
+````md title="docs/_snippets/button-stories.md"
+```ts filename="Button.stories.ts" language="ts" renderer="common"
+```
+````
 
 {/* prettier-ignore-end */}
+
+### Package manager configuration
+
+Use the `packageManager` attribute to configure the package manager used in the example from the following options: `npm`, `yarn`, or `pnpm`.
+
+
+{/* prettier-ignore-start */}
+
+````md title="docs/_snippets/storybook-run-dev.md"
+```shell renderer="common" language="js" packageManager="npm|yarn|pnpm"
 ```
+````
 
-Create the file `ember/your-component.js.mdx`, similar to the other frameworks, and reference it.
+{/* prettier-ignore-end */}
 
-```jsx
-// /docs/get-started/setup.md
+### Working with multiple snippets
 
+Use the `tabTitle` attribute to indicate the tab title in which the code snippet will be displayed. This attribute should only be used when multiple examples are in a single code snippet file.
+ 
 {/* prettier-ignore-start */}
 
-<CodeSnippets
-  paths={[
-    'react/your-component.js.mdx',
-    'react/your-component.ts.mdx',
-    'angular/your-component.ts.mdx',
-    'vue/your-component.3.js.mdx',
-    'svelte/your-component.js.mdx',
-    'web-components/your-component.js.mdx',
-    'solid/your-component.js.mdx',
-    'solid/your-component.ts.mdx',
-    'ember/your-component.js.mdx', //👈🏼 The code snippet you created.
-  ]}
-/>
+````md title="docs/_snippets/component-decorator.md"
+```ts filename="YourComponent.stories.ts" language="ts" renderer="common" tabTitle="Story"
+```
+```ts filename=".storybook/preview.ts" language="ts" renderer="common" tabTitle="Storybook configuration"
+```
+````
 
 {/* prettier-ignore-end */}
+
+## Contributing code snippets
+
+You can start contributing to the Storybook documentation by now that you're familiar with how the documentation is organized, the code snippet's structure, and available options. Assuming that you have already set up your [local development environment](../code.mdx#initial-setup) and are ready to contribute, the following steps will guide you through contributing code snippets to the Storybook documentation.
+
+Start by creating a new branch on your local Storybook monorepo with the following command:
+
+{/* prettier-ignore-start */}
+
+```shell
+git checkout -b code-snippets-for-framework
 ```
+  
+{/* prettier-ignore-end */}
 
-<Callout variant="info" icon="💡">
-  Code snippets are divided into various file extensions, if you're contributing a TypeScript file use `.ts.mdx`, or if you're adding JavaScript files use `.js.mdx`.
-</Callout>
+Browse the documentation and look for the code snippets you want to contribute. For example, on the [setup page](https://github.com/storybookjs/storybook/blob/next/docs/get-started/setup.mdx) you should see the following:
+
+{/* prettier-ignore-start */}
+
+ ```jsx title="docs/get-started/setup.mdx"
+{/* prettier-ignore-start */}
+
+<CodeSnippets path="your-component.md" usesCsf3 />
+
+{/* prettier-ignore-end */}
+```
+
+{/* prettier-ignore-end */}
+
+
+Open the file inside the `docs/_snippets` directory and adjust the content to match the code snippet you're willing to contribute. For example:
+
+{/* prettier-ignore-start */}
+
+````md title="docs/_snippets/your-component.md"
+```ts filename="YourComponent.stories.ts" renderer="qwik" language="ts-4-9"
+import type { Meta, StoryObj } from 'storybook-framework-qwik';
+
+import type { YourComponentProps } from './YourComponent';
+
+import { YourComponent } from './YourComponent';
+
+//👇 This default export determines where your story goes in the story list
+const meta = {
+ component: YourComponent,
+} satisfies Meta<YourComponentProps>;
+
+export default meta;
+type Story = StoryObj<YourComponentProps>;
+
+export const FirstStory: Story = {
+  args: {
+  //👇 The args you need here will depend on your component
+  },
+};
+```
+````
+
+{/* prettier-ignore-end */}
 
 Go through the rest of the documentation and repeat the process.
 
-### Preview your work
+## Preview your work
+
+Before submitting your contribution, we encourage you to check your work against the Storybook website. Doing this prevents last-minute issues with the documentation and is also an excellent way for the maintainers to merge faster once you submit the pull request. However, failing to do so will lead one of the maintainers to notify you that your contribution has an issue.
 
-Before submitting your contribution, we advise you to check your work against the Storybook website. Doing this prevents last-minute issues with the documentation and is also an excellent way for the maintainers to merge faster once you submit the pull request. However, failing to do so will lead one of the maintainers to notify you that your contribution has an issue.
+Start by forking the Storybook [website repository](https://github.com/storybookjs/web) and cloning it locally.
 
-Start by forking [frontpage repo](https://github.com/storybookjs/frontpage) and cloning it locally.
+{/* prettier-ignore-start */}
 
 ```shell
-git clone https://github.com/your-username/frontpage.git
+git clone https://github.com/your-username/web.git
 ```
+  
+{/* prettier-ignore-end */}
+
+Navigate to the `web` directory and install the required dependencies.
 
-Navigate to the `frontpage` directory and install the required dependencies with the following command:
+{/* prettier-ignore-start */}
 
 ```shell
-yarn
+npm install
 ```
 
-Next, make sure that you have running the `Synchronize documentation (sync-docs)` task from Storybook monorepo. Then, execute the following command to launch the Storybook website.
+{/* prettier-ignore-end */}
+
+We recommend that you generate a website build first to ensure you can preview your changes locally and verify that everything is working as expected. To do so, run the following command:
+
+{/* prettier-ignore-start */}
 
 ```shell
-yarn start:docs-only
+npm run build:frontpage
 ```
 
-<Callout variant="info" icon="💡">
-  During the start process if there's an issue with the documentation, the process will stop and you'll get a notification.
+{/* prettier-ignore-end */}
+
+<Callout variant="info">
+
+When executed, this command will retrieve the required files needed to successfully build the Storybook website, including current documentation versions (e.g., `6.5`, `7.6`, `8.x`), and copy them to the `apps/frontpage/docs/` directory, organized by version number.
+
 </Callout>
 
-Open a browser window to `http://localhost:8000`, click the Docs link, and select your framework from the dropdown.
+Run the `sync-docs` command to connect the documentation from the Storybook monorepo to the Storybook website. When prompted, provide the path to your local fork of the Storybook monorepo and the documentation version you're working on.
+
+{/* prettier-ignore-start */}
+
+```shell
+npm run sync-docs
+```
+
+{/* prettier-ignore-end */}
+
+Finally, open a new terminal window and run the `dev` command to start the Storybook website.
 
-![Storybook docs with dropdown](../../_assets/contribute/local-storybook-website-dropdown-optimized.png)
+{/* prettier-ignore-start */}
+
+```shell
+npm run dev
+```
+
+{/* prettier-ignore-end */}
+
+If all goes well, you should see the Storybook website running. Open a browser window to `http://localhost:3000`, click the Docs link to open the documentation, and select your framework from the dropdown.
+
+{/* TODO: Record video */}
+
+<Video src="../_assets/contribute/local-storybook-website-dropdown-optimized.mp4" />
 
 Go through the documentation and check your work.
 
 ## Submit your contribution
 
-Finally, commit, push and open a pull request in the Storybook monorepo. Add a clear description of the work you've done, and one of the maintainers will guide you through the merge process.
+Once you have verified that your changes are working as expected, you're ready to create a "Pull Request". This will let the Storybook maintainers know you have some changes to propose. At this point, we can give you feedback and request changes. To help with the review process, we encourage you to add a clear title and description of your work.
+
+
+## Troubleshooting
+
+### Code snippets not displaying
+
+If you're documenting an example that includes the `packageManager` attribute combined with another example, the documentation might not display the code snippets correctly. To avoid this, you can divide the examples into separate files and reference them in the documentation.
 
-**Learn more about contributing to Storybook**
+## Learn more about contributing to Storybook
 
 * [RFC process](../RFC.mdx) for authoring feature requests
 * [Code](../code.mdx) for features and bug fixes
 * [Frameworks](../framework.mdx) to get started with a new framework
 * [Documentation](./documentation-updates.mdx) for documentation improvements, typos, and clarifications
-* [Examples](./new-snippets.mdx) for new snippets and examples
+* Examples for new snippets
\ No newline at end of file
diff --git a/docs/contribute/framework.mdx b/docs/contribute/framework.mdx
index 2b6cce765192..aa7bbba4fc3e 100644
--- a/docs/contribute/framework.mdx
+++ b/docs/contribute/framework.mdx
@@ -1,5 +1,6 @@
 ---
 title: 'Contributing a Storybook framework'
+hideRendererSelector: true
 sidebar:
   order: 4
   title: Frameworks
@@ -40,7 +41,7 @@ Because a framework is a node package, it must contain a `package.json` file. He
 <details>
   <summary><code>package.json</code> template</summary>
 
-  ```json
+  ```json title="package.json"
   {
     "name": "<your-framework-name>",
     "version": "1.0.0",
@@ -151,4 +152,4 @@ Once it's fully tested and released, please let us know about your framework by
 * [Code](./code.mdx) for features and bug fixes
 * Frameworks to get started with a new framework
 * [Documentation](./documentation/documentation-updates.mdx) for documentation improvements, typos, and clarifications
-* [Examples](./documentation/new-snippets.mdx) for new snippets and examples
+* [Examples](./documentation/new-snippets.mdx) for new snippets
diff --git a/docs/contribute/how-to-reproduce.mdx b/docs/contribute/how-to-reproduce.mdx
index 072e57b62057..7f846a5e8a6a 100644
--- a/docs/contribute/how-to-reproduce.mdx
+++ b/docs/contribute/how-to-reproduce.mdx
@@ -1,5 +1,6 @@
 ---
 title: 'Create a reproduction'
+hideRendererSelector: true
 sidebar:
   order: 5
   title: Reproduce
diff --git a/docs/essentials/actions.mdx b/docs/essentials/actions.mdx
index 43033469f701..f2bdf0df2d0c 100644
--- a/docs/essentials/actions.mdx
+++ b/docs/essentials/actions.mdx
@@ -115,4 +115,4 @@ Allows you to create an action that appears in the actions panel of the Storyboo
 
 ## Advanced / legacy usage
 
-There are also some older ways to use actions as documented in the [advanced README](../../addons/actions/ADVANCED.md).
+There are also some older ways to use actions as documented in the [advanced README](https://github.com/storybookjs/storybook/blob/next/code/addons/actions/ADVANCED.md).
diff --git a/docs/essentials/controls.mdx b/docs/essentials/controls.mdx
index 211dbe1d6350..a3329a9b75e3 100644
--- a/docs/essentials/controls.mdx
+++ b/docs/essentials/controls.mdx
@@ -448,14 +448,18 @@ It may also contain at most one of the following operators:
 
 If no operator is provided, that is equivalent to `{ truthy: true }`.
 
-<IfRenderer renderer={[ 'angular', 'ember', 'web-components' ]}>
-  ## Troubleshooting
+## Troubleshooting
 
+<IfRenderer renderer={['angular', 'ember', 'web-components']}>
   ### Controls are not automatically generated for my component
 
   If you're working with Angular, Ember, or Web Components, automatic argTypes and controls inference will not work out of the box and requires you to provide [additional configuration](#choosing-the-control-type) to allow Storybook to retrieve the necessary metadata and generate the needed argTypes and controls for your stories. However, if you need additional customization, you can always [define them manually](#fully-custom-args).
 </IfRenderer>
 
+### The controls are not updating the story within the auto-generated documentation
+
+If you turned off inline rendering for your stories via the [`inline`](../api/doc-blocks/doc-block-story.mdx#inline) configuration option, you would run into a situation where the associated controls are not updating the story within the documentation page. This is a known limitation of the current implementation and will be addressed in a future release.
+
 ## API
 
 ### Parameters
diff --git a/docs/essentials/interactions.mdx b/docs/essentials/interactions.mdx
index 237f79c45435..c78fff233220 100644
--- a/docs/essentials/interactions.mdx
+++ b/docs/essentials/interactions.mdx
@@ -55,7 +55,7 @@ Make sure to import the Storybook wrappers for Vitest and Testing Library via `@
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="storybook-interactions-play-function.md" usesCsf3 csf2Path="essentials/interactions#snippet-storybook-interactions-play-function" />
+<CodeSnippets path="storybook-interactions-play-function.md" />
 
 {/* prettier-ignore-end */}
 
@@ -68,17 +68,3 @@ Any `args` that have been marked as an Action, either using the [argTypes annota
 <Callout variant="info">
   To mock functions in your Storybook stories for reliable and isolated component testing, use the named `fn` import from `@storybook/test`.
 </Callout>
-
-## API
-
-### Parameters
-
-This addon contributes the following [parameters](../writing-stories/parameters.mdx) to Storybook, under the `interactions` namespace:
-
-#### `disable`
-
-Type: `boolean`
-
-Disable this addon's behavior. If you wish to disable this addon for the entire Storybook, you should do so when registering `addon-essentials`. See the [essential addon's docs](../essentials/index.mdx#disabling-addons) for more information.
-
-This parameter is most useful to allow overriding at more specific levels. For example, if this parameter is set to `true` at the project level, it could then be re-enabled by setting it to `false` at the meta (component) or story level.
diff --git a/docs/essentials/toolbars-and-globals.mdx b/docs/essentials/toolbars-and-globals.mdx
index 69fc41f1b1b6..66a01f13ceac 100644
--- a/docs/essentials/toolbars-and-globals.mdx
+++ b/docs/essentials/toolbars-and-globals.mdx
@@ -150,7 +150,7 @@ Using the example above, you can modify any story to retrieve the **Locale** `gl
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="my-component-story-use-globaltype.md" usesCsf3 csf2Path="essentials/toolbars-and-globals#snippet-my-component-story-use-globaltype" />
+<CodeSnippets path="my-component-story-use-globaltype.md" />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/faq.mdx b/docs/faq.mdx
index 5bfab8ad93d1..9d57f40974e4 100644
--- a/docs/faq.mdx
+++ b/docs/faq.mdx
@@ -13,9 +13,9 @@ Storybook can be set up for both single-project and multi-project Angular worksp
 
 ## How can I opt-out of Angular Ivy?
 
-In case you are having trouble with Angular Ivy you can deactivate it in your `main.js`:
+In case you are having trouble with Angular Ivy you can deactivate it in your `main.js|ts`:
 
-```javascript
+```js title=".storybook/main.js|ts"
 export default {
   stories: [
     /* ... */
@@ -36,7 +36,7 @@ export default {
 
 In case you postinstall ngcc, you can disable it:
 
-```javascript
+```js title=".storybook/main.js|ts"
 export default {
   stories: [
     /* ... */
@@ -71,9 +71,9 @@ npm test -- --coverage --collectCoverageFrom='["src/**/*.{js,jsx}","!src/**/stor
 
 ## How do I setup Storybook to share Webpack configuration with Next.js?
 
-You can generally reuse Webpack rules by placing them in a file that is `require()`-ed from both your `next.config.js` and your `.storybook/main.js` files. For example:
+You can generally reuse Webpack rules by placing them in a file that is `require()`-ed from both your `next.config.js` and your `.storybook/main.js|ts` files. For example:
 
-```js
+```js title=".storybook/main.js|ts"
 export default {
   webpackFinal: async (baseConfig) => {
     const nextConfig = require('/path/to/next.config.js');
@@ -105,9 +105,9 @@ To fix this, you can wrap the package name inside your Storybook configuration f
 
 If your installed React Version equals or is higher than 18.0.0, the new React Root API is automatically used and the newest React [concurrent features](https://reactjs.org/docs/concurrent-mode-intro.html) can be used.
 
-You can opt-out from the new React Root API by setting the following property in your `.storybook/main.js` file:
+You can opt-out from the new React Root API by setting the following property in your `.storybook/main.js|ts` file:
 
-```js
+```js title=".storybook/main.js|ts"
 export default {
   framework: {
     name: '@storybook/react-webpack5',
@@ -134,11 +134,9 @@ A common error is that an addon tries to access the "channel", but the channel i
 
 ## Why aren't Controls visible in the Canvas panel but visible in Docs?
 
-If you're adding Storybook's dependencies manually, make sure you include the [`@storybook/addon-controls`](https://www.npmjs.com/package/@storybook/addon-controls) dependency in your project and reference it in your `.storybook/main.js` as follows:
-
-```js
-// .storybook/main.js
+If you're adding Storybook's dependencies manually, make sure you include the [`@storybook/addon-controls`](https://www.npmjs.com/package/@storybook/addon-controls) dependency in your project and reference it in your `.storybook/main.js|ts` as follows:
 
+```js title=".storybook/main.js|ts"
 export default {
   addons: ['@storybook/addon-controls'],
 };
@@ -160,9 +158,7 @@ If you're in a [Storybook composition](./sharing/storybook-composition.mdx) scen
 
 Introduce a single `.mdx` docs page (addon-essentials or addon-docs required), that serves as an Introduction page, like so:
 
-```mdx
-{/* Introduction.mdx */}
-
+```mdx title="Introduction.mdx"
 # Welcome
 
 Some description here
@@ -170,8 +166,7 @@ Some description here
 
 And then refer to it in your Storybook config file:
 
-```ts
-// .storybook/main.js
+```ts title=".storybook/main.js|ts"
 const config = {
   // define at least one local story/page here
   stories: ['../Introduction.mdx'],
@@ -301,7 +296,7 @@ We're only covering versions 5.3 and 5.0 as they were important milestones for S
 |                  | CLI options                                     | [See current documentation](./api/cli-options.mdx)                                                   | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/cli-options)                                                                                                                                   | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/cli-options)                       |
 
 <Callout variant="info">
-  If you have stories written with the older `storiesOf` format, it was removed in Storybook 8.0 and is no longer maintained. We recommend that you migrate your stories to CSF. See the [migration guide](./migration-guide/index.mdx#storiesof-to-csf) for more information. However, if you need, you can still access the old `storiesOf` [documentation](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/formats/storiesof-api/index.md) for reference.
+  If you have stories written with the older `storiesOf` format, it was removed in Storybook 8.0 and is no longer maintained. We recommend that you migrate your stories to CSF. See the [migration guide](./migration-guide/index.mdx#major-breaking-changes) for more information. However, if you need, you can still access the old `storiesOf` [documentation](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/formats/storiesof-api/index.md) for reference.
 </Callout>
 
 ## What icons are available for my toolbar or my addon?
@@ -345,7 +340,7 @@ Writing documentation with MDX can be troublesome, especially regarding how your
 
 {/* prettier-ignore-start */}
 
-```mdx
+```mdx title="Example.mdx"
 <style>{`
   .class1 {
     ...
@@ -363,7 +358,7 @@ But this will work:
 
 {/* prettier-ignore-start */}
 
-```mdx
+```mdx title="Example.mdx"
 <style>
   {`
     .class1 {
@@ -385,9 +380,7 @@ See the following [issue](https://github.com/mdx-js/mdx/issues/1945) for more in
 
 If you're working with Vue 3, you'll need to install [`@vue/apollo-composable`](https://www.npmjs.com/package/@vue/apollo-composable). With Svelte, you'll need to install [`@rollup/plugin-replace`](https://www.npmjs.com/package/@rollup/plugin-replace) and update your `rollup.config` file to the following:
 
-```js
-// rollup.config
-
+```js title="rollup.config.js"
 // Boilerplate imports
 
 import replace from '@rollup/plugin-replace';
@@ -424,10 +417,6 @@ Yes, check the [addon's examples](https://github.com/mswjs/msw-storybook-addon/t
 
 No, currently, the MSW addon only has support for GraphQL queries. If you're interested in including this feature, open an issue in the [MSW addon repository](https://github.com/mswjs/msw-storybook-addon) and follow up with the maintainer.
 
-## How can my code detect if it is running in Storybook?
-
-You can do this by checking for the `IS_STORYBOOK` global variable, which will equal `true` when running in Storybook. The environment variable `process.env.STORYBOOK` is also set to `true`.
-
 ## Why are my stories not showing up correctly when using certain characters?
 
 Storybook allows you to use most characters while naming your stories. Still, specific characters (e.g., `#`) can lead to issues when Storybook generates the internal identifier for the story, leading to collisions and incorrectly outputting the correct story. We recommend using such characters sparsely.
@@ -444,9 +433,7 @@ If you are using `argTypes.defaultValue` to fix the above, you no longer need to
 
 Additionally, suppose you were using `argTypes.defaultValue` or relying on inference to set a default value for an arg. In that case, you should define the arg's value at the component level instead:
 
-```js
-// MyComponent.stories.js
-
+```js title="MyComponent.stories.js"
 export default {
   component: MyComponent,
   args: {
@@ -458,9 +445,7 @@ export default {
 
 For Storybook's Docs, you can manually configure the displayed value by configuring the `table.defaultValue` setting:
 
-```js
-// MyComponent.stories.js
-
+```js title="MyComponent.stories.js"
 export default {
   component: MyComponent,
   argTypes: {
diff --git a/docs/get-started/frameworks/angular.mdx b/docs/get-started/frameworks/angular.mdx
index 57d2408b6c2c..f001ec6a8b92 100644
--- a/docs/get-started/frameworks/angular.mdx
+++ b/docs/get-started/frameworks/angular.mdx
@@ -11,7 +11,7 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
 * 🎛️ Compodoc integration
 * 💫 and more!
 
-<If notRenderer={'angular'}>
+<If notRenderer="angular">
   <Callout variant="info">
     Storybook for Angular is only supported in [Angular](?renderer=angular) projects.
   </Callout>
@@ -19,10 +19,10 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
   {/* End non-supported renderers */}
 </If>
 
-<If renderer={'angular'}>
+<If renderer="angular">
   ## Requirements
 
-  * Angular ≥ 15.0 \< 19.0
+  * Angular ≥ 15.0 \< 20.0
   * Webpack ≥ 5.0
   * Storybook ≥ 8.0
 
@@ -74,16 +74,11 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
 
   Finally, update your `angular.json` to include the Storybook builder:
 
-  ```jsonc
-  // angular.json
+  ```jsonc title="angular.json"
   {
-    ...
     "projects": {
-      ...
       "your-project": {
-        ...
         "architect": {
-          ...
           "storybook": {
             "builder": "@storybook/angular:start-storybook",
             "options": {
@@ -115,7 +110,7 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
 
   ## Run Storybook
 
-  To run Storybook for a particular project, please run:
+  To run Storybook for a particular project, please run the following:
 
   ```sh
   ng run <your-project>:storybook
@@ -131,11 +126,11 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
 
   ## Setup Compodoc
 
-  You can include JSDoc comments above components, directives, and other parts of your Angular code to include documentation for those elements. Compodoc uses these comments to [generate documentation](../../writing-docs/autodocs.mdx) for your application. In Storybook, it is useful to add explanatory comments above `@Inputs` and `@Outputs`, since these are the main elements that Storybook displays in its user interface. The `@Inputs` and `@Outputs` are the elements that you can interact with in Storybook, such as [controls](../../essentials/controls.mdx).
+  You can include JSDoc comments above components, directives, and other parts of your Angular code to include documentation for those elements. Compodoc uses these comments to [generate documentation](../../writing-docs/autodocs.mdx) for your application. In Storybook, it is useful to add explanatory comments above `@Inputs` and `@Outputs`, since these are the main elements that Storybook displays in its user interface. The `@Inputs` and `@Outputs` are elements you can interact with in Storybook, such as [controls](../../essentials/controls.mdx).
 
   ### Automatic setup
 
-  When installing Storybook via `npx storybook@latest init`, you will be given the option to set up Compodoc automatically.
+  When installing Storybook via `npx storybook@latest init`, you can set up Compodoc automatically.
 
   ### Manual setup
 
@@ -149,20 +144,14 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
 
   Add the following option to your Storybook Builder:
 
-  ```jsonc
-  // angular.json
+  ```jsonc title="angular.json"
   {
-    ...
     "projects": {
-      ...
       "your-project": {
-        ...
         "architect": {
-          ...
           "storybook": {
             "builder": "@storybook/angular:start-storybook",
             "options": {
-              ...
               // 👇 Add these
               "compodoc": true,
               "compodocArgs": [
@@ -177,7 +166,6 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
           "build-storybook": {
             "builder": "@storybook/angular:build-storybook",
             "options": {
-              ...
               // 👇 Add these
               "compodoc": true,
               "compodocArgs": [
@@ -194,25 +182,27 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
   }
   ```
 
-  Go to your `.storybook/preview.js` and add the following:
+  Go to your `.storybook/preview.ts` and add the following:
+
+  ```ts title=".storybook/preview.ts"
+  import type { Preview } from '@storybook/angular';
 
-  ```js
-  // .storybook/preview.js
   // 👇 Add these
   import { setCompodocJson } from '@storybook/addon-docs/angular';
   import docJson from '../documentation.json';
   setCompodocJson(docJson);
 
-  // ... rest of file
+  const preview: Preview = {};
+  export default preview;
   ```
 
   ## `applicationConfig` decorator
 
-  If your component relies on application-wide providers, like the ones defined by BrowserAnimationsModule or any other modules which use the forRoot pattern to provide a ModuleWithProviders, you can apply the `applicationConfig` [decorator](../../writing-stories/decorators.mdx) to all stories for that component. This will provide them to the [bootstrapApplication function](https://angular.io/guide/standalone-components#configuring-dependency-injection), which is used to bootstrap the component in Storybook.
+  If your component relies on application-wide providers, like the ones defined by [`BrowserAnimationsModule`](https://angular.dev/api/platform-browser/animations/BrowserAnimationsModule) or any other modules that use the forRoot pattern to provide a [`ModuleWithProviders`](https://angular.dev/api/core/ModuleWithProviders), you can apply the `applicationConfig` [decorator](../../writing-stories/decorators.mdx) to all stories for that component. This will provide them with the [bootstrapApplication function](https://angular.io/guide/standalone-components#configuring-dependency-injection), used to bootstrap the component in Storybook.
 
-  ```ts
-  // ChipsModule.stories.ts
+  ```ts title="ChipsModule.stories.ts"
   import { Meta, applicationConfig, StoryObj } from '@storybook/angular';
+
   import { BrowserAnimationsModule, provideAnimations } from '@angular/platform-browser/animations';
   import { importProvidersFrom } from '@angular/core';
 
@@ -236,14 +226,13 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
   };
 
   export default meta;
-
   type Story = StoryObj<ChipsModule>;
 
   export const WithCustomApplicationProvider: Story = {
     render: () => ({
       // Apply application config to a specific story
       applicationConfig: {
-        // The providers will be merged with the ones defined in the applicationConfig decorators providers array of the global meta object
+        // The providers will be merged with the ones defined in the applicationConfig decorator's providers array of the global meta object
         providers: [...],
       }
     })
@@ -254,8 +243,7 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
 
   If your component has dependencies on other Angular directives and modules, these can be supplied using the `moduleMetadata` [decorator](../../writing-stories/decorators.mdx) either for all stories of a component or for individual stories.
 
-  ```ts
-  // YourComponent.stories.ts
+  ```ts title="YourComponent.stories.ts"
   import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
   import { YourComponent } from './your.component';
@@ -275,7 +263,6 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
     ],
   };
   export default meta;
-
   type Story = StoryObj<YourComponent>;
 
   export const Base: Story = {};
@@ -298,15 +285,15 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
 
   The Storybook [Angular builder](https://angular.io/guide/glossary#builder) is a way to run Storybook in an Angular workspace. It is a drop-in replacement for running `storybook dev` and `storybook build` directly.
 
-  You can run `npx storybook@next automigrate` to try let Storybook detect and automatically fix your configuration. Otherwise, you can follow the next steps to manually adjust your configuration.
+  You can run `npx storybook@next automigrate` to try letting Storybook detect and automatically fix your configuration. Otherwise, you can follow the next steps to adjust your configuration manually.
 
   #### Do you have only one Angular project in your workspace?
 
-  First, go to your `angular.json` and add `storybook` and `build-storybook` entries in `architect` section of your project like shown above.
+  First, go to your `angular.json` and add `storybook` and `build-storybook` entries in your project's `architect` section, as shown [above](#manual-setup).
 
   Second, adjust your `package.json` script section. Usually, it will look like this:
 
-  ```jsonc
+  ```jsonc title="package.json"
   {
     "scripts": {
       "storybook": "start-storybook -p 6006", // or `storybook dev -p 6006`
@@ -317,7 +304,7 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
 
   Now, you can run Storybook with `ng run <your-project>:storybook` and build it with `ng run <your-project>:build-storybook`. Adjust the scripts in your `package.json` accordingly.
 
-  ```json
+  ```json title="package.json"
   {
     "scripts": {
       "storybook": "ng run <project-name>:storybook",
@@ -326,9 +313,9 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
   }
   ```
 
-  Also compodoc is now built-in in `@storybook/angular` and you don't have to call it explicitly. If were running compodoc in your `package.json` scripts like this:
+   Also, `compodoc` is now built into `@storybook/angular`; you don't have to call it explicitly. If we're running `compodoc` in your `package.json` scripts like this:
 
-  ```json
+  ```json title="package.json"
   {
     "scripts": {
       "docs:json": "compodoc -p tsconfig.json -e json -d ./documentation",
@@ -340,7 +327,7 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
 
   Change it to:
 
-  ```json
+  ```json title="package.json"
   {
     "scripts": {
       "storybook": "ng run <project-name>:storybook",
@@ -351,11 +338,11 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
 
   #### I have multiple projects in my Angular workspace
 
-  In this case you have to adjust your `angular.json` and `package.json` as described above for each project in which you want to use Storybook. Please note, that each project should have a dedicated `.storybook` folder, which should be placed in the root of the project.
+  In this case, you have to adjust your `angular.json` and `package.json` as described above for each project you want to use Storybook. Please note that each project should have a dedicated `.storybook` folder placed at the project's root.
 
-  You can run `npx storybook@latest init` sequentially for each project to setup Storybook for each of them to automatically create the `.storybook` folder and create the necessary configuration in your `angular.json`.
+  You can run `npx storybook@latest init` sequentially for each project to set up Storybook for each of them to automatically create the `.storybook` folder and create the necessary configuration in your `angular.json`.
 
-  You can then use [Storybook composition](https://storybook.js.org/docs/angular/sharing/storybook-composition) to composite multiple Storybooks into one.
+  You can then combine multiple Storybooks with [Storybook composition](../../sharing/storybook-composition.mdx).
 
   ### How do I configure Angular's builder for Storybook?
 
@@ -364,7 +351,9 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
   | Configuration element        | Description                                                                                                                                                                                     |
   | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
   | `"browserTarget"`            | Build target to be served using the following format. <br /> `"example-project:builder:config"`                                                                                                 |
-  | `"tsConfig"`                 | Location of the TypeScript configuration file, relative to the current workspace. <br /> `"tsConfig": "./tsconfig.json"`.                                                                       |
+  | `"debugWebpack"`             | Debug the Webpack configuration <br /> `"debugWebpack": true`                                                                                                                                   |
+  | `"tsConfig"`                 | Location of the TypeScript configuration file relative to the current workspace. <br /> `"tsConfig": "./tsconfig.json"`.                                                                        |
+  | `"preserveSymlinks"`         | Do not use the real path when resolving modules. If true, symlinks are resolved to their real path; otherwise, they are resolved to their symlinked path. <br /> `"preserveSymlinks": true`     |
   | `"port"`                     | Port used by Storybook. <br /> `"port": 6006`                                                                                                                                                   |
   | `"host"`                     | Set up a custom host for Storybook. <br /> `"host": "http://my-custom-host"`                                                                                                                    |
   | `"configDir"`                | Storybook configuration directory location. <br /> `"configDir": ".storybook"`                                                                                                                  |
@@ -374,10 +363,20 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
   | `"sslKey"`                   | Provides an SSL key to serve Storybook. <br /> `"sslKey": "your-ssl-key"`                                                                                                                       |
   | `"smokeTest"`                | Exit Storybook after successful start. <br /> `"smokeTest": true`                                                                                                                               |
   | `"ci"`                       | Starts Storybook in CI mode (skips interactive prompts and will not open browser window). <br /> `"ci": true`                                                                                   |
+  | `"open"`                     | Whether to open Storybook automatically in the browser. <br /> `"open": true`                                                                                                                   |
   | `"quiet"`                    | Filters Storybook verbose build output. <br /> `"quiet": true`                                                                                                                                  |
+  | `"enableProdMode"`           | Disable Angular's development mode, which turns off assertions and other checks within the framework. <br /> `"enableProdMode": true`                                                           |
   | `"docs"`                     | Starts Storybook in [documentation mode](../../writing-docs/build-documentation.mdx#preview-storybooks-documentation). <br /> `"docs": true`                                                    |
-  | `"styles"`                   | Provide the location of the [application's styles](../../configure/styling-and-css.mdx#importing-css-files) to be used with Storybook. <br /> `"styles": ["src/styles.css", "src/styles.scss"]` |
+  | `"compodoc"`                 | Execute compodoc before. <br /> `"compodoc": true`                                                                                                                                              |
+  | `"compodocArgs"`             | Compodoc [options](https://compodoc.app/guides/options.html). Options `-p` with tsconfig path and `-d` with workspace root is always given. <br /> `"compodocArgs": ["-e", "json"]`             |
+  | `"styles"`                   | Provide the location of the [application's styles](../../configure/styling-and-css.mdx#global-styles) to be used with Storybook. <br /> `"styles": ["src/styles.css", "src/styles.scss"]`       |
   | `"stylePreprocessorOptions"` | Provides further customization for style preprocessors resolved to the workspace root. <br /> `"stylePreprocessorOptions": { "includePaths": ["src/styles"] }`                                  |
+  | `"assets"`                   | List of static application assets. <br /> `"assets": ["src/assets"]`                                                                                                                            |
+  | `"initialPath"`              | URL path to be appended when visiting Storybook for the first time. <br /> `"initialPath": "docs/configure-your-project--docs"`                                                                 |
+  | `"webpackStatsJson"`         | Write Webpack Stats JSON to disk. <br /> `"webpackStatsJson": true`                                                                                                                             |
+  | `"previewUrl"`               | Disables the default storybook preview and lets you use your own. <br /> `"previewUrl": "iframe.html"`                                                                                          |
+  | `"loglevel"`                 | Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent]. <br /> `"loglevel": "info"`                                                       |
+  | `"sourceMap"`                | Configure [sourcemaps](https://angular.io/guide/workspace-config#source-map-configuration.). <br /> `"sourceMap": true`                                                                         |
 
   The full list of options can be found in the Angular builder schemas:
 
@@ -390,12 +389,10 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
 
   You can pass an options object for additional configuration if needed:
 
-  ```js
-  // .storybook/main.js
-  import * as path from 'path';
+  ```js title=".storybook/main.ts"
+  import type { StorybookConfig } from '@storybook/angular';
 
-  export default {
-    // ...
+  const config: StorybookConfig = {
     framework: {
       name: '@storybook/angular',
       options: {
@@ -411,7 +408,7 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
 
   Type: `Record<string, any>`
 
-  Configure options for the [framework's builder](../../api/main-config/main-config-framework.mdx#optionsbuilder). For Angular, , available options can be found in the [Webpack builder docs](../../builders/webpack.mdx).
+  Configure options for the [framework's builder](../../api/main-config/main-config-framework.mdx#optionsbuilder). For this framework, available options can be found in the [Webpack builder docs](../../builders/webpack.mdx). 
 
   {/* End supported renderers */}
 </If>
diff --git a/docs/get-started/frameworks/react-vite.mdx b/docs/get-started/frameworks/react-vite.mdx
index 66325071b4b5..d2de31b5b328 100644
--- a/docs/get-started/frameworks/react-vite.mdx
+++ b/docs/get-started/frameworks/react-vite.mdx
@@ -11,7 +11,7 @@ Storybook for React & Vite is a [framework](../../contribute/framework.mdx) that
 * 🪄 Zero config
 * 💫 and more!
 
-<If notRenderer={'react'}>
+<If notRenderer="react">
   <Callout variant="info">
     Storybook for React & Vite is only supported in [React](?renderer=react) projects.
   </Callout>
@@ -19,7 +19,7 @@ Storybook for React & Vite is a [framework](../../contribute/framework.mdx) that
   {/* End non-supported renderers */}
 </If>
 
-<If renderer={'react'}>
+<If renderer="react">
   ## Requirements
 
   * React ≥ 16.8
@@ -86,27 +86,17 @@ Storybook for React & Vite is a [framework](../../contribute/framework.mdx) that
 
   You can pass an options object for additional configuration if needed:
 
-  ```ts
-  // .storybook/main.ts
-  import type { StorybookConfig } from '@storybook/react-vite';
+  {/* prettier-ignore-start */}
 
-  const config: StorybookConfig = {
-    framework: {
-      name: '@storybook/react-vite',
-      options: {
-        // ...
-      },
-    },
-  };
+  <CodeSnippets path="react-vite-framework-options.md" />
 
-  export default config;
-  ```
+  {/* prettier-ignore-end */}
 
   #### `builder`
 
   Type: `Record<string, any>`
 
   Configure options for the [framework's builder](../../api/main-config/main-config-framework.mdx#optionsbuilder). For this framework, available options can be found in the [Vite builder docs](../../builders/vite.mdx).
-
+  
   {/* End supported renderers */}
 </If>
diff --git a/docs/get-started/frameworks/react-webpack5.mdx b/docs/get-started/frameworks/react-webpack5.mdx
index 402efef8b8f9..7aef5014ee84 100644
--- a/docs/get-started/frameworks/react-webpack5.mdx
+++ b/docs/get-started/frameworks/react-webpack5.mdx
@@ -7,7 +7,7 @@ sidebar:
 
 Storybook for React & Webpack is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for [React](https://react.dev/) applications built with [Webpack](https://webpack.js.org/).
 
-<If notRenderer={'react'}>
+<If notRenderer="react">
   <Callout variant="info">
     Storybook for React & Webpack is only supported in [React](?renderer=react) projects.
   </Callout>
@@ -15,7 +15,7 @@ Storybook for React & Webpack is a [framework](../../contribute/framework.mdx) t
   {/* End non-supported renderers */}
 </If>
 
-<If renderer={'react'}>
+<If renderer="react">
   ## Requirements
 
   * React ≥ 16.8
@@ -112,21 +112,11 @@ Storybook for React & Webpack is a [framework](../../contribute/framework.mdx) t
 
   You can pass an options object for additional configuration if needed:
 
-  ```ts
-  // .storybook/main.ts
-  import type { StorybookConfig } from '@storybook/react-webpack5';
-
-  const config: StorybookConfig = {
-    framework: {
-      name: '@storybook/react-webpack5',
-      options: {
-        // ...
-      },
-    },
-  };
-
-  export default config;
-  ```
+  {/* prettier-ignore-start */}
+
+  <CodeSnippets path="react-webpack5-framework-options.md" />
+
+  {/* prettier-ignore-end */}  
 
   #### `builder`
 
diff --git a/docs/get-started/frameworks/vue3-vite.mdx b/docs/get-started/frameworks/vue3-vite.mdx
index 5aa98fad96c4..290d77ade9b0 100644
--- a/docs/get-started/frameworks/vue3-vite.mdx
+++ b/docs/get-started/frameworks/vue3-vite.mdx
@@ -12,7 +12,7 @@ Storybook for Vue & Vite is a [framework](../../contribute/framework.mdx) that m
 * 🧠 Comprehensive docgen
 * 💫 and more!
 
-<If notRenderer={'vue'}>
+<If notRenderer="vue">
   <Callout variant="info">
     Storybook for Vue & Vite is only supported in [Vue](?renderer=vue) projects.
   </Callout>
@@ -20,7 +20,7 @@ Storybook for Vue & Vite is a [framework](../../contribute/framework.mdx) that m
   {/* End non-supported renderers */}
 </If>
 
-<If renderer={'vue'}>
+<If renderer="vue">
   ## Requirements
 
   * Vue ≥ 3
@@ -75,37 +75,33 @@ Storybook for Vue & Vite is a [framework](../../contribute/framework.mdx) that m
 
   ## Extending the Vue application
 
-  Storybook creates a [Vue 3 application](https://vuejs.org/api/application.html#application-api) for your component preview. When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js` file.
+  Storybook creates a [Vue 3 application](https://vuejs.org/api/application.html#application-api) for your component preview. When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js|ts` file.
 
-  Therefore, Storybook provides you with a `setup` function exported from this package, which receives as a callback your Storybook instance, which you can interact with and add your custom configuration.
+  Therefore, Storybook provides you with a `setup` function exported from this package. This function receives your Storybook instance as a callback, which you can interact with and add your custom configuration.
 
-  ```js
-  // .storybook/preview.js
+  ```js title=".storybook/preview.js|ts"
   import { setup } from '@storybook/vue3';
 
   setup((app) => {
     app.use(MyPlugin);
     app.component('my-component', MyComponent);
     app.mixin({
-      /* My mixin */
+      // My mixin
     });
   });
-
-  // Rest of the file...
   ```
 
   ## Using `vue-component-meta`
 
   <Callout variant="info">
-    `vue-component-meta` is only available in Storybook ≥ 8. It is currently opt-in, but will become the default in a future version of Storybook.
+    `vue-component-meta` is only available in Storybook ≥ 8. It is currently an opt-in, but it will become the default in a future version of Storybook.
   </Callout>
 
   [`vue-component-meta`](https://github.com/vuejs/language-tools/tree/master/packages/component-meta) is a tool maintained by the Vue team that extracts metadata from Vue components. Storybook can use it to generate the [controls](../../essentials/controls.mdx) for your stories and documentation. It's a more full-featured alternative to `vue-docgen-api` and is recommended for most projects.
 
   If you want to use `vue-component-meta`, you can configure it in your `.storybook/main.js|ts` file:
 
-  ```ts
-  // .storybook/main.ts
+  ```ts title=".storybook/main.ts"
   import type { StorybookConfig } from '@storybook/vue3-vite';
 
   const config: StorybookConfig = {
@@ -124,16 +120,15 @@ Storybook for Vue & Vite is a [framework](../../contribute/framework.mdx) that m
 
   ### Support for multiple component types
 
-  `vue-component-meta` supports all types of Vue components (including SFC, functional, composition / options API components) from `.vue`, `.ts`, `.tsx`, `.js`, and `.jsx` files.
+  `vue-component-meta` supports all types of Vue components (including SFC, functional, composition/options API components) from `.vue`, `.ts`, `.tsx`, `.js`, and `.jsx` files.
 
   It also supports both default and named component exports.
 
   ### Prop description and JSDoc tag annotations
 
-  To provide a description for a prop, including tags, you can use JSDoc comments in your component's props definition:
+  To describe a prop, including tags, you can use JSDoc comments in your component's props definition:
 
-  ```html
-  {/* YourComponent.vue */}
+  ```html title="YourComponent.vue"
   <script setup lang="ts">
     interface MyComponentProps {
       /** The name of the user */
@@ -160,8 +155,7 @@ Storybook for Vue & Vite is a [framework](../../contribute/framework.mdx) that m
 
   To provide a type for an emitted event, you can use TypeScript types (including JSDoc comments) in your component's `defineEmits` call:
 
-  ```html
-  {/* YourComponent.vue */}
+  ```html title="YourComponent.vue"
   <script setup lang="ts">
     type MyChangeEvent = 'change';
 
@@ -186,8 +180,7 @@ Storybook for Vue & Vite is a [framework](../../contribute/framework.mdx) that m
 
   The slot types are automatically extracted from your component definition and displayed in the controls panel.
 
-  ```html
-  {/* YourComponent.vue */}
+  ```html title="YourComponent.vue"
   <template>
     <slot :num="123"></slot>
     <br />
@@ -201,7 +194,7 @@ Storybook for Vue & Vite is a [framework](../../contribute/framework.mdx) that m
   <script setup lang="ts"></script>
   ```
 
-  If you use `defineSlots`, you can provide a description for each slot using JSDoc comments in your component's slots definition:
+  If you use `defineSlots`, you can describe each slot using JSDoc comments in your component's slots definition:
 
   ```ts
   defineSlots<{
@@ -222,10 +215,9 @@ Storybook for Vue & Vite is a [framework](../../contribute/framework.mdx) that m
 
   ### Exposed properties and methods
 
-  The properties and methods exposed by your component are automatically extracted and displayed in the controls panel.
+  The properties and methods exposed by your component are automatically extracted and displayed in the [Controls](../../essentials/controls.mdx) panel.
 
-  ```html
-  {/* YourComponent.vue */}
+  ```html title="YourComponent.vue"
   <script setup lang="ts">
     import { ref } from 'vue';
 
@@ -247,10 +239,9 @@ Storybook for Vue & Vite is a [framework](../../contribute/framework.mdx) that m
 
   ### Override the default configuration
 
-  If you're working with a project that relies on [`tsconfig references`](https://www.typescriptlang.org/docs/handbook/project-references.html) to link to other existing configuration files (e.g. `tsconfig.app.json`, `tsconfig.node.json`), we recommend that you update your [`.storybook/main.js|ts`](../../configure/index.mdx) configuration file and add the following:
+  If you're working with a project that relies on [`tsconfig references`](https://www.typescriptlang.org/docs/handbook/project-references.html) to link to other existing configuration files (e.g., `tsconfig.app.json`, `tsconfig.node.json`), we recommend that you update your [`.storybook/main.js|ts`](../../configure/index.mdx) configuration file and add the following:
 
-  ```ts
-  // .storybook/main.ts
+  ```ts title=".storybook/main.ts"
   import type { StorybookConfig } from '@storybook/vue3-vite';
 
   const config: StorybookConfig = {
@@ -269,7 +260,7 @@ Storybook for Vue & Vite is a [framework](../../contribute/framework.mdx) that m
   ```
 
   <Callout variant="info">
-    This is not a limitation of Storybook, but instead how `vue-component-meta` works. For more information, refer to the appropriate [GitHub issue](https://github.com/vuejs/language-tools/issues/3896).
+    This is not a limitation of Storybook, but how `vue-component-meta` works. For more information, refer to the appropriate [GitHub issue](https://github.com/vuejs/language-tools/issues/3896).
   </Callout>
 
   Otherwise, you might face missing component types/descriptions or unresolvable import aliases like `@/some/import`.
@@ -292,21 +283,11 @@ Storybook for Vue & Vite is a [framework](../../contribute/framework.mdx) that m
 
   You can pass an options object for additional configuration if needed:
 
-  ```ts
-  // .storybook/main.ts
-  import type { StorybookConfig } from '@storybook/vue3-vite';
+  {/* prettier-ignore-start */}
 
-  const config: StorybookConfig = {
-    framework: {
-      name: '@storybook/vue3-vite',
-      options: {
-        docgen: 'vue-component-meta',
-      },
-    },
-  };
+  <CodeSnippets path="vue-vite-framework-options.md" />
 
-  export default config;
-  ```
+  {/* prettier-ignore-end */}
 
   #### `builder`
 
diff --git a/docs/get-started/frameworks/vue3-webpack5.mdx b/docs/get-started/frameworks/vue3-webpack5.mdx
index a9f7f900720b..b98a975a80c7 100644
--- a/docs/get-started/frameworks/vue3-webpack5.mdx
+++ b/docs/get-started/frameworks/vue3-webpack5.mdx
@@ -7,7 +7,7 @@ sidebar:
 
 Storybook for Vue & Webpack is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for [Vue](https://vuejs.org/) applications built with [Webpack](https://webpack.js.org/).
 
-<If notRenderer={'vue'}>
+<If notRenderer="vue">
   <Callout variant="info">
     Storybook for Vue & Webpack is only supported in [Vue](?renderer=vue) projects.
   </Callout>
@@ -15,7 +15,7 @@ Storybook for Vue & Webpack is a [framework](../../contribute/framework.mdx) tha
   {/* End non-supported renderers */}
 </If>
 
-<If renderer={'vue'}>
+<If renderer="vue">
   ## Requirements
 
   * Vue ≥ 3.0
@@ -88,20 +88,18 @@ Storybook for Vue & Webpack is a [framework](../../contribute/framework.mdx) tha
 
   ## Extending the Vue application
 
-  Storybook creates a [Vue 3 application](https://vuejs.org/api/application.html#application-api) for your component preview. When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js` file.
+  Storybook creates a [Vue 3 application](https://vuejs.org/api/application.html#application-api) for your component preview. When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js|ts` file.
 
-  Therefore, Storybook provides you with a `setup` function exported from this package, which receives as a callback your Storybook instance, which you can interact with and add your custom configuration.
-
-  ```js
-  // .storybook/preview.js
+  Therefore, Storybook provides you with a `setup` function exported from this package. This function receives your Storybook instance as a callback, which you can interact with and add your custom configuration.
 
+  ```js title=".storybook/preview.js|ts"
   import { setup } from '@storybook/vue3';
 
   setup((app) => {
     app.use(MyPlugin);
     app.component('my-component', MyComponent);
     app.mixin({
-      /* My mixin */
+      // My mixin
     });
   });
   ```
@@ -124,21 +122,11 @@ Storybook for Vue & Webpack is a [framework](../../contribute/framework.mdx) tha
 
   You can pass an options object for additional configuration if needed:
 
-  ```ts
-  // .storybook/main.ts
-  import type { StorybookConfig } from '@storybook/vue-webpack5';
+  {/* prettier-ignore-start */}
 
-  const config: StorybookConfig = {
-    framework: {
-      name: '@storybook/vue-webpack5',
-      options: {
-        // ...
-      },
-    },
-  };
+  <CodeSnippets path="vue-webpack5-framework-options.md" />
 
-  export default config;
-  ```
+  {/* prettier-ignore-end */}
 
   #### `builder`
 
diff --git a/docs/get-started/frameworks/web-components-vite.mdx b/docs/get-started/frameworks/web-components-vite.mdx
index 82f0c730fcbd..b5a881d26102 100644
--- a/docs/get-started/frameworks/web-components-vite.mdx
+++ b/docs/get-started/frameworks/web-components-vite.mdx
@@ -7,7 +7,7 @@ sidebar:
 
 Storybook for Web components & Vite is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for applications using [Web components](https://www.webcomponents.org/introduction) built with [Vite](https://vitejs.dev/).
 
-<If notRenderer={'web-components'}>
+<If notRenderer="web-components">
   <Callout variant="info">
     Storybook for Web components & Vite is only supported in [Web components](?renderer=web-components) projects.
   </Callout>
@@ -15,7 +15,7 @@ Storybook for Web components & Vite is a [framework](../../contribute/framework.
   {/* End non-supported renderers */}
 </If>
 
-<If renderer={'web-components'}>
+<If renderer="web-components">
   ## Requirements
 
   * Vite ≥ 4.0
@@ -73,20 +73,11 @@ Storybook for Web components & Vite is a [framework](../../contribute/framework.
 
   You can pass an options object for additional configuration if needed:
 
-  ```js
-  // .storybook/main.js
-  import * as path from 'path';
-
-  export default {
-    // ...
-    framework: {
-      name: '@storybook/web-components-vite',
-      options: {
-        // ...
-      },
-    },
-  };
-  ```
+  {/* prettier-ignore-start */}
+
+  <CodeSnippets path="web-components-vite-framework-options.md" />
+
+  {/* prettier-ignore-end */}  
 
   The available options are:
 
diff --git a/docs/get-started/frameworks/web-components-webpack5.mdx b/docs/get-started/frameworks/web-components-webpack5.mdx
index a9e56ef0ccec..263d06ca3474 100644
--- a/docs/get-started/frameworks/web-components-webpack5.mdx
+++ b/docs/get-started/frameworks/web-components-webpack5.mdx
@@ -7,7 +7,7 @@ sidebar:
 
 Storybook for Web components & Webpack is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for applications using [Web components](https://www.webcomponents.org/introduction) built with [Webpack](https://webpack.js.org/).
 
-<If notRenderer={'web-components'}>
+<If notRenderer="web-components">
   <Callout variant="info">
     Storybook for Web components & Webpack is only supported in [Web components](?renderer=web-components) projects.
   </Callout>
@@ -15,7 +15,7 @@ Storybook for Web components & Webpack is a [framework](../../contribute/framewo
   {/* End non-supported renderers */}
 </If>
 
-<If renderer={'web-components'}>
+<If renderer="web-components">
   ## Requirements
 
   * Webpack ≥ 5.0
@@ -87,30 +87,19 @@ Storybook for Web components & Webpack is a [framework](../../contribute/framewo
 
   ## Hot Module Reloading (HMR)
 
-  Web components are registered on global registry, which only accepts a given name/class once. That can lead to errors when using classical HMR. While there are ideas on how to achieve HMR with a static registry, there is no proven solution yet. Therefore, the best approach for now is to do full page reloads while developing. You can ensure those page reloads happen quickly by defining your stories as specific states of components (which we would recommend regardless).
+  Web components are registered on a global registry, which only accepts a given name/class once. That can lead to errors when using classical HMR. While there are ideas for achieving HMR with a static registry, there has yet to be a proven solution. Therefore, the best approach, for now, is to do full-page reloads while developing. You can ensure that page reloads happen quickly by defining your stories as specific states of components (which we recommend regardless).
 
-  ## Set up es6/7 dependencies
+  ## Set up ES6/7 dependencies
 
-  By default, Storybook only works with precompiled ES5 code. Because most web components themselves and their libs are distributed as ES2017, you will need to manually mark those packages as "needs transpilation".
+  By default, Storybook only works with precompiled ES5 code. Because most Web Components and their libs are distributed as ES2017, you must mark those packages as "needs transpilation" manually.
 
   For example, if you have a library called `my-library` which is in ES2017, then you can configure your project like so:
 
-  ```js
-  // .storybook/main.js
-
-  export default {
-    webpackFinal: async (config) => {
-      // Find web-components rule for extra transpilation
-      const webComponentsRule = config.module.rules.find(
-        (rule) => rule.use && rule.use.options && rule.use.options.babelrc === false
-      );
-      // Add your own `my-library`
-      webComponentsRule.test.push(new RegExp(`node_modules(\\/|\\\\)my-library(.*)\\.js$`));
-
-      return config;
-    },
-  };
-  ```
+  {/* prettier-ignore-start */}
+
+  <CodeSnippets path="web-components-webpack5-transpilation.md" />
+
+  {/* prettier-ignore-end */}  
 
   By default, the following folders are transpiled:
 
@@ -123,9 +112,9 @@ Storybook for Web components & Webpack is a [framework](../../contribute/framewo
   * `node_modules/@vaadin/*.js`
 
   <Callout variant="info">
-    Note that the `src` folder is also included. This provides some extra configuration to allow for `import.meta` and some other features.
+    Note that the `src` folder is also included. This provides extra configuration for `import.meta` and other features.
 
-    If you use a folder for your components/stories other than `src`, you will need to use the configuration example above to have it properly transpiled.
+    If you use a folder for your components/stories other than `src`, you must use the configuration example above to have it correctly transpiled.
   </Callout>
 
   ## API
@@ -134,20 +123,11 @@ Storybook for Web components & Webpack is a [framework](../../contribute/framewo
 
   You can pass an options object for additional configuration if needed:
 
-  ```js
-  // .storybook/main.js
-  import * as path from 'path';
-
-  export default {
-    // ...
-    framework: {
-      name: '@storybook/web-components-webpack5',
-      options: {
-        // ...
-      },
-    },
-  };
-  ```
+  {/* prettier-ignore-start */}
+
+  <CodeSnippets path="web-components-webpack5-framework-options.md" />
+
+  {/* prettier-ignore-end */}  
 
   The available options are:
 
@@ -167,7 +147,7 @@ Storybook for Web components & Webpack is a [framework](../../contribute/framewo
   Failed to execute 'define' on 'CustomElementRegistry': the name "..." has already been used with this registry
   ```
 
-  This error occurs because the component is already registered in the global registry. See the [limitations of HMR with web components](#hot-module-reloading-hmr) for more information.
+  This error occurs because the component is already registered in the global registry. For more information, see the [limitations of HMR with web components](#hot-module-reloading-hmr).
 
   {/* End supported renderers */}
 </If>
diff --git a/docs/get-started/install.mdx b/docs/get-started/install.mdx
index ff1d301b1441..825dd86623f4 100644
--- a/docs/get-started/install.mdx
+++ b/docs/get-started/install.mdx
@@ -119,28 +119,18 @@ There are some noteworthy items here:
 
   {/* prettier-ignore-end */}
 
+  <If notRenderer="angular">
+
+    #### Storybook doesn't work with an empty directory
+
+    By default, Storybook is configured to detect whether you're initializing it on an empty directory or an existing project. However, if you attempt to initialize Storybook, select a Vite-based framework (e.g., [React](./frameworks/react-vite.mdx)) in a directory that only contains a `package.json` file, you may run into issues with [Yarn Modern](https://yarnpkg.com/getting-started). This is due to how Yarn handles peer dependencies and how Storybook is set up to work with Vite-based frameworks, as it requires the [Vite](https://vitejs.dev/) package to be installed. To solve this issue, you must install Vite manually and initialize Storybook.
+    
+  </If>
+  
   <IfRenderer renderer="angular">
     #### Storybook doesn't work with my Angular project using the Angular CLI
 
-    Out of the box, adding Storybook to an Angular project using the Angular CLI requires you to run the installation command from the root of the project or, if you're working with a monorepo environment, from the directory where the Angular configuration file (i.e., `angular.json`) is located as it will be used to set up the builder configuration necessary to run Storybook. However, if you need, you can extend the builder configuration to customize Storybook's behavior. Listed below are the supported options:
-
-    | Configuration element        | Description                                                                                                                                                                                         |
-    | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-    | `"browserTarget"`            | Build target to be served using the following format. <br /> `"example-project:builder:config"`                                                                                                     |
-    | `"tsConfig"`                 | Location of the TypeScript configuration file, relative to the current workspace. <br /> `"tsConfig": "./tsconfig.json"`.                                                                           |
-    | `"port"`                     | Port used by Storybook. <br /> `"port": 6006`                                                                                                                                                       |
-    | `"host"`                     | Set up a custom host for Storybook. <br /> `"host": "http://my-custom-host"`                                                                                                                        |
-    | `"configDir"`                | Storybook configuration directory location. <br /> `"configDir": ".storybook"`                                                                                                                      |
-    | `"https"`                    | Starts Storybook with HTTPS enabled. <br /> `"https": true` <br /> Requires custom certificate information.                                                                                         |
-    | `"sslCa"`                    | Provides an SSL certificate authority. <br /> `"sslCa": "your-custom-certificate-authority"` <br /> Optional usage with `"https"`                                                                   |
-    | `"sslCert"`                  | Provides an SSL certificate. <br /> `"sslCert": "your-custom-certificate"` <br /> Required for `https`                                                                                              |
-    | `"sslKey"`                   | Provides an SSL key to serve Storybook. <br /> `"sslKey": "your-ssl-key"`                                                                                                                           |
-    | `"smokeTest"`                | Exit Storybook after successful start. <br /> `"smokeTest": true`                                                                                                                                   |
-    | `"ci"`                       | Starts Storybook in CI mode (skips interactive prompts and will not open browser window). <br /> `"ci": true`                                                                                       |
-    | `"quiet"`                    | Filters Storybook verbose build output. <br /> `"quiet": true`                                                                                                                                      |
-    | `"docs"`                     | Starts Storybook in [documentation mode](../writing-docs/build-documentation.mdx#preview-storybooks-documentation). <br /> `"docs": true`                                                           |
-    | `"styles"`                   | Provide the location of the [application's styles](../configure/styling-and-css.mdx#importing-css-files) to be used with Storybook. <br /> `"styles": ["src/styles.css", "src/styles.scss"]` <br /> |
-    | `"stylePreprocessorOptions"` | Provides further customization for style preprocessors resolved to the workspace root. <br /> `"stylePreprocessorOptions": { "includePaths": ["src/styles"] }`                                      |
+    Out of the box, adding Storybook to an Angular project using the Angular CLI requires you to run the installation command from the root of the project or, if you're working with a monorepo environment, from the directory where the Angular configuration file (i.e., `angular.json`) is located as it will be used to set up the builder configuration necessary to run Storybook. However, if you need, you can extend the builder configuration to customize Storybook's behavior. To learn more about the available options, see the [Angular framework documentation](./frameworks/angular.mdx#how-do-i-configure-angulars-builder-for-storybook).
   </IfRenderer>
 
   <IfRenderer renderer="ember">
diff --git a/docs/get-started/whats-a-story.mdx b/docs/get-started/whats-a-story.mdx
index d0d3e7da565f..1b11763a846a 100644
--- a/docs/get-started/whats-a-story.mdx
+++ b/docs/get-started/whats-a-story.mdx
@@ -27,7 +27,7 @@ When you installed Storybook, the CLI created example components that demonstrat
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-with-args.md" usesCsf3 csf2Path="get-started/whats-a-story#snippet-button-story-with-args" />
+<CodeSnippets path="button-story-with-args.md" />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/get-started/why-storybook.mdx b/docs/get-started/why-storybook.mdx
index e1715fee8a71..59215b00805e 100644
--- a/docs/get-started/why-storybook.mdx
+++ b/docs/get-started/why-storybook.mdx
@@ -35,7 +35,7 @@ You write stories for granular UI component variation and then use those stories
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="histogram-story.md" usesCsf3 csf2Path="why-storybook#snippet-histogram-story" />
+<CodeSnippets path="histogram-story.md" />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/sharing/design-integrations.mdx b/docs/sharing/design-integrations.mdx
index dcc1ff4a57d7..1c98edbf39b0 100644
--- a/docs/sharing/design-integrations.mdx
+++ b/docs/sharing/design-integrations.mdx
@@ -70,13 +70,11 @@ Run the following command to install the addon.
 
 {/* prettier-ignore-end */}
 
-Update your Storybook configuration (in `.storybook/main.js|ts`) to include the addon.
+<Callout variant="info">
 
-{/* prettier-ignore-start */}
-
-<CodeSnippets path="storybook-main-figma-addon-register.md" />
+The CLI's [`add`](../api/cli-options.mdx#add) command automates the addon's installation and setup. To install it manually, see our [documentation](../addons/install-addons.mdx#manual-installation) on how to install addons.
 
-{/* prettier-ignore-end */}
+</Callout>
 
 #### Link Figma components to stories
 
@@ -90,7 +88,7 @@ In Storybook, add a new [parameter](../writing-stories/parameters.mdx) named `de
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="component-story-figma-integration.md" usesCsf3 csf2Path="sharing/design-integrations#snippet-component-story-figma-integration" />
+<CodeSnippets path="component-story-figma-integration.md" />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/sharing/package-composition.mdx b/docs/sharing/package-composition.mdx
index 0dcb800d4a4e..1531370d2d21 100644
--- a/docs/sharing/package-composition.mdx
+++ b/docs/sharing/package-composition.mdx
@@ -39,10 +39,9 @@ Change the version of the composed Storybook to see how the library evolves. Thi
 
 Component library authors can expand adoption by composing their components in their consumer’s Storybooks.
 
-Add a `storybook` property in your published `package.json`that contains an object with a `url` field. Point the URL field to a published Storybook at the version you want.
+Add a `storybook` property in your published `package.json` that contains an object with a `url` field. Point the URL field to a published Storybook at the version you want.
 
-```json
-// Your component library’s package.json
+```json title="package.json"
 {
   "storybook": {
     "url": "https://host.com/your-storybook-for-this-version"
@@ -54,7 +53,7 @@ Add a `storybook` property in your published `package.json`that contains an obje
 
 If you're using [Chromatic](./publish-storybook.mdx#publish-storybook-with-chromatic), you can provide a single URL for your Storybook in the `storybook.url` field. You do not need to change the URL each time you publish a new version. Storybook will automatically find the correct URL for your package. For example:
 
-```json
+```json title="package.json"
 {
   "storybook": {
     "url": "https://master--xyz123.chromatic.com"
diff --git a/docs/sharing/publish-storybook.mdx b/docs/sharing/publish-storybook.mdx
index 9a29b5cd6d1a..d02cf0c07339 100644
--- a/docs/sharing/publish-storybook.mdx
+++ b/docs/sharing/publish-storybook.mdx
@@ -142,7 +142,7 @@ To deploy Storybook on GitHub Pages, use the community-built [Deploy Storybook t
 </Callout>
 
 <details>
-  <summary><h2>Component Publishing Protocol (CPP)</h2></summary>
+  <summary><h3>Component Publishing Protocol (CPP)</h3></summary>
 
   Storybook can communicate with services that host built Storybooks online. This enables features such as [Composition](./storybook-composition.mdx). We categorize services via compliance with the "Component Publishing Protocol" (CPP) with various levels of support in Storybook.
 
diff --git a/docs/writing-docs/build-documentation.mdx b/docs/writing-docs/build-documentation.mdx
index 19f052996a4d..0d6716c0e51f 100644
--- a/docs/writing-docs/build-documentation.mdx
+++ b/docs/writing-docs/build-documentation.mdx
@@ -11,7 +11,7 @@ Storybook allows you to create rich and extensive [documentation](./index.mdx) t
 
 At any point during your development, you can preview the documentation you've written. Storybook allows you to generate a preview of the final documentation when you use the `--docs` flag. We recommend including it in your `package.json` as a new script:
 
-```json
+```json title="package.json"
 {
   "scripts": {
     "storybook-docs": "storybook dev --docs"
@@ -35,7 +35,7 @@ There's some caveats to this build mode, as to the normal Storybook build:
 
 You can also publish your documentation the same you would [publish](../sharing/publish-storybook.mdx) your Storybook. You can use the `--docs` flag with the [`storybook build`](../api/cli-options.mdx#build) command. We recommend as well including it as a script in your `package.json` file:
 
-```json
+```json title="package.json"
 {
   "scripts": {
     "build-storybook-docs": "storybook build --docs"
diff --git a/docs/writing-stories/args.mdx b/docs/writing-stories/args.mdx
index 073638f31e0e..7b3d3678d4a3 100644
--- a/docs/writing-stories/args.mdx
+++ b/docs/writing-stories/args.mdx
@@ -63,7 +63,7 @@ In the above example, we use the [object spread](https://developer.mozilla.org/e
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-component-args-primary.md" usesCsf3 csf2Path="writing-stories/args#snippet-button-story-component-args-primary" />
+<CodeSnippets path="button-story-component-args-primary.md" />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/writing-stories/build-pages-with-storybook.mdx b/docs/writing-stories/build-pages-with-storybook.mdx
index d2a91f007c14..fb69221d384d 100644
--- a/docs/writing-stories/build-pages-with-storybook.mdx
+++ b/docs/writing-stories/build-pages-with-storybook.mdx
@@ -45,7 +45,7 @@ In such cases, it is natural to use [args composition](./args.mdx#args-compositi
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="page-story-with-args-composition.md" usesCsf3 csf2Path="writing-stories/build-pages-with-storybook#snippet-page-story-with-args-composition" />
+<CodeSnippets path="page-story-with-args-composition.md" />
 
 {/* prettier-ignore-end */}
 
@@ -113,7 +113,7 @@ Components can receive data or configuration from context providers. For example
 
   {/* prettier-ignore-start */}
 
-  <CodeSnippets path="mock-context-container.md" usesCsf3 csf2Path="writing-stories/build-pages-with-storybook#snippet-mock-context-container" />
+  <CodeSnippets path="mock-context-container.md" />
 
   {/* prettier-ignore-end */}
 
diff --git a/docs/writing-stories/decorators.mdx b/docs/writing-stories/decorators.mdx
index a86e2ca8738e..ca01afe2ac5a 100644
--- a/docs/writing-stories/decorators.mdx
+++ b/docs/writing-stories/decorators.mdx
@@ -141,4 +141,4 @@ All decorators relevant to a story will run in the following order once the stor
 
 * Global decorators, in the order they are defined
 * Component decorators, in the order they are defined
-* Story decorators, in the order they are defined
+* Story decorators, in the order they are defined, starting from the innermost decorator and working outwards and up the hierarchy in the same order
diff --git a/docs/writing-stories/loaders.mdx b/docs/writing-stories/loaders.mdx
index 1fd5ee836aeb..1434906b1124 100644
--- a/docs/writing-stories/loaders.mdx
+++ b/docs/writing-stories/loaders.mdx
@@ -19,7 +19,7 @@ Loaders are helpful when you need to load story data externally (e.g., from a re
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="loader-story.md" usesCsf3 csf2Path="writing-stories/loaders#snippet-loader-story" />
+<CodeSnippets path="loader-story.md" />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/writing-stories/mocking-data-and-modules/mocking-network-requests.mdx b/docs/writing-stories/mocking-data-and-modules/mocking-network-requests.mdx
index ec53863e9f4b..7b7868c1f5d6 100644
--- a/docs/writing-stories/mocking-data-and-modules/mocking-network-requests.mdx
+++ b/docs/writing-stories/mocking-data-and-modules/mocking-network-requests.mdx
@@ -67,7 +67,7 @@ With the MSW addon, we can write stories that use MSW to mock the REST requests.
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="msw-addon-configure-handlers-http.md" usesCsf3 csf2Path="writing-stories/build-pages-with-storybook#snippet-documentscreen-story-msw-rest-request" />
+<CodeSnippets path="msw-addon-configure-handlers-http.md" />
 
 {/* prettier-ignore-end */}
 
@@ -89,7 +89,7 @@ The MSW addon allows you to write stories that use MSW to mock the GraphQL reque
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="msw-addon-configure-handlers-graphql.md" usesCsf3 csf2Path="writing-stories/build-pages-with-storybook#snippet-documentscreen-story-msw-graphql-query" />
+<CodeSnippets path="msw-addon-configure-handlers-graphql.md" />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/writing-stories/naming-components-and-hierarchy.mdx b/docs/writing-stories/naming-components-and-hierarchy.mdx
index d857310db8b0..228ef51298a5 100644
--- a/docs/writing-stories/naming-components-and-hierarchy.mdx
+++ b/docs/writing-stories/naming-components-and-hierarchy.mdx
@@ -29,7 +29,7 @@ When creating your stories, you can explicitly use the `title` parameter to defi
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-default-export.md" usesCsf3 csf2Path="writing-stories/naming-components-and-hierarchy#snippet-button-story-default-export" />
+<CodeSnippets path="button-story-default-export.md" />
 
 {/* prettier-ignore-end */}
 
@@ -43,13 +43,13 @@ It is also possible to group related components in an expandable interface to he
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-grouped.md" usesCsf3 csf2Path="writing-stories/naming-components-and-hierarchy#snippet-button-story-grouped" />
+<CodeSnippets path="button-story-grouped.md" />
 
 {/* prettier-ignore-end */}
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="checkbox-story-grouped.md" usesCsf3 csf2Path="writing-stories/naming-components-and-hierarchy#snippet-checkbox-story-grouped" />
+<CodeSnippets path="checkbox-story-grouped.md" />
 
 {/* prettier-ignore-end */}
 
@@ -67,7 +67,7 @@ Single-story components (i.e., component stories without **siblings**) whose **d
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-hoisted.md" usesCsf3 csf2Path="writing-stories/naming-components-and-hierarchy#snippet-button-story-hoisted" />
+<CodeSnippets path="button-story-hoisted.md" />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/writing-stories/stories-for-multiple-components.mdx b/docs/writing-stories/stories-for-multiple-components.mdx
index 9f23da3029e5..8dfae72d0c48 100644
--- a/docs/writing-stories/stories-for-multiple-components.mdx
+++ b/docs/writing-stories/stories-for-multiple-components.mdx
@@ -15,7 +15,7 @@ Here's an example with `List` and `ListItem` components:
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="list-story-with-subcomponents.md" usesCsf3 csf2Path="writing-stories/stories-for-multiple-components#snippet-list-story-with-subcomponents" />
+<CodeSnippets path="list-story-with-subcomponents.md" />
 
 {/* prettier-ignore-end */}
 
@@ -36,7 +36,7 @@ We can also reduce repetition in our stories by reusing story definitions. Here,
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="list-story-reuse-data.md" usesCsf3 csf2Path="writing-stories/#snippet-list-story-reuse-data" />
+<CodeSnippets path="list-story-reuse-data.md" />
 
 {/* prettier-ignore-end */}
 
@@ -51,7 +51,7 @@ By rendering the `Unchecked` story with its args, we are able to reuse the input
 
   {/* prettier-ignore-start */}
 
-  <CodeSnippets path="list-story-with-unchecked-children.md" usesCsf3 csf2Path="writing-stories/stories-for-multiple-components#snippet-list-story-with-unchecked-children" />
+  <CodeSnippets path="list-story-with-unchecked-children.md" />
 
   {/* prettier-ignore-end */}
 
@@ -78,7 +78,7 @@ Another option that is more “data”-based is to create a special “story-gen
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="list-story-template.md" usesCsf3 csf2Path="writing-stories/stories-for-multiple-components#snippet-list-story-template" />
+<CodeSnippets path="list-story-template.md" />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/writing-tests/component-testing.mdx b/docs/writing-tests/component-testing.mdx
index 7e2db96c874f..4eb04798a4fb 100644
--- a/docs/writing-tests/component-testing.mdx
+++ b/docs/writing-tests/component-testing.mdx
@@ -49,7 +49,7 @@ The test itself is defined inside a `play` function connected to a story. Here's
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="login-form-with-play-function.md" usesCsf3 csf2Path="writing-tests/interaction-testing#snippet-login-form-with-play-function" />
+<CodeSnippets path="login-form-with-play-function.md" />
 
 {/* prettier-ignore-end */}
 
@@ -203,7 +203,7 @@ Storybook’s `@storybook/test` also provides APIs from [Vitest](https://vitest.
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="storybook-interactions-play-function.md" usesCsf3 csf2Path="essentials/interactions#snippet-storybook-interactions-play-function" />
+<CodeSnippets path="storybook-interactions-play-function.md" />
 
 {/* prettier-ignore-end */}
 
@@ -213,7 +213,7 @@ For complex flows, it can be worthwhile to group sets of related interactions to
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="storybook-interactions-step-function.md" usesCsf3 csf2Path="writing-tests/interaction-testing#snippet-storybook-interactions-step-function" />
+<CodeSnippets path="storybook-interactions-step-function.md" />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/writing-tests/import-stories-in-tests/stories-in-end-to-end-tests.mdx b/docs/writing-tests/import-stories-in-tests/stories-in-end-to-end-tests.mdx
index c9a86b7eb7a8..d4aabb048a25 100644
--- a/docs/writing-tests/import-stories-in-tests/stories-in-end-to-end-tests.mdx
+++ b/docs/writing-tests/import-stories-in-tests/stories-in-end-to-end-tests.mdx
@@ -15,7 +15,7 @@ An example of an end-to-end test with Cypress and Storybook is testing a login c
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="login-form-with-play-function.md" usesCsf3 csf2Path="writing-tests/importing-stories-in-tests#snippet-login-form-with-play-function" />
+<CodeSnippets path="login-form-with-play-function.md" />
 
 {/* prettier-ignore-end */}
 
@@ -43,7 +43,7 @@ A real-life scenario of user flow testing with Playwright would be how to test a
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="login-form-with-play-function.md" usesCsf3 csf2Path="writing-tests/importing-stories-in-tests#snippet-login-form-with-play-function" />
+<CodeSnippets path="login-form-with-play-function.md" />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/writing-tests/test-coverage.mdx b/docs/writing-tests/test-coverage.mdx
index 7ac1d95f7bf1..128b2d662a92 100644
--- a/docs/writing-tests/test-coverage.mdx
+++ b/docs/writing-tests/test-coverage.mdx
@@ -27,15 +27,11 @@ Run the following command to install the addon.
 
 <CodeSnippets path="storybook-coverage-addon-install.md" />
 
-{/* prettier-ignore-end */}
-
-Update your Storybook configuration (in `.storybook/main.js|ts`) to include the coverage addon.
+<Callout variant="info">
 
-{/* prettier-ignore-start */}
+The CLI's [`add`](../api/cli-options.mdx#add) command automates the addon's installation and setup. To install it manually, see our [documentation](../addons/install-addons.mdx#manual-installation) on how to install addons.
 
-<CodeSnippets path="storybook-coverage-addon-registration.md" />
-
-{/* prettier-ignore-end */}
+</Callout>
 
 Start your Storybook with:
 
diff --git a/docs/writing-tests/test-runner.mdx b/docs/writing-tests/test-runner.mdx
index ac1fd7b7d3ba..9456b4892bae 100644
--- a/docs/writing-tests/test-runner.mdx
+++ b/docs/writing-tests/test-runner.mdx
@@ -26,7 +26,7 @@ Run the following command to install it.
 
 Update your `package.json` scripts and enable the test runner.
 
-```json
+```json title="package.json"
 {
   "scripts": {
     "test-storybook": "test-storybook"
@@ -336,7 +336,7 @@ Timeout - Async callback was not invoked within the 15000 ms timeout specified b
 
 It might be that Playwright couldn't handle testing the number of stories you have in your project. Perhaps you have a large number of stories, or your CI environment has a really low RAM configuration. In such cases, you should limit the number of workers that run in parallel by adjusting your command as follows:
 
-```json
+```json title="package.json"
 {
   "scripts": {
     "test-storybook:ci": "yarn test-storybook --maxWorkers=2"
diff --git a/docs/writing-tests/visual-testing.mdx b/docs/writing-tests/visual-testing.mdx
index 71765a828ccd..5c2904d64d19 100644
--- a/docs/writing-tests/visual-testing.mdx
+++ b/docs/writing-tests/visual-testing.mdx
@@ -49,8 +49,7 @@ The addon includes configuration options covering most use cases by default. You
 | `debug`           | Optional. Output verbose debugging information to the console. <br /> `"debug": true`                                                    |
 | `zip`             | Optional. Recommended for large projects. Configures the addon to deploy your Storybook to Chromatic as a zip file. <br /> `"zip": true` |
 
-```jsonc
-// ./chromatic.config.json
+```jsonc title="./chromatic.config.json"
 {
   "buildScriptName": "deploy-storybook",
   "debug": true,