diff --git a/docs/get-started/setup.md b/docs/get-started/setup.md
index f89a8035291..40ee1a6e034 100644
--- a/docs/get-started/setup.md
+++ b/docs/get-started/setup.md
@@ -23,6 +23,7 @@ Pick a simple component from your project, like a Button, and write a `.stories.
     'svelte/your-component.native-format.mdx',
     'svelte/your-component.mdx.mdx',
     'web-components/your-component.js.mdx',
+    'html/your-component.js.mdx',
   ]}
 />
 
diff --git a/docs/snippets/html/your-component.js.mdx b/docs/snippets/html/your-component.js.mdx
new file mode 100644
index 00000000000..b83ef27897a
--- /dev/null
+++ b/docs/snippets/html/your-component.js.mdx
@@ -0,0 +1,22 @@
+```js
+// YourComponent.stories.js
+
+import { createYourComponent } from './YourComponent';
+
+// 👇 This default export determines where your story goes in the story list
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docsreact/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'YourComponent',
+};
+
+// 👇 We create a “template” of how args map to rendering
+const Template = (args) => createYourComponent(args);
+
+export const FirstStory = Template.bind({});
+FirstStory.args = {
+  // 👇 The args you need here will depend on your component
+};
+```