diff --git a/code/frameworks/angular/template/cli/Button.stories.ts b/code/frameworks/angular/template/cli/Button.stories.ts
index 1a4d6894f9a7..2af06574ce99 100644
--- a/code/frameworks/angular/template/cli/Button.stories.ts
+++ b/code/frameworks/angular/template/cli/Button.stories.ts
@@ -1,43 +1,52 @@
-import type { Meta, StoryFn } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 import Button from './button.component';
 
-// More on default export: https://storybook.js.org/docs/angular/writing-stories/introduction#default-export
-export default {
+// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction#default-export
+const meta: Meta<Button> = {
   title: 'Example/Button',
   component: Button,
+  // More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args
+  render: (args: Button) => ({
+    props: {
+      backgroundColor: null,
+      ...args,
+    },
+  }),
   // More on argTypes: https://storybook.js.org/docs/angular/api/argtypes
   argTypes: {
-    backgroundColor: { control: 'color' },
+    backgroundColor: {
+      control: 'color',
+    },
   },
-} as Meta;
-
-// More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args
-const Template: StoryFn<Button> = (args: Button) => {
-  return {
-    props: { backgroundColor: null, ...args },
-  };
 };
 
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/angular/writing-stories/args
-Primary.args = {
-  primary: true,
-  label: 'Button',
+export default meta;
+type Story = StoryObj<Button>;
+
+// More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
 };
 
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
 };
diff --git a/code/frameworks/angular/template/cli/Header.stories.ts b/code/frameworks/angular/template/cli/Header.stories.ts
index 81535dcf2895..219e023a9ec8 100644
--- a/code/frameworks/angular/template/cli/Header.stories.ts
+++ b/code/frameworks/angular/template/cli/Header.stories.ts
@@ -1,13 +1,14 @@
 import { moduleMetadata } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 import { CommonModule } from '@angular/common';
-import type { Meta, StoryFn } from '@storybook/angular';
 
 import Button from './button.component';
 import Header from './header.component';
 
-export default {
+const meta: Meta<Header> = {
   title: 'Example/Header',
   component: Header,
+  render: (args) => ({ props: args }),
   decorators: [
     moduleMetadata({
       declarations: [Button],
@@ -18,18 +19,17 @@ export default {
     // More on Story layout: https://storybook.js.org/docs/angular/configure/story-layout
     layout: 'fullscreen',
   },
-} as Meta;
+};
 
-const Template: StoryFn<Header> = (args: Header) => ({
-  props: args,
-});
+export default meta;
+type Story = StoryObj<Header>;
 
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {
-    name: 'Jane Doe',
+export const LoggedIn: Story = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
   },
 };
 
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};
+export const LoggedOut: Story = {};
diff --git a/code/frameworks/angular/template/cli/Page.stories.ts b/code/frameworks/angular/template/cli/Page.stories.ts
index 55918834048a..dd16b59371ab 100644
--- a/code/frameworks/angular/template/cli/Page.stories.ts
+++ b/code/frameworks/angular/template/cli/Page.stories.ts
@@ -1,4 +1,4 @@
-import type { StoryFn, Meta } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 import { moduleMetadata } from '@storybook/angular';
 import { within, userEvent } from '@storybook/testing-library';
 import { CommonModule } from '@angular/common';
@@ -7,7 +7,7 @@ import Button from './button.component';
 import Header from './header.component';
 import Page from './page.component';
 
-export default {
+const meta: Meta<Page> = {
   title: 'Example/Page',
   component: Page,
   parameters: {
@@ -20,18 +20,27 @@ export default {
       imports: [CommonModule],
     }),
   ],
-} as Meta;
+};
 
-const Template: StoryFn<Page> = (args: Page) => ({
-  props: args,
-});
+export default meta;
+type Story = StoryObj<Page>;
 
-export const LoggedOut = Template.bind({});
+export const LoggedOut: Story = {
+  render: (args: Page) => ({
+    props: args,
+  }),
+};
 
 // More on interaction testing: https://storybook.js.org/docs/angular/writing-tests/interaction-testing
-export const LoggedIn = Template.bind({});
-LoggedIn.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
-  await userEvent.click(loginButton);
+export const LoggedIn: Story = {
+  render: (args: Page) => ({
+    props: args,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = await canvas.getByRole('button', {
+      name: /Log in/i,
+    });
+    await userEvent.click(loginButton);
+  },
 };
diff --git a/code/frameworks/ember/template/cli/1-Button.stories.js b/code/frameworks/ember/template/cli/1-Button.stories.js
index 5be754973287..9aff5c61cb45 100644
--- a/code/frameworks/ember/template/cli/1-Button.stories.js
+++ b/code/frameworks/ember/template/cli/1-Button.stories.js
@@ -5,6 +5,10 @@ import { linkTo } from '@storybook/addon-links';
 // More on default export: https://storybook.js.org/docs/ember/writing-stories/introduction#default-export
 export default {
   title: 'Button',
+  render: (args) => ({
+    template: hbs`<button {{action onClick}}>{{label}}</button>`,
+    context: args,
+  }),
   // More on argTypes: https://storybook.js.org/docs/ember/api/argtypes
   argTypes: {
     label: { control: 'text' },
@@ -12,46 +16,46 @@ export default {
 };
 
 // More on component templates: https://storybook.js.org/docs/ember/writing-stories/introduction#using-args
-const Template = (args) => ({
-  template: hbs`<button {{action onClick}}>{{label}}</button>`,
-  context: args,
-});
-
-export const Text = Template.bind({});
-// More on args: https://storybook.js.org/docs/ember/writing-stories/args
-Text.args = {
-  label: 'Button',
-  onClick: action('onClick'),
+export const Text = {
+  args: {
+    label: 'Button',
+    onClick: action('onClick'),
+  },
 };
 
-export const Emoji = Template.bind({});
-Emoji.args = {
-  label: '😀 😎 👍 💯',
+export const Emoji = {
+  args: {
+    label: '😀 😎 👍 💯',
+  },
 };
 
-export const TextWithAction = () => ({
-  template: hbs`
+export const TextWithAction = {
+  render: () => ({
+    template: hbs`
     <button {{action onClick}}>
       Trigger Action
     </button>
   `,
-  context: {
-    onClick: () => action('This was clicked')(),
+    context: {
+      onClick: () => action('This was clicked')(),
+    },
+  }),
+  name: 'With an action',
+  parameters: {
+    notes: 'My notes on a button with emojis',
   },
-});
-
-TextWithAction.storyName = 'With an action';
-TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
+};
 
-export const ButtonWithLinkToAnotherStory = () => ({
-  template: hbs`
+export const ButtonWithLinkToAnotherStory = {
+  render: () => ({
+    template: hbs`
     <button {{action onClick}}>
       Go to Welcome Story
     </button>
   `,
-  context: {
-    onClick: linkTo('example-introduction--page'),
-  },
-});
-
-ButtonWithLinkToAnotherStory.storyName = 'button with link to another story';
+    context: {
+      onClick: linkTo('example-introduction--page'),
+    },
+  }),
+  name: 'button with link to another story',
+};
diff --git a/code/frameworks/nextjs/template/cli/ts/Button.stories.ts b/code/frameworks/nextjs/template/cli/ts/Button.stories.ts
new file mode 100644
index 000000000000..07a7b51921a9
--- /dev/null
+++ b/code/frameworks/nextjs/template/cli/ts/Button.stories.ts
@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta: Meta<typeof Button> = {
+  title: 'Example/Button',
+  component: Button,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    backgroundColor: {
+      control: 'color',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};
diff --git a/code/frameworks/nextjs/template/cli/ts/Button.stories.tsx b/code/frameworks/nextjs/template/cli/ts/Button.stories.tsx
deleted file mode 100644
index 1b371df29f48..000000000000
--- a/code/frameworks/nextjs/template/cli/ts/Button.stories.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import * as React from 'react';
-import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
-
-import { Button } from './Button';
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Example/Button',
-  component: Button,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-} as ComponentMeta<typeof Button>;
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStoryFn<typeof Button> = (args) => <Button {...args} />;
-
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-Primary.args = {
-  primary: true,
-  label: 'Button',
-};
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
-};
-
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
-};
-
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
-};
diff --git a/code/frameworks/nextjs/template/cli/ts/Header.stories.ts b/code/frameworks/nextjs/template/cli/ts/Header.stories.ts
new file mode 100644
index 000000000000..c49a9b7a4e01
--- /dev/null
+++ b/code/frameworks/nextjs/template/cli/ts/Header.stories.ts
@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Header } from './Header';
+
+const meta: Meta<typeof Header> = {
+  title: 'Example/Header',
+  component: Header,
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Header>;
+
+export const LoggedIn: Story = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
+  },
+};
+
+export const LoggedOut: Story = {};
diff --git a/code/frameworks/nextjs/template/cli/ts/Header.stories.tsx b/code/frameworks/nextjs/template/cli/ts/Header.stories.tsx
deleted file mode 100644
index 98f78d07e094..000000000000
--- a/code/frameworks/nextjs/template/cli/ts/Header.stories.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
-
-import { Header } from './Header';
-
-export default {
-  title: 'Example/Header',
-  component: Header,
-  parameters: {
-    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
-    layout: 'fullscreen',
-  },
-} as ComponentMeta<typeof Header>;
-
-const Template: ComponentStoryFn<typeof Header> = (args) => <Header {...args} />;
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {
-    name: 'Jane Doe',
-  },
-};
-
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};
diff --git a/code/frameworks/nextjs/template/cli/ts/Page.stories.ts b/code/frameworks/nextjs/template/cli/ts/Page.stories.ts
new file mode 100644
index 000000000000..52c4cb406233
--- /dev/null
+++ b/code/frameworks/nextjs/template/cli/ts/Page.stories.ts
@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { within, userEvent } from '@storybook/testing-library';
+
+import { Page } from './Page';
+
+const meta: Meta<typeof Page> = {
+  title: 'Example/Page',
+  component: Page,
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Page>;
+
+export const LoggedOut: Story = {};
+
+// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
+export const LoggedIn: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = await canvas.getByRole('button', {
+      name: /Log in/i,
+    });
+    await userEvent.click(loginButton);
+  },
+};
diff --git a/code/frameworks/nextjs/template/cli/ts/Page.stories.tsx b/code/frameworks/nextjs/template/cli/ts/Page.stories.tsx
deleted file mode 100644
index 921f541e23ac..000000000000
--- a/code/frameworks/nextjs/template/cli/ts/Page.stories.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
-import { within, userEvent } from '@storybook/testing-library';
-import { Page } from './Page';
-
-export default {
-  title: 'Example/Page',
-  component: Page,
-  parameters: {
-    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
-    layout: 'fullscreen',
-  },
-} as ComponentMeta<typeof Page>;
-
-const Template: ComponentStoryFn<typeof Page> = (args) => <Page {...args} />;
-
-export const LoggedOut = Template.bind({});
-
-export const LoggedIn = Template.bind({});
-
-// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
-LoggedIn.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
-  await userEvent.click(loginButton);
-};
diff --git a/code/renderers/html/template/cli/js/Button.stories.js b/code/renderers/html/template/cli/js/Button.stories.js
index 63d4f9147145..cdc3d1bfb20b 100644
--- a/code/renderers/html/template/cli/js/Button.stories.js
+++ b/code/renderers/html/template/cli/js/Button.stories.js
@@ -3,6 +3,12 @@ import { createButton } from './Button';
 // More on default export: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
 export default {
   title: 'Example/Button',
+  // More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args
+  render: ({ label, ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return createButton({ label, ...args });
+  },
   // More on argTypes: https://storybook.js.org/docs/html/api/argtypes
   argTypes: {
     backgroundColor: { control: 'color' },
@@ -16,33 +22,29 @@ export default {
   },
 };
 
-// More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args
-const Template = ({ label, ...args }) => {
-  // You can either use a function to create DOM elements or use a plain html string!
-  // return `<div>${label}</div>`;
-  return createButton({ label, ...args });
-};
-
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/html/writing-stories/args
-Primary.args = {
-  primary: true,
-  label: 'Button',
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
 };
 
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
 };
diff --git a/code/renderers/html/template/cli/js/Header.stories.js b/code/renderers/html/template/cli/js/Header.stories.js
index 553f3f8760f2..8cc98e523abd 100644
--- a/code/renderers/html/template/cli/js/Header.stories.js
+++ b/code/renderers/html/template/cli/js/Header.stories.js
@@ -2,6 +2,7 @@ import { createHeader } from './Header';
 
 export default {
   title: 'Example/Header',
+  render: (args) => createHeader(args),
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/html/configure/story-layout
     layout: 'fullscreen',
@@ -14,14 +15,12 @@ export default {
   },
 };
 
-const Template = (args) => createHeader(args);
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {
-    name: 'Jane Doe',
+export const LoggedIn = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
   },
 };
 
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};
+export const LoggedOut = {};
diff --git a/code/renderers/html/template/cli/js/Page.stories.js b/code/renderers/html/template/cli/js/Page.stories.js
index 3305bde25d9e..047e0ac7ca5e 100644
--- a/code/renderers/html/template/cli/js/Page.stories.js
+++ b/code/renderers/html/template/cli/js/Page.stories.js
@@ -3,21 +3,22 @@ import { createPage } from './Page';
 
 export default {
   title: 'Example/Page',
+  render: () => createPage(),
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/html/configure/story-layout
     layout: 'fullscreen',
   },
 };
 
-const Template = () => createPage();
-
-export const LoggedOut = Template.bind({});
-
-export const LoggedIn = Template.bind({});
+export const LoggedOut = {};
 
 // More on interaction testing: https://storybook.js.org/docs/html/writing-tests/interaction-testing
-LoggedIn.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
-  await userEvent.click(loginButton);
+export const LoggedIn = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = await canvas.getByRole('button', {
+      name: /Log in/i,
+    });
+    await userEvent.click(loginButton);
+  },
 };
diff --git a/code/renderers/html/template/cli/ts/Button.stories.ts b/code/renderers/html/template/cli/ts/Button.stories.ts
index 456189912ddb..b2c80bfea844 100644
--- a/code/renderers/html/template/cli/ts/Button.stories.ts
+++ b/code/renderers/html/template/cli/ts/Button.stories.ts
@@ -1,10 +1,15 @@
-import type { Meta, StoryFn } from '@storybook/html';
+import type { StoryObj, Meta } from '@storybook/html';
 import type { ButtonProps } from './Button';
 import { createButton } from './Button';
 
-// More on default export: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
-export default {
+// More on how to set up stories at: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
+const meta: Meta<ButtonProps> = {
   title: 'Example/Button',
+  render: (args) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return createButton(args);
+  },
   // More on argTypes: https://storybook.js.org/docs/html/api/argtypes
   argTypes: {
     backgroundColor: { control: 'color' },
@@ -16,35 +21,35 @@ export default {
       options: ['small', 'medium', 'large'],
     },
   },
-} as Meta<ButtonProps>;
-
-// More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args
-const Template: StoryFn<ButtonProps> = (args) => {
-  // You can either use a function to create DOM elements or use a plain html string!
-  // return `<div>${label}</div>`;
-  return createButton(args);
 };
 
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/html/writing-stories/args
-Primary.args = {
-  primary: true,
-  label: 'Button',
+export default meta;
+type Story = StoryObj<ButtonProps>;
+
+// More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
 };
 
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
 };
diff --git a/code/renderers/html/template/cli/ts/Header.stories.ts b/code/renderers/html/template/cli/ts/Header.stories.ts
index ed54d8fd8d3b..f08e899c42f3 100644
--- a/code/renderers/html/template/cli/ts/Header.stories.ts
+++ b/code/renderers/html/template/cli/ts/Header.stories.ts
@@ -1,9 +1,10 @@
-import type { Meta, StoryFn } from '@storybook/html';
+import type { Meta, StoryObj } from '@storybook/html';
 import type { HeaderProps } from './Header';
 import { createHeader } from './Header';
 
-export default {
+const meta: Meta<HeaderProps> = {
   title: 'Example/Header',
+  render: (args) => createHeader(args),
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/html/configure/story-layout
     layout: 'fullscreen',
@@ -14,16 +15,17 @@ export default {
     onLogout: { action: 'onLogout' },
     onCreateAccount: { action: 'onCreateAccount' },
   },
-} as Meta<HeaderProps>;
+};
 
-const Template: StoryFn<HeaderProps> = (args) => createHeader(args);
+export default meta;
+type Story = StoryObj<HeaderProps>;
 
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {
-    name: 'John Doe',
+export const LoggedIn: Story = {
+  args: {
+    user: {
+      name: 'John Doe',
+    },
   },
 };
 
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};
+export const LoggedOut: Story = {};
diff --git a/code/renderers/html/template/cli/ts/Page.stories.ts b/code/renderers/html/template/cli/ts/Page.stories.ts
index 057863b93bec..65131c380bff 100644
--- a/code/renderers/html/template/cli/ts/Page.stories.ts
+++ b/code/renderers/html/template/cli/ts/Page.stories.ts
@@ -1,24 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/html';
 import { within, userEvent } from '@storybook/testing-library';
-import type { Meta, StoryFn } from '@storybook/html';
 import { createPage } from './Page';
 
-export default {
+const meta: Meta = {
   title: 'Example/Page',
+  render: () => createPage(),
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/html/configure/story-layout
     layout: 'fullscreen',
   },
-} as Meta;
-
-const Template: StoryFn = () => createPage();
+};
 
-export const LoggedOut = Template.bind({});
+export default meta;
 
-export const LoggedIn = Template.bind({});
+export const LoggedOut: StoryObj = {};
 
 // More on interaction testing: https://storybook.js.org/docs/html/writing-tests/interaction-testing
-LoggedIn.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
-  await userEvent.click(loginButton);
+export const LoggedIn: StoryObj = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = await canvas.getByRole('button', {
+      name: /Log in/i,
+    });
+    await userEvent.click(loginButton);
+  },
 };
diff --git a/code/renderers/preact/template/cli/Button.stories.jsx b/code/renderers/preact/template/cli/Button.stories.jsx
index 080a4bfc3d61..a26bd4ea2839 100644
--- a/code/renderers/preact/template/cli/Button.stories.jsx
+++ b/code/renderers/preact/template/cli/Button.stories.jsx
@@ -12,28 +12,29 @@ export default {
 };
 
 // More on component templates: https://storybook.js.org/docs/preact/writing-stories/introduction#using-args
-const Template = (args) => <Button {...args} />;
-
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/preact/writing-stories/args
-Primary.args = {
-  primary: true,
-  label: 'Button',
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
 };
 
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
 };
diff --git a/code/renderers/preact/template/cli/Header.stories.jsx b/code/renderers/preact/template/cli/Header.stories.jsx
index 19f58b372ed6..116bc01b04c3 100644
--- a/code/renderers/preact/template/cli/Header.stories.jsx
+++ b/code/renderers/preact/template/cli/Header.stories.jsx
@@ -14,14 +14,12 @@ export default {
   },
 };
 
-const Template = (args) => <Header {...args} />;
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {
-    name: 'Jane Doe',
+export const LoggedIn = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
   },
 };
 
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};
+export const LoggedOut = {};
diff --git a/code/renderers/preact/template/cli/Page.stories.jsx b/code/renderers/preact/template/cli/Page.stories.jsx
index c79af4904740..77903f60e15a 100644
--- a/code/renderers/preact/template/cli/Page.stories.jsx
+++ b/code/renderers/preact/template/cli/Page.stories.jsx
@@ -11,14 +11,15 @@ export default {
   },
 };
 
-const Template = (args) => <Page {...args} />;
-
-export const LoggedOut = Template.bind({});
+export const LoggedOut = {};
 
 // More on interaction testing: https://storybook.js.org/docs/preact/writing-tests/interaction-testing
-export const LoggedIn = Template.bind({});
-LoggedIn.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
-  await userEvent.click(loginButton);
+export const LoggedIn = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = await canvas.getByRole('button', {
+      name: /Log in/i,
+    });
+    await userEvent.click(loginButton);
+  },
 };
diff --git a/code/renderers/react/template/cli/js/Button.stories.js b/code/renderers/react/template/cli/js/Button.stories.js
new file mode 100644
index 000000000000..e35923b041cb
--- /dev/null
+++ b/code/renderers/react/template/cli/js/Button.stories.js
@@ -0,0 +1,39 @@
+import { Button } from './Button';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Example/Button',
+  component: Button,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};
diff --git a/code/renderers/react/template/cli/js/Button.stories.jsx b/code/renderers/react/template/cli/js/Button.stories.jsx
deleted file mode 100644
index 61f6e19e14d7..000000000000
--- a/code/renderers/react/template/cli/js/Button.stories.jsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-
-import { Button } from './Button';
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Example/Button',
-  component: Button,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-};
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <Button {...args} />;
-
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-Primary.args = {
-  primary: true,
-  label: 'Button',
-};
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
-};
-
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
-};
-
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
-};
diff --git a/code/renderers/react/template/cli/js/Header.stories.jsx b/code/renderers/react/template/cli/js/Header.stories.js
similarity index 51%
rename from code/renderers/react/template/cli/js/Header.stories.jsx
rename to code/renderers/react/template/cli/js/Header.stories.js
index e4850002cac5..7024ce7ff8cd 100644
--- a/code/renderers/react/template/cli/js/Header.stories.jsx
+++ b/code/renderers/react/template/cli/js/Header.stories.js
@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Header } from './Header';
 
 export default {
@@ -11,14 +9,12 @@ export default {
   },
 };
 
-const Template = (args) => <Header {...args} />;
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {
-    name: 'Jane Doe',
+export const LoggedIn = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
   },
 };
 
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};
+export const LoggedOut = {};
diff --git a/code/renderers/react/template/cli/js/Page.stories.jsx b/code/renderers/react/template/cli/js/Page.stories.js
similarity index 52%
rename from code/renderers/react/template/cli/js/Page.stories.jsx
rename to code/renderers/react/template/cli/js/Page.stories.js
index 0174fdb881f9..84250fdfe4dd 100644
--- a/code/renderers/react/template/cli/js/Page.stories.jsx
+++ b/code/renderers/react/template/cli/js/Page.stories.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { within, userEvent } from '@storybook/testing-library';
 
 import { Page } from './Page';
@@ -12,14 +11,15 @@ export default {
   },
 };
 
-const Template = (args) => <Page {...args} />;
+export const LoggedOut = {};
 
 // More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
-export const LoggedOut = Template.bind({});
-
-export const LoggedIn = Template.bind({});
-LoggedIn.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
-  await userEvent.click(loginButton);
+export const LoggedIn = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = await canvas.getByRole('button', {
+      name: /Log in/i,
+    });
+    await userEvent.click(loginButton);
+  },
 };
diff --git a/code/renderers/react/template/cli/ts/Button.stories.ts b/code/renderers/react/template/cli/ts/Button.stories.ts
new file mode 100644
index 000000000000..846a6ac4c5a7
--- /dev/null
+++ b/code/renderers/react/template/cli/ts/Button.stories.ts
@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta: Meta<typeof Button> = {
+  title: 'Example/Button',
+  component: Button,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+export const Primary: Story = {
+  // More on args: https://storybook.js.org/docs/react/writing-stories/args
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};
diff --git a/code/renderers/react/template/cli/ts/Button.stories.tsx b/code/renderers/react/template/cli/ts/Button.stories.tsx
deleted file mode 100644
index 435f55a9ef58..000000000000
--- a/code/renderers/react/template/cli/ts/Button.stories.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
-
-import { Button } from './Button';
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Example/Button',
-  component: Button,
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-} as ComponentMeta<typeof Button>;
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStoryFn<typeof Button> = (args) => <Button {...args} />;
-
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-Primary.args = {
-  primary: true,
-  label: 'Button',
-};
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
-};
-
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
-};
-
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
-};
diff --git a/code/renderers/react/template/cli/ts/Header.stories.ts b/code/renderers/react/template/cli/ts/Header.stories.ts
new file mode 100644
index 000000000000..c49a9b7a4e01
--- /dev/null
+++ b/code/renderers/react/template/cli/ts/Header.stories.ts
@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Header } from './Header';
+
+const meta: Meta<typeof Header> = {
+  title: 'Example/Header',
+  component: Header,
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Header>;
+
+export const LoggedIn: Story = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
+  },
+};
+
+export const LoggedOut: Story = {};
diff --git a/code/renderers/react/template/cli/ts/Header.stories.tsx b/code/renderers/react/template/cli/ts/Header.stories.tsx
deleted file mode 100644
index 98f78d07e094..000000000000
--- a/code/renderers/react/template/cli/ts/Header.stories.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
-
-import { Header } from './Header';
-
-export default {
-  title: 'Example/Header',
-  component: Header,
-  parameters: {
-    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
-    layout: 'fullscreen',
-  },
-} as ComponentMeta<typeof Header>;
-
-const Template: ComponentStoryFn<typeof Header> = (args) => <Header {...args} />;
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {
-    name: 'Jane Doe',
-  },
-};
-
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};
diff --git a/code/renderers/react/template/cli/ts/Page.stories.ts b/code/renderers/react/template/cli/ts/Page.stories.ts
new file mode 100644
index 000000000000..52c4cb406233
--- /dev/null
+++ b/code/renderers/react/template/cli/ts/Page.stories.ts
@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { within, userEvent } from '@storybook/testing-library';
+
+import { Page } from './Page';
+
+const meta: Meta<typeof Page> = {
+  title: 'Example/Page',
+  component: Page,
+  parameters: {
+    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Page>;
+
+export const LoggedOut: Story = {};
+
+// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
+export const LoggedIn: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = await canvas.getByRole('button', {
+      name: /Log in/i,
+    });
+    await userEvent.click(loginButton);
+  },
+};
diff --git a/code/renderers/react/template/cli/ts/Page.stories.tsx b/code/renderers/react/template/cli/ts/Page.stories.tsx
deleted file mode 100644
index 921f541e23ac..000000000000
--- a/code/renderers/react/template/cli/ts/Page.stories.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
-import { within, userEvent } from '@storybook/testing-library';
-import { Page } from './Page';
-
-export default {
-  title: 'Example/Page',
-  component: Page,
-  parameters: {
-    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
-    layout: 'fullscreen',
-  },
-} as ComponentMeta<typeof Page>;
-
-const Template: ComponentStoryFn<typeof Page> = (args) => <Page {...args} />;
-
-export const LoggedOut = Template.bind({});
-
-export const LoggedIn = Template.bind({});
-
-// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
-LoggedIn.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
-  await userEvent.click(loginButton);
-};
diff --git a/code/renderers/svelte/template/cli/Button.stories.js b/code/renderers/svelte/template/cli/Button.stories.js
index d700639dba2d..e9660788c483 100644
--- a/code/renderers/svelte/template/cli/Button.stories.js
+++ b/code/renderers/svelte/template/cli/Button.stories.js
@@ -5,6 +5,14 @@ import Button from './Button.svelte';
 export default {
   title: 'Example/Button',
   component: Button,
+  // More on component templates: https://storybook.js.org/docs/svelte/writing-stories/introduction#using-args
+  render: (args) => ({
+    Component: Button,
+    props: args,
+    on: {
+      click: args.onClick,
+    },
+  }),
   argTypes: {
     backgroundColor: { control: 'color' },
     label: { control: 'text' },
@@ -17,35 +25,29 @@ export default {
   },
 };
 
-// More on component templates: https://storybook.js.org/docs/svelte/writing-stories/introduction#using-args
-const Template = (args) => ({
-  Component: Button,
-  props: args,
-  on: {
-    click: args.onClick,
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
   },
-});
-
-// More on args: https://storybook.js.org/docs/svelte/writing-stories/args
-export const Primary = Template.bind({});
-Primary.args = {
-  primary: true,
-  label: 'Button',
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
 };
 
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
 };
diff --git a/code/renderers/svelte/template/cli/Header.stories.js b/code/renderers/svelte/template/cli/Header.stories.js
index 9f80fa3fbbe3..687d61465dd0 100644
--- a/code/renderers/svelte/template/cli/Header.stories.js
+++ b/code/renderers/svelte/template/cli/Header.stories.js
@@ -3,6 +3,15 @@ import Header from './Header.svelte';
 export default {
   title: 'Example/Header',
   component: Header,
+  render: (args) => ({
+    Component: Header,
+    props: args,
+    on: {
+      login: args.onLogin,
+      logout: args.onLogout,
+      createAccount: args.onCreateAccount,
+    },
+  }),
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/svelte/configure/story-layout
     layout: 'fullscreen',
@@ -14,22 +23,12 @@ export default {
   },
 };
 
-const Template = (args) => ({
-  Component: Header,
-  props: args,
-  on: {
-    login: args.onLogin,
-    logout: args.onLogout,
-    createAccount: args.onCreateAccount,
-  },
-});
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {
-    name: 'Jane Doe',
+export const LoggedIn = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
   },
 };
 
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};
+export const LoggedOut = {};
diff --git a/code/renderers/svelte/template/cli/Page.stories.js b/code/renderers/svelte/template/cli/Page.stories.js
index 563782345a2d..ce0f8a33ed8d 100644
--- a/code/renderers/svelte/template/cli/Page.stories.js
+++ b/code/renderers/svelte/template/cli/Page.stories.js
@@ -4,24 +4,28 @@ import Page from './Page.svelte';
 export default {
   title: 'Example/Page',
   component: Page,
+  render: (args) => ({
+    Component: Page,
+    props: args,
+  }),
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/svelte/configure/story-layout
     layout: 'fullscreen',
   },
 };
-
-const Template = (args) => ({
-  Component: Page,
-  props: args,
-});
-
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};
+export const LoggedOut = {};
 
 // More on interaction testing: https://storybook.js.org/docs/svelte/writing-tests/interaction-testing
-export const LoggedIn = Template.bind({});
-LoggedIn.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
-  await userEvent.click(loginButton);
+export const LoggedIn = {
+  render: (args) => ({
+    Component: Page,
+    props: args,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = await canvas.getByRole('button', {
+      name: /Log in/i,
+    });
+    await userEvent.click(loginButton);
+  },
 };
diff --git a/code/renderers/vue/template/cli/Button.stories.js b/code/renderers/vue/template/cli/Button.stories.js
index 3e9d01553ef5..a13a16111b24 100644
--- a/code/renderers/vue/template/cli/Button.stories.js
+++ b/code/renderers/vue/template/cli/Button.stories.js
@@ -4,6 +4,12 @@ import MyButton from './Button.vue';
 export default {
   title: 'Example/Button',
   component: MyButton,
+  // More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+  render: (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { MyButton },
+    template: '<my-button @onClick="onClick" v-bind="$props" />',
+  }),
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {
     backgroundColor: { control: 'color' },
@@ -14,33 +20,29 @@ export default {
   },
 };
 
-// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { MyButton },
-  template: '<my-button @onClick="onClick" v-bind="$props" />',
-});
-
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/vue/writing-stories/args
-Primary.args = {
-  primary: true,
-  label: 'Button',
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
 };
 
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
 };
diff --git a/code/renderers/vue/template/cli/Header.stories.js b/code/renderers/vue/template/cli/Header.stories.js
index 8878aa5f88af..d06aa5f7969d 100644
--- a/code/renderers/vue/template/cli/Header.stories.js
+++ b/code/renderers/vue/template/cli/Header.stories.js
@@ -3,25 +3,26 @@ import MyHeader from './Header.vue';
 export default {
   title: 'Example/Header',
   component: MyHeader,
+  render: (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: {
+      MyHeader,
+    },
+    template:
+      '<my-header :user="user" @onLogin="onLogin" @onLogout="onLogout" @onCreateAccount="onCreateAccount" />',
+  }),
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/vue/configure/story-layout
     layout: 'fullscreen',
   },
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { MyHeader },
-  template:
-    '<my-header :user="user" @onLogin="onLogin" @onLogout="onLogout" @onCreateAccount="onCreateAccount" />',
-});
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {
-    name: 'Jane Doe',
+export const LoggedIn = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
   },
 };
 
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};
+export const LoggedOut = {};
diff --git a/code/renderers/vue/template/cli/Page.stories.js b/code/renderers/vue/template/cli/Page.stories.js
index cdb1e24ba717..5094c2e78802 100644
--- a/code/renderers/vue/template/cli/Page.stories.js
+++ b/code/renderers/vue/template/cli/Page.stories.js
@@ -1,27 +1,27 @@
 import { within, userEvent } from '@storybook/testing-library';
-
 import MyPage from './Page.vue';
 
 export default {
   title: 'Example/Page',
   component: MyPage,
+  render: () => ({
+    components: { MyPage },
+    template: '<my-page />',
+  }),
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/vue/configure/story-layout
     layout: 'fullscreen',
   },
 };
-
-const Template = () => ({
-  components: { MyPage },
-  template: '<my-page />',
-});
-
-export const LoggedOut = Template.bind({});
+export const LoggedOut = {};
 
 // More on interaction testing: https://storybook.js.org/docs/vue/writing-tests/interaction-testing
-export const LoggedIn = Template.bind({});
-LoggedIn.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
-  await userEvent.click(loginButton);
+export const LoggedIn = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = await canvas.getByRole('button', {
+      name: /Log in/i,
+    });
+    await userEvent.click(loginButton);
+  },
 };
diff --git a/code/renderers/vue3/template/cli/Button.stories.js b/code/renderers/vue3/template/cli/Button.stories.js
index 2561202c7ee7..4c31167c656e 100644
--- a/code/renderers/vue3/template/cli/Button.stories.js
+++ b/code/renderers/vue3/template/cli/Button.stories.js
@@ -4,49 +4,59 @@ import MyButton from './Button.vue';
 export default {
   title: 'Example/Button',
   component: MyButton,
+  // More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+  render: (args) => ({
+    // Components used in your story `template` are defined in the `components` object
+    components: {
+      MyButton,
+    },
+    // The story's `args` need to be mapped into the template through the `setup()` method
+    setup() {
+      return {
+        args,
+      };
+    },
+    // And then the `args` are bound to your component with `v-bind="args"`
+    template: '<my-button v-bind="args" />',
+  }),
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {
-    backgroundColor: { control: 'color' },
+    backgroundColor: {
+      control: 'color',
+    },
     onClick: {},
     size: {
-      control: { type: 'select' },
+      control: {
+        type: 'select',
+      },
       options: ['small', 'medium', 'large'],
     },
   },
 };
 
-// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
-const Template = (args) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { MyButton },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  setup() {
-    return { args };
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
   },
-  // And then the `args` are bound to your component with `v-bind="args"`
-  template: '<my-button v-bind="args" />',
-});
-
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/vue/writing-stories/args
-Primary.args = {
-  primary: true,
-  label: 'Button',
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
 };
 
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
 };
diff --git a/code/renderers/vue3/template/cli/Header.stories.js b/code/renderers/vue3/template/cli/Header.stories.js
index 8cda9abc0324..6733856c044b 100644
--- a/code/renderers/vue3/template/cli/Header.stories.js
+++ b/code/renderers/vue3/template/cli/Header.stories.js
@@ -3,32 +3,37 @@ import MyHeader from './Header.vue';
 export default {
   title: 'Example/Header',
   component: MyHeader,
+  render: (args) => ({
+    // Components used in your story `template` are defined in the `components` object
+    components: {
+      MyHeader,
+    },
+    // The story's `args` need to be mapped into the template through the `setup()` method
+    setup() {
+      // Story args can be spread into the returned object
+      return {
+        ...args,
+      };
+    },
+    // Then, the spread values can be accessed directly in the template
+    template: '<my-header :user="user" />',
+  }),
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/vue/configure/story-layout
     layout: 'fullscreen',
   },
 };
 
-const Template = (args) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { MyHeader },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  setup() {
-    // Story args can be spread into the returned object
-    return { ...args };
-  },
-  // Then, the spread values can be accessed directly in the template
-  template: '<my-header :user="user" />',
-});
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {
-    name: 'Jane Doe',
+export const LoggedIn = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
   },
 };
 
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {
-  user: null,
+export const LoggedOut = {
+  args: {
+    user: null,
+  },
 };
diff --git a/code/renderers/vue3/template/cli/Page.stories.js b/code/renderers/vue3/template/cli/Page.stories.js
index ef6aeafe784d..ed95225c9f69 100644
--- a/code/renderers/vue3/template/cli/Page.stories.js
+++ b/code/renderers/vue3/template/cli/Page.stories.js
@@ -4,26 +4,33 @@ import MyPage from './Page.vue';
 export default {
   title: 'Example/Page',
   component: MyPage,
+  render: () => ({
+    // Components used in your story `template` are defined in the `components` object
+    components: { MyPage },
+    // Here we define the `template`
+    template: '<my-page />',
+  }),
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/vue/configure/story-layout
     layout: 'fullscreen',
   },
 };
 
-const Template = () => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { MyPage },
-
-  // Here we define the `template`
-  template: '<my-page />',
-});
-
-export const LoggedOut = Template.bind({});
+export const LoggedOut = {};
 
 // More on interaction testing: https://storybook.js.org/docs/vue/writing-tests/interaction-testing
-export const LoggedIn = Template.bind({});
-LoggedIn.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
-  await userEvent.click(loginButton);
+export const LoggedIn = {
+  render: () => ({
+    components: {
+      MyPage,
+    },
+    template: '<my-page />',
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = await canvas.getByRole('button', {
+      name: /Log in/i,
+    });
+    await userEvent.click(loginButton);
+  },
 };
diff --git a/code/renderers/web-components/template/cli/js/Button.stories.js b/code/renderers/web-components/template/cli/js/Button.stories.js
index ec71e8a7c638..bd4618ade8ce 100644
--- a/code/renderers/web-components/template/cli/js/Button.stories.js
+++ b/code/renderers/web-components/template/cli/js/Button.stories.js
@@ -3,6 +3,8 @@ import { Button } from './Button';
 // More on default export: https://storybook.js.org/docs/web-components/writing-stories/introduction#default-export
 export default {
   title: 'Example/Button',
+  // More on component templates: https://storybook.js.org/docs/web-components/writing-stories/introduction#using-args
+  render: (args) => Button(args),
   // More on argTypes: https://storybook.js.org/docs/web-components/api/argtypes
   argTypes: {
     backgroundColor: { control: 'color' },
@@ -14,29 +16,29 @@ export default {
   },
 };
 
-// More on component templates: https://storybook.js.org/docs/web-components/writing-stories/introduction#using-args
-const Template = (args) => Button(args);
-
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/web-components/writing-stories/args
-Primary.args = {
-  primary: true,
-  label: 'Button',
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
 };
 
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
 };
diff --git a/code/renderers/web-components/template/cli/js/Header.stories.js b/code/renderers/web-components/template/cli/js/Header.stories.js
index 6045ac91d89d..9785703225f3 100644
--- a/code/renderers/web-components/template/cli/js/Header.stories.js
+++ b/code/renderers/web-components/template/cli/js/Header.stories.js
@@ -2,14 +2,15 @@ import { Header } from './Header';
 
 export default {
   title: 'Example/Header',
+  render: (args) => Header(args),
 };
 
-const Template = (args) => Header(args);
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {},
+export const LoggedIn = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
+  },
 };
 
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};
+export const LoggedOut = {};
diff --git a/code/renderers/web-components/template/cli/js/Page.stories.js b/code/renderers/web-components/template/cli/js/Page.stories.js
index 961abc636a0e..91cc0239c73e 100644
--- a/code/renderers/web-components/template/cli/js/Page.stories.js
+++ b/code/renderers/web-components/template/cli/js/Page.stories.js
@@ -3,17 +3,18 @@ import * as HeaderStories from './Header.stories';
 
 export default {
   title: 'Example/Page',
+  render: (args) => Page(args),
 };
 
-const Template = (args) => Page(args);
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  // More on composing args: https://storybook.js.org/docs/web-components/writing-stories/args#args-composition
-  ...HeaderStories.LoggedIn.args,
+export const LoggedIn = {
+  args: {
+    // More on composing args: https://storybook.js.org/docs/web-components/writing-stories/args#args-composition
+    ...HeaderStories.LoggedIn.args,
+  },
 };
 
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {
-  ...HeaderStories.LoggedOut.args,
+export const LoggedOut = {
+  args: {
+    ...HeaderStories.LoggedOut.args,
+  },
 };
diff --git a/code/renderers/web-components/template/cli/ts/Button.stories.ts b/code/renderers/web-components/template/cli/ts/Button.stories.ts
index 3aca34166531..fcb489195e40 100644
--- a/code/renderers/web-components/template/cli/ts/Button.stories.ts
+++ b/code/renderers/web-components/template/cli/ts/Button.stories.ts
@@ -1,10 +1,11 @@
-import type { Meta, StoryFn } from '@storybook/web-components';
+import type { Meta, StoryObj } from '@storybook/web-components';
 import type { ButtonProps } from './Button';
 import { Button } from './Button';
 
-// More on default export: https://storybook.js.org/docs/web-components/writing-stories/introduction#default-export
-export default {
+// More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction#default-export
+const meta: Meta<ButtonProps> = {
   title: 'Example/Button',
+  render: (args) => Button(args),
   // More on argTypes: https://storybook.js.org/docs/web-components/api/argtypes
   argTypes: {
     backgroundColor: { control: 'color' },
@@ -14,31 +15,35 @@ export default {
       options: ['small', 'medium', 'large'],
     },
   },
-} as Meta;
+};
 
-// More on component templates: https://storybook.js.org/docs/web-components/writing-stories/introduction#using-args
-const Template: StoryFn<ButtonProps> = (args) => Button(args);
+export default meta;
+type Story = StoryObj<ButtonProps>;
 
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/web-components/writing-stories/args
-Primary.args = {
-  primary: true,
-  label: 'Button',
+// More on component templates: https://storybook.js.org/docs/web-components/writing-stories/introduction#using-args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
 };
 
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
 };
diff --git a/code/renderers/web-components/template/cli/ts/Header.stories.ts b/code/renderers/web-components/template/cli/ts/Header.stories.ts
index f196f465a13c..12f9cbe71c3a 100644
--- a/code/renderers/web-components/template/cli/ts/Header.stories.ts
+++ b/code/renderers/web-components/template/cli/ts/Header.stories.ts
@@ -1,19 +1,21 @@
-import type { Meta, StoryFn } from '@storybook/web-components';
+import type { Meta, StoryObj } from '@storybook/web-components';
 import type { HeaderProps } from './Header';
 import { Header } from './Header';
 
-export default {
+const meta: Meta<HeaderProps> = {
   title: 'Example/Header',
-} as Meta;
+  render: (args) => Header(args),
+};
 
-const Template: StoryFn<HeaderProps> = (args) => Header(args);
+export default meta;
+type Story = StoryObj<HeaderProps>;
 
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {
-    name: 'Jonh Doe',
+export const LoggedIn: Story = {
+  args: {
+    user: {
+      name: 'Jonh Doe',
+    },
   },
 };
 
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};
+export const LoggedOut: Story = {};
diff --git a/code/renderers/web-components/template/cli/ts/Page.stories.ts b/code/renderers/web-components/template/cli/ts/Page.stories.ts
index 9f6caa8bcde1..94229aac5dfc 100644
--- a/code/renderers/web-components/template/cli/ts/Page.stories.ts
+++ b/code/renderers/web-components/template/cli/ts/Page.stories.ts
@@ -1,21 +1,26 @@
-import type { Meta, StoryFn } from '@storybook/web-components';
+import type { Meta, StoryObj } from '@storybook/web-components';
+
 import type { PageProps } from './Page';
 import { Page } from './Page';
 import * as HeaderStories from './Header.stories';
 
-export default {
+const meta: Meta<PageProps> = {
   title: 'Example/Page',
-} as Meta;
+  render: (args) => Page(args),
+};
 
-const Template: StoryFn<PageProps> = (args) => Page(args);
+export default meta;
+type Story = StoryObj<PageProps>;
 
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  // More on composing args: https://storybook.js.org/docs/web-components/writing-stories/args#args-composition
-  ...HeaderStories.LoggedIn.args,
+export const LoggedIn: Story = {
+  args: {
+    // More on composing args: https://storybook.js.org/docs/web-components/writing-stories/args#args-composition
+    ...HeaderStories.LoggedIn.args,
+  },
 };
 
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {
-  ...HeaderStories.LoggedOut.args,
+export const LoggedOut: Story = {
+  args: {
+    ...HeaderStories.LoggedOut.args,
+  },
 };