diff --git a/src/components/CodeExplorer.tsx b/src/components/CodeExplorer.tsx
index bf6373be6..0ae42bc38 100644
--- a/src/components/CodeExplorer.tsx
+++ b/src/components/CodeExplorer.tsx
@@ -1,23 +1,24 @@
 import React from 'react'
-import { FileExplorer } from './FileExplorer'
+import { FileExplorer, type FileExplorerNode } from './FileExplorer'
 import { InteractiveSandbox } from './InteractiveSandbox'
 import { CodeExplorerTopBar } from './CodeExplorerTopBar'
-import type { GitHubFileNode } from '~/utils/documents.server'
+import { getExamplePanels, type ExamplePanel } from '~/utils/example-panel'
 import type { Library } from '~/libraries'
 import { twMerge } from 'tailwind-merge'
 import { CodeBlock } from '~/components/markdown'
 import { getCodeBlockLanguageFromFilePath } from '~/components/markdown/codeBlock.shared'
 
 interface CodeExplorerProps {
-  activeTab: 'code' | 'sandbox'
+  activeTab: ExamplePanel
   codeSandboxUrl: string
   currentCode: string
   currentPath: string
   examplePath: string
-  githubContents: GitHubFileNode[] | undefined
+  githubContents: FileExplorerNode[] | undefined
   library: Library
   prefetchFileContent: (path: string) => void
-  setActiveTab: (tab: 'code' | 'sandbox') => void
+  playground?: React.ReactNode
+  setActiveTab: (tab: ExamplePanel) => void
   setCurrentPath: (path: string) => void
   stackBlitzUrl: string
 }
@@ -31,12 +32,23 @@ export function CodeExplorer({
   githubContents,
   library,
   prefetchFileContent,
+  playground,
   setActiveTab,
   setCurrentPath,
   stackBlitzUrl,
 }: CodeExplorerProps) {
   const [isFullScreen, setIsFullScreen] = React.useState(false)
   const [isSidebarOpen, setIsSidebarOpen] = React.useState(true)
+  const [hasOpenedPlayground, setHasOpenedPlayground] = React.useState(
+    activeTab === 'playground',
+  )
+  React.useEffect(() => {
+    if (activeTab === 'playground') setHasOpenedPlayground(true)
+  }, [activeTab])
+  const panels = getExamplePanels({
+    ...library,
+    hasPlayground: Boolean(playground),
+  })
   const currentCodeLanguage = getCodeBlockLanguageFromFilePath(currentPath)
 
   // Add escape key handler
@@ -60,6 +72,7 @@ export function CodeExplorer({
     >
       <CodeExplorerTopBar
         activeTab={activeTab}
+        panels={panels}
         setActiveTab={setActiveTab}
         isFullScreen={isFullScreen}
         setIsFullScreen={setIsFullScreen}
@@ -68,45 +81,66 @@ export function CodeExplorer({
       />
 
       <div className="relative flex-1">
-        <div
-          className={`absolute inset-0 flex ${
-            activeTab === 'code' ? '' : 'hidden'
-          }`}
-        >
-          <FileExplorer
-            currentPath={currentPath}
-            files={githubContents}
-            isSidebarOpen={isSidebarOpen}
-            libraryColor={library.bgStyle}
-            onSidebarClose={() => setIsSidebarOpen(false)}
-            prefetchFileContent={prefetchFileContent}
-            setCurrentPath={setCurrentPath}
-          />
+        {playground && (hasOpenedPlayground || activeTab === 'playground') ? (
+          <div
+            className={`absolute inset-0 min-h-0 flex-col ${activeTab === 'playground' ? 'flex' : 'hidden'}`}
+          >
+            {playground}
+          </div>
+        ) : null}
+        {!playground ? (
           <div
-            className={twMerge(
-              'flex-1 overflow-auto relative',
-              isFullScreen ? 'max-h-[90dvh]' : 'max-h-[80dvh]',
-            )}
+            className={`absolute inset-0 flex ${
+              activeTab === 'code' ? '' : 'hidden'
+            }`}
           >
-            <CodeBlock
-              className="h-full border-0"
-              isEmbedded
-              showTypeCopyButton={false}
+            <FileExplorer
+              currentPath={currentPath}
+              files={githubContents}
+              isSidebarOpen={isSidebarOpen}
+              libraryColor={library.bgStyle}
+              onSidebarClose={() => setIsSidebarOpen(false)}
+              prefetchFileContent={prefetchFileContent}
+              setCurrentPath={setCurrentPath}
+            />
+            <div
+              className={twMerge(
+                'flex-1 overflow-auto relative',
+                isFullScreen ? 'max-h-[90dvh]' : 'max-h-[80dvh]',
+              )}
             >
-              <code className={`language-${currentCodeLanguage}`}>
-                {currentCode}
-              </code>
-            </CodeBlock>
+              <CodeBlock
+                className="h-full border-0"
+                isEmbedded
+                showTypeCopyButton={false}
+              >
+                <code className={`language-${currentCodeLanguage}`}>
+                  {currentCode}
+                </code>
+              </CodeBlock>
+            </div>
           </div>
-        </div>
-        <InteractiveSandbox
-          isActive={activeTab === 'sandbox'}
-          codeSandboxUrl={codeSandboxUrl}
-          stackBlitzUrl={stackBlitzUrl}
-          examplePath={examplePath}
-          libraryName={library.name}
-          embedEditor={library.embedEditor || 'stackblitz'}
-        />
+        ) : null}
+        {!library.hideStackblitzUrl ? (
+          <InteractiveSandbox
+            isActive={activeTab === 'stackblitz'}
+            codeSandboxUrl={codeSandboxUrl}
+            stackBlitzUrl={stackBlitzUrl}
+            examplePath={examplePath}
+            libraryName={library.name}
+            embedEditor="stackblitz"
+          />
+        ) : null}
+        {!library.hideCodesandboxUrl ? (
+          <InteractiveSandbox
+            isActive={activeTab === 'codesandbox'}
+            codeSandboxUrl={codeSandboxUrl}
+            stackBlitzUrl={stackBlitzUrl}
+            examplePath={examplePath}
+            libraryName={library.name}
+            embedEditor="codesandbox"
+          />
+        ) : null}
       </div>
     </div>
   )
diff --git a/src/components/CodeExplorerTopBar.tsx b/src/components/CodeExplorerTopBar.tsx
index a902d5687..e5c841baf 100644
--- a/src/components/CodeExplorerTopBar.tsx
+++ b/src/components/CodeExplorerTopBar.tsx
@@ -7,18 +7,21 @@ import {
   TextAlignLeftIcon,
 } from '@phosphor-icons/react'
 import { Tooltip } from '~/ui'
+import type { ExamplePanel, ExamplePanelOption } from '~/utils/example-panel'
 
 interface CodeExplorerTopBarProps {
-  activeTab: 'code' | 'sandbox'
+  activeTab: ExamplePanel
+  panels: ReadonlyArray<ExamplePanelOption>
   isFullScreen: boolean
   isSidebarOpen: boolean
-  setActiveTab: (tab: 'code' | 'sandbox') => void
+  setActiveTab: (tab: ExamplePanel) => void
   setIsFullScreen: React.Dispatch<React.SetStateAction<boolean>>
   setIsSidebarOpen: (isOpen: boolean) => void
 }
 
 export function CodeExplorerTopBar({
   activeTab,
+  panels,
   isFullScreen,
   isSidebarOpen,
   setActiveTab,
@@ -27,7 +30,7 @@ export function CodeExplorerTopBar({
 }: CodeExplorerTopBarProps) {
   return (
     <div className="flex items-center justify-between gap-2 border-b border-gray-200 dark:border-gray-700">
-      <div className="flex items-center gap-2 px-1">
+      <div className="flex min-w-0 items-center gap-1 overflow-x-auto px-1">
         {activeTab === 'code' ? (
           isSidebarOpen ? (
             <Tooltip content="Hide files" side="bottom">
@@ -62,38 +65,21 @@ export function CodeExplorerTopBar({
             />
           </div>
         )}
-        <button
-          onClick={() => setActiveTab('code')}
-          className={`px-4 py-2 text-sm font-medium transition-colors relative ${
-            activeTab === 'code'
-              ? 'text-gray-900 dark:text-white'
-              : 'text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'
-          }`}
-        >
-          <span className="hidden sm:inline">Code Explorer</span>
-          <span className="sm:hidden">Code</span>
-          {activeTab === 'code' ? (
-            <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-blue-500" />
-          ) : (
-            <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-transparent" />
-          )}
-        </button>
-        <button
-          onClick={() => setActiveTab('sandbox')}
-          className={`px-4 py-2 text-sm font-medium transition-colors relative ${
-            activeTab === 'sandbox'
-              ? 'text-gray-900 dark:text-white'
-              : 'text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'
-          }`}
-        >
-          <span className="hidden sm:inline">Interactive Sandbox</span>
-          <span className="sm:hidden">Sandbox</span>
-          {activeTab === 'sandbox' ? (
-            <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-blue-500" />
-          ) : (
-            <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-transparent" />
-          )}
-        </button>
+        {panels.map((panel) => (
+          <button
+            key={panel.id}
+            type="button"
+            onClick={() => setActiveTab(panel.id)}
+            aria-pressed={activeTab === panel.id}
+            className={`shrink-0 px-3 py-2 text-sm font-medium transition-colors border-b-2 ${
+              activeTab === panel.id
+                ? 'border-blue-500 text-gray-900 dark:text-white'
+                : 'border-transparent text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'
+            }`}
+          >
+            {panel.label}
+          </button>
+        ))}
       </div>
       <div className="flex items-center gap-2">
         <button
diff --git a/src/components/InteractiveSandbox.tsx b/src/components/InteractiveSandbox.tsx
index aedc5189d..4db494aaf 100644
--- a/src/components/InteractiveSandbox.tsx
+++ b/src/components/InteractiveSandbox.tsx
@@ -1,4 +1,6 @@
 import React from 'react'
+import { ArrowSquareOutIcon } from '@phosphor-icons/react'
+import { Button } from '~/ui'
 import { stackBlitzIframeProps } from '~/utils/stackblitz-embed'
 
 interface InteractiveSandboxProps {
@@ -19,20 +21,68 @@ export function InteractiveSandbox({
   embedEditor,
 }: InteractiveSandboxProps) {
   const isStackBlitz = embedEditor === 'stackblitz'
+  const [hasOpened, setHasOpened] = React.useState(isActive)
+  React.useEffect(() => {
+    if (isActive) setHasOpened(true)
+  }, [isActive])
+  if (!isActive && !hasOpened) return null
+
+  const provider = isStackBlitz ? 'StackBlitz' : 'CodeSandbox'
+  const embedUrl = isStackBlitz ? stackBlitzUrl : codeSandboxUrl
+  const externalUrl = new URL(embedUrl)
+  externalUrl.searchParams.delete('embed')
+
+  // CodeSandbox's challenge responses forbid framing. Keep its editor usable
+  // through a top-level navigation instead of showing a blocked iframe.
+  if (!isStackBlitz) {
+    return (
+      <div
+        className={`absolute inset-0 items-center justify-center bg-background-default p-6 ${isActive ? 'flex' : 'hidden'}`}
+        aria-hidden={!isActive}
+      >
+        <div className="max-w-sm space-y-4 text-center">
+          <p className="text-sm text-text-muted">
+            Open this example in a new tab to use CodeSandbox's editor and
+            preview.
+          </p>
+          <Button
+            as="a"
+            href={externalUrl.href}
+            target="_blank"
+            rel="noreferrer"
+          >
+            Open in CodeSandbox
+            <ArrowSquareOutIcon className="size-4" aria-hidden="true" />
+          </Button>
+        </div>
+      </div>
+    )
+  }
 
   return (
     <div
-      className={`absolute inset-0 ${
-        isActive ? '' : 'pointer-events-none opacity-0'
-      }`}
+      className={`absolute inset-0 flex-col ${isActive ? 'flex' : 'hidden'}`}
       aria-hidden={!isActive}
     >
+      <div className="flex flex-wrap items-center justify-between gap-2 border-b border-border-default bg-background-default px-4 py-2 text-sm">
+        <span className="text-text-muted">
+          If the embedded editor does not load, open it in a new tab.
+        </span>
+        <a
+          href={externalUrl.href}
+          target="_blank"
+          rel="noreferrer"
+          className="text-blue-600 hover:underline dark:text-blue-400"
+        >
+          Open in {provider}
+        </a>
+      </div>
       <iframe
-        src={isStackBlitz ? stackBlitzUrl : codeSandboxUrl}
-        title={`${libraryName} | ${examplePath}`}
-        {...(isStackBlitz ? stackBlitzIframeProps : {})}
+        src={embedUrl}
+        title={`${provider} | ${libraryName} | ${examplePath}`}
+        {...stackBlitzIframeProps}
         sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-        className="w-full h-full min-h-[80dvh] overflow-hidden shadow-lg bg-white dark:bg-black"
+        className="w-full min-h-0 flex-1 overflow-hidden bg-white dark:bg-black"
       />
     </div>
   )
diff --git a/src/components/examples/ExampleWorkbench.client.tsx b/src/components/examples/ExampleWorkbench.client.tsx
index 2d0054cf5..260eb5504 100644
--- a/src/components/examples/ExampleWorkbench.client.tsx
+++ b/src/components/examples/ExampleWorkbench.client.tsx
@@ -14,7 +14,8 @@ import {
   XIcon,
 } from '@phosphor-icons/react'
 import { ButtonGroup } from '~/components/ButtonGroup'
-import { FileExplorer, type FileExplorerNode } from '~/components/FileExplorer'
+import { FileExplorer } from '~/components/FileExplorer'
+import { createExampleFileTree } from '~/utils/example-file-tree'
 import { useTheme } from '~/components/ThemeProvider'
 import {
   Button,
@@ -2783,7 +2784,10 @@ export function ExampleWorkbench({
         .sort(),
     [definition.hiddenFiles, workspace.files],
   )
-  const fileTree = React.useMemo(() => createFileTree(filePaths), [filePaths])
+  const fileTree = React.useMemo(
+    () => createExampleFileTree(filePaths),
+    [filePaths],
+  )
   const activeBuilderPane = getActiveBuilderWorkbenchPane(builderTabs)
   const activeBuilderTab = getActiveBuilderWorkbenchTab(builderTabs)
   const visibleBuilderPanes =
@@ -4611,36 +4615,6 @@ function getConsoleColor(level: ExampleConsoleLevel) {
   }
 }
 
-function createFileTree(paths: Array<string>) {
-  const root: Array<FileExplorerNode> = []
-
-  for (const path of paths) {
-    const segments = path.split('/').filter(Boolean)
-    let children = root
-
-    for (const [index, name] of segments.entries()) {
-      const nodePath = `/${segments.slice(0, index + 1).join('/')}`
-      const last = index === segments.length - 1
-      let node = children.find((candidate) => candidate.path === nodePath)
-
-      if (!node) {
-        node = {
-          children: last ? undefined : [],
-          depth: index,
-          name,
-          path: nodePath,
-          type: last ? 'file' : 'dir',
-        }
-        children.push(node)
-      }
-
-      if (node.children) children = node.children
-    }
-  }
-
-  return root
-}
-
 function clamp(value: number, min: number, max: number) {
   return Math.min(Math.max(value, min), max)
 }
diff --git a/src/routes/_library/$libraryId/$version.docs.framework.$framework.examples.$.tsx b/src/routes/_library/$libraryId/$version.docs.framework.$framework.examples.$.tsx
index 516e59fda..8839b8330 100644
--- a/src/routes/_library/$libraryId/$version.docs.framework.$framework.examples.$.tsx
+++ b/src/routes/_library/$libraryId/$version.docs.framework.$framework.examples.$.tsx
@@ -3,6 +3,7 @@ import {
   isNotFound,
   notFound,
   createFileRoute,
+  redirect,
 } from '@tanstack/react-router'
 import {
   queryOptions,
@@ -20,6 +21,7 @@ import {
 import {
   getExampleStartingFileName,
   getExampleStartingPath,
+  getExampleSandboxUrls,
 } from '~/utils/sandbox'
 import { canonicalUrl, seo } from '~/utils/seo'
 import { ogImageUrl } from '~/utils/og'
@@ -33,7 +35,10 @@ import {
   type DeployProvider,
 } from '~/components/ExampleDeployDialog'
 import { getDocsCacheHeaders } from '~/utils/docs-cache-headers'
-import { getExampleRuntimeHeaders } from '~/utils/stackblitz-embed'
+import {
+  getExampleRuntimeHeaders,
+  shouldReloadExampleDocument,
+} from '~/utils/stackblitz-embed'
 import {
   type DeploymentProviderId,
   useDeploymentProviderPlacement,
@@ -48,6 +53,13 @@ import type { ExampleDefinition } from '~/utils/example-workspace'
 import { CodeBlock } from '~/components/markdown'
 import { getCodeBlockLanguageFromFilePath } from '~/components/markdown/codeBlock.shared'
 import { getClientExampleConfig } from '~/utils/client-example-config'
+import {
+  getExamplePanel,
+  getExamplePanels,
+  type ExamplePanel,
+} from '~/utils/example-panel'
+import { createExampleFileTree } from '~/utils/example-file-tree'
+import { useIsDark } from '~/hooks/useIsDark'
 
 const LazyExampleWorkbench = React.lazy(() =>
   import('~/components/examples/ExampleWorkbench.client').then((module) => ({
@@ -55,14 +67,6 @@ const LazyExampleWorkbench = React.lazy(() =>
   })),
 )
 
-type ExamplePanel = 'code' | 'sandbox'
-
-const examplePanelValues: ReadonlyArray<ExamplePanel> = ['code', 'sandbox']
-
-function getExamplePanel(value: string | undefined) {
-  return examplePanelValues.find((candidate) => candidate === value)
-}
-
 const fileQueryOptions = (repo: string, branch: string, filePath: string) => {
   return queryOptions({
     queryKey: ['currentCode', repo, branch, filePath],
@@ -121,6 +125,14 @@ export const Route = createFileRoute(
     path: v.optional(v.string()),
     panel: v.optional(v.string()),
   }),
+  beforeLoad: ({ location, preload }) => {
+    if (preload || typeof window === 'undefined') return
+    // Client navigation cannot apply COOP/COEP response headers. Reload before
+    // mounting an editor so opening a provider later cannot discard edits.
+    if (shouldReloadExampleDocument(window, location.pathname)) {
+      throw redirect({ href: location.href, reloadDocument: true })
+    }
+  },
   loaderDeps: ({ search }) => ({ path: search.path }),
   loader: async ({ params, context: { queryClient }, deps: { path } }) => {
     const library = getLibrary(params.libraryId)
@@ -294,18 +306,10 @@ export const Route = createFileRoute(
   },
   headers: ({ params }) => {
     const { libraryId, version } = params
-    const config = getClientExampleConfig({
-      framework: params.framework,
-      libraryId,
-      slug: params._splat ?? '',
-      version,
-    })
-
     return {
       ...getDocsCacheHeaders({ libraryId, version }),
-      ...getExampleRuntimeHeaders(
-        config ? (config.runtime?.type ?? 'esbuild') : 'external',
-      ),
+      // Every example offers an external editor, including esbuild examples.
+      ...getExampleRuntimeHeaders('external'),
     }
   },
   staleTime: 1000 * 60 * 5, // 5 minutes
@@ -357,7 +361,7 @@ function ExternalExamplePage({
     repoDirApiContentsQueryOptions(library.repo, branch, repoStartingDirPath),
   )
 
-  const [isDark, setIsDark] = React.useState(true)
+  const isDark = useIsDark()
   const [deployDialogOpen, setDeployDialogOpen] = React.useState(false)
   const [deployProvider, setDeployProvider] =
     React.useState<DeployProvider | null>(null)
@@ -397,27 +401,30 @@ function ExternalExamplePage({
     surface: `example_deploy_buttons:${library.id}:${framework}`,
   })
 
+  const panels = getExamplePanels(library)
   const activeTab = Route.useSearch({
     select: (s) => {
-      const panel = getExamplePanel(s.panel)
+      const panel = getExamplePanel(s.panel, panels, library.embedEditor)
       if (typeof window === 'undefined') return panel || 'code'
       const localValue = getExamplePanel(
         getLocalStorageItem('exampleViewPreference') ?? undefined,
+        panels,
+        library.embedEditor,
       )
       return panel || localValue || 'code'
     },
   })
   const setActiveTab = (tab: ExamplePanel) => {
     navigate({
-      search: { path: undefined, panel: tab },
+      search: (previous) => ({ ...previous, panel: tab }),
       replace: true,
-      resetScroll: true,
+      resetScroll: false,
     })
   }
 
   const setCurrentPath = (path: string) => {
     navigate({
-      search: { path, panel: undefined },
+      search: { path, panel: 'code' },
       replace: true,
       resetScroll: false,
     })
@@ -457,25 +464,15 @@ function ExternalExamplePage({
     setLocalStorageItem('exampleViewPreference', activeTab)
   }, [activeTab])
 
-  React.useEffect(() => {
-    setIsDark(window.matchMedia?.(`(prefers-color-scheme: dark)`).matches)
-  }, [])
-
   const githubUrl = `https://github.com/${library.repo}/tree/${branch}/examples/${examplePath}`
 
-  // preset=node can be removed once Stackblitz runs Angular as webcontainer by default
-  // See https://github.com/stackblitz/core/issues/2957
-  const stackBlitzUrl = `https://stackblitz.com/github/${
-    library.repo
-  }/tree/${branch}/examples/${examplePath}?embed=1&theme=${
-    isDark ? 'dark' : 'light'
-  }&preset=node&file=${mainExampleFile}`
-
-  const codeSandboxUrl = `https://codesandbox.io/p/devbox/github/${
-    library.repo
-  }/tree/${branch}/examples/${examplePath}?embed=1&theme=${
-    isDark ? 'dark' : 'light'
-  }&file=${mainExampleFile}`
+  const { stackBlitzUrl, codeSandboxUrl } = getExampleSandboxUrls({
+    repo: library.repo,
+    branch,
+    examplePath,
+    file: mainExampleFile,
+    isDark,
+  })
 
   const renderExampleDeployButton = (provider: DeploymentProviderId) => {
     switch (provider) {
@@ -615,18 +612,47 @@ function ClientExamplePage({
   const initialFile = (
     definition.initialFile ?? definition.workspace.entry
   ).replace(/^\//, '')
-  const fallbackAction =
-    definition.runtime?.type !== 'webcontainer'
-      ? undefined
-      : library.hideCodesandboxUrl
-        ? {
-            label: 'Open in StackBlitz',
-            url: `https://stackblitz.com/github/${library.repo}/tree/${branch}/examples/${examplePath}?preset=node&file=${encodeURIComponent(initialFile)}`,
-          }
-        : {
-            label: 'Open in CodeSandbox',
-            url: `https://codesandbox.io/p/devbox/github/${library.repo}/tree/${branch}/examples/${examplePath}?file=${encodeURIComponent(initialFile)}`,
-          }
+  const isDark = useIsDark()
+  const navigate = Route.useNavigate()
+  const [workspace, setWorkspace] = React.useState(definition.workspace)
+  const [currentPath, setCurrentPath] = React.useState(
+    definition.initialFile ?? definition.workspace.entry,
+  )
+  const fileTree = React.useMemo(
+    () => createExampleFileTree(Object.keys(workspace.files).sort()),
+    [workspace.files],
+  )
+  const panels = getExamplePanels({ ...library, hasPlayground: true })
+  const activeTab = Route.useSearch({
+    select: (search) =>
+      getExamplePanel(search.panel, panels, library.embedEditor) ??
+      'playground',
+  })
+  const setActiveTab = (tab: ExamplePanel) => {
+    navigate({
+      search: (previous) => ({ ...previous, panel: tab }),
+      replace: true,
+      resetScroll: false,
+    })
+  }
+  const { stackBlitzUrl, codeSandboxUrl } = getExampleSandboxUrls({
+    repo: library.repo,
+    branch,
+    examplePath,
+    file: initialFile,
+    isDark,
+  })
+  const fallbackAction = !library.hideCodesandboxUrl
+    ? {
+        label: 'Open in CodeSandbox',
+        url: codeSandboxUrl.replace('embed=1&', ''),
+      }
+    : !library.hideStackblitzUrl
+      ? {
+          label: 'Open in StackBlitz',
+          url: stackBlitzUrl.replace('embed=1&', ''),
+        }
+      : undefined
   const fallback = <ClientExampleFallback definition={definition} />
 
   return (
@@ -647,18 +673,36 @@ function ClientExamplePage({
         </DocTitle>
       </div>
       <div className="flex min-h-0 flex-1 flex-col lg:px-6">
-        <ClientOnly fallback={fallback}>
-          <React.Suspense fallback={fallback}>
-            <LazyExampleWorkbench
-              autoRun={autoStart}
-              definition={definition}
-              fallbackAction={fallbackAction}
-              filesInitiallyOpen
-              libraryColor={library.bgStyle}
-              packageResolution="dynamic"
-            />
-          </React.Suspense>
-        </ClientOnly>
+        <CodeExplorer
+          activeTab={activeTab}
+          codeSandboxUrl={codeSandboxUrl}
+          currentCode={workspace.files[currentPath] ?? ''}
+          currentPath={currentPath}
+          examplePath={examplePath}
+          githubContents={fileTree}
+          library={library}
+          prefetchFileContent={() => {}}
+          setActiveTab={setActiveTab}
+          setCurrentPath={setCurrentPath}
+          stackBlitzUrl={stackBlitzUrl}
+          playground={
+            <ClientOnly fallback={fallback}>
+              <React.Suspense fallback={fallback}>
+                <LazyExampleWorkbench
+                  autoRun={autoStart}
+                  className="border-0"
+                  definition={definition}
+                  fallbackAction={fallbackAction}
+                  filesInitiallyOpen
+                  fullscreen
+                  libraryColor={library.bgStyle}
+                  onWorkspaceChange={setWorkspace}
+                  packageResolution="dynamic"
+                />
+              </React.Suspense>
+            </ClientOnly>
+          }
+        />
       </div>
     </div>
   )
@@ -674,7 +718,7 @@ function ClientExampleFallback({
   const language = getCodeBlockLanguageFromFilePath(path)
 
   return (
-    <section className="not-prose flex h-[clamp(520px,75dvh,720px)] min-w-0 flex-col overflow-hidden rounded-lg border border-border-default bg-background-default">
+    <section className="not-prose flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-background-default">
       <header className="flex min-h-10 shrink-0 items-center border-b border-border-default px-3 font-ds-mono text-xs text-text-muted">
         {path}
       </header>
diff --git a/src/utils/example-file-tree.ts b/src/utils/example-file-tree.ts
new file mode 100644
index 000000000..daef4a8bf
--- /dev/null
+++ b/src/utils/example-file-tree.ts
@@ -0,0 +1,31 @@
+import type { FileExplorerNode } from '../components/FileExplorer'
+
+export function createExampleFileTree(paths: Array<string>) {
+  const root: Array<FileExplorerNode> = []
+
+  for (const path of paths) {
+    const segments = path.split('/').filter(Boolean)
+    let children = root
+
+    for (const [index, name] of segments.entries()) {
+      const nodePath = `/${segments.slice(0, index + 1).join('/')}`
+      const last = index === segments.length - 1
+      let node = children.find((candidate) => candidate.path === nodePath)
+
+      if (!node) {
+        node = {
+          children: last ? undefined : [],
+          depth: index,
+          name,
+          path: nodePath,
+          type: last ? 'file' : 'dir',
+        }
+        children.push(node)
+      }
+
+      if (node.children) children = node.children
+    }
+  }
+
+  return root
+}
diff --git a/src/utils/example-imports.ts b/src/utils/example-imports.ts
index b0af4edce..12e783ee5 100644
--- a/src/utils/example-imports.ts
+++ b/src/utils/example-imports.ts
@@ -354,7 +354,10 @@ async function resolvePackageGroup(
     }),
   ])
   const metadata = [requestedMetadata, ...additionalMetadata]
-  const peerPackages = new Set(packageManifest.peerPackages)
+  // Declaration packages have no browser module or esm.sh runtime metadata.
+  const peerPackages = new Set(
+    packageManifest.peerPackages.filter((name) => !name.startsWith('@types/')),
+  )
   const peerSpecifiers = new Set<string>()
 
   for (const value of metadata) {
@@ -369,6 +372,7 @@ async function resolvePackageGroup(
       if (!peer) {
         throw new Error(`Invalid peer import in esm.sh metadata: ${peerImport}`)
       }
+      if (peer.packageName.startsWith('@types/')) continue
       peerPackages.add(peer.packageName)
       peerSpecifiers.add(peer.specifier)
     }
@@ -521,7 +525,16 @@ function createEsmModuleUrl(
   query: string,
   externalPackages: ReadonlyArray<string>,
 ) {
-  const url = `${esmOrigin}/${packageName}@${version}${subpath ? `/${subpath}` : ''}${query}`
+  let url = `${esmOrigin}/${packageName}@${version}${subpath ? `/${subpath}` : ''}${query}`
+  // Production devtools exports can be no-ops, and esm.sh's default splitting
+  // duplicates contexts across lazy chunks. Keep development devtools together
+  // while sharing their framework peers with the example.
+  if (
+    packageName.startsWith('@tanstack/') &&
+    (packageName === '@tanstack/devtools' || packageName.endsWith('-devtools'))
+  ) {
+    url = appendQuery(url, '?dev&standalone')
+  }
   return externalPackages.length
     ? appendQuery(url, `?external=${externalPackages.join(',')}`)
     : url
diff --git a/src/utils/example-panel.ts b/src/utils/example-panel.ts
new file mode 100644
index 000000000..565879a7e
--- /dev/null
+++ b/src/utils/example-panel.ts
@@ -0,0 +1,31 @@
+export type ExamplePanel = 'playground' | 'code' | 'stackblitz' | 'codesandbox'
+
+export type ExamplePanelOption = { id: ExamplePanel; label: string }
+
+export function getExamplePanels({
+  hasPlayground = false,
+  hideStackblitzUrl = false,
+  hideCodesandboxUrl = false,
+}: {
+  hasPlayground?: boolean
+  hideStackblitzUrl?: boolean
+  hideCodesandboxUrl?: boolean
+}): Array<ExamplePanelOption> {
+  const panels: Array<ExamplePanelOption> = []
+  if (hasPlayground) panels.push({ id: 'playground', label: 'Playground' })
+  else panels.push({ id: 'code', label: 'Code Explorer' })
+  if (!hideStackblitzUrl) panels.push({ id: 'stackblitz', label: 'StackBlitz' })
+  if (!hideCodesandboxUrl)
+    panels.push({ id: 'codesandbox', label: 'CodeSandbox' })
+  return panels
+}
+
+export function getExamplePanel(
+  value: string | undefined,
+  panels: ReadonlyArray<ExamplePanelOption>,
+  embedEditor: 'stackblitz' | 'codesandbox' = 'stackblitz',
+) {
+  // Preserve links and preferences saved before the providers had separate tabs.
+  const panel = value === 'sandbox' ? embedEditor : value
+  return panels.find((candidate) => candidate.id === panel)?.id
+}
diff --git a/src/utils/example-sandbox.client.ts b/src/utils/example-sandbox.client.ts
index 00abec2fe..1170b378c 100644
--- a/src/utils/example-sandbox.client.ts
+++ b/src/utils/example-sandbox.client.ts
@@ -887,6 +887,26 @@ function createRuntimeBridgeScript(
 ) {
   return `const runToken = ${JSON.stringify(runToken)}
 
+// Opaque sandbox origins cannot use browser storage. Keep example settings
+// inside this preview instead of granting access to the host site's origin.
+for (const name of ['localStorage', 'sessionStorage']) {
+  try {
+    if (window[name]) continue
+  } catch {}
+  const entries = new Map()
+  Object.defineProperty(window, name, {
+    configurable: true,
+    value: {
+      get length() { return entries.size },
+      clear() { entries.clear() },
+      getItem(key) { return entries.get(String(key)) ?? null },
+      key(index) { return [...entries.keys()][index] ?? null },
+      removeItem(key) { entries.delete(String(key)) },
+      setItem(key, value) { entries.set(String(key), String(value)) },
+    },
+  })
+}
+
 function send(value) {
   parent.postMessage({ type: 'tanstack-example-sandbox', runToken, ...value }, '*')
 }
diff --git a/src/utils/sandbox.ts b/src/utils/sandbox.ts
index 9f2167dc1..946bdea53 100644
--- a/src/utils/sandbox.ts
+++ b/src/utils/sandbox.ts
@@ -1,5 +1,30 @@
 import { type Framework } from '~/libraries'
 
+export function getExampleSandboxUrls({
+  repo,
+  branch,
+  examplePath,
+  file,
+  isDark,
+}: {
+  repo: string
+  branch: string
+  examplePath: string
+  file: string
+  isDark: boolean
+}) {
+  const path = `${repo}/tree/${branch}/examples/${examplePath}`
+  const search = new URLSearchParams({
+    embed: '1',
+    theme: isDark ? 'dark' : 'light',
+    file,
+  })
+  return {
+    stackBlitzUrl: `https://stackblitz.com/github/${path}?${search}&preset=node`,
+    codeSandboxUrl: `https://codesandbox.io/p/devbox/github/${path}?${search}`,
+  }
+}
+
 export const getExampleStartingPath = (
   framework: Framework,
   libraryId?: string,
diff --git a/src/utils/stackblitz-embed.ts b/src/utils/stackblitz-embed.ts
index 41c0ac867..af971ae2e 100644
--- a/src/utils/stackblitz-embed.ts
+++ b/src/utils/stackblitz-embed.ts
@@ -1,5 +1,3 @@
-import type { IframeHTMLAttributes } from 'react'
-
 export const stackBlitzEmbedHeaders = {
   'Cross-Origin-Opener-Policy': 'same-origin',
   'Cross-Origin-Embedder-Policy': 'credentialless',
@@ -15,9 +13,32 @@ export function getExampleRuntimeHeaders(
   return stackBlitzEmbedHeaders
 }
 
+export function shouldReloadExampleDocument(
+  browser: {
+    isSecureContext: boolean
+    crossOriginIsolated: boolean
+    sessionStorage: Pick<Storage, 'getItem' | 'setItem' | 'removeItem'>
+  },
+  pathname: string,
+) {
+  if (!browser.isSecureContext) return false
+  const key = `tanstack-example-document-reload:${pathname}`
+  try {
+    if (browser.crossOriginIsolated) {
+      browser.sessionStorage.removeItem(key)
+      return false
+    }
+    if (browser.sessionStorage.getItem(key) === '1') return false
+    browser.sessionStorage.setItem(key, '1')
+    return true
+  } catch {
+    // Without per-tab storage, reloading could create a loop.
+    return false
+  }
+}
+
 export const stackBlitzIframeProps = {
   allow: 'cross-origin-isolated',
-  credentialless: '',
-} as IframeHTMLAttributes<HTMLIFrameElement> & {
-  credentialless: string
+  // React 19.2 needs a string for this attribute; Redact needs it to be truthy.
+  credentialless: 'true',
 }
diff --git a/tests/example-imports.test.ts b/tests/example-imports.test.ts
index a02671cf8..d183d24a3 100644
--- a/tests/example-imports.test.ts
+++ b/tests/example-imports.test.ts
@@ -335,6 +335,72 @@ test('resolves declared peers that source code does not import', async () => {
   })
 })
 
+test('does not resolve type-only devtools peers as browser modules', async () => {
+  const workspace = createExampleWorkspace({
+    entry: '/index.tsx',
+    files: {
+      '/index.tsx': 'export {}',
+      '/package.json': JSON.stringify({
+        dependencies: {
+          '@tanstack/react-devtools': '0.10.12',
+          react: '19.3.0',
+          'react-dom': '19.3.0',
+        },
+        devDependencies: {
+          '@types/react': '^19.3.0',
+          '@types/react-dom': '^19.3.0',
+        },
+      }),
+    },
+  })
+  const requests: Array<string> = []
+  const fetchMetadata = createMetadataFetch(
+    requests,
+    (url) => ({
+      version: url.includes('@tanstack/react-devtools') ? '0.10.12' : '19.3.0',
+    }),
+    (url): Record<string, string> =>
+      url.includes('@tanstack/react-devtools')
+        ? {
+            '@types/react': '>=16.8',
+            '@types/react-dom': '>=16.8',
+            react: '>=16.8',
+            'react-dom': '>=16.8',
+          }
+        : {},
+  )
+  const imports = await resolveExampleWorkspaceImports(
+    workspace,
+    workspace.files,
+    new Set(['@tanstack/react-devtools']),
+    {
+      fetch: async (input, init) => {
+        // esm.sh redirects @types metadata requests to declarations.
+        if (getRequestUrl(input).includes('/@types/')) {
+          requests.push(getRequestUrl(input))
+          return new Response('export as namespace ReactDOM;')
+        }
+        return fetchMetadata(input, init)
+      },
+    },
+  )
+
+  assert.equal(
+    imports['@tanstack/react-devtools'],
+    'https://esm.sh/@tanstack/react-devtools@0.10.12?dev&standalone&external=react,react-dom',
+  )
+  assert.equal(imports.react, 'https://esm.sh/react@19.3.0')
+  assert.equal(imports['react-dom'], 'https://esm.sh/react-dom@19.3.0')
+  assert.equal(
+    requests.some((url) => url.includes('/@types/')),
+    false,
+  )
+  assert.equal(
+    Object.keys(imports).some((key) => key.startsWith('@types/')),
+    false,
+  )
+})
+
 test('stops before resolving packages when already aborted', async () => {
   const workspace = createExampleWorkspace({
     entry: '/index.ts',
diff --git a/tests/example-panel.test.ts b/tests/example-panel.test.ts
new file mode 100644
index 000000000..1b81fba7b
--- /dev/null
+++ b/tests/example-panel.test.ts
@@ -0,0 +1,53 @@
+import assert from 'node:assert/strict'
+import test from 'node:test'
+import { getExamplePanel, getExamplePanels } from '../src/utils/example-panel'
+import { getExampleSandboxUrls } from '../src/utils/sandbox'
+
+test('offers both external editors alongside the supported playground', () => {
+  assert.deepEqual(getExamplePanels({ hasPlayground: true }), [
+    { id: 'playground', label: 'Playground' },
+    { id: 'stackblitz', label: 'StackBlitz' },
+    { id: 'codesandbox', label: 'CodeSandbox' },
+  ])
+  assert.deepEqual(
+    getExamplePanels({}).map((panel) => panel.id),
+    ['code', 'stackblitz', 'codesandbox'],
+  )
+})
+
+test('preserves legacy sandbox links without selecting unsupported panels', () => {
+  const panels = getExamplePanels({})
+  assert.equal(getExamplePanel('sandbox', panels), 'stackblitz')
+  assert.equal(getExamplePanel('sandbox', panels, 'codesandbox'), 'codesandbox')
+  assert.equal(getExamplePanel('codesandbox', panels), 'codesandbox')
+  assert.equal(getExamplePanel('playground', panels), undefined)
+  assert.equal(getExamplePanel('unknown', panels), undefined)
+  const hidden = getExamplePanels({
+    hideStackblitzUrl: true,
+    hideCodesandboxUrl: true,
+  })
+  assert.deepEqual(hidden, [{ id: 'code', label: 'Code Explorer' }])
+  assert.equal(getExamplePanel('sandbox', hidden), undefined)
+})
+
+test('external editors use the same example and encode the selected file', () => {
+  const urls = getExampleSandboxUrls({
+    repo: 'tanstack/table',
+    branch: 'v8',
+    examplePath: 'svelte/header-groups',
+    file: 'src/a file.svelte',
+    isDark: true,
+  })
+  for (const value of Object.values(urls)) {
+    const url = new URL(value)
+    assert.ok(
+      url.pathname.endsWith(
+        '/tanstack/table/tree/v8/examples/svelte/header-groups',
+      ),
+    )
+    assert.equal(url.searchParams.get('file'), 'src/a file.svelte')
+    assert.equal(url.searchParams.get('theme'), 'dark')
+    assert.equal(url.searchParams.get('embed'), '1')
+  }
+  assert.equal(new URL(urls.stackBlitzUrl).searchParams.get('preset'), 'node')
+})
diff --git a/tests/example-sandbox.test.ts b/tests/example-sandbox.test.ts
index 02b87294b..cdf993de3 100644
--- a/tests/example-sandbox.test.ts
+++ b/tests/example-sandbox.test.ts
@@ -29,6 +29,87 @@ test('keeps fragment links inside the sandbox document', () => {
   assert.match(document, /const channel = "test-browser"/)
 })
 
+test('devtools can read and write storage inside an opaque sandbox', () => {
+  const document = createExampleSandboxDocument({
+    compiled: { css: '', imports: {}, javascript: '' },
+    document: undefined,
+    entry: '/index.ts',
+    files: { '/index.ts': '' },
+    runToken: 'storage-test',
+    theme: 'light',
+  })
+  const bridge = document.match(/<script>([\s\S]*?)<\/script>/)?.[1]
+  assert.ok(bridge)
+
+  const context = vm.createContext({
+    document: {
+      documentElement: { classList: { toggle() {} }, style: {} },
+    },
+    parent: { postMessage() {} },
+  })
+  vm.runInContext(
+    `
+    globalThis.window = globalThis
+    globalThis.addEventListener = () => {}
+    for (const name of ['localStorage', 'sessionStorage']) {
+      Object.defineProperty(window, name, {
+        configurable: true,
+        get() { throw new Error('The document is sandboxed and lacks allow-same-origin') },
+      })
+    }
+  `,
+    context,
+  )
+  vm.runInContext(bridge, context)
+  assert.equal(
+    vm.runInContext(
+      'localStorage.getItem("tanstack_devtools_settings")',
+      context,
+    ),
+    null,
+  )
+  vm.runInContext(
+    'localStorage.setItem("tanstack_devtools_settings", JSON.stringify({ theme: "dark" }))',
+    context,
+  )
+  assert.equal(
+    vm.runInContext(
+      'JSON.parse(localStorage.getItem("tanstack_devtools_settings")).theme',
+      context,
+    ),
+    'dark',
+  )
+  assert.equal(
+    vm.runInContext(
+      'sessionStorage.getItem("tanstack_devtools_settings")',
+      context,
+    ),
+    null,
+  )
+  assert.equal(vm.runInContext('localStorage.length', context), 1)
+  assert.equal(
+    vm.runInContext('localStorage.key(0)', context),
+    'tanstack_devtools_settings',
+  )
+  assert.equal(vm.runInContext('localStorage.key(1)', context), null)
+  vm.runInContext(
+    'localStorage.removeItem("tanstack_devtools_settings")',
+    context,
+  )
+  assert.equal(vm.runInContext('localStorage.length', context), 0)
+  vm.runInContext('sessionStorage.setItem(123, 456)', context)
+  assert.equal(vm.runInContext('sessionStorage.getItem("123")', context), '456')
+  vm.runInContext('sessionStorage.clear()', context)
+  assert.equal(vm.runInContext('sessionStorage.length', context), 0)
+  // A second bridge initialization must preserve storage that is already usable.
+  vm.runInContext('localStorage.setItem("existing", "value")', context)
+  vm.runInContext(`(() => { ${bridge} })()`, context)
+  assert.equal(
+    vm.runInContext('localStorage.getItem("existing")', context),
+    'value',
+  )
+})
+
 test('instruments browser navigation in every preview environment', () => {
   const client = createExampleSandboxBrowserScript({
     channel: 'client-browser',
diff --git a/tests/stackblitz-embed.test.ts b/tests/stackblitz-embed.test.ts
new file mode 100644
index 000000000..19a0c4af6
--- /dev/null
+++ b/tests/stackblitz-embed.test.ts
@@ -0,0 +1,63 @@
+import assert from 'node:assert/strict'
+import test from 'node:test'
+import { createElement as createReactElement } from 'react'
+import { renderToStaticMarkup as renderReactMarkup } from 'react-dom/server'
+import { createElement } from '@tanstack/redact'
+import { renderToStaticMarkup } from '@tanstack/redact/server'
+import {
+  shouldReloadExampleDocument,
+  stackBlitzIframeProps,
+} from '../src/utils/stackblitz-embed'
+
+test('reloads an unisolated example entry once without creating a reload loop', () => {
+  const entries = new Map<string, string>()
+  const browser = {
+    isSecureContext: true,
+    crossOriginIsolated: false,
+    sessionStorage: {
+      getItem: (key: string) => entries.get(key) ?? null,
+      setItem: (key: string, value: string) => {
+        entries.set(key, value)
+      },
+      removeItem: (key: string) => {
+        entries.delete(key)
+      },
+    },
+  }
+  const path = '/table/latest/docs/framework/svelte/examples/header-groups'
+
+  assert.equal(shouldReloadExampleDocument(browser, path), true)
+  assert.equal(shouldReloadExampleDocument(browser, path), false)
+  browser.crossOriginIsolated = true
+  assert.equal(shouldReloadExampleDocument(browser, path), false)
+  assert.equal(entries.size, 0)
+  browser.crossOriginIsolated = false
+  browser.isSecureContext = false
+  assert.equal(shouldReloadExampleDocument(browser, path), false)
+})
+
+test('does not automatically reload when storage cannot prevent a loop', () => {
+  const browser = {
+    isSecureContext: true,
+    crossOriginIsolated: false,
+    get sessionStorage(): Storage {
+      throw new Error('Storage blocked')
+    },
+  }
+  assert.equal(shouldReloadExampleDocument(browser, '/example'), false)
+})
+
+test('preserves credentialless in the production Redact renderer', () => {
+  const markup = renderToStaticMarkup(
+    createElement('iframe', stackBlitzIframeProps),
+  )
+  assert.match(markup, / credentialless="[^"]*"/)
+  assert.match(markup, / allow="cross-origin-isolated"/)
+})
+
+test('preserves credentialless when Redact is disabled', () => {
+  const markup = renderReactMarkup(
+    createReactElement('iframe', stackBlitzIframeProps),
+  )
+  assert.match(markup, / credentialless="[^"]*"/)
+})