diff --git a/docs/snippets/svelte/badge-story.mdx.mdx b/docs/snippets/svelte/badge-story.mdx.mdx
index 987ebd1047f..d31eefe343d 100644
--- a/docs/snippets/svelte/badge-story.mdx.mdx
+++ b/docs/snippets/svelte/badge-story.mdx.mdx
@@ -3,35 +3,41 @@
 
 import { Meta, Story, Canvas } from '@storybook/addon-docs';
 
-import { Badge } from './Badge.svelte';
+import Badge from './Badge.svelte';
 
 <Meta title="MDX/Badge" component={Badge} />
 
-export const Template = (args) => ({
-  Component: Badge,
-  props: args,
-});
+<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
 
 # Badge
 
 Let's define a story for our `Badge` component:
 
-<Story name="positive" args={{
-  status: 'positive',
-  label: 'Positive'
-}}>
-  {Template.bind({})}
-</Story>
+<Story 
+  name="positive" 
+  args={{
+    status: 'positive',
+    label: 'Positive'
+  }} 
+  render={(args) => ({
+    Component: Badge,
+    props: args,
+  })} />
+ 
 
 We can drop it in a `Canvas` to get a code snippet:
 
 <Canvas>
-  <Story name="negative" args={{
-    status: 'negative', 
-    label: 'Negative'
-  }}>
-    {Template.bind({})}
-  </Story>
+  <Story 
+    name="negative" 
+    args={{
+      status: 'negative', 
+      label: 'Negative'
+    }} 
+    render={(args) => ({
+      Component: Badge,
+      props: args,
+    })} />
 </Canvas>
 
 We can even preview multiple Stories in a block. This
@@ -39,23 +45,37 @@ gets rendered as a group but defines individual stories
 with unique URLs, which is great for review and testing.
 
 <Canvas>
-  <Story name="warning" args={{
-    status: 'warning',
-    label: 'Warning' 
-  }}>
-    {Template.bind({})}
-  </Story>
-  <Story name="neutral" args={{
-    status: 'neutral', 
-    label: 'Neutral' 
-  }}>
-    {Template.bind({})}
-  </Story>
-  <Story name="error" args={{
-    status: 'error', 
-    label: 'Error' 
-  }}>
-    {Template.bind({})}
-  </Story>
+  <Story 
+    name="warning" 
+    args={{
+      status: 'warning',
+      label: 'Warning' 
+    }}
+    render={(args) => ({
+      Component: Badge,
+      props: args,
+    })} />
+  
+  <Story 
+    name="neutral" 
+    args={{
+      status: 'neutral', 
+      label: 'Neutral' 
+    }}
+    render={(args) => ({
+      Component: Badge,
+      props: args,
+    })} />
+
+  <Story 
+    name="error" 
+    args={{
+      status: 'error', 
+      label: 'Error' 
+    }}
+    render={(args) => ({
+      Component: Badge,
+      props: args,
+    })} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/button-story-default-docs-code.mdx.mdx b/docs/snippets/svelte/button-story-default-docs-code.mdx.mdx
index 734b9c53c9b..941e8fe5363 100644
--- a/docs/snippets/svelte/button-story-default-docs-code.mdx.mdx
+++ b/docs/snippets/svelte/button-story-default-docs-code.mdx.mdx
@@ -21,6 +21,8 @@ export const someFunction = (someValue) => {
   return `i am a ${someValue}`;
 };
 
+<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
+
 <!-- 👇 Destructure the label from the args object and assigns the function result to a variable and pass it as a prop into the component -->
 <Story
   name="ExampleStory"
@@ -28,8 +30,8 @@ export const someFunction = (someValue) => {
     primary: true,
     size: 'small',
     label: "button",
-  }}>
-  {(args) => {
+  }}
+  render={(args) => {
     const { label } = args;
     const functionResult = someFunction(label);
     return {
@@ -40,5 +42,5 @@ export const someFunction = (someValue) => {
       },
     };
   }}
-</Story>
+/>
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/button-story-with-args.mdx.mdx b/docs/snippets/svelte/button-story-with-args.mdx.mdx
index 31a439535a2..c09e8dc74e7 100644
--- a/docs/snippets/svelte/button-story-with-args.mdx.mdx
+++ b/docs/snippets/svelte/button-story-with-args.mdx.mdx
@@ -5,19 +5,18 @@ import { Meta, Story } from '@storybook/addon-docs';
 
 import Button from './Button.svelte';
 
-<Meta title="Components/Button" component={Button} />
+<Meta title="Button" component={Button} />
 
-export const Template = (args) => ({
-  Component: Button,
-  props: args,
-});
+<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
 
 <Story
   name="Primary"
   args={{
     primary: true,
     label: 'Button',
-  }}>
-  {Template.bind({})}
-</Story>
+  }}
+  render={(args)=>({
+    Component: Button,
+    props: args,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/button-story-with-emojis.mdx.mdx b/docs/snippets/svelte/button-story-with-emojis.mdx.mdx
index 78b1dc8ec51..523eefe6a19 100644
--- a/docs/snippets/svelte/button-story-with-emojis.mdx.mdx
+++ b/docs/snippets/svelte/button-story-with-emojis.mdx.mdx
@@ -5,33 +5,37 @@ import { Meta, Story } from '@storybook/addon-docs';
 
 import Button from './Button.svelte';
 
-<Meta title="Components/Button" component={Button} />
+<Meta title="Button" component={Button} />
 
+<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
 
-<Story name="Primary">
-  {{
+<Story 
+  name="Primary"
+  render={() => ({
+    Component: Button,
     props: {
       background: '#ff0',
       label: 'Button',
     },
-  }}
-</Story>
-
-<Story name="Secondary">
-  {{
+  })} />
+ 
+<Story 
+  name="Secondary" 
+  render={() => ({
+    Component: Button,
     props: {
       background: '#ff0',
       label: '😄👍😍💯',
     },
-  }}
-</Story>
-
-<Story name="Tertiary">
-  {{
-    props: {
+  })} />
+  
+<Story 
+  name="Tertiary"
+  render={() => ({
+    Component: Button,
+     props: {
       background: '#ff0',
       label: '📚📕📈🤓',
     },
-  }}
-</Story>
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/button-story.mdx.mdx b/docs/snippets/svelte/button-story.mdx.mdx
index 43d30f35167..cc6a7ecc693 100644
--- a/docs/snippets/svelte/button-story.mdx.mdx
+++ b/docs/snippets/svelte/button-story.mdx.mdx
@@ -7,14 +7,17 @@ import Button from './Button.svelte';
 
 <Meta title="Button" component={Button}/>
 
+<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
+
 # Button
 
-<Story name="Primary">
-  {{
+<Story 
+  name="Primary"
+  render={() => ({
+    Component: Button,
     props: {
       primary: true,
       label: 'Button',
     },
-  }}
-</Story>
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/component-story-mdx-story-by-name.mdx.mdx b/docs/snippets/svelte/component-story-mdx-story-by-name.mdx.mdx
index cada06ef055..5b443becbfb 100644
--- a/docs/snippets/svelte/component-story-mdx-story-by-name.mdx.mdx
+++ b/docs/snippets/svelte/component-story-mdx-story-by-name.mdx.mdx
@@ -1,16 +1,19 @@
 ```md
 <!-- Button.stories.mdx --->
 
-import { Story } from '@storybook/addon-docs';
+import { Meta, Story } from '@storybook/addon-docs';
 
 import Button from './Button.svelte';
 
-export const Template = (args) => ({
-  Component: Button,
-  props: args,
-});
+<Meta title="Button" component={Button}/>
 
-<Story name="Basic" args={{ label: 'hello' }}>
-  {Template.bind({})}
-</Story>
+<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
+
+<Story 
+  name="Basic" 
+  args={{ label: 'hello' }}
+  render={(args) => ({
+    Component: Button,
+    props: args,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/component-story-static-asset-cdn.mdx.mdx b/docs/snippets/svelte/component-story-static-asset-cdn.mdx.mdx
index 74073dadbd3..0911014bb9b 100644
--- a/docs/snippets/svelte/component-story-static-asset-cdn.mdx.mdx
+++ b/docs/snippets/svelte/component-story-static-asset-cdn.mdx.mdx
@@ -5,17 +5,17 @@ import { Meta, Story } from '@storybook/addon-docs';
 
 import MyComponent from './MyComponent.svelte';
 
-<Meta title="img" />
+<Meta title="img" component={MyComponent} />
 
-<Story name="withAnImage">
-  {() => {
-    return {
-      Component: MyComponent,
-      props: {
-        src: 'https://place-hold.it/350x150',
-        alt: 'my image',
-      },
-    };
-  }}
-</Story>
+<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
+
+<Story 
+  name="withAnImage"
+  render={() => ({
+    Component: MyComponent,
+    props: {
+      src: 'https://place-hold.it/350x150',
+      alt: 'my image',
+    },
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/component-story-static-asset-with-import.mdx.mdx b/docs/snippets/svelte/component-story-static-asset-with-import.mdx.mdx
index 56492a6099b..a032fd009a9 100644
--- a/docs/snippets/svelte/component-story-static-asset-with-import.mdx.mdx
+++ b/docs/snippets/svelte/component-story-static-asset-with-import.mdx.mdx
@@ -7,21 +7,21 @@ import MyComponent from './MyComponent.svelte';
 
 import imageFile from './static/image.png';
 
-<Meta title="img" />
+<Meta title="img" component={MyComponent} />
 
 export const image = {
   src: imageFile,
   alt: 'my image',
 };
 
-<Story name="withAnImage">
-  {() => {
-    return {
-      Component: MyComponent,
-      props: {
-        image: image,
-      },
-    };
-  }}
-</Story>
+<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
+
+<Story 
+  name="withAnImage"
+  render={() => ({
+    Component: MyComponent,
+    props: {
+      image: image,
+    },
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/component-story-static-asset-without-import.mdx.mdx b/docs/snippets/svelte/component-story-static-asset-without-import.mdx.mdx
index 7c7c636e360..58eaa68b1c9 100644
--- a/docs/snippets/svelte/component-story-static-asset-without-import.mdx.mdx
+++ b/docs/snippets/svelte/component-story-static-asset-without-import.mdx.mdx
@@ -5,17 +5,17 @@ import { Meta, Story } from '@storybook/addon-docs';
 
 import MyComponent from './MyComponent.svelte0;
 
-<Meta title="img" />
+<Meta title="img" component={MyComponent} />
 
-<Story name="withAnImage">
-  {() => {
-    return {
-      Component: MyComponent,
-      props: {
-        src: '/image.png',
-        alt: 'my image',
-      },
-    };
-  }}
-</Story>
+<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
+
+<Story 
+  name="withAnImage"
+  render={() => ({
+    Component: MyComponent,
+    props: {
+      src: '/image.png',
+      alt: 'my image',
+    },
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/loader-story.mdx.mdx b/docs/snippets/svelte/loader-story.mdx.mdx
index fcda10e867d..2732de72da2 100644
--- a/docs/snippets/svelte/loader-story.mdx.mdx
+++ b/docs/snippets/svelte/loader-story.mdx.mdx
@@ -9,6 +9,8 @@ import fetch from 'node-fetch';
 
 <Meta title="Examples/Loader" component={TodoItem} />
 
+<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
+
 <Story
   name="Primary"
   loaders={[
@@ -18,13 +20,12 @@ import fetch from 'node-fetch';
       ).json(),
     }),
   ]}
->
-  {(args, { loaded: { todo } }) => ({
-    Component: SampleLoaderComponent,
+  render={(args, { loaded: { todo } }) => ({
+    Component: TodoItem,
     props: {
       ...args,
       todo,
     },
   })}
-</Story>
+/>
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/mdx-canvas-multiple-stories.mdx.mdx b/docs/snippets/svelte/mdx-canvas-multiple-stories.mdx.mdx
index e369a3f7bf9..7bbcc90969d 100644
--- a/docs/snippets/svelte/mdx-canvas-multiple-stories.mdx.mdx
+++ b/docs/snippets/svelte/mdx-canvas-multiple-stories.mdx.mdx
@@ -1,12 +1,13 @@
 ```md
 <!-- Badge.stories.mdx --->
 
-import { Canvas } from '@storybook/addon-docs';
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
-export const Template = (args) => ({
-  Component: Badge,
-  props: args,
-});
+import Badge from './Badge.svelte';
+
+<Meta title="MDX/Badge" component={Badge} />
+
+<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
 
 <Canvas>
   <Story 
@@ -14,26 +15,32 @@ export const Template = (args) => ({
     args={{
       status: 'warning',
       label: 'Warning',
-    }}>
-    {Template.bind({})}
-  </Story>
-
+    }}
+    render={(args) => ({
+      Component: Badge,
+      props: args,
+    })} />
+  
   <Story 
     name="neutral"
     args={{
       status: 'neutral',
       label: 'Neutral',
-    }}>
-    {Template.bind({})}
-  </Story>
+    }} 
+    render={(args) => ({
+      Component: Badge,
+      props: args,
+    })} />
 
   <Story 
     name="error"
     args={{
       status: 'error',
       label: 'Error',
-    }}>
-    {Template.bind({})}
-  </Story>
+    }}
+    render={(args) => ({
+      Component: Badge,
+      props: args,
+    })} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-story-configure-viewports.mdx.mdx b/docs/snippets/svelte/my-component-story-configure-viewports.mdx.mdx
index c1dfed148b6..73ceb9ac6b7 100644
--- a/docs/snippets/svelte/my-component-story-configure-viewports.mdx.mdx
+++ b/docs/snippets/svelte/my-component-story-configure-viewports.mdx.mdx
@@ -15,7 +15,9 @@ import MyComponent from './MyComponent.svelte';
       defaultViewport: 'iphone6',
     },
   }}
-/>
+  component={MyComponent} />
+
+<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
 
 <Story
   name="MyStory"
@@ -23,11 +25,8 @@ import MyComponent from './MyComponent.svelte';
     viewport: {
       defaultViewport: 'iphonex',
     }
-  }}>
-   {() => {
-    return {
-      Component: MyComponent,
-    };
   }}
-</Story>
+  render={() => ({
+    Component: MyComponent,
+  })} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-story-use-globaltype.mdx.mdx b/docs/snippets/svelte/my-component-story-use-globaltype.mdx.mdx
index 7cf31e8abb1..d6d43fd949e 100644
--- a/docs/snippets/svelte/my-component-story-use-globaltype.mdx.mdx
+++ b/docs/snippets/svelte/my-component-story-use-globaltype.mdx.mdx
@@ -1,7 +1,11 @@
 ```md
 <!-- MyComponent.stories.mdx -->
 
-import { Story } from '@storybook/addon-docs';
+import { Meta, Story } from '@storybook/addon-docs';
+
+import MyComponent from './MyComponent.svelte';
+
+<Meta title="MDX Story with toolbars" component={MyComponent} />
 
 export const getCaptionForLocale = (locale) => {
   switch(locale) {
@@ -14,8 +18,10 @@ export const getCaptionForLocale = (locale) => {
   }
 };
 
-<Story name="StoryWithLocale">
-  {(args, { globals: { locale } }) => {
+<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
+
+<Story name="StoryWithLocale"
+  render={(args, { globals: { locale } }) => {
     const caption = getCaptionForLocale(locale);
     return {
       component: MyComponent,
@@ -23,6 +29,5 @@ export const getCaptionForLocale = (locale) => {
         locale: caption,
       },
     };
-  }}
-</Story>
+  }} />
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-with-env-variables.mdx.mdx b/docs/snippets/svelte/my-component-with-env-variables.mdx.mdx
index 2d5fd8bc904..419ed44b1a5 100644
--- a/docs/snippets/svelte/my-component-with-env-variables.mdx.mdx
+++ b/docs/snippets/svelte/my-component-with-env-variables.mdx.mdx
@@ -7,10 +7,7 @@ import MyComponent from './MyComponent.svelte';
 
 <Meta title="A MDX story using environment variables inside a .env file" component={MyComponent}/>
 
-export const Template = (args) => ({
-  Component: MyComponent,
-  props: args,
-});
+<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
 
 <Canvas>
   <Story
@@ -18,8 +15,9 @@ export const Template = (args) => ({
     args={{
       propertyA: process.env.STORYBOOK_DATA_KEY,
     }}
-  >
-    {Template.bind({})}
-  </Story>
+    render={(args) => ({
+      Component: MyComponent,
+      props: args,
+    })} />
 </Canvas>
 ```
\ No newline at end of file
diff --git a/docs/snippets/svelte/your-component.mdx.mdx b/docs/snippets/svelte/your-component.mdx.mdx
index 88d9ec51e46..7bdd56e1eed 100644
--- a/docs/snippets/svelte/your-component.mdx.mdx
+++ b/docs/snippets/svelte/your-component.mdx.mdx
@@ -6,18 +6,18 @@ import { Meta, Story } from '@storybook/addon-docs';
 import YourComponent from './YourComponent.svelte';
 
 <!--👇 The title prop determines where your story goes in the story list -->
+
 <Meta title="YourComponent" component={YourComponent} />
 
-<!--👇 We create a “template” of how args map to rendering -->
-export const Template = (args) => ({
-  Component: YourComponent,
-  props: args,
-});
+<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
 
 <!-- 👇 The args you need here will depend on your component -->
+
 <Story
   name="FirstStory"
-  args={{}}>
-  {Template.bind({})}
-</Story>
+  args={{}}
+  render={(args) => ({
+    Component: YourComponent,
+    props: args,
+  })} />
 ```
\ No newline at end of file