Live View

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
• Embedding - use within an application (both desktop and mobile)

​

Getting Started

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}`);

​

Disconnect Message

When the browser session ends, the live view will show this message:

​

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}`);

​

Embed

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 and fingerprint parameters.

For a complete list of supported viewports, see here.

// mobile fingerprint with standard android mobile dimensions
browserSettings: {
  fingerprint: {
    devices: ["mobile"],
    locales: ["en-US"],
    operatingSystems: ["android"],
  },
  viewport: { 
    width: 360,
    height: 800,
  },
},
// ...other session configuration options

To display a keyboard with a mobile live view, use libraries like react-simple-keyboard.

​

Styling

​

Browser with Borders

Mimic a real browser 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);
});

// 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);
});

# Navigate to the page
page.goto("https://www.browserbase.com")

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

​

Common Errors & Issues

1. Blank or Empty Window

   We may be on another tab. Check if there are multiple tabs open either via the web session inspector or the pages list.

2. Lag

   Check out our performance guide.

3. Looks Off

   Often bugs from a rendering headless browser - some bugs may be amenable to directly adjusting css styling, for example through page.evaluate().

4. Lost Connection

   If the live view loses its connection to the browser, the iframe will post a message to the window warning you of the new state.

window.addEventListener("message", function (event) {
  if (event.data === "browserbase-disconnected") {
    console.log("Message received from iframe:", event.data);
    // Handle the disconnection logic / new state
  }
});