# Detecting Polypane

You might have various reasons for wanting to detect that you're running in Polypane. Because Polypane emulates other devices and browsers, those might not always be available. This is why there are multiple ways to detect Polypane, and you can choose the one that works best for you.

### Option 1: user agent

The Polypane user agent is derived from the Chrome user agent and looks something like this (With slight variations for Mac, Windows and Linux):

> Mozilla/5.0 (X11; Linux x86\_64) AppleWebKit/537.36 (KHTML, like Gecko) Polypane/30.1.0 Chrome/152.0.0.0 Safari/537.36

The user agent will tell you which version of Polypane and Chromium is being used.

If you use [emulation](/docs/emulation/) then the user agent might be overwritten. For that we have another option:

### Option 2: navigator.userAgentData

The `userAgentData` object has a `brands` property, which is an array of objects with a `brand` and a `version` property. The first item in the array will be an object with the property "brand" with value "Polypane".

```js
console.log(navigator.userAgentData.brands);
// [
//   { brand: 'Polypane', version: '30' },
//   { brand: 'Not(A:Brand', version: '8' },
//   { brand: 'Chromium', version: '152' },
// ]
```

### Option 3: window.\_\_polypane object

When running in Polypane, the `window` object is extended with a `__polypane` key. This is an object that gives you information on the pane your page is running in. It has these properties:

*   `width`: The width of the pane in pixels
*   `height`: The height of the pane in pixels
*   `index`: The (zero-based) index of the panel
*   `title`: The title of the pane
*   `hidden`: Whether the pane is visible in the UI or not (boolean)
*   `overlay`: Which, if any, debug tool is currently active on this pane
*   `zoom`: At which zoom level a pane is shown
*   `darkUI`: If Polypane is running in dark or light mode
*   `emulation`: An object with the emulation options as applied to the pane: `userAgent`, `pixelRatio`, `screenType`, `emulateTouch` and `network`.
*   `extraHeaders`: a string with the extra headers being sent to this pane.

### Option 4: The `in-polypane` class

In the global options in the top right of the app you can toggle "Inject class in HTML" to add an 'in-polypane' class to the HTML element of your page. This is useful for styling your page differently when running in Polypane.

This option is disabled by default because while the class does not interfere with any hydration, your server might complain that the HTML differs from what it expects.

### Option 5: Send a custom HTTP header:

You can also send your own [custom header](/docs/emulation/#custom-http-headers), like `polypane: true`, and detect that on your server.

---

Polypane is the browser built for developers and designers — try it at https://polypane.app.