diff --git a/package-lock.json b/package-lock.json
index 873b85a5cb9..20a3386605f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -54,6 +54,7 @@
         "rimraf": "5.0.5",
         "size-limit": "11.2.0",
         "storybook": "^9.1.8",
+        "storybook-addon-code-editor": "^5.0.0",
         "stylelint": "16.20.0",
         "turbo": "^2.5.5",
         "typescript": "^5.9.2",
@@ -1990,6 +1991,16 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/standalone": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/standalone/-/standalone-7.28.4.tgz",
+      "integrity": "sha512-Qc1BNCfuJZBKs2SC5lqRmSYOw7Ka0X7urZQ7oVsGIax4eGDUIHX+CDg752N4jDxC2rbBh3li098ReGOtjT0x4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.27.2",
       "license": "MIT",
@@ -17346,6 +17357,13 @@
         "node": ">=10"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.52.2",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.52.2.tgz",
+      "integrity": "sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/mri": {
       "version": "1.2.0",
       "dev": true,
@@ -22563,6 +22581,27 @@
         }
       }
     },
+    "node_modules/storybook-addon-code-editor": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/storybook-addon-code-editor/-/storybook-addon-code-editor-5.0.0.tgz",
+      "integrity": "sha512-/8P+1upZZzCOXmD1nC8pLivT5rf47dxk2msKtalzV7ppERcU/XHC2jCDYYzjKos3K1YkK1wjzGN6dUsFDFYibQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/standalone": "^7.27.0",
+        "monaco-editor": "0.52.2"
+      },
+      "peerDependencies": {
+        "@types/react": "17.x.x || 18.x.x || 19.x.x",
+        "react": "17.x.x || 18.x.x || 19.x.x",
+        "storybook": "^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/streamx": {
       "version": "2.22.1",
       "dev": true,
diff --git a/package.json b/package.json
index d03601a6519..e81ee5c0a4b 100644
--- a/package.json
+++ b/package.json
@@ -82,6 +82,7 @@
     "rimraf": "5.0.5",
     "size-limit": "11.2.0",
     "storybook": "^9.1.8",
+    "storybook-addon-code-editor": "^5.0.0",
     "stylelint": "16.20.0",
     "turbo": "^2.5.5",
     "typescript": "^5.9.2",
diff --git a/packages/react/.storybook/main.ts b/packages/react/.storybook/main.ts
index 513fe52378d..0098da7b022 100644
--- a/packages/react/.storybook/main.ts
+++ b/packages/react/.storybook/main.ts
@@ -3,6 +3,7 @@ import path from 'node:path'
 import react from '@vitejs/plugin-react'
 import postcssPresetPrimer from 'postcss-preset-primer'
 import type {StorybookConfig} from '@storybook/react-vite'
+import {getCodeEditorStaticDirs} from 'storybook-addon-code-editor/getStaticDirs'
 import {isSupported} from '../script/react-compiler.mjs'
 
 const require = createRequire(import.meta.url)
@@ -10,6 +11,7 @@ const require = createRequire(import.meta.url)
 const {DEPLOY_ENV = 'development'} = process.env
 
 const config: StorybookConfig = {
+  staticDirs: [...getCodeEditorStaticDirs(__filename)],
   stories:
     DEPLOY_ENV === 'development'
       ? ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)']
@@ -20,6 +22,7 @@ const config: StorybookConfig = {
     getAbsolutePath('@storybook/addon-a11y'),
     getAbsolutePath('@storybook/addon-links'),
     getAbsolutePath('@storybook/addon-docs'),
+    'storybook-addon-code-editor',
   ],
 
   framework: {
diff --git a/packages/react/src/Avatar/Avatar.stories.tsx b/packages/react/src/Avatar/Avatar.stories.tsx
index 0a97a0924d3..0056a52f359 100644
--- a/packages/react/src/Avatar/Avatar.stories.tsx
+++ b/packages/react/src/Avatar/Avatar.stories.tsx
@@ -2,6 +2,8 @@ import type {Meta, StoryFn} from '@storybook/react-vite'
 import type {AvatarProps} from './Avatar'
 import Avatar, {DEFAULT_AVATAR_SIZE} from './Avatar'
 import {parseSizeFromArgs} from './storyHelpers'
+import {makeLiveEditStory} from 'storybook-addon-code-editor'
+import * as PrimerReactLibrary from '../index'
 
 export default {
   title: 'Components/Avatar',
@@ -15,18 +17,16 @@ type Args = {
   sizeAtWide?: number
 } & Omit<AvatarProps, 'size'>
 
-export const Default = () => <Avatar src="https://avatars.githubusercontent.com/u/7143434?v=4" />
+export const Default = {}
 
-export const Playground: StoryFn<Args> = args => {
-  return (
-    <Avatar
-      size={parseSizeFromArgs(args)}
-      square={args.square}
-      src="https://avatars.githubusercontent.com/u/7143434?v=4"
-      alt="mona"
-    />
-  )
-}
+makeLiveEditStory(Default, {
+  availableImports: {'@primer/react': PrimerReactLibrary},
+  code: `import { Avatar } from '@primer/react';
+
+    export default () => <Avatar src="https://avatars.githubusercontent.com/u/7143434?v=4" />`,
+})
+
+export const Playground = {}
 
 Playground.args = {
   size: DEFAULT_AVATAR_SIZE,
@@ -63,3 +63,17 @@ Playground.argTypes = {
     },
   },
 }
+
+makeLiveEditStory(Playground, {
+  availableImports: {'@primer/react': PrimerReactLibrary},
+  code: `import { Avatar } from '@primer/react';
+
+export default (args) => (
+  <Avatar
+    size={args.size || 24}
+    square={args.square}
+    src="https://avatars.githubusercontent.com/u/7143434?v=4"
+    alt="mona"
+  />
+);`,
+})