Issue Station
Sign In
Tools hereToolbox

claude-code - 💡(How to fix) Fix [Preview] Support multiple tabs for navigating different pages simultaneously [2 comments, 2 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
anthropics/claude-code#46896•Fetched 2026-04-12 13:30:13
View on GitHub
Comments
2
Participants
2
Timeline
6
Reactions
0
Author
phasprofissional-archphasprofissional-arch
Participants
github-actions[bot]github-actions[bot]phasprofissional-archphasprofissional-arch
Timeline (top)
labeled ×4commented ×2

Error Message

  • Real-world scenario: When building a site with 30+ pages (courses, blog, institutional pages), constantly re-navigating in a single-tab preview is extremely slow and error-prone.

Root Cause

  • Multi-page workflows are the norm: Websites and apps have multiple pages — header changes affect all pages, layout components are shared, navigation must be tested end-to-end.
  • Side-by-side comparison: Developers often need to compare the same component across different pages (e.g., "Does the header look correct on both the home page and the course page?").
  • Reduced context switching: The more tools are consolidated within the Claude Code preview, the faster and smoother the development workflow becomes.
  • Real-world scenario: When building a site with 30+ pages (courses, blog, institutional pages), constantly re-navigating in a single-tab preview is extremely slow and error-prone.
RAW_BUFFERClick to expand / collapse

Problem

The built-in preview window can only display one page at a time. When working on multi-page projects (websites, web apps, dashboards), developers constantly need to switch between different routes to verify changes, compare layouts, or test navigation flows. Currently, this requires either:

  • Manually changing the URL in the preview each time, or
  • Opening an external browser alongside the app — which defeats the purpose of the integrated preview.

Current Behavior

  • Preview shows a single page view with no tab system.
  • Navigating to a different route replaces the current view entirely.
  • No way to keep multiple pages open for quick reference or comparison.

Expected Behavior

A tabbed interface within the preview window, similar to how browsers work:

  • Open new tab: A + button to open a new tab pointing to a different route.
  • Switch between tabs: Click on tab headers to switch views instantly.
  • Close tabs: An × button on each tab to close it.
  • Tab labels: Show the route path (e.g., /about, /dashboard, /products/123) as the tab label.

Why This Matters

  • Multi-page workflows are the norm: Websites and apps have multiple pages — header changes affect all pages, layout components are shared, navigation must be tested end-to-end.
  • Side-by-side comparison: Developers often need to compare the same component across different pages (e.g., "Does the header look correct on both the home page and the course page?").
  • Reduced context switching: The more tools are consolidated within the Claude Code preview, the faster and smoother the development workflow becomes.
  • Real-world scenario: When building a site with 30+ pages (courses, blog, institutional pages), constantly re-navigating in a single-tab preview is extremely slow and error-prone.

Suggested Implementation

  • A tab bar at the top of the preview viewport (below the URL/toolbar area).
  • Ctrl+T / Cmd+T to open a new tab.
  • Ctrl+W / Cmd+W to close the current tab.
  • Tabs persist across HMR reloads (they keep their routes).
  • Optional: drag-and-drop tab reordering.

Environment

  • Claude Code Desktop App (Windows 11)
  • Daily professional use for multi-page frontend development (Next.js App Router)

extent analysis

TL;DR

Implement a tabbed interface within the preview window to enable multi-page viewing and comparison.

Guidance

  • Consider adding a tab bar at the top of the preview viewport with features like new tab buttons, tab switching, and tab closure.
  • Implement keyboard shortcuts like Ctrl+T / Cmd+T to open new tabs and Ctrl+W / Cmd+W to close current tabs for efficient navigation.
  • Ensure tabs persist across Hot Module Reloads (HMR) to maintain workflow continuity.
  • Explore drag-and-drop tab reordering as an optional feature for enhanced usability.

Example

// Example tab management function
function openNewTab(route) {
  // Create a new tab element
  const newTab = document.createElement('div');
  newTab.textContent = route;
  // Add tab to the tab bar
  tabBar.appendChild(newTab);
  // Update the preview viewport to display the new tab's content
  previewViewport.innerHTML = `<iframe src="${route}"></iframe>`;
}

Notes

The implementation details may vary based on the specific requirements and constraints of the Claude Code Desktop App and Next.js App Router.

Recommendation

Apply a workaround by using an external browser for multi-page comparison until a tabbed interface is implemented, as it allows for side-by-side comparison and reduces context switching.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#retriever error#indexing error#inference speed#output truncation#response parsing

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING