[Preview] Support multiple tabs for navigating different pages simultaneously

Resolved 💬 4 comments Opened Apr 12, 2026 by phasprofissional-arch Closed May 24, 2026

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)

View original on GitHub ↗

This issue has 4 comments on GitHub. Read the full discussion on GitHub ↗