diff --git a/code/addons/docs/template/stories/docspage/basic.stories.ts b/code/addons/docs/template/stories/docspage/basic.stories.ts
index 46d78074ecf8..58a24a2eb472 100644
--- a/code/addons/docs/template/stories/docspage/basic.stories.ts
+++ b/code/addons/docs/template/stories/docspage/basic.stories.ts
@@ -7,15 +7,24 @@ export default {
   parameters: { chromatic: { disable: true } },
 };
 
+/**
+ * A basic button
+ */
 export const Basic = {
   args: { label: 'Basic' },
 };
 
+/**
+ * Won't show up in DocsPage
+ */
 export const Disabled = {
   args: { label: 'Disabled in DocsPage' },
   parameters: { docs: { disable: true } },
 };
 
+/**
+ * Another button, just to show multiple stories
+ */
 export const Another = {
   args: { label: 'Another' },
 };
diff --git a/code/lib/csf-plugin/src/index.ts b/code/lib/csf-plugin/src/index.ts
index a69492ea13d8..037f156abf4b 100644
--- a/code/lib/csf-plugin/src/index.ts
+++ b/code/lib/csf-plugin/src/index.ts
@@ -1,21 +1,23 @@
 import { createUnplugin } from 'unplugin';
+import fs from 'fs/promises';
 import { loadCsf, enrichCsf, formatCsf } from '@storybook/csf-tools';
+import type { EnrichCsfOptions } from '@storybook/csf-tools';
 
-export interface CsfPluginOptions {
-  source?: boolean;
-}
+export type CsfPluginOptions = EnrichCsfOptions;
 
 const STORIES_REGEX = /\.(story|stories)\.[tj]sx?$/;
 
 const logger = console;
 
-export const unplugin = createUnplugin((options: CsfPluginOptions) => {
+export const unplugin = createUnplugin<CsfPluginOptions>((options) => {
   return {
     name: 'unplugin-csf',
-    transformInclude(id) {
+    enforce: 'pre',
+    loadInclude(id) {
       return STORIES_REGEX.test(id);
     },
-    transform(code) {
+    async load(fname) {
+      const code = await fs.readFile(fname, 'utf-8');
       try {
         const csf = loadCsf(code, { makeTitle: (userTitle) => userTitle || 'default' }).parse();
         enrichCsf(csf);
diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json
index a27688c6b75d..77c7862f08a7 100644
--- a/code/lib/csf-tools/package.json
+++ b/code/lib/csf-tools/package.json
@@ -51,7 +51,6 @@
   "devDependencies": {
     "@babel/generator": "^7.12.11",
     "@babel/parser": "^7.12.11",
-    "@babel/template": "^7.12.11",
     "@babel/traverse": "^7.12.11",
     "@types/fs-extra": "^9.0.6",
     "js-yaml": "^3.14.1",
diff --git a/code/lib/csf-tools/src/CsfFile.ts b/code/lib/csf-tools/src/CsfFile.ts
index 458713ea0d41..af2ff4365d0f 100644
--- a/code/lib/csf-tools/src/CsfFile.ts
+++ b/code/lib/csf-tools/src/CsfFile.ts
@@ -156,6 +156,8 @@ export class CsfFile {
 
   _storyExports: Record<string, t.VariableDeclarator | t.FunctionDeclaration> = {};
 
+  _storyStatements: Record<string, t.ExportNamedDeclaration> = {};
+
   _storyAnnotations: Record<string, Record<string, t.Node>> = {};
 
   _templates: Record<string, t.Expression> = {};
@@ -283,6 +285,7 @@ export class CsfFile {
                   return;
                 }
                 self._storyExports[exportName] = decl;
+                self._storyStatements[exportName] = node;
                 let name = storyNameFromExport(exportName);
                 if (self._storyAnnotations[exportName]) {
                   logger.warn(
diff --git a/code/lib/csf-tools/src/enrichCsf.test.ts b/code/lib/csf-tools/src/enrichCsf.test.ts
index f2e7988f9453..a0bb3af2db25 100644
--- a/code/lib/csf-tools/src/enrichCsf.test.ts
+++ b/code/lib/csf-tools/src/enrichCsf.test.ts
@@ -4,17 +4,18 @@
 import { dedent } from 'ts-dedent';
 import { loadCsf, formatCsf } from './CsfFile';
 import { enrichCsf, extractSource } from './enrichCsf';
+import type { EnrichCsfOptions } from './enrichCsf';
 
 expect.addSnapshotSerializer({
   print: (val: any) => val,
   test: (val) => true,
 });
 
-const enrich = (code: string) => {
+const enrich = (code: string, options?: EnrichCsfOptions) => {
   // we don't actually care about the title
 
   const csf = loadCsf(code, { makeTitle: (userTitle) => userTitle || 'default' }).parse();
-  enrichCsf(csf);
+  enrichCsf(csf, options);
   return formatCsf(csf);
 };
 
@@ -34,10 +35,11 @@ describe('enrichCsf', () => {
         };
         export const Basic = () => <Button />;
         Basic.parameters = {
+          ...Basic.parameters,
           storySource: {
-            source: "() => <Button />"
-          },
-          ...Basic.parameters
+            source: "() => <Button />",
+            ...Basic.parameters?.storySource
+          }
         };
       `);
     });
@@ -61,10 +63,11 @@ describe('enrichCsf', () => {
           foo: 'bar'
         };
         Basic.parameters = {
+          ...Basic.parameters,
           storySource: {
-            source: "args => <Button {...args} />"
-          },
-          ...Basic.parameters
+            source: "args => <Button {...args} />",
+            ...Basic.parameters?.storySource
+          }
         };
       `);
     });
@@ -88,10 +91,11 @@ describe('enrichCsf', () => {
           }
         };
         Basic.parameters = {
+          ...Basic.parameters,
           storySource: {
-            source: "{\\n  parameters: {\\n    foo: 'bar'\\n  }\\n}"
-          },
-          ...Basic.parameters
+            source: "{\\n  parameters: {\\n    foo: 'bar'\\n  }\\n}",
+            ...Basic.parameters?.storySource
+          }
         };
       `);
     });
@@ -111,19 +115,267 @@ describe('enrichCsf', () => {
         export const A = {};
         export const B = {};
         A.parameters = {
+          ...A.parameters,
           storySource: {
-            source: "{}"
-          },
-          ...A.parameters
+            source: "{}",
+            ...A.parameters?.storySource
+          }
         };
         B.parameters = {
+          ...B.parameters,
+          storySource: {
+            source: "{}",
+            ...B.parameters?.storySource
+          }
+        };
+      `);
+    });
+  });
+
+  describe('descriptions', () => {
+    it('skips inline comments', () => {
+      expect(
+        enrich(dedent`
+          export default {
+           title: 'Button',
+          }
+          // The most basic button
+          export const Basic = () => <Button />
+        `)
+      ).toMatchInlineSnapshot(`
+        export default {
+          title: 'Button'
+        };
+        // The most basic button
+        export const Basic = () => <Button />;
+        Basic.parameters = {
+          ...Basic.parameters,
+          storySource: {
+            source: "() => <Button />",
+            ...Basic.parameters?.storySource
+          }
+        };
+      `);
+    });
+
+    it('skips blocks without jsdoc', () => {
+      expect(
+        enrich(dedent`
+          export default {
+           title: 'Button',
+          }
+          /* The most basic button */
+          export const Basic = () => <Button />
+        `)
+      ).toMatchInlineSnapshot(`
+        export default {
+          title: 'Button'
+        };
+        /* The most basic button */
+        export const Basic = () => <Button />;
+        Basic.parameters = {
+          ...Basic.parameters,
+          storySource: {
+            source: "() => <Button />",
+            ...Basic.parameters?.storySource
+          }
+        };
+      `);
+    });
+
+    it('JSDoc single-line', () => {
+      expect(
+        enrich(dedent`
+          export default {
+           title: 'Button',
+          }
+          /** The most basic button */
+          export const Basic = () => <Button />
+        `)
+      ).toMatchInlineSnapshot(`
+        export default {
+          title: 'Button'
+        };
+        /** The most basic button */
+        export const Basic = () => <Button />;
+        Basic.parameters = {
+          ...Basic.parameters,
+          storySource: {
+            source: "() => <Button />",
+            ...Basic.parameters?.storySource
+          },
+          docs: {
+            ...Basic.parameters?.docs,
+            description: {
+              story: "The most basic button",
+              ...Basic.parameters?.docs?.description
+            }
+          }
+        };
+      `);
+    });
+
+    it('JSDoc multi-line', () => {
+      expect(
+        enrich(dedent`
+          export default {
+           title: 'Button',
+          }
+          /**
+           * The most basic button
+           * 
+           * In a block!
+           */
+          export const Basic = () => <Button />
+        `)
+      ).toMatchInlineSnapshot(`
+        export default {
+          title: 'Button'
+        };
+        /**
+         * The most basic button
+         * 
+         * In a block!
+         */
+        export const Basic = () => <Button />;
+        Basic.parameters = {
+          ...Basic.parameters,
           storySource: {
-            source: "{}"
+            source: "() => <Button />",
+            ...Basic.parameters?.storySource
           },
-          ...B.parameters
+          docs: {
+            ...Basic.parameters?.docs,
+            description: {
+              story: "The most basic button\\n\\nIn a block!",
+              ...Basic.parameters?.docs?.description
+            }
+          }
         };
       `);
     });
+
+    it('preserves indentation', () => {
+      expect(
+        enrich(dedent`
+          export default {
+           title: 'Button',
+          }
+          /**
+           * - A bullet list
+           *   - A sub-bullet
+           * - A second bullet
+           */
+          export const Basic = () => <Button />
+        `)
+      ).toMatchInlineSnapshot(`
+        export default {
+          title: 'Button'
+        };
+        /**
+         * - A bullet list
+         *   - A sub-bullet
+         * - A second bullet
+         */
+        export const Basic = () => <Button />;
+        Basic.parameters = {
+          ...Basic.parameters,
+          storySource: {
+            source: "() => <Button />",
+            ...Basic.parameters?.storySource
+          },
+          docs: {
+            ...Basic.parameters?.docs,
+            description: {
+              story: "- A bullet list\\n  - A sub-bullet\\n- A second bullet",
+              ...Basic.parameters?.docs?.description
+            }
+          }
+        };
+      `);
+    });
+  });
+
+  describe('options', () => {
+    it('disableSource', () => {
+      expect(
+        enrich(
+          dedent`
+          export default {
+           title: 'Button',
+          }
+          /** The most basic button */
+          export const Basic = () => <Button />
+        `,
+          { disableSource: true }
+        )
+      ).toMatchInlineSnapshot(`
+        export default {
+          title: 'Button'
+        };
+        /** The most basic button */
+        export const Basic = () => <Button />;
+        Basic.parameters = {
+          ...Basic.parameters,
+          docs: {
+            ...Basic.parameters?.docs,
+            description: {
+              story: "The most basic button",
+              ...Basic.parameters?.docs?.description
+            }
+          }
+        };
+      `);
+    });
+
+    it('disableDescription', () => {
+      expect(
+        enrich(
+          dedent`
+          export default {
+           title: 'Button',
+          }
+          /** The most basic button */
+          export const Basic = () => <Button />
+        `,
+          { disableDescription: true }
+        )
+      ).toMatchInlineSnapshot(`
+        export default {
+          title: 'Button'
+        };
+        /** The most basic button */
+        export const Basic = () => <Button />;
+        Basic.parameters = {
+          ...Basic.parameters,
+          storySource: {
+            source: "() => <Button />",
+            ...Basic.parameters?.storySource
+          }
+        };
+      `);
+    });
+
+    it('disable all', () => {
+      expect(
+        enrich(
+          dedent`
+          export default {
+           title: 'Button',
+          }
+          /** The most basic button */
+          export const Basic = () => <Button />
+        `,
+          { disableSource: true, disableDescription: true }
+        )
+      ).toMatchInlineSnapshot(`
+        export default {
+          title: 'Button'
+        };
+        /** The most basic button */
+        export const Basic = () => <Button />;
+      `);
+    });
   });
 });
 
diff --git a/code/lib/csf-tools/src/enrichCsf.ts b/code/lib/csf-tools/src/enrichCsf.ts
index 0d1e7c1d579a..bdeae40825dd 100644
--- a/code/lib/csf-tools/src/enrichCsf.ts
+++ b/code/lib/csf-tools/src/enrichCsf.ts
@@ -2,21 +2,81 @@
 import * as t from '@babel/types';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import * as generate from '@babel/generator';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import * as template from '@babel/template';
 import type { CsfFile } from './CsfFile';
 
-export const enrichCsf = (csf: CsfFile) => {
+export interface EnrichCsfOptions {
+  disableSource?: boolean;
+  disableDescription?: boolean;
+}
+
+export const enrichCsf = (csf: CsfFile, options?: EnrichCsfOptions) => {
   Object.keys(csf._storyExports).forEach((key) => {
     const storyExport = csf.getStoryExport(key);
-    const source = extractSource(storyExport);
-    const addParameter = template.default(`
-       %%key%%.parameters = { storySource: { source: %%source%% }, ...%%key%%.parameters };
-    `)({
-      key: t.identifier(key),
-      source: t.stringLiteral(source),
-    }) as t.Statement;
-    csf._ast.program.body.push(addParameter);
+    const source = !options?.disableSource && extractSource(storyExport);
+    const description =
+      !options?.disableDescription && extractDescription(csf._storyStatements[key]);
+    const parameters = [];
+    const originalParameters = t.memberExpression(t.identifier(key), t.identifier('parameters'));
+    parameters.push(t.spreadElement(originalParameters));
+
+    // storySource: { source: %%source%% },
+    if (source) {
+      const optionalStorySource = t.optionalMemberExpression(
+        originalParameters,
+        t.identifier('storySource'),
+        false,
+        true
+      );
+
+      parameters.push(
+        t.objectProperty(
+          t.identifier('storySource'),
+          t.objectExpression([
+            t.objectProperty(t.identifier('source'), t.stringLiteral(source)),
+            t.spreadElement(optionalStorySource),
+          ])
+        )
+      );
+    }
+
+    // docs: { description: { story: %%description%% } },
+    if (description) {
+      const optionalDocs = t.optionalMemberExpression(
+        originalParameters,
+        t.identifier('docs'),
+        false,
+        true
+      );
+
+      const optionalDescription = t.optionalMemberExpression(
+        optionalDocs,
+        t.identifier('description'),
+        false,
+        true
+      );
+
+      parameters.push(
+        t.objectProperty(
+          t.identifier('docs'),
+          t.objectExpression([
+            t.spreadElement(optionalDocs),
+            t.objectProperty(
+              t.identifier('description'),
+              t.objectExpression([
+                t.objectProperty(t.identifier('story'), t.stringLiteral(description)),
+                t.spreadElement(optionalDescription),
+              ])
+            ),
+          ])
+        )
+      );
+    }
+    if (parameters.length > 1) {
+      const addParameter = t.expressionStatement(
+        t.assignmentExpression('=', originalParameters, t.objectExpression(parameters))
+      );
+      csf._ast.program.body.push(addParameter);
+    }
   });
 };
 
@@ -25,3 +85,21 @@ export const extractSource = (node: t.Node) => {
   const { code } = generate.default(src, {});
   return code;
 };
+
+export const extractDescription = (node?: t.Node) => {
+  if (!node?.leadingComments) return '';
+  const comments = node.leadingComments
+    .map((comment) => {
+      if (comment.type === 'CommentLine' || !comment.value.startsWith('*')) return null;
+      return (
+        comment.value
+          .split('\n')
+          // remove leading *'s and spaces from the beginning of each line
+          .map((line) => line.replace(/^(\s+)?(\*+)?(\s)?/, ''))
+          .join('\n')
+          .trim()
+      );
+    })
+    .filter(Boolean);
+  return comments.join('\n');
+};
diff --git a/code/ui/blocks/src/controls/Boolean.stories.tsx b/code/ui/blocks/src/controls/Boolean.stories.tsx
index 2e1288bde82f..b88cd3def47e 100644
--- a/code/ui/blocks/src/controls/Boolean.stories.tsx
+++ b/code/ui/blocks/src/controls/Boolean.stories.tsx
@@ -4,6 +4,7 @@ import { BooleanControl } from './Boolean';
 export default {
   title: 'Controls/Boolean',
   component: BooleanControl,
+  tags: ['docsPage'],
 };
 
 const Template = (initialValue?: boolean) => {
@@ -20,4 +21,7 @@ export const True = () => Template(true);
 
 export const False = () => Template(false);
 
+/**
+ * When no value is set on the control
+ */
 export const Undefined = () => Template(undefined);
diff --git a/code/yarn.lock b/code/yarn.lock
index bb449b90aa3e..7fb324ed3adc 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -2119,7 +2119,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/template@npm:^7.12.11, @babel/template@npm:^7.16.7, @babel/template@npm:^7.18.10, @babel/template@npm:^7.3.3, @babel/template@npm:^7.4.0, @babel/template@npm:^7.7.0, @babel/template@npm:^7.8.6":
+"@babel/template@npm:^7.16.7, @babel/template@npm:^7.18.10, @babel/template@npm:^7.3.3, @babel/template@npm:^7.4.0, @babel/template@npm:^7.7.0, @babel/template@npm:^7.8.6":
   version: 7.18.10
   resolution: "@babel/template@npm:7.18.10"
   dependencies:
@@ -6644,7 +6644,6 @@ __metadata:
   dependencies:
     "@babel/generator": ^7.12.11
     "@babel/parser": ^7.12.11
-    "@babel/template": ^7.12.11
     "@babel/traverse": ^7.12.11
     "@babel/types": ^7.12.11
     "@storybook/csf": next