diff --git a/src/components/CopyPageDropdown.tsx b/src/components/CopyPageDropdown.tsx
index 6a4da6fd..db8bd936 100644
--- a/src/components/CopyPageDropdown.tsx
+++ b/src/components/CopyPageDropdown.tsx
@@ -10,6 +10,10 @@ import {
   DropdownContent,
   DropdownItem,
 } from './Dropdown'
+import {
+  getPackageManager,
+  PACKAGE_MANAGERS,
+} from '~/utils/markdown/installCommand'
 
 // Markdown icon component matching the screenshot
 function MarkdownIcon({ className }: { className?: string }) {
@@ -92,23 +96,40 @@ type CopyPageDropdownProps = {
   branch?: string
   /** File path in the repo (e.g., 'src/blog/my-post.md'). Required if repo is provided. */
   filePath?: string
+  /** Current framework for filtering markdown content (appended as ?framework= query param) */
+  currentFramework?: string
 }
 
 export function CopyPageDropdown({
   repo,
   branch,
   filePath,
+  currentFramework,
 }: CopyPageDropdownProps = {}) {
   const [open, setOpen] = React.useState(false)
   const [copied, setCopied] = React.useState(false)
   const { notify } = useToast()
 
   // Determine if we should fetch from GitHub or use the page URL
-  const useGitHub = repo && branch && filePath
+  const useGitHub = repo === 'tanstack/tanstack.com'
   const gitHubUrl = useGitHub
     ? `https://raw.githubusercontent.com/${repo}/${branch}/${filePath}`
     : null
-  const pageMarkdownUrl = `${typeof window !== 'undefined' ? window.location.origin : ''}${typeof window !== 'undefined' ? window.location.pathname.replace(/\/$/, '') : ''}.md`
+  const pageMarkdownUrl = (() => {
+    const base = `${typeof window !== 'undefined' ? window.location.origin : ''}${typeof window !== 'undefined' ? window.location.pathname.replace(/\/$/, '') : ''}.md`
+    const params = new URLSearchParams()
+    if (currentFramework) {
+      params.set('framework', currentFramework)
+    }
+    // Read package manager from localStorage (same key as PackageManagerTabs)
+    if (typeof localStorage !== 'undefined') {
+      const pm = localStorage.getItem('packageManager')
+      const validPm = getPackageManager(pm)
+      params.set('pm', validPm)
+    }
+    const queryString = params.toString()
+    return queryString ? `${base}?${queryString}` : base
+  })()
 
   const handleCopyPage = async () => {
     const urlToFetch = gitHubUrl || pageMarkdownUrl
diff --git a/src/components/Doc.tsx b/src/components/Doc.tsx
index c32e00b7..d267ceb9 100644
--- a/src/components/Doc.tsx
+++ b/src/components/Doc.tsx
@@ -164,6 +164,7 @@ export function Doc({
             libraryId={libraryId}
             libraryVersion={libraryVersion}
             pagePath={pagePath}
+            currentFramework={currentFramework}
             titleBarActions={
               setIsFullWidth ? (
                 <button
diff --git a/src/components/markdown/MarkdownContent.tsx b/src/components/markdown/MarkdownContent.tsx
index 86553d4a..187b84d7 100644
--- a/src/components/markdown/MarkdownContent.tsx
+++ b/src/components/markdown/MarkdownContent.tsx
@@ -26,6 +26,8 @@ type MarkdownContentProps = {
   libraryId?: string
   libraryVersion?: string
   pagePath?: string
+  /** Current framework for filtering markdown content */
+  currentFramework?: string
 }
 
 export function MarkdownContent({
@@ -41,6 +43,7 @@ export function MarkdownContent({
   libraryId,
   libraryVersion,
   pagePath,
+  currentFramework,
 }: MarkdownContentProps) {
   const renderMarkdownContent = () => {
     const markdownElement = htmlMarkup ? (
@@ -70,7 +73,12 @@ export function MarkdownContent({
         <div className="flex flex-wrap items-center justify-between gap-2">
           <DocTitle>{title}</DocTitle>
           <div className="flex items-center gap-2 shrink-0">
-            <CopyPageDropdown repo={repo} branch={branch} filePath={filePath} />
+            <CopyPageDropdown
+              repo={repo}
+              branch={branch}
+              filePath={filePath}
+              currentFramework={currentFramework}
+            />
             {titleBarActions}
           </div>
         </div>
diff --git a/src/components/markdown/PackageManagerTabs.tsx b/src/components/markdown/PackageManagerTabs.tsx
index 31bade62..90fc6914 100644
--- a/src/components/markdown/PackageManagerTabs.tsx
+++ b/src/components/markdown/PackageManagerTabs.tsx
@@ -5,14 +5,12 @@ import { create } from 'zustand'
 import { Tabs, type TabDefinition } from './Tabs'
 import { CodeBlock } from './CodeBlock'
 import type { Framework } from '~/libraries/types'
-
-type PackageManager = 'bun' | 'npm' | 'pnpm' | 'yarn'
-type InstallMode =
-  | 'install'
-  | 'dev-install'
-  | 'local-install'
-  | 'create'
-  | 'custom'
+import {
+  getInstallCommand,
+  PACKAGE_MANAGERS,
+  type PackageManager,
+  type InstallMode,
+} from '~/utils/markdown/installCommand'
 
 // Use zustand for cross-component synchronization
 // This ensures all PackageManagerTabs instances on the page stay in sync
@@ -36,119 +34,6 @@ type PackageManagerTabsProps = {
   frameworks: Framework[]
 }
 
-const PACKAGE_MANAGERS: PackageManager[] = ['npm', 'pnpm', 'yarn', 'bun']
-
-function getInstallCommand(
-  packageManager: PackageManager,
-  packageGroups: string[][],
-  mode: InstallMode,
-): string[] {
-  const commands: string[] = []
-
-  if (mode === 'custom') {
-    for (const packages of packageGroups) {
-      const pkgStr = packages.join(' ')
-      switch (packageManager) {
-        case 'npm':
-          commands.push(`npm ${pkgStr}`)
-          break
-        case 'pnpm':
-          commands.push(`pnpm ${pkgStr}`)
-          break
-        case 'yarn':
-          commands.push(`yarn ${pkgStr}`)
-          break
-        case 'bun':
-          commands.push(`bun ${pkgStr}`)
-          break
-      }
-    }
-  }
-
-  if (mode === 'create') {
-    for (const packages of packageGroups) {
-      const pkgStr = packages.join(' ')
-      switch (packageManager) {
-        case 'npm':
-          commands.push(`npm create ${pkgStr}`)
-          break
-        case 'pnpm':
-          commands.push(`pnpm create ${pkgStr}`)
-          break
-        case 'yarn':
-          commands.push(`yarn create ${pkgStr}`)
-          break
-        case 'bun':
-          commands.push(`bun create ${pkgStr}`)
-          break
-      }
-    }
-  }
-
-  if (mode === 'local-install') {
-    // Each group becomes one command line
-    for (const packages of packageGroups) {
-      const pkgStr = packages.join(' ')
-      switch (packageManager) {
-        case 'npm':
-          commands.push(`npx ${pkgStr}`)
-          break
-        case 'pnpm':
-          commands.push(`pnpx ${pkgStr}`)
-          break
-        case 'yarn':
-          commands.push(`yarn dlx ${pkgStr}`)
-          break
-        case 'bun':
-          commands.push(`bunx ${pkgStr}`)
-          break
-      }
-    }
-    return commands
-  }
-
-  if (mode === 'dev-install') {
-    for (const packages of packageGroups) {
-      const pkgStr = packages.join(' ')
-      switch (packageManager) {
-        case 'npm':
-          commands.push(`npm i -D ${pkgStr}`)
-          break
-        case 'pnpm':
-          commands.push(`pnpm add -D ${pkgStr}`)
-          break
-        case 'yarn':
-          commands.push(`yarn add -D ${pkgStr}`)
-          break
-        case 'bun':
-          commands.push(`bun add -d ${pkgStr}`)
-          break
-      }
-    }
-    return commands
-  }
-
-  // install mode
-  for (const packages of packageGroups) {
-    const pkgStr = packages.join(' ')
-    switch (packageManager) {
-      case 'npm':
-        commands.push(`npm i ${pkgStr}`)
-        break
-      case 'pnpm':
-        commands.push(`pnpm add ${pkgStr}`)
-        break
-      case 'yarn':
-        commands.push(`yarn add ${pkgStr}`)
-        break
-      case 'bun':
-        commands.push(`bun add ${pkgStr}`)
-        break
-    }
-  }
-  return commands
-}
-
 export function PackageManagerTabs({
   packagesByFramework,
   mode,
diff --git a/src/routes/$libraryId/$version.docs.framework.$framework.{$}[.]md.tsx b/src/routes/$libraryId/$version.docs.framework.$framework.{$}[.]md.tsx
index 6ace81ea..8a3a13f6 100644
--- a/src/routes/$libraryId/$version.docs.framework.$framework.{$}[.]md.tsx
+++ b/src/routes/$libraryId/$version.docs.framework.$framework.{$}[.]md.tsx
@@ -1,6 +1,8 @@
 import { findLibrary, getBranch } from '~/libraries'
 import { loadDocs } from '~/utils/docs'
 import { notFound, createFileRoute } from '@tanstack/react-router'
+import { filterFrameworkContent } from '~/utils/markdown/filterFrameworkContent'
+import { getPackageManager } from '~/utils/markdown/installCommand'
 
 export const Route = createFileRoute(
   '/$libraryId/$version/docs/framework/$framework/{$}.md',
@@ -19,7 +21,9 @@ export const Route = createFileRoute(
           _splat: string
         }
       }) => {
-        const _url = new URL(request.url)
+        const url = new URL(request.url)
+        const pm = getPackageManager(url.searchParams.get('pm'))
+        const keepMarkers = url.searchParams.get('keep_markers') === 'true'
 
         const { libraryId, version, framework, _splat: docsPath } = params
         const library = findLibrary(libraryId)
@@ -36,7 +40,14 @@ export const Route = createFileRoute(
           docsPath: `${root}/framework/${framework}/${docsPath}`,
         })
 
-        const markdownContent = `# ${doc.title}\n${doc.content}`
+        // Filter framework-specific content using framework from URL path
+        const filteredContent = filterFrameworkContent(doc.content, {
+          framework,
+          packageManager: pm,
+          keepMarkers,
+        })
+
+        const markdownContent = `# ${doc.title}\n${filteredContent}`
         const filename = (docsPath || 'file').split('/').join('-')
 
         return new Response(markdownContent, {
diff --git a/src/routes/$libraryId/$version.docs.{$}[.]md.tsx b/src/routes/$libraryId/$version.docs.{$}[.]md.tsx
index 4eac1af7..b92c8a6c 100644
--- a/src/routes/$libraryId/$version.docs.{$}[.]md.tsx
+++ b/src/routes/$libraryId/$version.docs.{$}[.]md.tsx
@@ -1,6 +1,8 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { getBranch, getLibrary, type LibraryId } from '~/libraries'
 import { loadDocs } from '~/utils/docs'
+import { filterFrameworkContent } from '~/utils/markdown/filterFrameworkContent'
+import { getPackageManager } from '~/utils/markdown/installCommand'
 
 export const Route = createFileRoute('/$libraryId/$version/docs/{$}.md')({
   server: {
@@ -12,7 +14,10 @@ export const Route = createFileRoute('/$libraryId/$version/docs/{$}.md')({
         request: Request
         params: { libraryId: string; version: string; _splat: string }
       }) => {
-        const _url = new URL(request.url)
+        const url = new URL(request.url)
+        const framework = url.searchParams.get('framework')
+        const pm = getPackageManager(url.searchParams.get('pm'))
+        const keepMarkers = url.searchParams.get('keep_markers') === 'true'
 
         const { libraryId, version, _splat: docsPath } = params
         const library = getLibrary(libraryId as LibraryId)
@@ -24,7 +29,16 @@ export const Route = createFileRoute('/$libraryId/$version/docs/{$}.md')({
           docsPath: `${root}/${docsPath}`,
         })
 
-        const markdownContent = `# ${doc.title}\n${doc.content}`
+        // Filter framework-specific content only if framework is explicitly specified
+        const filteredContent = framework
+          ? filterFrameworkContent(doc.content, {
+              framework,
+              packageManager: pm,
+              keepMarkers,
+            })
+          : doc.content
+
+        const markdownContent = `# ${doc.title}\n${filteredContent}`
         const filename = (docsPath || 'file').split('/').join('-')
 
         return new Response(markdownContent, {
diff --git a/src/utils/markdown/filterFrameworkContent.ts b/src/utils/markdown/filterFrameworkContent.ts
new file mode 100644
index 00000000..66fa8d72
--- /dev/null
+++ b/src/utils/markdown/filterFrameworkContent.ts
@@ -0,0 +1,233 @@
+/**
+ * Filters framework-specific content blocks from raw markdown.
+ *
+ * Handles two types of blocks:
+ *
+ * 1. Framework blocks:
+ *   <!-- ::start:framework -->
+ *   # React
+ *   React-specific content...
+ *   # Vue
+ *   Vue-specific content...
+ *   <!-- ::end:framework -->
+ *
+ * 2. Package manager tabs (variant="package-manager"):
+ *   <!-- ::start:tabs variant="package-manager" mode="local-install" -->
+ *   react: create-tsrouter-app@latest my-app
+ *   solid: create-tsrouter-app@latest my-app --framework solid
+ *   <!-- ::end:tabs -->
+ */
+
+import {
+  getInstallCommand,
+  type PackageManager,
+  type InstallMode,
+} from './installCommand'
+
+type FilterOptions = {
+  framework?: string
+  packageManager?: PackageManager
+  /** Whether to keep the surrounding comment markers when filtering. Defaults to false. */
+  keepMarkers?: boolean
+}
+
+/**
+ * Filters framework-specific content and package-manager tabs from raw markdown.
+ * If no framework is specified, returns markdown unchanged.
+ */
+export function filterFrameworkContent(
+  markdown: string,
+  options: FilterOptions,
+): string {
+  const { framework, packageManager, keepMarkers = false } = options
+
+  if (!framework) {
+    return markdown
+  }
+
+  const normalizedFramework = framework.toLowerCase()
+
+  // First pass: filter framework blocks
+  let result = filterFrameworkBlocks(markdown, normalizedFramework, keepMarkers)
+
+  // Second pass: filter package-manager tabs
+  result = filterPackageManagerTabs(
+    result,
+    normalizedFramework,
+    packageManager,
+    keepMarkers,
+  )
+
+  return result
+}
+
+/**
+ * Filters <!-- ::start:framework --> blocks.
+ */
+function filterFrameworkBlocks(
+  markdown: string,
+  framework: string,
+  keepMarkers: boolean,
+): string {
+  const blockRegex =
+    /(<!--\s*::start:framework\s*-->)([\s\S]*?)(<!--\s*::end:framework\s*-->)/gi
+
+  return markdown.replace(
+    blockRegex,
+    (
+      _match,
+      startComment: string,
+      blockContent: string,
+      endComment: string,
+    ) => {
+      const sections = splitByFrameworkHeadings(blockContent)
+      const frameworkSection = sections.find((s) => s.framework === framework)
+
+      if (!frameworkSection) {
+        return ''
+      }
+
+      const content = frameworkSection.content.trim()
+      if (keepMarkers) {
+        return `${startComment}\n${content}\n${endComment}`
+      }
+      return content
+    },
+  )
+}
+
+/**
+ * Filters <!-- ::start:tabs variant="package-manager" --> blocks.
+ * If framework matches and packageManager is provided, outputs the command.
+ * Otherwise returns block as-is.
+ */
+function filterPackageManagerTabs(
+  markdown: string,
+  framework: string,
+  packageManager: PackageManager | undefined,
+  keepMarkers: boolean,
+): string {
+  // Match tabs blocks with attributes
+  const blockRegex =
+    /(<!--\s*::start:tabs\s+([^>]*?)-->)([\s\S]*?)(<!--\s*::end:tabs\s*-->)/gi
+
+  return markdown.replace(
+    blockRegex,
+    (
+      fullMatch,
+      startComment: string,
+      attrs: string,
+      blockContent: string,
+      endComment: string,
+    ) => {
+      // Parse attributes to check variant
+      const variant = parseAttribute(attrs, 'variant')
+      if (variant !== 'package-manager' && variant !== 'package-managers') {
+        return fullMatch
+      }
+
+      // Parse framework lines
+      const frameworkPackages = parseFrameworkLines(blockContent)
+      const packages = frameworkPackages[framework]
+
+      // If no match for framework, return as-is
+      if (!packages || packages.length === 0) {
+        return fullMatch
+      }
+
+      // If no package manager specified, return as-is
+      if (!packageManager) {
+        return fullMatch
+      }
+
+      // Generate command based on mode
+      const mode = (parseAttribute(attrs, 'mode') as InstallMode) || 'install'
+      const commands = getInstallCommand(packageManager, packages, mode)
+      const commandText = `\`\`\`sh\n${commands.join('\n')}\n\`\`\``
+
+      // Return with or without comment markers based on keepMarkers option
+      if (keepMarkers) {
+        return `${startComment}\n${commandText}\n${endComment}`
+      }
+      return commandText
+    },
+  )
+}
+
+/**
+ * Parse a single attribute from an attribute string.
+ * e.g., parseAttribute('variant="package-manager" mode="install"', 'variant') => 'package-manager'
+ */
+function parseAttribute(attrs: string, name: string): string | undefined {
+  const regex = new RegExp(`${name}=["']([^"']+)["']`, 'i')
+  const match = attrs.match(regex)
+  return match?.[1]
+}
+
+/**
+ * Parse framework lines like "react: @tanstack/react-query" from block content.
+ * Returns { framework: [[packages]] } structure.
+ */
+function parseFrameworkLines(content: string): Record<string, string[][]> {
+  const result: Record<string, string[][]> = {}
+  const lines = content.split('\n')
+
+  for (const line of lines) {
+    const trimmed = line.trim()
+    if (!trimmed) continue
+
+    const colonIndex = trimmed.indexOf(':')
+    if (colonIndex === -1) continue
+
+    const framework = trimmed.slice(0, colonIndex).trim().toLowerCase()
+    const packagesStr = trimmed.slice(colonIndex + 1).trim()
+    const packages = packagesStr.split(/\s+/).filter(Boolean)
+
+    if (!framework || packages.length === 0) continue
+
+    if (result[framework]) {
+      result[framework].push(packages)
+    } else {
+      result[framework] = [packages]
+    }
+  }
+
+  return result
+}
+
+type FrameworkSection = {
+  framework: string
+  content: string
+}
+
+/**
+ * Splits block content by H1 framework headers.
+ */
+function splitByFrameworkHeadings(blockContent: string): FrameworkSection[] {
+  const sections: FrameworkSection[] = []
+  const headerRegex = /^#\s+(\w+)\s*$/gm
+  let lastIndex = 0
+  let lastFramework: string | null = null
+  let match: RegExpExecArray | null
+
+  while ((match = headerRegex.exec(blockContent)) !== null) {
+    if (lastFramework !== null) {
+      sections.push({
+        framework: lastFramework,
+        content: blockContent.slice(lastIndex, match.index),
+      })
+    }
+
+    lastFramework = match[1].toLowerCase()
+    lastIndex = match.index + match[0].length
+  }
+
+  if (lastFramework !== null) {
+    sections.push({
+      framework: lastFramework,
+      content: blockContent.slice(lastIndex),
+    })
+  }
+
+  return sections
+}
diff --git a/src/utils/markdown/installCommand.ts b/src/utils/markdown/installCommand.ts
new file mode 100644
index 00000000..9d74ca51
--- /dev/null
+++ b/src/utils/markdown/installCommand.ts
@@ -0,0 +1,143 @@
+/**
+ * Shared types and utility for generating package manager install commands.
+ * Used by both server-side markdown filtering and client-side PackageManagerTabs.
+ */
+
+export type PackageManager = 'npm' | 'pnpm' | 'yarn' | 'bun'
+
+export const PACKAGE_MANAGERS: PackageManager[] = ['npm', 'pnpm', 'yarn', 'bun']
+
+export type InstallMode =
+  | 'install'
+  | 'dev-install'
+  | 'local-install'
+  | 'create'
+  | 'custom'
+
+/**
+ * Get package manager from query parameter, defaulting to 'npm' if not specified or invalid.
+ */
+export function getPackageManager(
+  pm: string | null | undefined,
+): PackageManager {
+  if (pm && PACKAGE_MANAGERS.includes(pm as PackageManager)) {
+    return pm as PackageManager
+  }
+  return 'npm' // default
+}
+
+/**
+ * Generate install command(s) for a package manager.
+ * Each group of packages becomes one command line.
+ */
+export function getInstallCommand(
+  packageManager: PackageManager,
+  packageGroups: string[][],
+  mode: InstallMode,
+): string[] {
+  const commands: string[] = []
+
+  if (mode === 'custom') {
+    for (const packages of packageGroups) {
+      const pkgStr = packages.join(' ')
+      switch (packageManager) {
+        case 'npm':
+          commands.push(`npm ${pkgStr}`)
+          break
+        case 'pnpm':
+          commands.push(`pnpm ${pkgStr}`)
+          break
+        case 'yarn':
+          commands.push(`yarn ${pkgStr}`)
+          break
+        case 'bun':
+          commands.push(`bun ${pkgStr}`)
+          break
+      }
+    }
+    return commands
+  }
+
+  if (mode === 'create') {
+    for (const packages of packageGroups) {
+      const pkgStr = packages.join(' ')
+      switch (packageManager) {
+        case 'npm':
+          commands.push(`npm create ${pkgStr}`)
+          break
+        case 'pnpm':
+          commands.push(`pnpm create ${pkgStr}`)
+          break
+        case 'yarn':
+          commands.push(`yarn create ${pkgStr}`)
+          break
+        case 'bun':
+          commands.push(`bun create ${pkgStr}`)
+          break
+      }
+    }
+    return commands
+  }
+
+  if (mode === 'local-install') {
+    for (const packages of packageGroups) {
+      const pkgStr = packages.join(' ')
+      switch (packageManager) {
+        case 'npm':
+          commands.push(`npx ${pkgStr}`)
+          break
+        case 'pnpm':
+          commands.push(`pnpx ${pkgStr}`)
+          break
+        case 'yarn':
+          commands.push(`yarn dlx ${pkgStr}`)
+          break
+        case 'bun':
+          commands.push(`bunx ${pkgStr}`)
+          break
+      }
+    }
+    return commands
+  }
+
+  if (mode === 'dev-install') {
+    for (const packages of packageGroups) {
+      const pkgStr = packages.join(' ')
+      switch (packageManager) {
+        case 'npm':
+          commands.push(`npm i -D ${pkgStr}`)
+          break
+        case 'pnpm':
+          commands.push(`pnpm add -D ${pkgStr}`)
+          break
+        case 'yarn':
+          commands.push(`yarn add -D ${pkgStr}`)
+          break
+        case 'bun':
+          commands.push(`bun add -d ${pkgStr}`)
+          break
+      }
+    }
+    return commands
+  }
+
+  // install mode (default)
+  for (const packages of packageGroups) {
+    const pkgStr = packages.join(' ')
+    switch (packageManager) {
+      case 'npm':
+        commands.push(`npm i ${pkgStr}`)
+        break
+      case 'pnpm':
+        commands.push(`pnpm add ${pkgStr}`)
+        break
+      case 'yarn':
+        commands.push(`yarn add ${pkgStr}`)
+        break
+      case 'bun':
+        commands.push(`bun add ${pkgStr}`)
+        break
+    }
+  }
+  return commands
+}