diff --git a/README.md b/README.md
index 29eefd711e..324b084155 100644
--- a/README.md
+++ b/README.md
@@ -33,6 +33,7 @@ The aim of [npmx.dev](https://npmx.dev) is to provide a better browser for the n
 - **Vulnerability warnings** – security advisories from the OSV database
 - **Download statistics** – weekly download counts with sparkline charts
 - **Install size** – total install size including dependencies
+- **Playground links** – quick access to StackBlitz, CodeSandbox, and other demo environments from READMEs
 - **Infinite search** – auto-load additional search pages as you scroll
 
 ### User & org pages
@@ -62,6 +63,7 @@ The aim of [npmx.dev](https://npmx.dev) is to provide a better browser for the n
 | JSR cross-reference            |    ❌     |    ✅    |
 | Vulnerability warnings         |    ✅     |    ✅    |
 | Download charts                |    ✅     |    ✅    |
+| Playground links               |    ❌     |    ✅    |
 | Dependents list                |    ✅     |    🚧    |
 | Package admin (access/owners)  |    ✅     |    🚧    |
 | Org/team management            |    ✅     |    🚧    |
diff --git a/app/components/AppTooltip.vue b/app/components/AppTooltip.vue
new file mode 100644
index 0000000000..f402824edd
--- /dev/null
+++ b/app/components/AppTooltip.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+const props = defineProps<{
+  /** Tooltip text */
+  text: string
+  /** Position: 'top' | 'bottom' | 'left' | 'right' */
+  position?: 'top' | 'bottom' | 'left' | 'right'
+}>()
+
+const isVisible = ref(false)
+const tooltipId = useId()
+
+const positionClasses: Record<string, string> = {
+  top: 'bottom-full left-1/2 -translate-x-1/2 mb-1',
+  bottom: 'top-full left-0 mt-1',
+  left: 'right-full top-1/2 -translate-y-1/2 mr-2',
+  right: 'left-full top-1/2 -translate-y-1/2 ml-2',
+}
+
+const tooltipPosition = computed(() => positionClasses[props.position || 'bottom'])
+
+function show() {
+  isVisible.value = true
+}
+
+function hide() {
+  isVisible.value = false
+}
+</script>
+
+<template>
+  <div
+    class="relative inline-flex"
+    :aria-describedby="isVisible ? tooltipId : undefined"
+    @mouseenter="show"
+    @mouseleave="hide"
+    @focusin="show"
+    @focusout="hide"
+  >
+    <slot />
+
+    <Transition
+      enter-active-class="transition-opacity duration-150 motion-reduce:transition-none"
+      leave-active-class="transition-opacity duration-100 motion-reduce:transition-none"
+      enter-from-class="opacity-0"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="isVisible"
+        :id="tooltipId"
+        role="tooltip"
+        class="absolute px-2 py-1 font-mono text-xs text-fg bg-bg-elevated border border-border rounded shadow-lg whitespace-nowrap z-[100] pointer-events-none"
+        :class="tooltipPosition"
+      >
+        {{ text }}
+      </div>
+    </Transition>
+  </div>
+</template>
diff --git a/app/components/PackagePlaygrounds.vue b/app/components/PackagePlaygrounds.vue
new file mode 100644
index 0000000000..aa553183ec
--- /dev/null
+++ b/app/components/PackagePlaygrounds.vue
@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import { onClickOutside } from '@vueuse/core'
+import type { PlaygroundLink } from '#shared/types'
+
+const props = defineProps<{
+  links: PlaygroundLink[]
+}>()
+
+// Map provider id to icon class
+const providerIcons: Record<string, string> = {
+  'stackblitz': 'i-simple-icons-stackblitz',
+  'codesandbox': 'i-simple-icons-codesandbox',
+  'codepen': 'i-simple-icons-codepen',
+  'replit': 'i-simple-icons-replit',
+  'gitpod': 'i-simple-icons-gitpod',
+  'vue-playground': 'i-simple-icons-vuedotjs',
+  'nuxt-new': 'i-simple-icons-nuxtdotjs',
+  'vite-new': 'i-simple-icons-vite',
+  'jsfiddle': 'i-carbon-code',
+}
+
+// Map provider id to color class
+const providerColors: Record<string, string> = {
+  'stackblitz': 'text-provider-stackblitz',
+  'codesandbox': 'text-provider-codesandbox',
+  'codepen': 'text-provider-codepen',
+  'replit': 'text-provider-replit',
+  'gitpod': 'text-provider-gitpod',
+  'vue-playground': 'text-provider-vue',
+  'nuxt-new': 'text-provider-nuxt',
+  'vite-new': 'text-provider-vite',
+  'jsfiddle': 'text-provider-jsfiddle',
+}
+
+function getIcon(provider: string): string {
+  return providerIcons[provider] || 'i-carbon-play'
+}
+
+function getColor(provider: string): string {
+  return providerColors[provider] || 'text-fg-muted'
+}
+
+// Dropdown state
+const isOpen = ref(false)
+const dropdownRef = ref<HTMLElement>()
+const menuRef = ref<HTMLElement>()
+const focusedIndex = ref(-1)
+
+onClickOutside(dropdownRef, () => {
+  isOpen.value = false
+})
+
+// Single vs multiple
+const hasSingleLink = computed(() => props.links.length === 1)
+const hasMultipleLinks = computed(() => props.links.length > 1)
+const firstLink = computed(() => props.links[0])
+
+function closeDropdown() {
+  isOpen.value = false
+  focusedIndex.value = -1
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (!isOpen.value) {
+    if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault()
+      isOpen.value = true
+      focusedIndex.value = 0
+      nextTick(() => focusMenuItem(0))
+    }
+    return
+  }
+
+  switch (event.key) {
+    case 'Escape':
+      event.preventDefault()
+      closeDropdown()
+      break
+    case 'ArrowDown':
+      event.preventDefault()
+      focusedIndex.value = (focusedIndex.value + 1) % props.links.length
+      focusMenuItem(focusedIndex.value)
+      break
+    case 'ArrowUp':
+      event.preventDefault()
+      focusedIndex.value = focusedIndex.value <= 0 ? props.links.length - 1 : focusedIndex.value - 1
+      focusMenuItem(focusedIndex.value)
+      break
+    case 'Home':
+      event.preventDefault()
+      focusedIndex.value = 0
+      focusMenuItem(0)
+      break
+    case 'End':
+      event.preventDefault()
+      focusedIndex.value = props.links.length - 1
+      focusMenuItem(props.links.length - 1)
+      break
+    case 'Tab':
+      closeDropdown()
+      break
+  }
+}
+
+function focusMenuItem(index: number) {
+  const items = menuRef.value?.querySelectorAll<HTMLElement>('[role="menuitem"]')
+  items?.[index]?.focus()
+}
+</script>
+
+<template>
+  <section v-if="links.length > 0" aria-labelledby="playgrounds-heading">
+    <h2 id="playgrounds-heading" class="text-xs text-fg-subtle uppercase tracking-wider mb-3">
+      Try it out
+    </h2>
+
+    <div ref="dropdownRef" class="relative">
+      <!-- Single link: direct button -->
+      <AppTooltip v-if="hasSingleLink && firstLink" :text="firstLink.providerName" class="w-full">
+        <a
+          :href="firstLink.url"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="w-full flex items-center gap-2 px-3 py-2 text-sm font-mono bg-bg-muted border border-border rounded-md hover:border-border-hover hover:bg-bg-elevated focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-hover transition-colors duration-200"
+        >
+          <span
+            :class="[getIcon(firstLink.provider), getColor(firstLink.provider), 'w-4 h-4 shrink-0']"
+            aria-hidden="true"
+          />
+          <span class="truncate text-fg-muted">{{ firstLink.label }}</span>
+        </a>
+      </AppTooltip>
+
+      <!-- Multiple links: dropdown button -->
+      <button
+        v-if="hasMultipleLinks"
+        type="button"
+        aria-haspopup="true"
+        :aria-expanded="isOpen"
+        class="w-full flex items-center justify-between gap-2 px-3 py-2 text-sm font-mono bg-bg-muted border border-border rounded-md hover:border-border-hover hover:bg-bg-elevated focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-hover transition-colors duration-200"
+        @click="isOpen = !isOpen"
+        @keydown="handleKeydown"
+      >
+        <span class="flex items-center gap-2">
+          <span class="i-carbon-play w-4 h-4 shrink-0 text-fg-muted" aria-hidden="true" />
+          <span class="text-fg-muted">choose playground ({{ links.length }})</span>
+        </span>
+        <span
+          class="i-carbon-chevron-down w-3 h-3 text-fg-subtle transition-transform duration-200 motion-reduce:transition-none"
+          :class="{ 'rotate-180': isOpen }"
+          aria-hidden="true"
+        />
+      </button>
+
+      <!-- Dropdown menu -->
+      <Transition
+        enter-active-class="transition duration-150 ease-out motion-reduce:transition-none"
+        enter-from-class="opacity-0 scale-95 motion-reduce:scale-100"
+        enter-to-class="opacity-100 scale-100"
+        leave-active-class="transition duration-100 ease-in motion-reduce:transition-none"
+        leave-from-class="opacity-100 scale-100"
+        leave-to-class="opacity-0 scale-95 motion-reduce:scale-100"
+      >
+        <div
+          v-if="isOpen && hasMultipleLinks"
+          ref="menuRef"
+          role="menu"
+          class="absolute top-full left-0 right-0 mt-1 bg-bg-elevated border border-border rounded-lg shadow-lg z-50 py-1 overflow-visible"
+          @keydown="handleKeydown"
+        >
+          <AppTooltip v-for="link in links" :key="link.url" :text="link.providerName" class="block">
+            <a
+              :href="link.url"
+              target="_blank"
+              rel="noopener noreferrer"
+              role="menuitem"
+              class="flex items-center gap-2 px-3 py-2 text-sm font-mono text-fg-muted hover:text-fg hover:bg-bg-muted focus-visible:outline-none focus-visible:text-fg focus-visible:bg-bg-muted transition-colors duration-150"
+              @click="closeDropdown"
+            >
+              <span
+                :class="[getIcon(link.provider), getColor(link.provider), 'w-4 h-4 shrink-0']"
+                aria-hidden="true"
+              />
+              <span class="truncate">{{ link.label }}</span>
+            </a>
+          </AppTooltip>
+        </div>
+      </Transition>
+    </div>
+  </section>
+</template>
diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
index aad995fc96..8a94811293 100644
--- a/app/pages/[...package].vue
+++ b/app/pages/[...package].vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { joinURL } from 'ufo'
-import type { PackumentVersion, NpmVersionDist } from '#shared/types'
+import type { PackumentVersion, NpmVersionDist, ReadmeResponse } from '#shared/types'
 import type { JsrPackageInfo } from '#shared/types/jsr'
 import { assertValidPackageName } from '#shared/utils/npm'
 
@@ -56,13 +56,13 @@ const { data: downloads } = usePackageDownloads(packageName, 'last-week')
 const { data: weeklyDownloads } = usePackageWeeklyDownloadEvolution(packageName, { weeks: 52 })
 
 // Fetch README for specific version if requested, otherwise latest
-const { data: readmeData } = useLazyFetch<{ html: string }>(
+const { data: readmeData } = useLazyFetch<ReadmeResponse>(
   () => {
     const base = `/api/registry/readme/${packageName.value}`
     const version = requestedVersion.value
     return version ? `${base}/v/${version}` : base
   },
-  { default: () => ({ html: '' }) },
+  { default: () => ({ html: '', playgroundLinks: [] }) },
 )
 
 // Check if package exists on JSR (only for scoped packages)
@@ -686,9 +686,15 @@ defineOgImageComponent('Package', {
             </ul>
           </section>
 
-          <!-- Donwload stats -->
+          <!-- Download stats -->
           <PackageDownloadStats :downloads="weeklyDownloads" />
 
+          <!-- Playground links -->
+          <PackagePlaygrounds
+            v-if="readmeData?.playgroundLinks?.length"
+            :links="readmeData.playgroundLinks"
+          />
+
           <section
             v-if="
               displayVersion?.engines && (displayVersion.engines.node || displayVersion.engines.npm)
diff --git a/server/api/registry/readme/[...pkg].get.ts b/server/api/registry/readme/[...pkg].get.ts
index 7cb299d636..bbcf566702 100644
--- a/server/api/registry/readme/[...pkg].get.ts
+++ b/server/api/registry/readme/[...pkg].get.ts
@@ -1,5 +1,3 @@
-import { parseRepositoryInfo } from '#server/utils/readme'
-
 /**
  * Fetch README from jsdelivr CDN for a specific package version.
  * Falls back through common README filenames.
@@ -82,14 +80,13 @@ export default defineCachedEventHandler(
       }
 
       if (!readmeContent) {
-        return { html: '' }
+        return { html: '', playgroundLinks: [] }
       }
 
       // Parse repository info for resolving relative URLs to GitHub
       const repoInfo = parseRepositoryInfo(packageData.repository)
 
-      const html = await renderReadmeHtml(readmeContent, packageName, repoInfo)
-      return { html }
+      return await renderReadmeHtml(readmeContent, packageName, repoInfo)
     } catch (error) {
       if (error && typeof error === 'object' && 'statusCode' in error) {
         throw error
diff --git a/server/utils/readme.ts b/server/utils/readme.ts
index 8ac03c12ce..0708605dd8 100644
--- a/server/utils/readme.ts
+++ b/server/utils/readme.ts
@@ -1,6 +1,98 @@
 import { marked, type Tokens } from 'marked'
 import sanitizeHtml from 'sanitize-html'
 import { hasProtocol, withoutTrailingSlash } from 'ufo'
+import type { ReadmeResponse } from '#shared/types/readme.js'
+
+/**
+ * Playground provider configuration
+ */
+interface PlaygroundProvider {
+  id: string // Provider identifier
+  name: string
+  domains: string[] // Associated domains
+  icon?: string // Provider icon name
+}
+
+/**
+ * Known playground/demo providers
+ */
+const PLAYGROUND_PROVIDERS: PlaygroundProvider[] = [
+  {
+    id: 'stackblitz',
+    name: 'StackBlitz',
+    domains: ['stackblitz.com', 'stackblitz.io'],
+    icon: 'stackblitz',
+  },
+  {
+    id: 'codesandbox',
+    name: 'CodeSandbox',
+    domains: ['codesandbox.io', 'githubbox.com', 'csb.app'],
+    icon: 'codesandbox',
+  },
+  {
+    id: 'codepen',
+    name: 'CodePen',
+    domains: ['codepen.io'],
+    icon: 'codepen',
+  },
+  {
+    id: 'jsfiddle',
+    name: 'JSFiddle',
+    domains: ['jsfiddle.net'],
+    icon: 'jsfiddle',
+  },
+  {
+    id: 'replit',
+    name: 'Replit',
+    domains: ['repl.it', 'replit.com'],
+    icon: 'replit',
+  },
+  {
+    id: 'gitpod',
+    name: 'Gitpod',
+    domains: ['gitpod.io'],
+    icon: 'gitpod',
+  },
+  {
+    id: 'vue-playground',
+    name: 'Vue Playground',
+    domains: ['play.vuejs.org', 'sfc.vuejs.org'],
+    icon: 'vue',
+  },
+  {
+    id: 'nuxt-new',
+    name: 'Nuxt Starter',
+    domains: ['nuxt.new'],
+    icon: 'nuxt',
+  },
+  {
+    id: 'vite-new',
+    name: 'Vite Starter',
+    domains: ['vite.new'],
+    icon: 'vite',
+  },
+]
+
+/**
+ * Check if a URL is a playground link and return provider info
+ */
+function matchPlaygroundProvider(url: string): PlaygroundProvider | null {
+  try {
+    const parsed = new URL(url)
+    const hostname = parsed.hostname.toLowerCase()
+
+    for (const provider of PLAYGROUND_PROVIDERS) {
+      for (const domain of provider.domains) {
+        if (hostname === domain || hostname.endsWith(`.${domain}`)) {
+          return provider
+        }
+      }
+    }
+  } catch {
+    // Invalid URL
+  }
+  return null
+}
 
 export interface RepositoryInfo {
   /** GitHub raw base URL (e.g., https://raw.githubusercontent.com/owner/repo/HEAD) */
@@ -166,12 +258,16 @@ export async function renderReadmeHtml(
   content: string,
   packageName: string,
   repoInfo?: RepositoryInfo,
-): Promise<string> {
-  if (!content) return ''
+): Promise<ReadmeResponse> {
+  if (!content) return { html: '', playgroundLinks: [] }
 
   const shiki = await getShikiHighlighter()
   const renderer = new marked.Renderer()
 
+  // Collect playground links during parsing
+  const collectedLinks: PlaygroundLink[] = []
+  const seenUrls = new Set<string>()
+
   // Shift heading levels down by 2 for semantic correctness
   // Page h1 = package name, h2 = "Readme" section heading
   // So README h1 → h3, h2 → h4, etc. (capped at h6)
@@ -212,7 +308,7 @@ export async function renderReadmeHtml(
     return `<img src="${resolvedHref}"${altAttr}${titleAttr}>`
   }
 
-  // Resolve link URLs and add security attributes
+  // Resolve link URLs, add security attributes, and collect playground links
   renderer.link = function ({ href, title, tokens }: Tokens.Link) {
     const resolvedHref = resolveUrl(href, packageName, repoInfo)
     const text = this.parser.parseInline(tokens)
@@ -222,6 +318,22 @@ export async function renderReadmeHtml(
     const relAttr = isExternal ? ' rel="nofollow noreferrer noopener"' : ''
     const targetAttr = isExternal ? ' target="_blank"' : ''
 
+    // Check if this is a playground link
+    const provider = matchPlaygroundProvider(resolvedHref)
+    if (provider && !seenUrls.has(resolvedHref)) {
+      seenUrls.add(resolvedHref)
+
+      // Extract label from link text (strip HTML tags for plain text)
+      const plainText = text.replace(/<[^>]*>/g, '').trim()
+
+      collectedLinks.push({
+        url: resolvedHref,
+        provider: provider.id,
+        providerName: provider.name,
+        label: plainText || title || provider.name,
+      })
+    }
+
     return `<a href="${resolvedHref}"${titleAttr}${relAttr}${targetAttr}>${text}</a>`
   }
 
@@ -267,5 +379,8 @@ export async function renderReadmeHtml(
     },
   })
 
-  return sanitized
+  return {
+    html: sanitized,
+    playgroundLinks: collectedLinks,
+  }
 }
diff --git a/shared/types/index.ts b/shared/types/index.ts
index cf3289e003..2414a4f37f 100644
--- a/shared/types/index.ts
+++ b/shared/types/index.ts
@@ -1,3 +1,4 @@
 export * from './npm-registry'
 export * from './jsr'
 export * from './osv'
+export * from './readme'
diff --git a/shared/types/readme.ts b/shared/types/readme.ts
new file mode 100644
index 0000000000..58246fd2a9
--- /dev/null
+++ b/shared/types/readme.ts
@@ -0,0 +1,23 @@
+/**
+ * Playground/demo link extracted from README
+ */
+export interface PlaygroundLink {
+  /** The full URL */
+  url: string
+  /** Provider identifier (e.g., 'stackblitz', 'codesandbox') */
+  provider: string
+  /** Human-readable provider name (e.g., 'StackBlitz', 'CodeSandbox') */
+  providerName: string
+  /** Link text from README (e.g., 'Demo', 'Try it online') */
+  label: string
+}
+
+/**
+ * Response from README API endpoint
+ */
+export interface ReadmeResponse {
+  /** Rendered HTML content */
+  html: string
+  /** Extracted playground/demo links */
+  playgroundLinks: PlaygroundLink[]
+}
diff --git a/test/unit/playground-links.spec.ts b/test/unit/playground-links.spec.ts
new file mode 100644
index 0000000000..0c31d86b6c
--- /dev/null
+++ b/test/unit/playground-links.spec.ts
@@ -0,0 +1,133 @@
+import { describe, expect, it, vi, beforeAll } from 'vitest'
+
+// Mock the global Nuxt auto-import before importing the module
+beforeAll(() => {
+  vi.stubGlobal(
+    'getShikiHighlighter',
+    vi.fn().mockResolvedValue({
+      getLoadedLanguages: () => [],
+      codeToHtml: (code: string) => `<pre><code>${code}</code></pre>`,
+    }),
+  )
+})
+
+// Import after mock is set up
+const { renderReadmeHtml } = await import('../../server/utils/readme')
+
+describe('Playground Link Extraction', () => {
+  describe('StackBlitz', () => {
+    it('extracts stackblitz.com links', async () => {
+      const markdown = `Check out [Demo on StackBlitz](https://stackblitz.com/github/user/repo)`
+      const result = await renderReadmeHtml(markdown, 'test-pkg')
+
+      expect(result.playgroundLinks).toHaveLength(1)
+      expect(result.playgroundLinks[0]).toMatchObject({
+        provider: 'stackblitz',
+        providerName: 'StackBlitz',
+        label: 'Demo on StackBlitz',
+        url: 'https://stackblitz.com/github/user/repo',
+      })
+    })
+  })
+
+  describe('CodeSandbox', () => {
+    it('extracts codesandbox.io links', async () => {
+      const markdown = `[Try it](https://codesandbox.io/s/example-abc123)`
+      const result = await renderReadmeHtml(markdown, 'test-pkg')
+
+      expect(result.playgroundLinks).toHaveLength(1)
+      expect(result.playgroundLinks[0]).toMatchObject({
+        provider: 'codesandbox',
+        providerName: 'CodeSandbox',
+      })
+    })
+
+    it('extracts githubbox.com links as CodeSandbox', async () => {
+      const markdown = `[Demo](https://githubbox.com/user/repo/tree/main/examples)`
+      const result = await renderReadmeHtml(markdown, 'test-pkg')
+
+      expect(result.playgroundLinks).toHaveLength(1)
+      expect(result.playgroundLinks[0].provider).toBe('codesandbox')
+    })
+  })
+
+  describe('Other Providers', () => {
+    it('extracts CodePen links', async () => {
+      const markdown = `[Pen](https://codepen.io/user/pen/abc123)`
+      const result = await renderReadmeHtml(markdown, 'test-pkg')
+
+      expect(result.playgroundLinks[0].provider).toBe('codepen')
+    })
+
+    it('extracts Replit links', async () => {
+      const markdown = `[Repl](https://replit.com/@user/project)`
+      const result = await renderReadmeHtml(markdown, 'test-pkg')
+
+      expect(result.playgroundLinks[0].provider).toBe('replit')
+    })
+
+    it('extracts Gitpod links', async () => {
+      const markdown = `[Open in Gitpod](https://gitpod.io/#https://github.com/user/repo)`
+      const result = await renderReadmeHtml(markdown, 'test-pkg')
+
+      expect(result.playgroundLinks[0].provider).toBe('gitpod')
+    })
+  })
+
+  describe('Multiple Links', () => {
+    it('extracts multiple playground links', async () => {
+      const markdown = `
+- [StackBlitz](https://stackblitz.com/example1)
+- [CodeSandbox](https://codesandbox.io/s/example2)
+`
+      const result = await renderReadmeHtml(markdown, 'test-pkg')
+
+      expect(result.playgroundLinks).toHaveLength(2)
+      expect(result.playgroundLinks[0].provider).toBe('stackblitz')
+      expect(result.playgroundLinks[1].provider).toBe('codesandbox')
+    })
+
+    it('deduplicates same URL', async () => {
+      const markdown = `
+[Demo 1](https://stackblitz.com/example)
+[Demo 2](https://stackblitz.com/example)
+`
+      const result = await renderReadmeHtml(markdown, 'test-pkg')
+
+      expect(result.playgroundLinks).toHaveLength(1)
+    })
+  })
+
+  describe('Non-Playground Links', () => {
+    it('ignores regular GitHub links', async () => {
+      const markdown = `[Repo](https://github.com/user/repo)`
+      const result = await renderReadmeHtml(markdown, 'test-pkg')
+
+      expect(result.playgroundLinks).toHaveLength(0)
+    })
+
+    it('ignores npm links', async () => {
+      const markdown = `[Package](https://npmjs.com/package/test)`
+      const result = await renderReadmeHtml(markdown, 'test-pkg')
+
+      expect(result.playgroundLinks).toHaveLength(0)
+    })
+  })
+
+  describe('Edge Cases', () => {
+    it('returns empty array for empty content', async () => {
+      const result = await renderReadmeHtml('', 'test-pkg')
+
+      expect(result.playgroundLinks).toEqual([])
+      expect(result.html).toBe('')
+    })
+
+    it('handles badge images wrapped in links', async () => {
+      const markdown = `[![Open in StackBlitz](https://img.shields.io/badge/Open-StackBlitz-blue)](https://stackblitz.com/example)`
+      const result = await renderReadmeHtml(markdown, 'test-pkg')
+
+      expect(result.playgroundLinks).toHaveLength(1)
+      expect(result.playgroundLinks[0].provider).toBe('stackblitz')
+    })
+  })
+})
diff --git a/uno.config.ts b/uno.config.ts
index 1cc521b9b7..5a56bbfbc7 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -49,6 +49,18 @@ export default defineConfig({
         kw: '#f97583', // keyword - red/pink
         comment: '#6a737d', // comment - gray
       },
+      // Playground provider brand colors
+      provider: {
+        stackblitz: '#1389FD',
+        codesandbox: '#FFCC00',
+        codepen: '#47CF73',
+        replit: '#F26207',
+        gitpod: '#FFAE33',
+        vue: '#4FC08D',
+        nuxt: '#00DC82',
+        vite: '#646CFF',
+        jsfiddle: '#0084FF',
+      },
     },
     animation: {
       keyframes: {