Detecting Polypane

It can be useful to know if your site is being shown in Polypane, so we offer a number of different ways to detect whether this is the case. You can use this information to display additional debug information, or serve up various instances of your design (for example, dark and light themes) and test those side by side.

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/22.0.0 Chrome/130.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 then the user agent might be overwritten. For that we have another option:

Option 2: 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 3: The in-polypane class

When running on Polypane, the HTML element will have the 'in-polypane' class applied to it, letting you style based on it.

Turning the class off to deal with hydration issues

The class does not interfere with any hydration, but your server might complain that the HTML differs from what they expect. If you want to suppress this warning, you can turn off the 'in-polypane' class in the App settings in the top right of the address bar.

Option 4: Send a custom HTTP header:

You can also send your own custom header, like polypane: true, and detect that on your server.