Skip to main content
On any running browser session - watch, click, type, and scroll in real-time.

​
Uses

While Browserbase helps with anti-bot mechanisms, scraping, and reliable file downloads among other features, some scenarios remain challenging to fully automate for technical or data-privacy reasons. Live Views can be useful for:
  • Debugging and observability - watch everything happening live, or share with users or coworkers
  • Human in the loop - instantly take control or provide input
    • handle iframes - loaded content might be external or could change without notice, potentially leading to error conditions without human intervention
    • delegate credentials - give control to the end user
    • upload files - see our uploads guide for how to enable uploads through the live view
  • Embedding - use within an application (both desktop and mobile)

​
Getting Started

Need help getting started? Check out our Create a Browser Session and Using Browser Sessions guides.
Also checkout our Live Views API endpoint. 
const liveViewLinks = await bb.sessions.debug(session.id);
const liveViewLink = liveViewLinks.debuggerFullscreenUrl;
console.log(`🔍 Live View Link: ${liveViewLink}`);

// [Optional] If you want to automatically open up the live view URL in your browser tab, you can also run the lines below:
import open from 'open';
open(liveViewLink);

​
Multitab

Each tab has a unique live view url. The pages property contains all live view urls. We recommend listening to the Playwright new tab event (or equivalent in other libraries) to trigger a request to get new live view urls when needed. 
// Open a new tab and navigate to google
const newTab = await defaultContext.newPage();
newTab.goto("https://www.google.com");

// Get the live view links after the new tab is opened - then access the second tab
const liveViewLinks = await bb.sessions.debug(session.id);
const allTabs = liveViewLinks.pages;
const secondTabLiveViewLink = allTabs[1].debuggerFullscreenUrl;
console.log(`🔍 Second Tab Live View Link: ${secondTabLiveViewLink}`);

​
Embedding

In the frontend of your application, add the live view link to an iframe to embed it. 
<iframe
  src="{liveViewLink}"
  sandbox="allow-same-origin allow-scripts"
  allow="clipboard-read; clipboard-write"
  style="pointer-events: none;"
/>

​
Mobile

Show a mobile live view by setting a session’s viewport. 
// Standard android mobile dimensions
browserSettings: {
  viewport: {
    width: 360,
    height: 800,
  },
},
// ...other session configuration options
To display a keyboard with a mobile live view, use a library like react-simple-keyboard.
Mobile keyboards are not officially supported. Desktop works natively, but for mobile you’ll need to handle key events and send them to your automation script (like via HTTP or WebSocket). Once there, call page.keyboard.press() to forward them into the session.Some virtual keyboard keys need to be mapped to your framework’s key names (e.g. {ent} → "Enter"). You may need to override keys like Tab so they’re sent to the session and not processed by the local browser.

​
Handling Disconnects

When the browser session ends, the live view will show a disconnect message:
Live View Disconnect Message
You can listen for this event programmatically: 
window.addEventListener("message", function (event) {
  if (event.data === "browserbase-disconnected") {
    // Handle the disconnection (e.g., show a message, clean up resources)
    console.log("Live view disconnected");
  }
});

​
Styling

​
Browser with Borders

Mimic a real browser with borders.
Session Live View with Borders
const liveViewLinks = await bb.sessions.debug(session.id);
const liveViewLink = liveViewLinks.debuggerUrl;
console.log(`🔍 Live View Link - with borders: ${liveViewLink}`);

​
Hide the Navbar

The live view includes a navbar at the top, for additional context and navigation control. To maximize the visible area, or for integrating with a UI that already provides context, you can hide the navbar. 
const hiddenNavbarUrl = `${liveViewLink}&navbar=false`;

​
Hide the Scrollbar

// Navigate to the page
await page.goto("https://news.ycombinator.com/");

// Hide the scrollbar
await page.evaluate(() => {
  const style = document.createElement("style");
  style.textContent = `::-webkit-scrollbar { display: none; }`;
  document.head.appendChild(style);
});

​
Troubleshooting

  1. Blank or Empty Window You may be on another tab. Check if there are multiple tabs open via the web session inspector or the pages list.
  2. Lag Check out our performance guide.
  3. Looks Off Often caused by headless browser rendering differences. Some issues may be fixable by adjusting CSS styling through page.evaluate().
  4. Lost Connection If the live view loses its connection to the browser, the iframe will post a browserbase-disconnected message. See Handling Disconnects for how to listen for this event.