# 1Password setup instructions URL: https://polypane.app/docs/1-password-setup-instructions/ --- title: 1Password setup instructions --- The 1Password desktop app on Linux and Macos can be configured to connect to the 1Password browser extension in Polypane, but it requires you to explicitly add Polypane as a browser in the 1Password app. Connecting to your desktop app enables logging in with a passkey through the desktop app, as well as automatically unlocking the browser extension. ## Macos On MacOS, go to the settings, then to the "Browser" tab, and click on "Add Browser". Select the Polypane app from the list of applications. ## Linux On Linux you need to add Polypane to a configuration file that the 1Password app uses to determine which browsers are installed. Create the 1password configuration directory if it does not exist: ```shell sudo mkdir /etc/1password ``` Create the custom allowed browsers file if it does not exist: ```shell sudo touch /etc/1password/custom_allowed_browsers ``` Then add `polypane` to the file, for example by running: ```shell echo "polypane" | sudo tee -a /etc/1password/custom_allowed_browsers ``` ## Windows A similar feature is not available on Windows, but you can still use the 1Password browser extension in Polypane without the desktop app. Install the 1Password extension from the [Chrome Web Store](https://chromewebstore.google.com/detail/1password-%E2%80%93-password-mana/aeblfdkhhhdcdjpifhhbdiojplfjncoa). --- # Accessibility overview URL: https://polypane.app/docs/accessibility-overview/ --- title: 'Accessibility overview' --- Polypane contains a lot of different features that will help you analyze and improve the accessibility of your web pages. Check out the table below to see which features can help you! | Issue to test | What to use | | ------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Find and fix text contrast issues. | Use the [contrast checker debug tool](https://polypane.app/docs/debug-tools/#contrast-checker), find the contrast in the [Elements panel navigator](https://polypane.app/docs/elements-panel/#navigator), check them with [Polypane Peek](https://polypane.app/docs/polypane-peek/) or use the [color picker](https://polypane.app/docs/color-picker/). | | Test for color blindness. | Use the [color blindness simulators](https://polypane.app/docs/debug-tools/#simulators). | | Test for vision impairments. | Use the [vision impairment simulators](https://polypane.app/docs/debug-tools/#visual-impairments). | | Test for situational impairments. | Use the [Bright sunlight](https://polypane.app/docs/debug-tools/#bright-sunlight) and [Night mode](https://polypane.app/docs/debug-tools/#night-mode) simulators. | | Test the readability of your page. | Use the [Readability debug tool](https://polypane.app/docs/debug-tools/#readability) and [Dyslexia](https://polypane.app/docs/debug-tools/#dyslexia) simulator. | | Find and fix spelling mistakes. | Use the [Edit Content debug tool](https://polypane.app/docs/debug-tools/#edit-content) with built-in spell checking. | | Verify a logical and valid heading structure. | Use the [heading overview](https://polypane.app/docs/outline-panel/#headings) in the [outline panel](https://polypane.app/docs/outline-panel/). | | Verify a logical and valid landmark structure. | Use the [landmarks overview](https://polypane.app/docs/outline-panel/#landmarks) in the [outline panel](https://polypane.app/docs/outline-panel/). | | Find images with missing alt attributes. | Use the [image overview](https://polypane.app/docs/outline-panel/#images) in the [outline panel](https://polypane.app/docs/outline-panel/) or the [Disable Images Debug Tool](https://polypane.app/docs/debug-tools/#disable-images). | | Find images with redundant or unhelpful alt text. | Use the [image overview](https://polypane.app/docs/outline-panel/#images) in the [outline panel](https://polypane.app/docs/outline-panel/). | | Find links with redundant or unhelpful text. | Use the [link overview](https://polypane.app/docs/outline-panel/#links) in the [outline panel](https://polypane.app/docs/outline-panel/). | | Find links with inconsistent destination or text SC 3.2.4 | Use the [link overview](https://polypane.app/docs/outline-panel/#links) in the [outline panel](https://polypane.app/docs/outline-panel/). | | Find headings and links with differing visible text SC 2.5.3 | Use the [heading overview](https://polypane.app/docs/outline-panel/#headings) and [link overview](https://polypane.app/docs/outline-panel/#links) in the [outline panel](https://polypane.app/docs/outline-panel/). | | Test keyboard support. | Check the "Focusable" state in the A11y tab in the [Elements panel navigator](https://polypane.app/docs/elements-panel/#navigator) or in the [Polypane Peek](https://polypane.app/docs/polypane-peek/) tooltip. | | Verify a logical focus order. | Use the [focus order overview](https://polypane.app/docs/outline-panel/#focus-order-tab-order) in the [outline panel](https://polypane.app/docs/outline-panel/) and toggle "show overlay" for a visual representation. Or turn on the [Hide Cursor](https://polypane.app/docs/debug-tools/#hide-cursor) or [Track Focus](https://polypane.app/docs/debug-tools/#track-focus) debug tools and test it yourself. | | Find input elements without labels. | Use the [Accessibility tree](https://polypane.app/docs/outline-panel/#accessibility-tree) in the outline panel or the [Accessibility panel](https://polypane.app/docs/accessibility-panel/). | | Find WCAG Accessibility issues. | Use the [Accessibility panel](https://polypane.app/docs/accessibility-panel/) or [A11y.css debug tool](https://polypane.app/docs/debug-tools/#a11ycss). | | Verify a page works without CSS. | Use the [Disable CSS debug tool](https://polypane.app/docs/debug-tools/#disable-css). | | Verify a page works without images. | Use the [Disable Images debug tool](https://polypane.app/docs/debug-tools/#disable-images). | | Verify a page works without animations. | Use the Reduced-motion toggle in the [Media Emulation popover](https://polypane.app/docs/emulation/#media). | | Verify a page works in dark mode. | Use the Prefers-color-scheme toggle in the [Media Emulation popover](https://polypane.app/docs/emulation/#media). | | Verify a page works with reduced data. | Use the Prefers-reduced-data toggle in the [Media Emulation popover](https://polypane.app/docs/emulation/#media). | | Test narrow screens. | [Create a narrow pane](https://polypane.app/docs/pane-management/#adding-and-removing-panes) (320px wide). | | Find and fix horizontal overflows. | Check the [horizontal overflow warnings](https://polypane.app/docs/horizontal-overflow/), then turn on [layout debugging](https://polypane.app/docs/layout-debugging/), any overflowing items are colored in red. | | Test if elements on the screen are reachable. | Use the [Reachability debug tool](https://polypane.app/docs/debug-tools/#reachability) (both right and left handed). | | Test if clickable elements are large enough SC 2.5.5. | Use the [Target size cursor debug tool](https://polypane.app/docs/debug-tools/#target-size-cursor). | | Test if text is large enough. | Use the [Small text debug tool](https://polypane.app/docs/debug-tools/#detect-small-text). | | Test for WCAG SC 1.4.12 Text spacing | Use the [Text spacing debug tool](https://polypane.app/docs/debug-tools/#text-spacing-wcag-1412). | | Test Forced Colors/High contrast mode | Use the [Forced Colors emulation](https://polypane.app/docs/emulation/). | | Test for SC 1.4.4 Resize Text | Use the [command bar](https://polypane.app/docs/command-bar/) to quickly zoom to 200%, and check no content or functionality is lost. | | Test for SC 1.4.10 Reflow | Create a pane at 1280px wide and use the [command bar](https://polypane.app/docs/command-bar/) to quickly zoom to 400%, and check [horizontal overflow warnings](https://polypane.app/docs/horizontal-overflow/). | | Change the browser default font size | Use the [Default font size emulation](https://polypane.app/docs/emulation/#emulation-settings) to change the font size and see how it affects the page. | | Inspect the data the page sends to assistive tech | Use the [Accessibility tree](https://polypane.app/docs/outline-panel/#accessibility-tree) in the outline panel. | | Find elements that are missing an accessible name | Use the [Accessibility tree](https://polypane.app/docs/outline-panel/#accessibility-tree) in the outline panel. | | Find elements with an accessible name that can't have one. | Use the [Accessibility tree](https://polypane.app/docs/outline-panel/#accessibility-tree) in the outline panel. | | Find elements that are missing a role | Use the [Accessibility tree](https://polypane.app/docs/outline-panel/#accessibility-tree) in the outline panel and toggle on "Show generics". | ## Accessibility articles Be sure to check out our article [Find and fix accessibility issues with Polypane](https://polypane.app/blog/find-and-fix-accessibility-issues-with-polypane/) which we keep up to date with new accessibility features we add, or [A11y tooling in Polypane](https://polypane.app/blog/a-11-y-tooling-in-polypane/) for a video overview of the accessibility features in Polypane. ## WCAG criterion overview Accessibility expert [Jules Ernst](https://200ok.nl) made an overview of WCAG success criteria and which Polypane feature can help with each success criterion, find it on his site: [Polypane and WCAG](https://www.200ok.nl/tips/polypane-and-wcag/). ## Testing workspaces Accessibility expert [Ian Lloyd](https://a11y-tools.com/) published his set of Polypane workspaces, each of which focus on a different aspect of accessibility testing. You can find them on GitHub: [Polypane Accessibility Workspaces](https://github.com/lloydi/PolyPane-Config). --- # Accessibility panel URL: https://polypane.app/docs/accessibility-panel/ --- title: 'Accessibility panel' --- The "Accessibility" tab in the Info [panel](https://polypane.app/docs/intro-to-panel/) checks your site for accessibility issues. Checking a site is a relatively heavy operation so Polypane does not run a check automatically. Start it by clicking the 'Analyse page for accessibility issues'. You can choose to include best practices or not. While these are not outright failures, they can impact the accessibility of your site regardless. Polypane will show a list of issues ordered by severity and highlight any matching WCAG criteria and the version of WCAG they're from: either they are in all WCAG 2 versions (2.0, 2.1 and 2.2) and are marked as "WCAG 2". If they're introduced in WCAG 2.1 or 2.2 they are marked as "WCAG 2.1 and up" or "WCAG 2.2". > Practically, the tests in the accessibility panel conform to WCAG 2.2. The only reason that we show SCs as being part of earlier versions is to help auditors that (for whatever reason) need to test against these older versions. When you hover over the element's HTML content, the element will be scrolled to and highlighted in all panes. Clicking the 'inspect element' icon will show the element in the [elements panel](https://polypane.app/docs/elements-panel/) so you can quickly debug the issue, then run the accessibility check again (with the reload button in the panel) to check you've solved the issue. Open up the details to select and copy the entire issue to your clipboard. > Polypane is filled with accessibility features. We wrote a full overview on our blog: [Find and fix accessibility issues with Polypane](https://polypane.app/blog/find-and-fix-accessibility-issues-with-polypane/). ### Lighthouse/web.dev score The validators used by the Accessibility panel are the same as the ones that power Lighthouse and the web.dev measure score, so a good score in the accessibility panel means a good score in Lighthouse and on web.dev. ### Video preview: ### Other Accessibility features Polypane has many more accessibility features, such as: - [Outline panel](https://polypane.app/docs/outline-panel/) to show heading, landmark, image link structures, focus order and full accessibility tree - [Debug tools](https://polypane.app/docs/debug-tools/) to inspect ARIA attributes, color contrast, target sizes, simulate different color vision deficiencies and more - [Emulation settings](https://polypane.app/docs/emulation/) to emulate reduced motion, forced-colors, prefers-contrast and more - [Color picker](https://polypane.app/docs/color-picker/) to check color contrast across your site and device. --- # Application folder URL: https://polypane.app/docs/application-folder/ --- title: 'Application folder' --- Polypane stores all of its settings in the Application folder. This includes settings, cache, logs and more. Settings are stored as plain text json files and can be edited manually if needed, though they are only read on startup. ### Folder location The folder location depends on your operating system: - Windows: `%APPDATA%/Polypane/` - macOS: `~/Library/Application Support/Polypane/` - Linux: `~/.config/Polypane/` If you delete files in this folder you will lose your settings, so beware. If you want to reset Polypane to its default settings, Go to the "help" menu and select "Delete settings and restart". --- # Brand guidelines URL: https://polypane.app/docs/brand-guidelines/ --- title: 'Brand guidelines' --- The following guidelines will help you use our brand and assets, including our logo, content and trademarks. Contact us for any questions regarding the use of our brand and assets not covered by these guidelines. ## Polypane The Polypane trademark is a combination of the Polypane icon and the word Polypane. Do not modify the trademarks or use them in a confusing way, including suggesting sponsorship or endorsement by Polypane, or in a way that confuses Polypane with another brand (including your own). The logo can be used on light and dark surfaces. On light surfaces, the text contains a gradient. On dark surfaces the text may be changed to white to improve readability. The icon, along with other properties like proportions, distances, colors, elements, typefaces and visual effects should never be changed. ### Icon The Polypane icon can be used to refer to the application itself. Whenever referencing Polypane the company use the logo instead. The icon, and the icons below, should not be altered in any way, including its proportions, colors, elements or visual effects. #### Monochrome icon The monochrome icon can be used in places where many colors are undesirable, for example in stylised lists or in duotone contexts. The monochrome icon should only be used to refer to the application itself. #### macOS Icon The macOS icon is adapted to fit in with the macOS design language. It is used in the macOS dock and in the macOS menu bar. The macOS icon can be used to refer to the macOS application only. ### Polypane Symbol The Polypane symbol can be used in places where the full logo or icons are too detailed, for example in UIs. The symbol should only be used to refer to the application. The polypane symbol should be used in white, black, grey or, when using a color, `#007aa3`. The symbol should not be altered in any way, including proportions, colors, elements or visual effects. The maximum size where the symbol can be used is 20 by 20 pixels. Beyond that, switch over to the icon. ## Polypane spelling The correct way to spell Polypane is "Polypane". The following are incorrect: - polypane - PolyPane - Poly pane - Polyplane - Poly plane When referring to the application itself, for example in a sentence, use "Polypane", "Polypane app" or "Polypane browser". When referring to the company, use "Polypane". When using the application name in installation instructions, for example for terminal commands, use `polypane` without capitalization. ## General Information By using the Polypane trademark you agree to the guidelines as well as our [terms of service](https://polypane.app/legal/). Polypane reserves the right to modify or change the permission in these guidelines at any time. For further information about use of the Polypane name and trademarks, please contact [support](https://polypane.app/support/). ## Usage You may use the Polypane marks for the following: - describe the product and company - describe compatibility or integration with Polypane - describe truthfully that you are a customer and are using Polypane All other uses of the Polypane marks require explicit written permission from Polypane. Please contact [support](https://polypane.app/support/) for more information. ## Misuse The following are (non-exhaustive) examples of misuse of the Polypane trademark: - Do not use the Polypane logo without the icon. - Do not use the Polypane logo in a way that suggests sponsorship or endorsement by Polypane. - Do not use marks, logos, company names, slogans, domain names, or designs that are confusingly similar to any Polypane marks. - Do not use the Polypane logo in a way that confuses Polypane with another brand (including your own). - Do not use the Polypane logo in a way that suggests Polypane is a part of your brand, service or product, or that your brand, service or product is a part of Polypane. - Do not use the Polypane mark in a false or misleading way. - Do not use the Polypane mark in connection with any harmful, obscene, scandalous or other objectionable materials. --- # Breakpoints URL: https://polypane.app/docs/breakpoints/ --- title: 'Breakpoints' --- Polypane automatically detects width-based CSS media query breakpoints defined in your CSS. The number of unique breakpoints is shown in the header in the horizontal and vertical layouts, and you can create panes for each breakpoint by clicking the breakpoints button in the top right of the screen, or by pressing `cmd/ctrl b`: The created panes are ordered ascending by width (smallest first), and the height will be generated based on the width, with portrait layouts for mobile sizes and landscape for desktop sizes. When Polypane detects that there is CSS that is applied to sizes wider than the widest breakpoint, or narrower than the narrowest breakpoints, it will create a pane for that as well so you get the full overview of your styling. ## Simplified breakpoints When debugging a site, it's not always needed to show all the individual breakpoints, as they can be very close together. If you still want to get a good overview of your site, but don't want to add dozens of individual breakpoints, you can let Polypane create simplified breakpoints. To get a simplified overview of all your breakpoints, right click on the breakpoints icon and click "Simplified". That will look at all the breakpoints you use, split them into five different buckets and create a pane of the average of each bucket. This way you still get a great overview of the range of breakpoints for your size, without adding many breakpoints. ## Breakpoint Edges Breakpoint Edges help you find edge cases by creating panes for the breakpoint and the size right below or above it (depending on the media feature using min-width or max-width). This helps you find cases you didn't anticipate for. ## List of breakpoints Right clicking on the breakpoints button in the header also shows all the breakpoints found in the page (unless there are too many to display). Clicking on any will append a new pane with those breakpoint dimensions, and you can use the overview to detect breakpoints that could be combined to reduce your CSS complexity. ## Appending instead of replacing breakpoints By default, the breakpoints and simplified breakpoints options will replace the current set of panes. Right click the button for options to append them to the panes currently visible. --- # Browse URL: https://polypane.app/docs/browse/ --- title: 'Browse' --- The Browse tab in the [panel](https://polypane.app/docs/intro-to-panel/) contains a fully featured web browser that you can use to search, look at reference material or use handoff tools. ## Tabs The browse panel has two types of tabs: regular tabs, which are available to your current main Polypane tab, and pinned tabs, which are available everywhere. All tabs in the browse panel are kept in memory, so you can quickly switch between them. When you switch between projects in Polypane, the tabs in the browse panel will be updated to reflect the tabs you had open in that project. This means that you can keep reference material open in the browse panel. If you want to always keep a tab open in the browse panel, you can pin it. Both pinned tabs and regular tabs can be reordered by dragging them, though pinned tabs are always shown first. ### Pinned tabs Pinned tabs are show regardless of which tab in the main browser your have selected so you can keep reference material you always need opened in them for quick access regardless of which project you're working on. To pin a tab or unpin a tab, you can click the pin button in the address bar, or right click the tab and select "Pin tab"/"Unpin tab". Only unpinned tabs can be closed. ## Search The address bar in the browse panel acts like an omnibar, which means that if you type in a search query it will search for that query in the default search engine. Click the search icon in the address bar to quickly open your default search engine. Search queries also work in the main address bar in Polypane, but open in the browse panel. ### Configuring search Right-click the search icon in the address bar to open the search selector. Here you can change the default search engine (shown with a checkmark). Click "Manage search engines" to open the search engine manager, where you can add, edit and remove search engines. In the Search engine manager you can check or uncheck the default search engines that we have support for: Google, DuckDuckGo, MDN, MDN.io, Bing, Startpage, Yahoo, Yandex, You, Qwant, Ecosia and Baidu. This is synced between the browse panel and the main address bar. ### Quick search Regular search queries are done in your default selected search engine, but by prefixing your search query with the first couple of letters of the search engine you can quickly search in a different search engine. For example, to search in DuckDuckGo, type `d` followed by your search query, or `you` to search You.com. Only search engines you've marked as "active" in the search engine manager can be used this way. ## Homepage You can open the homepage in any current tab by clicking the home icon in the address bar. The default homepage has quicklinks to Polypane documentation, and it's what's shown when you open new tabs. To set a different new tab/homepage, right-click the home icon and select either the current page as a homepage, or fill in your own URL. To go back to the default homepage, click "reset to default". ## Browser Extensions Just like in Panes, [browser extensions](https://polypane.app/docs/browser-extensions/) also work in the browse panel (with the same caveats). When browser extensions are active for the current tab, the puzzle piece icon will show in the address bar. ### Installing browser extensions You can easily install browser extensions from the Browse panel. An "Add" button will show in the address bar when you're on the chrome web store installation page. Clicking that button will install the extension. If the extension is already installed, the browse panel shows a remove button instead. ## Quick-open the Browse panel With the shortcut you can quickly open the browse tab and focus the address bar. Right click any link in your panes and select "Open link in panel" to open the side browser and display that url. ## Logging in with the Browse panel As mentioned on the [website issues you could encounter](https://polypane.app/docs/website-issues-you-could-encounter/) page, the Browse panel can be used to log in to sites that use SSO, oAuth, CSRF or federated logins that might not work well with multiple simultaneous login attemps. In the Browse panel the login flow is only called once and because the session is shared with the panes, once you're logged in using the Browse panel you should be logged in in all panes. ## Browser history The browse panel keeps the history of each tab for the duration of your session. You can use the back and forward buttons in the address bar to navigate through the history of the current tab. In a future version, history will be preserved between app restarts. --- # Browser extensions URL: https://polypane.app/docs/browser-extensions/ --- title: Browser extensions beta: true --- Polypane has support for Chromium developer tools extensions as well as limited support for regular Chromium browser extensions. In the Polypane address bar you will find a puzzle piece icon, similar to Chrome. Click this to toggle the visibility of the browser extension list, or right-click it to open the extension manager. _When you have no extensions installed, the icon will default to opening the extension manager._ ## Before you start There's a few things to keep in mind when using browser extensions in Polypane: - **Beta:** Polypane's support of regular browser extensions is currently experimental and has limitations outlined below. - **Polypane is filled with features and tools to help you build better web pages.** Extensions you reach for in other browsers aren't needed in Polypane. - We recommend **trying out Polypane's native features** first, as they are designed to work well together and are optimized for web development. ### Limitations Polypane is built on Electron, which has limited support for the Chrome Extension API. This means not all extensions will work. Known limitations include: - Extensions using the "sync" storage API will fail silently - Extensions using the WebRequest API do not have access beyond the currently loaded page. - We rewrite some extension access requirements to work with Polypane - Polypane doesn't support extensions that overwrite your new tab page, use the sidebar API or use the Commands API (e.g. keyboard shortcuts). If an extension doesn't work and you think it should, [let us know](https://polypane.app/support/). ## Supported extensions The extensions below at the time of testing worked with Polypane: - 1Password - Bitwarden - Grammarly - KeePassXC-Browser - LastPass - Linguix - Lorem Ipsum Generator - Mate Translate - Simple Translate - VisBug - WAVE - Web Developer We also support a large number of developer tool extensions: - Angular DevTools - Angular State Inspector - Alpinejs devtools - Apollo Client Developer Tools - Atomic CSS Devtools - ARC toolkit - Backbone Debugger - Clockwork - CSS Stacking Context - Ember Inspector - Gimli Tailwind CSS - Gimli Bootstrap - Meteor DevTools - React Developer Tools - Redux DevTools - Svelte Developer Tools - Scroll-Driven Animations Debugger If you use a particular extension not listed here, please [let us know](https://polypane.app/support/) and we'll add it. ### 1Password desktop app integration You can integrate the 1Password browser extension with the 1Password desktop app on MacOS and Linux, allowing you to log in with a passkey through the desktop app and automatically unlock the browser extension. Follow the steps here: [1Password setup instructions](https://polypane.app/docs/1-password-setup-instructions/). ### Extensions work on a single pane at a time Chromium extensions only work for a single pane at the same time, so a puzzle piece is shown in front of a pane title to indicate which pane is currently the extension target. Interacting with any pane will make that pane the target and the puzzle piece icon will become visible there. ## Install extensions You can install Chromium extensions (addons) in Polypane by navigating to their URL in the browse panel. ### Browse panel When you open a Chrome web store link in [the browse panel](https://polypane.app/docs/browse/), Polypane will automatically show an "add" or "remove" button in the address bar, from which you can quickly add or remove the extension. After adding the extensions is available immediately. More information on installing extensions in the browse panel can be found in [Installing browser extensions](https://polypane.app/docs/browse/#installing-browser-extensions). ### Extension manager The extension manager shows you which extensions you have installed, and allows you to manage them. You can open it by clicking the "Extensions" icon in the header, or by going to the "Edit" main menu, then "configurators", then "Browser extensions". You can remove and update devtools extensions via this manager. ### Troubleshooting extensions Some extensions might prevent Polypane from launching correctly or cause it to crash. If you can't uninstall these extensions though the manager, the extension can be removed manually by following the next steps: First, close Polypane fully. Then open the following directory: - On Windows: `%APPDATA%/Polypane/` - On macOS: `~/Library/Application Support/Polypane/` - On Linux: `~/.config/Polypane/` Find the folder "Extensions". This folder contains all the extensions you have installed in Polypane, each in its own subfolder named after the extension's ID. You can find the ID of an extension by going to the extension's page in the Chrome Web Store and looking at the URL, which ends with a string of characters (the ID). Delete the folder with the ID of the extension you want to remove, and then restart Polypane. --- # Browser features URL: https://polypane.app/docs/browser-features/ --- title: 'Browser features' --- Polypane is meant as a tool to help you develop your own web pages, but it also includes many of the "regular" browser features for convenience, like history, suggestions, tabs, permission support and more. ### History and suggestions Polypane keeps a history and will show suggestions in the address bar based on that history. Right click the navigation buttons to get an overview of previous pages. Middle click (or + click) any URL in the list to open it in a new tab. When typing in the address bar, Polypane will match each fragment in the title and url so if you only remember parts of a title or URL, you can enter those space separated and use that to find the right URL. Middle click (or + click) any URL to open it in a new tab. Pressing `Esc` while in the address bar will revert to the current URL. You can clear the history by going to the Edit menu, then "Clear stored data" and selecting "Clear History". ### Searching from the address bar If the filled in value of the address bar can't be resolved to a URL, then Polypane will open a search in the default search engine. You can change the default search engine by going to the app level settings in the top right of the app and switching to the "search" tab. From there you can also manage search engines. You can quick search with a specific search engine by prefixing your search with the first or first few letters of a search engine's name. For example, to search on DuckDuckGo, type `d` followed by your search term. To search on Google, type `g` followed by your search term. This works for all search engines you've marked as 'active'. ### Adding, editing and removing search engines When managing search engines, you can add search engines with the form. Polypane needs a name, search URL (which we append the search query to), the homepage URL and a favicon URL (which we show in the search selector). You can use the same form to edit any of the existing search engines, for example to switch Google Search to your preferred language. If you do not want specific search engines in this list you can opt to delete them. Lastly, the Reset button in the top right resets the search engines to the default list. ### Opening web pages Like other browsers, web pages can be visited by typing or copying their address into the address bar. Polypane also supports opening URLs and files in a number of different ways. 1. You can start Polypane with a URL as the first argument to open that url: `$ polypane https://example.com`. Or on MacOs you can use `$ open https://example.com -a "Polypane"`. [more about the CLI options](https://polypane.app/docs/command-line-options/) 2. You can drag URLs from other browsers, or HTML files from disk into Polypane to open them. Polypane is also associated with HTML and HTM files as a viewer, so you will find it in the "open with..." menu on right click. 3. Lastly, Polypane registers as a HTML viewer on operating systems, so will automatically come up in lists of browsers provided by the OS, and you can even set it as your default browser. If you're coming from another browser, the easiest way is to use the browser extension for Chrome, Edge and Firefox. Get them on the [Downloads page](https://polypane.app/download/). ### Tabs Interacting with tabs work like you expect in other browsers. Middle clicking or + clicking a link will open it in a new tab, and links with `target="_blank"` will similarly open in a new tab. Alternatively, you can right-click links to open them in the Browse panel. Right click a tab to duplicate or close it, open the link in a new tab, open the link in the browse panel or copy the link as text or as a Markdown link. From this context menu you can also close all other tabs, close all tabs to the right or left of the current tab or duplicate the tab with a different layout. Click and drag tabs in the tab bar to re-order them. You can right-click the + button in the tab bar to select the [layout](https://polypane.app/docs/layouts/) to use. This choice is automatically remembered for new tabs. To quickly close a tab, middle-mouse click on it. You can also middle-mouse click the tab bar to open a new tab. Double clicking on the tab bar will maximize or unmaximize the application. #### Memory usage of tabs All tabs in Polypane remain active which means you can quickly end up using a lot of memory. Each pane in Polypane has toughly the same memory requirements as a tab in a regular browser so if you have a tab with 4 panes, that's roughly the same as having 4 tabs open in a regular browser. Instead of opening a new tab to search or look up documentation, you can use the [Browse panel](https://polypane.app/docs/browse/) to keep the page you're working on visible while looking up something #### Sleeping tabs Tabs you don't need often can be set to sleep when inactive, which will free up memory. You can set a tab to sleep by right-clicking it and selecting "Sleep when inactive". When you focus the tab again, it will wake up and reload the page. ### Customizing your new tab setup (changing your "homepage") By default, the new tab will show three panes with the getting started page shown in them, with a closed panel that opens on the right. But you can edit this by configuring your current tab the way you like, and then go to the Polypane (on Mac) or "File" (Window and Linux) menu and click "Set Current Tab as Default new Tab". The new tab will keep all panes, overlays, the current url, panel and other settings, so you can configure it just the way you like it. Alternatively, you can [set a workspace as homepage](https://polypane.app/docs/workspaces/#set-a-new-default-workspace). ### Basic Auth Polypane supports websites that have HTTP Basic Auth or Digest Auth configured and will show a login popup when the server responds with a basic auth requirement. When you fill in the login details for these sites, they will be remembered for the duration of your session. If you want Polypane to remember them permanently, check the "remember this" checkmark. They will be remembered for a specific URL. The username and password will be encrypted and stored only on your computer. To remove them, go to the Edit menu, "Clear Stored Data" and then select "Clear Saved Auths". > _Note that Basic Auth is a very simple protocol. If you change the password on your server but don't handle faulty login cases, it will look as if Polypane > isn't able to log in. If that's the case, make sure to clear saved auths and try again._ ### Invalid or self signed certificates For localhost, Polypane will silently allow self-signed certificates. On any other domain or for any other certificate error (like expired or the wrong host) Polypane will show a dialog showing you the url and the error and ask you if it should still open the page. It will do this once per certificate per session. #### Self-signed certificates without using localhost Some servers, like WPEngine, use self-signed certificates on a ".local" TLD for resources generated by Wordpress in your headless site. For Polypane to allow loading resources from these URLs, you need to add the certificate to your operating system. Follow our guide for that here: [WPEngine's Local Development Tool](https://polypane.app/docs/other-tools/#wpengines-local-development-tool). ### Disable Content-Security-Policy (CSP) To disable CSP, go to the Edit menu and select 'Disable Content-Security-Policy'. CSP settings on some sites prevent Polypane from injecting scripts needed for different features. When Polypane detects CSP issues it will show you a popup explaining the issue, and you can turn off CSP from there. You should only disable CSP if you know what you're doing, as it does have security implications. ### Allow CORS headers (cross-origin resource sharing) To allow CORS headers, go to the Edit menu and select 'Allow CORS (Access-Control-Allow-Origin)'. With this feature turned on cross-origin restrictions no longer apply, which could be required for your local development setup when using external APIs with restrictive access controls. It is a safer alternative to disabling web security. ### Disable Web Security To disable web security, go to the Edit menu and select 'Disable Web Security'. With this feature turned on cross-origin restrictions no longer apply, which could be required for your local development setup. When possible we urge you **not to use this feature** as disabling web security can have various unintended consequences. Instead of depending on disabled security measure to allow interation with e.g. a production backend, we urge you to look for better solutions like using a proxy or a staging server, but the feature is there for when there is no other choice. When web security is disabled, Polypane will show a shield icon in the address bar. ### Permission requests Polypane supports permission requests, like those for location or media access. When a permission is requested, Polypane shows a popup that will let you accept or reject the permission request, and to optionally remember the choice for this url. To clear saved permissions, select "Clear saved permissions" under "Clear saved data" in the Edit menu. #### (geo)location API To use the location API, you need to add a Google API key with the right permissions. To do this, add a text file called `google-api-key` (no extension) in the following folder: - Windows: `%APPDATA%/Polypane/` - macOS: `~/Library/Application Support/Polypane/` - Linux: `~/.config/Polypane/` In the file, add your API key with quotes like so: ```json "YOUR_KEY_HERE" ``` Any geolocation permission requests made without a Google API key available can only be disallowed or dismissed. #### Motion sensors permission When you use Polypane, you might notice that it asks for permission to use "motion sensors" while Google Chrome does not. That's because Chrome allows access to this sensor by default and won't show a permission request for it. In Polypane, we show popups for all permission requests. ### Muting sounds Polypane will allow sound in all panes by default. You can mute all panes or limit sound to just the first pane. To do so open the global settings (the top right button in the header) and select your prefered option under "mute". ### Change the color notation The default color notation in [Polypane Peek](https://polypane.app/docs/polypane-peek/) and the [Elements panel](https://polypane.app/docs/elements-panel/#color-notation/) is `rgb`, but you can change it to `hex`, `hsl` or `hwb` in the global settings (the top right button in the header) and select your prefered option under "mute". ### Search/find text in page lets you search the page across all panes. All occurences of your search term are highlighted in yellow with the current matched search term in orange. You can also see where on the page matches are found in the scrollbar. The buttons to the right of the input field let you search backward, search forward and toggle case sensitivity, respectively. While using search focus is locked into the UI so tabbing loops back. Pressing or the close button clears the UI and search and you can use / to cycle through all matching occurences. You can also [find elements with CSS Selectors](https://polypane.app/docs/find-elements/). ### Zoom pages in and out Page zooming is an important part of Accessibility audits, for various WCAG success criteria your page needs to be able to zoom to 200% or to 400%. In Polypane you can zoom pages with , or with the "Zoom web pages" option in the View menu. After zooming a page a magnifier with either a plus or minus will be visible in the address bar, and clicking that opens a UI that lets you zoom in, out or reset back to 100% again. Due to the way Chromium work internally the zoom is set per origin, so zooming happens in all panes and is remembered when you next visit the same website. Additionally, zoom is not applied to panes that have [mobile rendering emulation](https://polypane.app/docs/emulation/). ## Copy link to highlight Right-click selected text in any pane and then select "Copy link to highlight" to copy a link that points to the selected text. This link will work in Polypane and other browsers, and will scroll to the selected text when opened. ## Managing the UI You can tweak various aspects of the UI with the following settings: ### Hiding the header To make the most of the available space on your screen, you can choose to hide the header using , or by going to the "View" menu and selecting "Toggle Header". On macOS, this will also hide the traffic lights. ### Changing the text size of the UI If the font in the UI is too small you can zoom the text size in and out by going to the "View" menu and selecting "Adjust Text Size". This will show a popup that lets you resize the text through a slider or by changing the percentage value manually or by using the arrow keys (like other number inputs, holding // will increment or decrement by 10/100/0.1 respectively). By default the text in the entire UI will be changed, but you can also choose to set the panel text size separately. Click "reset" to revert back to the default font sizes. ## Managing the Cache You can clear the cache or disable it altogether. ### Clearing your cache Polypane adheres to caching rules of websites like other browsers. To clear your cache for a reload, press while clicking the reload button, or press . You can also right-click the reload button and select "Empty cache and reload", or use "Empty cache and reload" in the view menu. ### Disable Cache You can disable the cache in Polypane via the Edit menu using the "Disable cache" menu item. You can choose to set it to off, disabled until you restart Polypane, or disabled permanently. #### Server cache settings The Chromium devtools when open will automatically disable your cache, so if you're used to develop in Chrome with the devtools open you might not have noticed that your server sends cache headers. Polypane doesn't automatically disable cache but instead follows the server settings by default, making it respond more like a regular browser. If you notice caching issues in Polypane, make sure that your development server doesn't send cache headers. ## Set a proxy To use a specific proxy in Polypane, create a file called `proxy-settings.json` in the following folder to be parsed and applied when you launch Polypane. - Windows: `%APPDATA%/Polypane/` - macOS: `~/Library/Application Support/Polypane/` - Linux: `~/.config/Polypane/` Then create a JSON object following the Proxy options: - `mode` _(optional)_ - The proxy mode. Should be one of `direct`, `auto_detect`, `pac_script`, `fixed_servers` or `system`. If it's unspecified, it will be automatically determined based on other specified options. - `direct` In direct mode all connections are created directly, without any proxy involved. - `auto_detect` In auto_detect mode the proxy configuration is determined by a PAC script that can be downloaded at http://wpad/wpad.dat. - `pac_script` In pac_script mode the proxy configuration is determined by a PAC script that is retrieved from the URL specified in the pacScript. This is the default mode if pacScript is specified. - `fixed_servers` In fixed_servers mode the proxy configuration is specified in proxyRules. This is the default mode if proxyRules is specified. - `system` In system mode the proxy configuration is taken from the operating system. Note that the system mode is different from setting no proxy configuration. In the latter case, Electron falls back to the system settings only if no command-line options influence the proxy configuration. - `pacScript` _(optional)_ - The URL associated with the PAC file. - `proxyRules` _(optional)_ - Rules indicating which proxies to use. - `proxyBypassRules` _(optional)_ - Rules indicating which URLs should bypass the proxy settings. For more information about the notation, refer to the [Electron documentation](https://www.electronjs.org/docs/latest/api/session#sessetproxyconfig). ## Disabling overlay scrollbars Polypane uses overlay scrollbars throughout the app, which disappear when they're not in use. To disable this, create a file called `polypane-disable-overlay-scrollbars` with the content "true" in the following folder to be parsed and applied when you launch Polypane. - Windows: `%APPDATA%/Polypane/` - macOS: `~/Library/Application Support/Polypane/` - Linux: `~/.config/Polypane/` ## Understanding the mental model Polypane shows your pages in multiple panes at the same time, and this has implications in how it responds as a browsers. To learn more about that, read our docs on the [mental model of Polypane's browser contexts](https://polypane.app/docs/mental-model/). --- # Browsersync and Polypane URL: https://polypane.app/docs/browsersync-and-polypane/ --- title: 'Browsersync and Polypane' --- Browsersync is a development tool that lets you keep multiple browsers showing your URL in sync. Polypane offers that functionality natively, making it faster to use without any additional scripting or configuration. To prevent both systems from interfering with each other, Polypane will automatically turn off some of its syncing features when it detects Browsersync. However, we advice you to turn off Browsersync's ghost mode and use Polypane's native syncing features instead. ## Browsersync Ghost mode The features Polypane turns off are the ones that Browsersync calls "ghost mode". These are: - Clicks - Form inputs - Scroll Polypane detects which of these are turned on in Browsersync and will automatically turn them off in Polypane. We do this because Browsersync is slightly slower than Polypane's syncing, and so it continuously undoes the syncing Polypane did, leading to a very frustrating experience. Polypane's other syncing options like hovering and focus have no equivalent in Browsersync and will still be managed by Polypane. We advice you however to set `ghostMode: false` in your Browsersync configuration. This will let you use Polypane's native syncing features, which are faster than the ones in Browsersync. ## Migrating from Browsersync to Polypane. If you're already using Browsersync, you can easily migrate to Polypane. Polypane has native support for the syncing options as well as the live reloading options. Everything you do in Polypane in synced between the panes, similar to how Browsersync syncs clicks, navigation and form input through the ghostMode setting. In Polypane however, we also sync the hover state of elements. You're really interacting with all panes at the same time. Like Browsersync, Polypane's [Live reloading](https://polypane.app/docs/live-auto-reloading/) can automatically detect changes to your files and reload the site for you. When Polypane detects changes in the CSS or to images, we automatically inject them without reloading the page. With [Polypane Portal](https://polypane.app/docs/portal/) you can even sync across different browsers and even devices while keeping them all in sync with Polypane. ### 1. Turn off Browsersync If you run Browsersync with a separate command or as part of a combined command, comment it out. Then make sure you don't use the proxied URL in Polypane (likely `localhost:3000`) but the actual dev server (ports differ per implementation). ### 2. Using Polypane's built-in features To replace Browsersyncs functionality with the native features in Polypane, you need to do the following: #### Interaction syncing Already happens automatically, so you don't need to do anything! [More on synced interactions](https://polypane.app/docs/synced-interactions/). If you previously used ghost mode, you might have to turn the syncing options back on for the current tab. #### live reloading Right-click the reload button and select "live reload". From here you can select your projects folder and click "start watching" Polypane's live reloading automatically ignores common caching and configuration folders, so you won't have to write and maintain complex configurations. If you have a build process (for example, when using SASS) you can add an optional delay to make sure the new CSS has been fully written to disk. Polypane then shows a little lightning bolt ( ) next to the reload button and in the tab so you know it's active. Any time you switch to that tab, or restart Polypane, live reloading will also activate again. [More on live reloading](https://polypane.app/docs/live-auto-reloading/). ## Want to keep Browsersync? With our Ghost mode adaption (explained at the top of the page), you can keep using Browsersync and Polypane at the same time. You can even run the Browsersync Admin UI in the [Browse panel](https://polypane.app/docs/browse/). To launch Polypane when you start Browsersync, add `--browser 'polypane'` to your CLI command. (Depending on your operating system you might need to provide the full path). Polypane will then automatically start with the right URL whenever you launch Browsersync. --- # Color Picker URL: https://polypane.app/docs/color-picker/ --- title: 'Color Picker' slug: 'color-picker' --- The color picker eye dropper lets you pick colors from anywhere on the screen, and it's available right from the address bar by clicking the eye dropper icon. After picking a color, it will automatically be copied to your clipboard and added to the list of selected colors, available in the elements panel and other color selectors in Polypane. You can also start the eye dropper with to pick a color. While in eye dropper mode, press to cancel. ## Video overview ## Color Picker UI After having selected a color the Color Picker UI will open. You can also open this by right-clicking the icon in the menu bar. The top row contains a separate eye dropper button, an element selection button, a color palette button, a screenshot button and three dropdowns: - Choose between AA and AAA minimum contrast levels, or the new APCA algorithm. - Choose to test for small text, large text or non-text contrast. - Select the color notation you want: hex, rgb, hsl or hwb. With the eye dropper button you can pick a color from anywhere on the screen. The element button lets you select any element from inside your panes and it will find the text and background colors for you. The palette button opens up a traditional color picker along with tints and shades for the currently picked color and an overview of previously picked colors. The screenshot icon creates [a screenshot of the swatch](https://polypane.app#swatch-screenshots) that you can use to share with your team or add to reports. Picking colors will always update the selected (foreground) color and push the previous selected color to the background color. You can also click the pickers inside the swatches to pick a color for that swatch specifically without affecting the other swatch. ### Element picker The element picker lets you select any element in your panes and will load in the calculated foreground and background colors for that element (taking into account things like opacity and layered backgrounds). This is useful when you want to check the contrast of a specific element on a page. Color overlay example ### Selected color and background Below the top bar are two large color swatches: your most recently selected color and the background to check it against (by default the previously picked color). The background swatch will show the text in the selected color on top of it for you to compare, in a font size that matches the "small" or "large" text chosen. Click on these swatches to copy their color. ### Suggests improved colors Below the two swatches we show the contrast along with whether or not it passes the WCAG AA or AAA score for the selected text size. When a color does not have enough contrast with the chosen background color we'll show a small square in the swatch with the closest color that does have enough contrast (using the same algorithm we use in our color contrast debug tool). Clicking it will update your selected color. Right-click the swatch to copy the color value, or to copy the full suggestion as a sentence, which contains the color values and the suggested color value. ### Previously selected colors Below that we show an overview of the 9 last selected colors. The contrast of each color is scored against the currently selected background color. Click a color to copy it, click the "Aa" icon to set this color as the selected color or the background icon to set it as the background color to compare other colors to. These colors are also available in the color selector in the [elements panel](https://polypane.app/docs/elements-panel/). ### Swatch screenshots The swatch screenshot can be used to share color combinations along with their contrast score. It will contain the color in the format you have selected, along with the suggested color. These are ready to be shared with your team in tickets, or can be pasted into auditing reports. The file name is a suggestion for the alt text. ## Color palette picker The color palette picker is the same color picker that you can find in the [elements panel](https://polypane.app/docs/elements-panel/). It lets you pick a color using a traditional color picker, along with tints and shades for the currently picked color. Color overlay example The color picker will show three lines depending on what contrast ratios limits you have chosen: AA, AAA or APCA - AA and AAA: lines are for 3:1, 4.5:1 and 7:1 - APCA: lines are for Lc 45, Lc 60 and Lc 75 The line that is highlighted is the one you should meet for the settings you have picked in the color picker UI: AA, AAA or APCA contrast for small, large or non-text. --- # Command Bar URL: https://polypane.app/docs/command-bar/ --- title: 'Command Bar' --- The Command bar in Polypane lets you control all parts of the application through a keyboard interface. Bring it up with then start typing the action you want to execute. Actions are grouped in specific categories like 'navigation' and 'current tab' so it's clear what they apply to. You can also use the command bar to quickly look up the shortcuts of the various available actions, as each action displays the associated shortcut. ### Command bar tools Beyond the existing browser functionality, the command bar also exposes some extra features in the "Tools" category #### Lorem ipsum Quickly copy a couple of sentences of Lorem ipsum to the clipboard. By default three sentences are copied, but you can append the command with a number to change that #### uuid Generates and copies a `uuid` to clipboard. #### ip Copies your internal IP (the one used by your device in the local network) to the clipboard. #### Confetti Shoots confetti. We all need a little fun sometimes. --- # Command line options URL: https://polypane.app/docs/command-line-options/ --- title: 'Command line options' --- Polypane has a few command line options. On Linux polypane will be available in your path after installation, so just `polypane` will work. On Windows and on Mac you need the full path: - Windows: `C:\Program Files\Polypane\Polypane.exe` - macOS: `/Applications/Polypane.app/Contents/MacOS/Polypane` For simplicity, we will use `polypane` in the examples below. ### Opening URLS You can start Polypane with a URL as the first argument to open that url: ```sh $ polypane https://example.com ``` On macOS you can use: ```sh $ open https://example.com -a "Polypane" ``` _Note that in this case you don't need the full path on macOS. That is needed if you want to use any flags._ ### Reload To reload the currently active tab, call Polypane with the `--reload` flag: ```sh $ polypane --reload ``` This will focus the Polypane window as well. If Polypane is not open yet, it will just launch Polypane ### Prevent focus You can start Polypane with `-g` to prevent it from focusing on launch. ```sh $ polypane -g ``` Combine this with `--reload` to reload the currently active tab without also focusing Polypane. ```sh $ polypane -g --reload ``` Use this to hook into your own live reload workflow. ### Remote debugging You can start Polypane with `--remote-debugging-port` to enable remote debugging. This will open a port that you can connect to with Chrome Devtools or IDEs that support remote debugging, like VSCode and WebStorm. ```sh $ polypane --remote-debugging-port=9222 ``` Learn how to set up WebStorm here: [Configuring WebStorm to work with Polypane](https://polypane.app/docs/configuring-web-storm-to-work-with-polypane/). _Some tools might create a new user directory when starting a remote debugging session. This is currently not supported by Polypane._ ### Looking for more command line options? [Let us know](https://polypane.app/support/) your ideas and we'll see if we can add them in! --- # Configuring Logitech mouses URL: https://polypane.app/docs/configuring-logitech-mouses/ --- title: 'Configuring Logitech mouses' --- Logitech mouses like the MX master series have dedicated buttons for forward and back. On Linux these buttons are automatically recognized by Polypane and can be used to navigate through the history but on macOS and Windows they need to be configured. ## Step 1: install Logi Options+ If you haven't yet, install [Logi Options+](https://www.logitech.com/en-us/software/logi-options-plus.html) from the Logitech website. ## Step 2: configuring your mouse With the Logi Options+ app open, select your mouse, then click the Plus button at the top of the app: Scroll down the list of apps until you find "Polypane". Check the box next to it and click "Confirm". Now you'll see the Polypane icon in the list of icons at the top of the screen and we can configure the buttons. Start by clicking the button that says "Forward". In the sidebar pick "Keyboard shortcut", then click into the shortcut field and press . Do the same for the "Back" button, and now set the keyboard shortcut to . Now you can use the forward and back buttons on your mouse to navigate through the history in Polypane. If you want to change these settings for Polypane, click the Polypane icon in the top icon bar. --- # Configuring WebStorm to work with Polypane URL: https://polypane.app/docs/configuring-webstorm-to-work-with-polypane/ --- title: 'Configuring WebStorm to work with Polypane' --- You can configure WebStorm to open Polypane when starting a debug session or as a live reload target. This allows you to debug your code in WebStorm and see the result in Polypane. ## Step 1: Adding Polypane to the list of browsers In WebStorm, go to your Settings > Tools > Web Browsers and previews. Click the + button at the top of the list of browsers to add a new browser. Name it Polypane, set the family to "Google Chrome" and set the path to the Polypane executable. The path differs per OS: - Windows: `C:\Program Files\Polypane\Polypane.exe` - macOS: `/Applications/Polypane.app/Contents/MacOS/Polypane` - Linux: `polypane` If you want it to be used as the default browser, drag it to the top of the list. ## Step 2: Configuring it With Polypane selected in the table, click the Pencil icon above it. This will open the configuration screen. **Check the "Use custom user data directory:" checkbox** and set the path to the user data directory of Polypane. The location of this data directory differs per OS: - Windows: `%APPDATA%/Polypane/` - macOS: `~/Library/Application Support/Polypane/` - Linux: `~/.config/Polypane/` Once selected, press "OK", and close the settings window ## Step 3: Setting up a debug session Right click your (npm/other) dev script in the sidebar and select "Edit [name] Settings...". This will open the configuration: In this configuration panel, click the + below "Before launch" and select "Launch Web Browser". In the browser dropdown select "Polypane" (or use Default if you set Polypane as the default browser in webstorm 1). Fill in the URL your server launches at, for example `https://localhost:3000`. If you want to enable remote debugging, check the "with Javascript debugger" checkbox. ## Step 4: Reconnect JavaScript debugging Once Polypane has started, you might not see your URL yet, and this is because we can't yet retrieve the URL from WebStorm. To remedy this, click the "Rerun '[name]' button in your WebStorm debug console or press in WebStorm and the URL in Polypane will update. You can now debug your code in WebStorm and see the result in Polypane. --- # Console URL: https://polypane.app/docs/console/ --- title: 'Console' --- The Polypane console, available in the Edit [panel](https://polypane.app/docs/intro-to-panel/#edit-tab) and by pressing or (on macOS) is a single console for all visible panes. With it you can read out all console messages and send console commands to all panes at once. ## Top bar In the top bar you can: - Click the left-most icon to clear the current console (or press - Filter the messages (string-based) - Select the levels of log messages (Info, Warning, Error, Navigation, Network and Debug) or go back to the defauls (Info, Warning, Error and Navigation) - Check or uncheck if you want to show [console popups](https://polypane.app#console-popups). - Lastly, you can set if you want to clear the console on page refresh or to preserve the log. ### Default levels Each new tab will get the default levels of Info, Warning, Error and Navigation. Changing the default levels can be done by editing the `polypane-console-settings` file in the [application-folder](https://polypane.app/docs/application-folder/). ## Console messages Console messages from all panes are automatically collected in the Polypane console and deduplicated so you only see each unique console message once, even if the same message is sent in multiple panes. A console message will automaticall show the source location it was sent from and will give different icons and colors for logs, warnings and errors. You can also style console messages with CSS using the %c option. Console messages are automatically deduplicated. You can see which pane(s) sent a message, and how many times the console message was called in the lower right of each message where we show a list of circles. A filled circle means that the message was sent in that pane. Hover over a circle to see the name of the pane. When a console message is called more than once, an additional number is shown in the circle. Polypane currently supports the following: - `console.log` - `console.warning` - `console.error` - `console.dir` - `console.table` - `console.info` - `console.debug` - `console.assert` - `console.time` - `console.timeLog` - `console.timeEnd` - `console.count` - `console.countReset` - `console.image` _(when using a script that provides it)_ When using the above from inside the console writing `console.` in front of them is optional. When "Preserve Log" is on, the console will also show navigation events. With the console panel open, you can press to clear the it. ### Search for errors Errors in the Polypane console get a search icon next to them. Clicking this icon will search for the error in browse panel using the search engine of your choice. ## Table sorting You can click the headers in tables to sort them. Clicking again will reverse the sort order. ### Objects and HTML elements Objects are automatically resolved in the console, have syntax highlighting and can be collaped and inspected. Objects are expanded up to 2 levels deep. HTML elements are displayed with syntax highlighting and hovering over them will highlight them in all panes. Click them to show them in the element panel. ### Caveats The Polypane console does not yet resolve string replacement. HTML elements in objects and arrays are not clickable at the moment. Certain console commands, like `group`, are not available yet. If you need any of this, [let us know](https://polypane.app/support/). ### Network requests With the "network" level turned on (it's off by default) Polypane will also display Fetch and Xhr requests in the console as they are made. Polypane will show the request method, URL and the request and response headers. Where available, Polypane also shows the JSON response or the response text (if it's not too long). This way you don't have to log out the result yourself. Just like other console messages, network requests logs are also deduplicated across panes, so you can quickly see if some panes have different return headers. Network messages are only captured when the 'network' level is checked in the console top bar. Otherwise they are ignored. ### Console Popups With the "popups" option checked, Polypane will show console message popups overlaid on top of the app when the Console panel is closed, so you always see when console messages are happening. The content of the popups is identical to the regular console messages and they are fully interactive. Console popups automatically hide after a few seconds. Hovering them pauses this. Clicking the close button in a popup will close the popup, and holding `shift` when clicking hides all popups. You can also press `Esc` to hide all visible popups. All console messages will remain visible in the Console panel. If you prefer not seeing console popups, uncheck the "popups" checkmark in the Console panel. ## Console commands You can use the Polypane console to send console commands to all panes at once. Polypane automatically applies syntax highlighting and supports multi-line commands. Previous commands are remembered and you can cycle through them with arrow up and down. Return statements are combined where possible, so the return of a function that returns the same value in all panes is only shown once. ### Available commands Like the Chromium devtools, there are specific commands you can use in the Polypane console: **`clear()`** Will clear the current console. **`$()`** Shorthand for `document.querySelector()`. **`$$()`** Shorthand for `document.querySelectorAll()`. **`$x()`** Shorthand for selecting elements using XPATH. **`$_`** Shorthand for the result of the previous command. **`$0`, `$1`, `$2`, `$3` and `$4`** The last 4 selected element in the [Elements panel](https://polypane.app/docs/elements-panel/), with $0 being the most recently selected element. Whenever you select a new element, all elements are moved a spot (so `$0` becomes `$1` and so on) --- # Customizing Polypane URL: https://polypane.app/docs/customizing-polypane/ --- title: 'Customizing Polypane' --- Though Polypane doesn't have a traditional settings panel, there are still plenty of ways to make Polypane your own and configure it in a way that works best for you. While interacting with the interface, Polypane will remember your choices where that makes sense. This guide assumes you've read through the [Intro to Polypane](https://polypane.app/docs/) and [UI Overview](https://polypane.app/docs/ui-overview/) docs. ## Picking your preferred color scheme Polypane comes in both a [dark and light mode](https://polypane.app/docs/dark-and-light-mode/). On first launch of the application we'll automatically match your OS, but if you want to change that you can press to flip from light to dark mode, or the other way around. You can also find "Toggle Dark Mode" in the global View menu. ## Customizing the workspace In the workspace, you can change the layout, the number of panes and whether or not you want to show an explicit "Add pane" button. ### Choosing a Layout The workspace is the central area of Polypane, containing your panes. The first way to customize this is to choose a [layout](https://polypane.app/docs/layouts/): - **Horizontal** shows all panes in a single horizontal row. - **Vertical** shows all panes wrapped to multiple lines. - **Focus mode** shows a single pane (similar to how regular browsers show emulated devices). - **Full mode** is like a regular browser, where the site takes up the full area. To switch between these, click the Layout icon, directly to the right of the address bar. Here you can also see the shortcuts: press for Horizontal, for Vertical, for Focus and (for browser) for Full mode. This lets you quickly switch between them without using your mouse. Small tip: if you have a pane focused, first press to clear that focus before using a shortcut. ### Customizing the set of panes The easiest ways to [add a new pane](https://polypane.app/docs/pane-management/#adding-and-removing-panes) are to double click anywhere between panes that you want to add a new one, or to click the button at the end of your list of panes. To [remove a pane](https://polypane.app#adding-and-removing-panes), hover over the [pane header](https://polypane.app/docs/intro-to-panes/#the-pane-header) and an will appear in the top right. Click it to remove the pane. When hovering the header, you'll also see one or two arrows that let you [re-order](https://polypane.app/docs/pane-management/#changing-the-order-of-panes) panes, and a button that will let you [duplicate](https://polypane.app/docs/pane-management/#duplicate-a-pane) a pane with all its configuration. Read more about [managing the number of panes](https://polypane.app/docs/pane-management/) and [changing the size of panes](https://polypane.app/docs/pane-sizes/). #### Hiding the "add pane" button If you don't want to show the add pane button on the workspace at all times, you can hide it by going to the Settings menu in the top right of the application and unchecking "Visible Add Pane Button". ## Customizing the new tab You can fully customize how new tabs appear in Polypane. You can set a default layout, default set of panes or completely overwrite the new tab. ### Picking a default layout To change which layout is used for new tabs, right click the plus button in the tab bar, then pick the layout you want to use for a new pane. From now on that layout will be used for all new tabs. You can see which one it is by looking at the checkmark in this context menu. If you don't want to use multiple panes by default, switch it to focus or full mode and you're good to go. ### Configuring a default set of panes Each [workspace](https://polypane.app/docs/workspace-management/) has a small "home" icon that you can click to replace the default three pane view with for all new tabs. This lets you use your frameworks breakpoints, or a set of workspaces based on your analytics data (or any other workspace!) for all new tabs. ### Setting the current tab as the default new tab To create a fully custom new tab, configure your current tab the way you like with a URL, set of panes, [debug tools](https://polypane.app/docs/debug-tools/) and even the default Panel size and position, and if it automatically opens or not. Then in the File menu select "Set Current Tab as Default New Tab". All new tabs will now look exactly like this one. ## Changing the text size of the UI If you want to [increase or decrease the size of the text in the UI](https://polypane.app/docs/browser-features/#changing-the-text-size-of-the-ui), click "Adjust Text Size..." in the global View menu. You can configure the text size of the entire UI and the text size in the panel separately. ## Picking which devtools to use Polypane comes with [two sets devtools](https://polypane.app/docs/developer-tools/) the Polypane developer tools and the Chromium developer tools. The Polypane developers tools work across all panes at the same time, while the Chromium developer tools can only inspect and edit a single pane at the same time. By default Polypane will use the Polypane developer tools when using the shortcuts, right-clicking to inspect or when using [Polypane Peek](https://polypane.app/docs/polypane-peek/), but if you want to switch over to using the Chromium devtools you can right-click the inspect element icon in the header and selecting "inspect in devtools". From now on, the Chromium devtools will be used instead. ## Customizing the Panel location The [panel](https://polypane.app/docs/intro-to-panel/) is where you can find many of Polypane's inspection and editing tools. By default, it opens on the right-hand side of the window, but you can right-click the panel icon in the header to set it to the bottom or left side, to to detach it into its own window. You can also click the panel icon inside the panel to pick a new side. The layout inside the panel will automatically reflow to fit a horizontal or vertical layout, and for each tab in the panel Polypane automatically remembers which tool is selected. Polypane will remember the selected panel for each tab and reinstate it for you when opening the panel again. ## Configuring pane notifications Polypane can surface information on the state of your panes in the [info bar](https://polypane.app/docs/intro-to-panes/#info-bar) below each pane. Depending on what you're working on, you might want to show or hide this information. ### Console information By default, Polypane will show you the [number of console messages, warnings and errors](https://polypane.app/docs/intro-to-panes/#console-stats) below a pane. This way you can keep track of how noisy the console is for each pane. If you want to hide this information, uncheck "Console Stats per Pane" in the Settings menu in the top right of the application. ### Horizontal overflow badge When Polypane detects a [horizontal overflow issue](https://polypane.app/docs/horizontal-overflow/) in a pane, it will show a warning badge that you can click to turn on [layout debugging](https://polypane.app/docs/layout-debugging/) which will automatically highlight the elements causing the overflow. To hide this button, uncheck "Horizontal Overflow Warnings" in the Settings menu in the top right of the application. ### Web Vitals information Turned off by default, Polypane can collect and [show web vitals information](https://polypane.app/docs/web-vitals/) for each pane and compare that to global CrUX data. To turn this on check "Web Vitals Status" in the Settings menu in the top right of the application. ## Choosing what to sync across panes By default Polypane [syncs the following things](https://polypane.app/docs/synced-interactions/) across all panes: scrolling, hovers, clicks, keypresses, form input and form change events. Additionally, Polypane can keep the focused element in sync between panes. To enable focus syncing, or disable some of the other evens, you can right-click the sync icon in the header and check and uncheck which events you want to keep synced. The above events should properly keep the URL in sync as well, but sometimes they don't, due to different UI's being used at different viewport sizes. As a last resort, Polypane loads the latest URL in all panes and keeps pages in sync this way. ### Showing multiple pages in one overview You can disable navigation sync per pane by clicking the [device options button](https://polypane.app/docs/emulation/#network-emulation) above a pane, going to the "network "tab and toggling the "Sync Navigation" button. This allows you to [show multiple web pages](https://polypane.app/docs/emulation/#sync-navigation) side by side. For comprehensive guidance on working with multiple URLs, including use cases, best practices, and advanced techniques, see [Showing multiple URLs](https://polypane.app/docs/multiple-urls/). ## Common changes There are a few common changes people want to make to better fit their workflow. ### Make Polypane look like a regular browser To make [switching to Polypane](https://polypane.app/docs/switching-to-polypane/) easier you can initially configure it to look like a regular browser by doing the following things: 1. Switch to the [full layout](https://polypane.app/docs/layouts/#full-layout-shortcut-b) 2. Switch from the Polypane devtools to the [Chromium devtools](https://polypane.app#picking-which-devtools-to-use) as the default This will make Polypane look and behave very similar to other browsers, with the devtools you're already used to. From here you can start to explore the other parts of Polypane, like the different [parts of the Panel](https://polypane.app/docs/intro-to-panel/), the various [debug tools](https://polypane.app/docs/debug-tools/) et cetera. ### Starting with your frameworks breakpoints If you develop your sites using a framework like Tailwind, Bootstrap or Chakra, you can configure Polypane to use their breakpoints for your default new tab panes. To do so, load them in the [workspace panel] and click the "home" icon for the one you want to use: Polypane has these frameworks built in in the "Default" workspaces: - **Bootstrap** The default Bootstrap breakpoints - **Material UI** The default (simplified) Material UI breakpoints - **Tailwind CSS** The default Tailwind CSS breakpoints - **Bulma** The default Bulma breakpoints In addition, we have a number of downloadable workspaces available, like Chakra UI, Ionic, UIKit and more in our workspaces documentation: [downloadable workspaces](https://polypane.app/docs/workspaces/#downloadable-workspaces). --- # Dark and light mode URL: https://polypane.app/docs/dark-and-light-mode/ --- title: 'Dark and light mode' --- Polypane has a dark and light interface that you can toggle between using or by selecting "Toggle Dark mode" in the View menu. On macOS Polypane will automatically match your operating system (unless you manually switch). On the other platforms, light mode is the default. --- # Debug tools URL: https://polypane.app/docs/debug-tools/ --- title: 'Debug tools' --- The debug tools available for panes contain a wide range of different features to check the quality of your page and the user experience. This popup contains both debug tools and simulators in two separate tabs. To learn more about the simulators, read the [Simulators documentation](https://polypane.app/docs/simulators/). You can find the debug tools for each pane by clicking the pen-and-ruler icon above it. If a debug tool is active for the current pane, a blue dot will be displayed. When a debug tool is active, you can clear it with the "X \[debug tool]" button at the top of the popup and reload it with the "re-apply" button There are over 40 different debug tools available split into different categories, ranging from color blindness simulators to text contrast checkers to disabling CSS and JS. Do you have an idea for a useful Debug tool? [Let us know](https://polypane.app/support/). > Polypane is filled with accessibility features. We wrote a full overview on our blog: [Find and fix accessibility issues with Polypane](https://polypane.app/blog/find-and-fix-accessibility-issues-with-polypane/). ## Quick Mouse interactions - Clicking the debug tool icon with your primary mouse icon will open the debug tool popup. - Right-clicking the debug tool icon will reload the currently selected debug tool, useful for debug tools like the [color contrast checker](https://polypane.app#contrast-checker) (after changes to the page) or the [chaos content debug](https://polypane.app#content-chaos-test) tool to apply new random content. - Middle clicking the debug tool icon removes the current debug tool. Holding while middle clicking will remove the debug tools from all panes. Hold while adding a debug tool will apply it to all panes. ## Overview of all Debug tools Polypane has over 40 Debug tools (which you can find on this page) and [Simulators](https://polypane.app/docs/simulators/) (which have their own page). For more information on them inside Polypane you can hover the icon to the right of each overlay in the popup. ### Debug tools The debug tools tab contains tools that give you insight into how your page is built. It is split into four different categories: [Layout](https://polypane.app#layout), [Accessibility](https://polypane.app#accessibility), [Content](https://polypane.app#content) and [Disable features](https://polypane.app#disable-features). #### Layout Contains different tools to analyse the current layout of the page ##### Layout Debugging Quickly find out if elements are where you expect them to be. This debug tool is also available as and you can read more about it on the [Layout debugging](https://polypane.app/docs/layout-debugging/) page. Elements that cause a horizontal scroll bar/horizontal overflow are highlighted in red, making it easy to spot them. Read more about [detecting horizontal overflows](https://polypane.app/blog/strategies-for-dealing-with-horizontal-overflows/). ![](https://polypane.app/doc-img/overlays/layoutdebugging.png) ##### Stacking Context 3D view The 3D view shows the stacking context of your page in a 3D view. With every newly created stacking context or specified `z-index`, elements get pushed forwards. This is useful to see how elements are stacked on top of each other and how they relate to each other, as well as debugging issues around z-indexs and stacking contexts. _Both the [Show z-index](https://polypane.app/docs/debug-tools/#show-z-index) debug tool and the [Debug tab](https://polypane.app/docs/elements-panel/#debug) in the Elements panel can further help you debug stacking context issues._ To rotate the 3D view, click and drag with your mouse. Interactign with the page works as normal. ##### Reachability Reachability overlays a color map to show how easy it is to reach parts of the screen. It's calibrated for the mobile device sizes in Polypane and comes in a **right hand** and **left-hand** version. ![](https://polypane.app/doc-img/overlays/reachability.png) ##### Unneeded scrollbars Draws scrollbars on the page where they are shown on regular browsers on Windows and Linux (and Mac with an external mouse) but aren't needed. ![](https://polypane.app/doc-img/overlays/unneededscrollbars.png) ##### Show z-index Show the z-indices of all visible elements, including if their ancestors have z-indices. ![](https://polypane.app/doc-img/overlays/showzindex.png) _Both the [Stacking Context 3D view](https://polypane.app/docs/debug-tools/#stacking-context-3d-view) debug tool and the [Debug tab](https://polypane.app/docs/elements-panel/#debug) in the Elements panel can further help you debug stacking context issues._ #### Accessibility These debug tools give you ways to assess the accessibility of a page. ##### Contrast checker Polypane will go through all your text and background combinations and calculate the contrast ratio. Failing ones are highlighted everywhere they occur. Hover over any of the failing ratios that have an arrow to see a suggested alternative color. You can hover over that suggested alternative color to preview it, or click it to apply the new styling and copy the suggested color to your clipboard. ![](https://polypane.app/doc-img/overlays/contrastchecker.png) Polypane uses a custom-made algorithm to determine the ratio that takes the text color, background colors, text shadow, opacities, filters and text-strokes into account when determining the contrast ratio. Select AA or AAA to check against WCAG2 AA or WCAG2 AAA level contrast. The default is AA. ##### Track Focus Get a visual highlight of the current focused element that follows the focus as you tab from element to element. The [focus order overlay](https://polypane.app/docs/outline-panel/#focus-order-tab-order) shows you this information as well, but because the Track focus debug tool is dynamic it's better in handling things like focus traps and interactive pages. While tabbing through your page you will find the role and computed name of the focused element in the bottom right corner of the pane. These are what screen readers use to determine what to read out loud so it's important to check if they are correct. ##### Target size cursor Replaces your cursor with a square so you can measure if clickable elements are large enough and far enough apart. There are three sizes: - 24 by 24 pixels: uses the dimensions and logic from WCAG 2.2 SC 2.5.8 (Level AA). - 44 by 44 pixels: uses the dimensions from WCAG 2.1 SC 2.5.5 (Level AAA) and the Apple HIG. - 48 by 48 pixels: uses the same dimensions and logic that Google uses for their mobile friendly test. 24 by 24 pixels is the default. Elements that are too small and too close together (making tapping them hard) are detected and get a red area surrounding them indicating the space they need. Inline elements inside text content are exluded from this check, following the various specifications. The target size debug tool has additional options visible in the top right corner of your pane. The "Rescan target sizes" button will let you rerun the test to see if the changes you made to the page have fixed the issues. Toggle the "Check inline elements" checkbox to also check clickable targets inside text content (like paragraphs). These are excluded from the WCAG 2.5.8 target size check, but you might still want to test them. If the target size UI overlaps with the element you want to check, you can toggle it's position with the ⬍ icon button. #### Detect small text Detects elements that have small text: 12px for any content, and 16px for form elements (to prevent iOS from zooming in your page). When small text is found, hover over the warning to show an explanation and click the button to increase the font size to 12 or 16 pixels (depending on the type of element) so you can preview its effects. ##### Text Spacing (WCAG 1.4.12) Applies the minimum text spacing requirements from the WCAG criterion 1.4.12. Use this to check if any content is lost with these extra settings. Here are the changes it applies: - Line height (line spacing) to at least 1.5 times the font size; - Spacing following paragraphs to at least 2 times the font size; - Letter spacing (tracking) to at least 0.12 times the font size; - Word spacing to at least 0.16 times the font size. ![](https://polypane.app/doc-img/overlays/forcespacing.png) ##### Show roles Highlights all elements that have a `role` attribute, showing both the role and the element it's applied to. This helps you verify that the used role is appropriate and applicable for a given element ##### Show ARIA attributes Highlights all elements that have aria attributes and lists the attributes and their values. ##### Apply all focus styling Will apply the `focus` pseudo state to all focusable elements on the page so you can inspect their focus styles in one go. ##### Apply all focus-visible styling Will apply the `focus-visible` and `focus` pseudo state to all focusable elements on the page so you can inspect their focus styles in one go. ##### A11y.css third party A11y.css will highlight any accessibility mistakes and possible risks on your page. ![](https://polypane.app/doc-img/overlays/a11y.png) #### Content Asses the content itself and the way it influences the page. ##### Edit content Edit content makes the entire page editable so you can quickly try out new content and see how it looks. Polypane automatically turns on spell checking when you're in edit content mode. ##### Readability The readability debug tool will calculate how difficult each sentence on your page is. Darker, redder sentences are harder to understand while lighter, greener sentences are easier to read. We calculate this using the Automated Readability Index (ARI), which works well for most western, European languages. For pages in Arabic it uses the Automatic Arabic Readability Index (AARI). If you know of Readability Index formulas for other languages, please [contact us](https://polypane.app/support/). ![](https://polypane.app/doc-img/overlays/readability.png) ##### Content chaos test Content chaos test will randomly increase or decrease text content so you can check how well your layout handles these situations. Can be used to check if you layout can handle different languages or longer and shorter content. This debug tool has three variant: Less, More and Both. Less only shortens text (to test for languages that need less characters per word), More only lengthens text (to test for languages that need more characters per word). Both is a combination of the two with less extremes. When active a warning icon is shown next to the pane title, and the entire pane has a red border. ![](https://polypane.app/doc-img/overlays/contentchaos.png) > Learn how to use this feature with our tutorial: [How to check your site in different languages and writing modes](https://polypane.app/blog/how-to-check-your-site-in-different-languages-and-writing-modes/). ##### Hostile CSS Hostile CSS will set ugly styles for all your default elements so you can see how well your component styles are isolated. ![](https://polypane.app/doc-img/overlays/hostilecss.png) ##### Placeholdifier (All content or Translatable only) Placeholdifier replaces all your content (text, images and videos) with placeholders, so the (possible lorem ipsum/placeholder) content of a design doesn't distract from the design itself. Only placeholderifying content that is translatable (excluding elements with a `translate=no` attribute) is useful when you quickly want to verify that certain parts of the page retain the specific language where they otherwise might get translated by a browser extension or service. ![](https://polypane.app/doc-img/overlays/placeholdifier.png) ##### Audible changes With audible changes, Polypane will sounds a beep whenever the page changes. A nice way to figure out when your page is too busy, or making changes when it does not have to. #### Disable features Turn off different features to test the resilience of your page. ##### Disable CSS Disable CSS will remove all CSS from stylesheets and style attributes on your page. When active a warning icon is shown next to the pane title, and the entire pane has a red border. ![](https://polypane.app/doc-img/overlays/disable-css.jpg) ##### Disable JS Disable JS will disable all JavaScript on a page. This will also prevent much of Polypane's tooling from running, so when this is active a warning icon is shown next to the pane title, and the entire pane has a red border. ![](https://polypane.app/doc-img/overlays/disable-js.png) ##### Disable Images Disable Images will hide all images and background images on your page. You can use this to test your email rendering for email clients that block images or to check if your layout doesn't break when images are missing. ![](https://polypane.app/doc-img/overlays/disable-images.png) ##### Hide Cursor Hide the cursor in this pane to test keyboard accessibility without cheating. ### Simulators Polypane can simulate different types of impairments that lets you test your pages in different scenarios. The simulators are alxo available in the debug tools popup. Learn more about the simulators in our [Simulators](https://polypane.app/docs/simulators/) documentation. --- # Detecting Polypane URL: https://polypane.app/docs/detecting-polypane/ --- title: '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/25.0.1 Chrome/138.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](https://polypane.app/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: '25' }, // { brand: 'Not.A/Brand', version: '99' }, // { brand: 'Chromium', version: '138' }, // ] ``` ### 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 When running on Polypane, the HTML element will have the 'in-polypane' class applied to it, letting you style based on it. #### Turning the `in-polypane` 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 5: Send a custom HTTP header: You can also send your own [custom header](https://polypane.app/docs/emulation/#custom-headers), like `polypane: true`, and detect that on your server. --- # Developer tools URL: https://polypane.app/docs/developer-tools/ --- title: 'Developer tools' --- Polypane comes with two sets of developers tools: the native Polypane developer tools and the Chromium developer tools. ## Polypane developer tools The Polypane developer tools will work across panes and you can find more information about them on the following pages: - [Polypane elements panel](https://polypane.app/docs/elements-panel/), lets you edit style, content and attributes in all panes at the same time. - [Polypane Console](https://polypane.app/docs/console/) lets you view console messages from all panes and send console commands to all panes at the same time. ## Chromium developer tools The [Chromium developer tools](https://polypane.app/docs/devtools-panel/) only support a single pane at a time, but also allow you to use [browser extensions](https://polypane.app/docs/browser-extensions/). ## Picking devtools You can default to using the Chromium developer tools by right-clicking the inspect icon in the address bar. By default Polypane will use the Polypane developer tools when using the shortcuts, right-clicking to inspect or when using [Polypane Peek](https://polypane.app/docs/polypane-peek/), but if you want to switch over to using the Chromium devtools you can right-click the inspect element icon in the header and select "inspect in devtools". From now on, the Chromium devtools will be used instead. When "Inspect Element (in devtools)" is set as the default, shortcuts and [Polypane Peek](https://polypane.app/docs/polypane-peek/) will use the Chromium devtools and the first option in the context menu will also use the Chromium devtools. --- # Device presets URL: https://polypane.app/docs/device-presets/ --- title: 'Device presets' --- Polypane comes with a list of pane presets in four different categories: Mobile, Tablet, Desktop and Other. These contain a wide range of common devices, from iphones to android phones to smart watches to TV sizes. These device presets contain both viewport and device size options. We keep this list up to date with popular iOS and Android devices and add new devices as they become available. If you have requests, [let us know](https://polypane.app/support/) ### Selecting devices To select a device, click the title of a pane. The list of devices will be overlaid on top of the pane, and you can either click or use the arrow keys to select a device preset. To the right of each device you can see the dimensions, and these will be updated depending on whether you pick viewport sizes or device sizes, and whether the current pane is in landscape or portrait orientation (depending on if a device supports orientation: a phone does, but TVs don't). ### Viewport size or device size at the top of the device selector there is a toggle button that will change the devices between the viewport size or the device size. The **viewport size** is the size that is available to your site inside a (mobile) browser. It excludes the height of the navigation bar, status bar etc. This is perfect for building websites, because the size of the pane matches the available space when shown inside a browser on the device. Viewport sizes have portrait and landscape variants (the space taken up by the navigation bars is different depending on the orientation) and we will automatically resize them to the appropriate sizes when you rotate a pane. The **Device size** is the full, specified pixel dimensions of a device, ideal if you're developing a hybrid app. This setting will be remembered per pane. ### Custom device presets If you want to add custom devices to this list, you can do so by creating a file called `pane-sizes` (no extension) in the Polypane [application folder](https://polypane.app/docs/application-folder/). This file should contain a JSON object with the following structure: ```json { "iOS": { "supportsOrientation": true, "sizes": [ { "key": "iPhone 14", "width": "430", "height": "932", "viewport": { "portrait": { "width": "430", "height": "739" }, "landscape": { "width": "814", "height": "380" } }, "screenType": "mobile", "emulateOrientation": true, "pixelRatio": 3, "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1", "platform": "iPhone" } ] } } ``` In this file you can add, remove or rename categories and presets. You can add as many categories as you want (so you could split 'Mobile' into 'iOS' and 'Android' if you wanted to) but they can't be named the same as the default categories. The boolean `supportsOrientation` on a category determines if orientation should be taken into account for this category. #### Replacing the default presets You can add a global property `replaceDefaults: true` to replace the default presets with your own. This will remove all default presets and only show the ones you've added. The default for this property is `false`. ```json { "replaceDefaults": true, "iOS": { "supportsOrientation": true, "sizes": [ ... ] } } ``` A future version of Polypane will provide a UI to manage device presets. --- # Devtools Panel URL: https://polypane.app/docs/devtools-panel/ --- title: 'Devtools Panel' --- The Devtools tab in the [Edit panel](https://polypane.app/docs/intro-to-panel/#edit-tab) contains the Chromium devtools. These devtools only work for a single pane at a time, which you can select from the dropdown located at the top of the panel. You can also open the Chromium devtools for a specific pane by clicking the icon above the pane or right click anywhere in a pane and select "Inspect element (in devtools)" to inspect the element under the cursor. When you have a single pane visible, opening the devtools panel will start its devtools automatically. From there, you can use Chromium devtools for the selected pane, as well as use any of the [devtools extensions](https://polypane.app/docs/browser-extensions/) you have installed. ### Using the Chromium developer tools by default Right click the Inspect element icon in the header to switch it to always inspect elements with the Chromium devtools. When this is active, the icon will show a small devtools icon alongside it. Now inspecting from the address bar or with the shortcut will default to using the chrome developer tools. The [Polypane Peek](https://polypane.app/docs/polypane-peek/) feature also works with the Chromium devtools so you can still press `alt` to inspect. ### Undocking the Chromium devtools If you prefer the devtools to be undocked, you can uncheck "Docked devtools" in the global Edit menu (the one next to the File menu). ### Reloading devtools Sometimes the Chromium devtools lose their connection to your pane, which will show itself as the elements panel no longer showing the correct DOM structure. When this happens, reloading the devtools reestablishes the connection. Click the reload button in the devtools toolbar to do this. ### Devtools extensions You can install devtools extentions like the React or Vue.js DevTools. Learn about them here: [Browser Extensions](https://polypane.app/docs/browser-extensions/). --- # Elements Panel URL: https://polypane.app/docs/elements-panel/ --- title: 'Elements Panel' --- The "Elements" tab in the Edit [panel](https://polypane.app/docs/intro-to-panel/#edit-tab) lets you inspect and edit elements in all panes at once. That means you know exactly how your changes will look in all your panes, and prevents changes in one size from unexpectedly affecting the others. It can also be used to get quick information on element dimensions, font, colors and accessibility info. The elements panel consists of three main parts: - the [DOM tree view](https://polypane.app#dom-tree-view) - the [Navigator](https://polypane.app#navigator) - and the [Editor](https://polypane.app#editor) ## Inspect element Inspecting elements in Polypane is made as easy as possible, and there's multiple ways to inspect elements: - Hold and hover over + click the element you want to inspect (This feature is called [Polypane peek](https://polypane.app/docs/polypane-peek/)). - Click the inspect element button in the elements panel. - Click the inspect element button in the Address bar. - Press - Right-click an element and select "inspect element" in the context menu. Any element you hover on will be highlighted in all panes, with areas drawn for the content, padding, border and margin, as well as guides for the sides of the element. Clicking it will inspect it in the Elements panel. To cancel out of inspection mode, press or or when you're holding , just release it. To inspect elements that have `pointer-events: none`, also hold the key. When hovering over elements a tooltip will show information like element dimensions, color and font info as well as other relevant element information. For more on the contents of the element tooltip, read about [Polypane peek](https://polypane.app/docs/polypane-peek/). Polypane will keep the currently inspected element selected when you reload the page, so you can continue inspecting it, or fall back to inspecting the `body` element when the selected element is not in the DOM on reload. ## Dom Tree view At the top of the elements panel is the document source tree view ("DOM tree"). Hover over these to highlight the element in all panes and click them to inspect them. The selected element will be available as `$0` in the [Console panel](https://polypane.app/docs/console/) and focused in the Elements panel. Hidden elements, like `` and `` elements, are dimmed in the tree view so they don't distract you. You can double click an attribute in the tree view to copy its value, instead of entering a modal state to edit it. To edit an attribute, use the [attribute tab](https://polypane.app#attributes). This will autosuggest valid attributes and values, and doesn't require you to keep the modal view focused. As you inspect elements on the page, the elements will also be highlighted in the DOM tree view. Drag the bottom or right side (depending on where the panel is) of the DOM Tree to resize it. ### Duplicate IDs Each ID can only be used once on a page, and using more than one can cause issues with accessibility or link targets. If Polypane finds a duplicate ID, it will show a warning icon next to the ID in the DOM tree view. ### IDrefs Attributes that refer to another element's ID (called "idrefs") like `aria-labelledby` or `target` will automatically be tested for the target element's existence and validity. If the target element doesn't exist, the attribute will be struck through and a warning icon is shown. If the element exists, a crosshair is show and you can hover over the attribute to highlight the target element in all panes, and click it to inspect the target element. ### Element badges When applicable, elements will have badges for things like Flex, Container and Scoping root/limit. These badges can be activated to show an overlay in all panes that shows the layout or container. Click the badge again to hide the overlay. Polypane will show badges for: - Flex layout - Grid layout - Subgrid layout - Container elements - Scoping root/limit - Scrollable elements - Scroll snap elements - Events attached to an element #### Scroll button Quickly find elements that have scrollbars by checking for the Scroll badge in the dom tree view. #### Flex and Grid layout overlays Elements that have a grid or flex display value will have a badge next to them. Clicking the badge will show an overlay in all panes that shows the grid or flex layout. Click the badge again to hide the overlay. #### Container overlays Container elements are given a "container" badge. Clicking the badge will show an overlay in all panes that shows the container. Click the badge again to hide the overlay. Hover the badge to get information about the container like the name, type, current dimensions and the dimensions of `1cqi` (and `1cqb` when available) so you know what the various container query units are based on. ##### Scroll snap overlays Elements with Scroll snapping have a "scroll-snap "badge. Clicking the badge will show an overlay in all panes visualising the scroll snap container and scroll snap items. Click the badge again to hide the overlay. ## Navigator Right below the dom tree is the navigator. The Navigator is a unique area compared to other browsers that shows you a lot of information about the currently selected element. It's a quick way to get information about the element you're inspecting. ### Element info At the top of the Navigator is the currently selected element, along with any classes or IDs it has. Click a class or ID to copy it as CSS, or hover the element to highlight it in all panes. The icons to the right of the element name let you, from left to right: 1. Reload the element styles 1. Toggle the visibility of the element 1. Edit the HTML of the element 1. Toggle layout debugging of the element 1. Create an Element screenshot of it in the selected pane 1. Toggle the element state (`:hover`, `:focus` etc) 1. Copy a unique CSS (when it can be created), Xpath selector, outer HTML or inner HTML for the element 1. Open the same element in the Chromium devtools. If the element has children those are shown below it. Hover them to highlight in the panes, and click on any to drill down and inspect them. On the next line, the navigator shows the foreground and background color (if defined) of an element. Click on them to copy them. You can configure the color format in the [global settings](https://polypane.app/docs/browser-features/#change-the-color-notation). The rendered font is shown next, along with the rendered font size and line height. Clicking it will copy the CSS font declaration. After the font information you'll see a red cross, green **AA** or green **AAA**. This indicates whether or not your text is readable according to WCAG standards at AA or AAA level. Calculations use the resolved background color, taking element opacity and ancestor backgrounds into account. Hover the score to show a tooltip with a preview and the specific contrast ratio. Click the contrast info to open the background and foreground color in [the color picker](https://polypane.app/docs/color-picker/) where you can further inspect and edit them. At the right side, the navigator displays the dimensions. If the element has a specific aspect ratio, that is also shown. Click it to copy the dimensions to clipboard. #### Reload the element styles Click this button to explicitly reload the styles for the selected element. The elements panel requests style updates on every DOM change, but you can request an additional reload by clicking this button. #### Toggle visibility This button toggles an elements `visibility`, so they are hidden but still take up space. This works the same as "Hide element" in other browsers. #### Edit the HTML of the element Click the edit HTML button to open the HTML editor. This lets you edit the full HTML of the element, including its children. After making your changes, click 'Apply changes' to update the DOM, or "Discard" to discard the changes. When updating the DOM with your changed, Polypane will preserve any events you have added to the element or its children. #### Toggle layout debugging The layout debugging icon (the grid icon) lets you toggle layout debugging for the selected element. This works the same as [layout debugging](https://polypane.app/docs/layout-debugging/) only for the selected element and its children. When layout debugging is active for an element you'll see a blue dot in the tree view. If you've turned layout debugging on for a number of elements, you can middle click the icon to remove them all at once. #### Screenshot element Creates an element screenshot of the current element. right-click the button to set the padding around the element. #### Toggle element state With Toggle element state (the `:hov` icon) you can force an elements pseudo state style, useful to check the styling of that state. You can toggle the following styles on all elements: - `:hover` - `:focus` - `:focus-visible` - `:focus-within` - `:active` - `:target` - `:visited` In addition, you can toggle the following states depending on if they are applicable to the element and its attributes: - `:enabled` - `:disabled` - `:valid` - `:invalid` - `:user-valid` - `:user-invalid` - `:required` - `:optional` - `:read-only` - `:read-write` - `:in-range` - `:out-of-range` - `:visited` - `:checked` - `:indeterminate` - `:placeholder-shown` - `:autofill` - `:open` When an element has a state applied, the button will be filled in and a yellow dot will show in the tree view. Hover that yellow dot to see which pseudo states are being applied. All pseudo states are reset when you reload the page. #### Copy selector and HTML The copy icon opens a submenu that lets you copy a CSS selector or an XPath selector to the element. These are both unique so can be used for automated testing. The CSS selector option might not be available when it is not possible to reach an element through CSS, such as elements inside shadow DOM. OuterHTML copies the entire element, including its children, to the clipboard. InnerHTML copies only the children of the element. #### Open in Chromium devtools The Chromium devtools icon opens the same element in the Chromium devtools. This is useful when you need something available in the Chromium devtools. ### Content editor If an element has only text content, you can edit the content directly in the navigator and it will be automatically applied to all panes. If an element has a mix of text content and elements as children, you will be able to select the text as "text" in list of child elements and edit it then. Editing here is ideal because you can see how your text will look in all panes at once without having to double click in the dom tree view. The content editor will automatically resize to fit the content (up to a certain height) and when you hover it a copy button will appear in the lower right that will allow you to copy the content in one go. ### Style differences between panels Polypane will show the styles applied to the pane you selected the element in. You can use the "Pane" dropdown below the navigator to switch to the styling of the element in a different pane. ### Box model Click the "box model" button to toggle showing the box model information for your element. Because an element can have different dimensions in each pane, you can select which pane to show the box model for. Hover over any part of the box model (margin, border, padding or content) to highlight just that part of the element in all panes. The box model overview in Polypane shows more than you might be accustomed to in other browsers: - If your element has positioning, that's shown in the box model too, along with the offset. - A box shadow is rendered for elements that have one. - The border radius for elements is shown (in pixels). - If an element has a specified `overflow` value, that's shown in the bottom right. This gives you a glanceable overview of what your element looks like. You can click the arrow to the right of the box model to hide it so you have more space for the element editor. ### Cascade Layer overview When your page uses `@layer`, Polypane contructs a layer tree that shows you the structure of your layers. Layers that are active for the currently selected element are displayed as normal, while layers that do not contain styles for the selected element are dimmed. This way you can quickly see which parts of your layer structure you'll have to inspect. ## Editor The Editor lets you see and change the style, computed style, attributes, dataset and accessibility info of the selected element, all synced between panes. - **Style** shows you all the CSS rules that apply to the element. - **Computed** shows you the computed styles for the element. - **Debug** shows you CSS and element properties that often cause issues. - **Attributes** lets you see and edit all the attributes of the element.- **Data** lets you see and edit all the values stored in the element's `dataset`. - **A11y** shows you the accessibility info in one overview. ### Style The Style tab shows all CSS that applies to the selected element. This includes styles from the element itself and inherited styles. It also shows the styling for pseudo elements (like `::before` and `::first-line`) and pseudo classes (like `:hover` and `:any-link`), as well as `@keyframe` and `@font-face` declarations that are applied to the element. Each style block shows you the selector(s), highlighting the matching selector for the selected element, the stylesheet it comes from, the specificity of the selector and the CSS properties and values, as well as any at-rules (like media queries or container queries) that apply to the element. The `[+]` icon next to the selector can be used to highlight all elements matching that selector. Click the stylesheet to open it in the [browse panel](https://polypane.app/docs/browse/) if it's an external stylesheet, or to focus the `style` element. Click the specificity to get the selector explained using our [css specificity calculator](https://polypane.app/css-specificity-calculator/) in the [browse panel](https://polypane.app/docs/browse/). #### Editing CSS Styles Edit values by clicking the value and changing it. Pressing enter or tab applies them. Polypane automatically suggest associated values and custom properties. Use the up/down arrow keys to go through the suggestions and press enter to apply them. As you focus suggestions, a live preview is shown. When hovering over a block of CSS, checkmarks before each rule are shown. Clicking the checkmark will disable this CSS rule until you click them again or reload the page. You can add CSS at the bottom of each selector. CSS Properties and values will be suggested as you type. The inline-suggestion is based on the most frequently used property, and you can press enter to apply it. For the other suggestions use the arrow keys and enter to select them. Typing `:` will move you from the property to the value, pressing enter will add the line and let you type a new property. You can paste a full declaration (`color: red`) or even multiple declarations (`color: red; background: blue`) into the property field and Polypane will split them up for you and add them to the style block. ##### Numerical values If you're editing any numerical value, you can use the and keys or your scroll wheel to change the value by 1. Holding will change the value by 10, holding changes the value by a 100, while holding will change the value by 0.1. This works for all numerical values, including inside colors. ##### Colors Properties with a color get a preview of the color before the value. Click it to open a color selector that will let you live edit the color or let you pick a new color from anywhere on the screen. The color picker will show three lines: one for a 3:1 contrast ratio, one for a 4.5:1 contrast ratio and one for a 7:1 contrast ratio. The line that is highlighted is the one you should meet for AA compliance for this particular attribute and font size. The color picker will also show you the contrast ratio between the two colors by hovering the X, AA or AAA badge. Shift click the preview to toggle between different color modes: hex, rgb, hsl, hwb and (when possible) named colors. The color picker will also change along with this color mode. ##### CSS Custom Properties Hover over values with one or more custom properties to show a tooltip with their values. For custom properties that resolve to colors, we show a color preview. #### Inherited styles For rule sets within the inherited styles, css properties that are non-inherited are faded out. #### Easy copying of CSS Styles Copy an entire CSS rule set (selector and all declaration) by placing your mouse to the left of the selector. A copy icon will appear. Click that to copy a ready-to-use CSS rule set. You can also copy individual lines by clicking the same icon before each line. Polypane will format the CSS snippets with Prettier and you can [change the Prettier configuration](https://polypane.app/docs/live-css/#custom-formatting-with-prettier) to match your project's coding style. You can also right-click in the style block to copy the entire rule or all declarations, or right-click a specific part to copy the selector or a single declaration, propert or value. #### Container queries When the styles are wrapped in container queries those are shown just like media queries, support queries and layers. In addition, after the container query you'll find the containing element, which you can hover to highlight in all panes, and click to inspect. Hovering the container query or the containing element will give you the container query's name, type, size and the size of `1cqw` and `1cqh` so you know what the various container query units are based on. This info is also available in the [dom tree view](https://polypane.app#container-overlays) when hovering the container badge. ### Computed The computed tab shows the computed style of an element. By default, it will hide all CSS properties that you didn't explicitly set. You can show all the CSS properties by clicking "Show all". Edit the values by clicking on them just like in the style tab and click "Copy styles" to copy all your CSS declarations, or copy a single declaration by clicking the copy button before the line. ### Debug The Debug panel has a convenient overview of specific CSS properties and element properties that often cause issues, so that you don't have to hunt through the style or computed tab to find, for example, if your element has a `position`. x The Debug panel also shows what the offset parent (from which your element will be offset when using top/left/bottom/right), containing block (from which your element will determine its dimensions) and the stacking context parent (from which your element will be offset when using z-index) for this element are, along with if the element itself can be one of those three types. > Learn more about the offset parent and stacking context here: [Offset parent and stacking context: positioning elements in all three dimensions](https://polypane.app/blog/offset-parent-and-stacking-context-positioning-elements-in-all-three-dimensions/). ### Attributes The attributes tab will list all the attributes of an element, like `class` and `value` and lets you edit them live for all panes. Values will automatically wrap over multiple lines if they become too long (if you use atomic CSS for example). You can also add new attributes here. Keep the value empty for boolean values. You can delete attributes by clicking the trashcan icon. When you add a new attribute, Polypane will suggest attributes appropriate for the element you're editing. For example, an `img` will get a suggestion for an `alt` attribute, but a `span` will not. While editing or adding an attribute, valid values will be suggested as well. The lang attribute is checked for invalid syntax (a WCAG SC 3.1.1 failure), and a suggestion is given for language codes that include the region, as those are usually not needed and you are discouraged from using them. #### Classes Polypane automatically suggests classes as you type in the class value editor. These classes are compiled from your CSS and HTML. Use the arrow keys to select the one you want to add and press enter to add it, or use your mouse to click them. ##### Classes list Click the "list" icon next to the class attribute to switch to a list of all the classes that allows you to quickly toggle off (and back on) classes to see the effect in all panes. Polypane will remember your preference for the input or list. Classes in this list are alphabetically sorted. Use the input above the list to add classes to the list. In both the list and normal mode Polypane will suggest classes as you type. Use the arrow keys to select the one you want to add and press enter to add it, or use your mouse to click them. #### Idrefs Attributes that refer to another element's ID (idrefs) like `for` are automatically checked for the existence and validity of the target element, and will show a warning if the target element doesn't appear in the page. ### Data The Data tab will list all the values stores in an elements `dataset`. Values will automatically wrap over multiple lines if they become too long. You can also add new items or delete them. ### Event Listeners If an element has event listeners attached to it, the event listeners tab will show you all the event listeners and their associated properties. If an element has many listeners you can filter them down by typing in the filter input. ### A11y The A11y (Accessibility) tab shows you relevant accessibility information and aria attributes for the selected element: - The role of the element - The accessible name of the element - Whether the element is keyboard accessible - The contrast for this element - All accessibility attributes (like `aria-labelledby` set on the element) - All accessibility attributes (like `controls` and `disabled`) as set in the AOM (Accessibility Object Model) visible in the [/docs/outline-panel/#accessibility-tree](https://polypane.appAccessibility tree) in the Outline panel. When the selected element is expected to have an accessible name but that is missing, Polypane will show a warning. When the accessible name has repeating substrings, which commonly happens when you have e.g. a link with an icon, and that icon has an alt attribute with the same text, Polypane will show you a warning and the repeating substrings. For aria attributes, values will automatically wrap over multiple lines if they become too long. You can also add new items or delete them. When adding new aria attributes the Elements panel automatically suggests valid attributes and valid values for the chosen attribute when applicable. Attributes that refer to another element's ID (idrefs) are automatically checked for the existence and validity of the target element, and will show a warning if the target element doesn't appear in the page. Click the copy button for role, accessible name or accessible description to copy them. Click the contrast info to open the background and foreground color in [the color picker](https://polypane.app/docs/color-picker/) where you can further inspect and edit them. --- # Emulation URL: https://polypane.app/docs/emulation/ --- title: 'Emulation' --- Polypane lets you emulate different user preference media queries, device properties like pixel ratio and user agent, and network conditions, so you can test for a wide range of situations right inside Polypane. The emulation settings are applied to a pane, and you can configure them by clicking the Emulation icon in the pane header: . If any sort of device emulation is active, the icon will have a blue dot. All the [Device presets](https://polypane.app/docs/device-presets/) include emulation settings that match the selected devices, but you can always change or update them in the emulation pane. The panel is split into four different tabs: [Media](https://polypane.app#media), [Emulation](https://polypane.app#emulation-settings), [Network](https://polypane.app#network-settings) and [Session](https://polypane.app#session-settings). Media is where you can test out all the different preference media queries, Emulation is where you can set device properties, Network is where you can throttle your network speed, add custom headers and disable navigation sync and Session lets you manage the session of the pane. ## Media Easily toggle between different media features to test how your site responds to them, like dark mode, reduced motion, or print. - **prefers-color-scheme**: Switch between 'light' and 'dark' mode color schemes using prefers-color-scheme. Defaults to 'auto', which follows the browsers color scheme. - **prefers-reduced-motion**: Switch between 'no-preference' and 'reduce' options for the prefers reduced motion media feature. - **prefers-reduced-data**: Switch between 'no-preference' and 'reduce' options for the prefers reduced data media feature. - **prefers-reduced-transparency**: Switch between 'no-preference' and 'reduce' options for the prefers reduced transparency media feature. - **forced-colors**: Emulates the forced-colors mode when active. This overwrites all the styles on your page to either a light mode or dark mode theme, depending on what you picked for **prefers-color-scheme**. - **prefers-contrast**: Switch between 'no-preference', 'less', 'more' and 'custom' options for the prefers-contrast media feature. - **color-gamut**: Switch between 'off', 'srgb', 'p3' and 'rec2020' color gamut emulation. - **Media type**: Switch between 'screen' and 'print' stylesheets. - **Auto dark theme**: Toggle the Chromium automatic dark theme feature. Not strictly a media query, but it does change the way your site is rendered based on the user's settings. Hold when changing a media feature to apply it to all panes. > If you want to learn more about these media queries, check out our evergreen [complete guide to media queries](https://polypane.app/blog/the-complete-guide-to-css-media-queries/). **A note on print emulation:** Print emulation is not the same as the print preview in Google Chrome. Print emulation applies your print CSS but doesn't format the page to a letter/a4 size. The print preview logic is not handled by the rendering engine (Chromium in our case) but by a standalone component in browsers that's not part of the rendering engine. If you need to test the actual print preview, you'll need to use the browser's print preview. You can use Polypane print preview to test if your Print CSS is working correctly. ## Emulation settings In the emulation tab, you can edit the following device settings: - Set the device type to desktop or mobile - Turn on touch emulation - Turn on orientation change events - Toggle between LTR and RTL direction - Set a page language - Set a different browserLocale - Set the device pixel ratio - Set a different default font size - Set a custom userAgent - Set a custom platform If any of these settings are changed from their default, a "reset" button will appear that lets you reset all of them to their default values. ### Device type (Desktop vs Mobile rendering) Browsers have two different ways of rendering a page: Desktop rendering and Mobile rendering. Desktop rendering is the most common one and behaves like regular desktop browsers. With the Mobile rendering, Polypane will respond like a mobile browser. This means it will do things like take into account the viewport tag and zoom out the page if needed. ### Touch emulation When you turn on touch emulation, clicking into the pane will change your cursor to a round dot. Now you can use your mouse as if it was your finger, and drag to scroll the page. Clicking outside of the pane will change your cursor back. ### Orientation When you turn on orientation emulation, Polypane will automatically set the orientation depending on your pane dimensions and send the appropriate orientation change events when you rotate a pane. This is only needed for JS, since the `orientation` media query already works based on the pane dimensions. ### RTL/LTR emulation If you want to quickly check if your CSS works for languages that read from right to left you can turn on RTL emulation to force a page into right-to-left (or set it to LTR to force it to left-to-right reading mode). Leave it set to 'auto' to keep the original page's setting. > Learn how to use this feature with our tutorial: [How to check your site in different languages and writing modes](https://polypane.app/blog/how-to-check-your-site-in-different-languages-and-writing-modes/). ### Device pixel ratio The device pixel ratio is used to determine which images to load for a given device (1x, 2x, 3x). To emulate this rendering behaviour you can set a different device pixel ratio from your own. For each device preset we already include the correct pixel ratio. ### Page language Set a language for the current page (the `lang` attribute on the `html` element) to test various components. > Learn how to use this feature with our tutorial: [How to check your site in different languages and writing modes](https://polypane.app/blog/how-to-check-your-site-in-different-languages-and-writing-modes/). ### Browser Locale You can set a different locale to request a page in that language and set the language used by the `Intl` JS API's . When filling in a locale we will automatically suggest both locale codes (like "nl-NL") and languages ("Dutch"), the latter is replaced with the appropriate locale when picked. > Learn how to use this feature with our tutorial: [How to check your site in different languages and writing modes](https://polypane.app/blog/how-to-check-your-site-in-different-languages-and-writing-modes/). ### Default font size Set a different default font size for the page. That is normally 16px and corresponds to 1rem on your root, but users can configure their browsers to use a different default font size. Setting a different default font size will change the default font size for the page, but not the font size of the text itself. Use this to test how your site behaves when the user has set a different default font size in their browser. ### Custom User-Agent Some scripts and sites still use user agent sniffing to determine what device they're running on, as opposed to doing feature detection. With this custom userAgent you can support these too. For each device preset we already include the appropriate user agent. ### Platform Alongside a user agent, you can also set `navigator.platform` and `navigator.userAgentData.platform` to emulate a different platform. For the preset devices the Custom User-Agent and Platform match, but we don't enforce this. ## Network settings The Network tab contains two ways to change the way your connection works: you can throttle the connection, and send custom headers with your requests. ### Throttle network speed Switch between "online" (your regular connection), a "high-end mobile" connection (Fast 4G), a "mid-tier mobile" connection (Slow 4G), a "low-end mobile" connection (3G) and offline to throttle your download, upload and latency and give you an approximation of how fast your site will load under these conditions. When you throttle the network to fast 4G, slow 4G or 3G, the emulation icon will have an orange dot and the pane title will show an orange warning sign to remind you that this pane is throttled. When the network speed is set to offline, no network activity will be allowed and the dot and warning sign will be switched to red. Additionally, the full pane will get a red border. ### Custom HTTP headers Supply multiple custom headers (one per line) and they will be sent with each request. This is an amazingly powerful way to sent along custom data for each pane, or test different headers to see if your server handles them correctly. Polypane will suggest commonly accepted headers (like `Accepts-Encoding`) for you as you type. You can also send your own custom headers, like `polypane: true`, and use that to include extra scripts or debugging information. ### Sync navigation The sync navigation toggle will let you decouple the navigation of a pane from all the other panes. You can use this to compare your local site with the live site, or compare two different sites side-by-side. When sync is turned off, the title of the pane is switched to an address bar and you can navigate in this single pane by filling in different URLs. Additionally, a broken link icon is shown in front of the URL to indicate this pane is decoupled from other panes. For detailed guidance on working with multiple URLs and advanced navigation scenarios, see [Showing multiple URLs](https://polypane.app/docs/multiple-urls/). ## Session settings The Session tab lets you set a session for this specific tab. Sessions can be unique, shared between multiple panes, or apply to the entire tab. For more details, read our [session management documentation](https://polypane.app/docs/session-management/). ## _Emulation_ or _simulation_? The words emulation and simulation are often used interchangeably to obscure what apps are really capable of. This is confusing when you need to find out what those apps actually do. We like to follow the definitions that companies like Apple and Google use, and that Chromium uses internally. So to avoid confusion, here's what we mean when we say _emulation_ and how that differs from _simulation_. - A _simulator_ simulates an entire device. Think of the iOS simulator for Mac or the simulator in Android Studio. This runs the actual browser or application in a simulated environment. - _Emulation_, on the other hand, mimics behaviour but implements it in the current engine. For example, Polypane can emulate the Safari for iOS user agent, causing your site to think it's being rendered by Safari while it's being rendered in Polypane with the Chromium rendering engine. This means that you can test all the things you actively do to support a specific browser in Polypane (for example, check whether a fallback or polyfill is loading correctly), but you can't debug a rendering bug in the actual rendering engine of that browser. This is a limitation of all emulators, not just Polypane. That means that even though you can get 90% of your testing done in Polypane (100% of testing for Chromium-based browsers, 80% for Safari and Firefox), you still need to test in an actual Safari and Firefox. To make that easier, Polypane ships with [Polypane Portal](https://polypane.app/docs/portal/). This lets you open the web page shown in Polypane in other browsers and devices while keeping those browsers and devices in sync with what you do in Polypane. You can open Portal while you work, and instantly test all browsers without having to repeat your actions in each of them. --- # Experimental Chromium features URL: https://polypane.app/docs/experimental-chromium-features/ --- title: 'Experimental Chromium features' --- Polypane is a browser for developers, so it comes with some experimental Chromium features turned on by default. This means you can use Polypane to try out upcoming features before they make their way into regular browsers! ## Enabled features Below are some highlights of the features that are enabled by default in Polypane. You can see the full list of enabled features on our page on [Experimental Platform features ](https://polypane.app/experimental-web-platform-features/). ### Prefers-reduced-data Prefers reduced data is a new media query that lets visitors signal they want to preserve data. You can emulate it in Polypane by going to [the emulation section above a pane](https://polypane.app/docs/emulation/) and toggling "prefers-reduced-data" to "reduce". > We wrote an article about what you can do with prefers-reduced-data, read that here: [Creating websites with prefers-reduced-data](https://polypane.app/blog/creating-websites-with-prefers-reduced-data/). ### Test features In addition to the experimental features, Polypane also enables a number of features still in test: - CSSUserSelectContain - CSSCaretAnimation - CSSColorContrast - CSSCornerShape These might not be fully implemented yet, but are available for testing. ## Suggestions? Have suggestions for things you want enabled in Polypane? [Let us know](https://polypane.app/support/). --- # Find elements URL: https://polypane.app/docs/find-elements/ --- title: 'Find elements' --- Along with [Find text in page](https://polypane.app/docs/browser-features/#search-in-page) across all panes, you can also search for elements using CSS Selectors. Open the Find element popup with , by choosing "Find HTML in page..." in the Edit menu, or by opening the find in page popup and switching from "text" to "HTML". ## Search by CSS Selector In the popup you can type any CSS selector to find all matching elements. Any CSS Selector accepted by the browser can be used, so you can be as creative as you want. Polypane automatically scrolls to the first matching element and you can use the up/down buttons, or / to cycle through all matching elements. Click the Magnifier icon to open the currently selected element in the Elements panel, so you can inspect it further. ## Specificity Below the search input we show the specificity of the selector you've typed in, so you can also use this feature to quickly check the specificity of a selector. If you want an explanation of the specificity, click it and we'll open the selector in our [CSS specificity calculator](https://polypane.app/css-specificity-calculator/) in the [browser panel](https://polypane.app/docs/browse/). --- # Form autofill URL: https://polypane.app/docs/form-autofill/ --- title: 'Form autofill' --- When working with forms, filling them in every time can take a lot of time even when the content is [synced across panes](https://polypane.app/docs/synced-interactions/#form-filling). To help with this, Polypane contains two form filling features: * Autofilling for an entire form. * Custom form values that you can copy in from the context menu to test form handling. ## Autofilling for an entire form When right-clicking any form an "Autofill form" option is shown in the context menu. This feature will fill in appropriate values for all form elements in the form. This will help you quickly fill in forms when testing them. Polypane tries to fill in valid, appropriate values like email addresses, dates, colors, autofill values or the placeholder or element name when that's not possible. To quickly clear or empty a form you can right click it and select "clear form" instead. ## Custom form values Testing forms doesn't just encompass autofilling it, but also testing with different values to check data handling, errors and more. For this we have the "Custom values" option. When right-clicking a form element that takes content (input or textarea) you can select from a large list of values like valid and invalid email addresses, names with unicode, credit card numbers (and associated CSV and date values), HTML and CSS injection, lorem ipsum and much more. ## Reveal Password Right-click any password field to show a "Reveal password" context menu option that lets you toggle between showing and hiding the password. This feature also works in the [browse panel](https://polypane.app/docs/browse/) --- # Global zoom URL: https://polypane.app/docs/global-zoom/ --- title: 'Global zoom' --- In the top right of the Polypane window is a slider that lets you zoom out all panes simultaneously. This way you can make all your panes fit the current screen, or show them at 100%. You can drag the slider to zoom in and out, or hover over it and scroll to zoom in and out. Lastly, you can also manually change the zoom level by clicking the percentage. The global zoom is stored per view mode and per tab. To go back to 100% zoom, you can press `cmd/ctrl 0`. You can also click the percentage shown to fill in a specific value. ### Zoom to fit With `shift cmd/ctrl 0` you can zoom out such that all panes are visible. ### Page zoom and pane zoom You can also zoom individual panes with [pane zoom](https://polypane.app/docs/pane-sizes/#zooming-panes) and zoom in the content of a pane (like regular browsers) with [page zoom](https://polypane.app/docs/browser-features/#zoom-pages-in-and-out). --- # Horizontal overflow detection URL: https://polypane.app/docs/horizontal-overflow/ --- title: 'Horizontal overflow detection' slug: 'horizontal-overflow' --- Polypane will automatically check panes for horizontal overflow issues and show an icon below a pane when it finds either a horizontal scroll, or an element with `100vw`. ### Horizontal Overflow When a horizontal overflow is detected the icon will appear and be yellow. The horizontal overflow detection runs whenever the pane is resized or there is a layout change. Click on it to turn on [layout debugging](https://polypane.app/docs/layout-debugging/) which will highlight the overflow-causing element in red so you can find it quickly: Additionally, all elements that cause the overflow will be logged to the console so you can quickly inspect them. ### 100vw When the page layout is set to 100vw, the icon will appear and be blue, and clicking on it will open the [elements panel](https://polypane.app/docs/elements-panel/) with the detected element selected. 100vw will trigger a horizontal scrollbar on devices that render scrollbars, something that is easy to miss if you're on for example macOS. ### Strategies for dealing with horizontal overflows Read more about overflow issues in our article [dealing with horizontal overflows](https://polypane.app/blog/strategies-for-dealing-with-horizontal-overflows/). --- # Integrations URL: https://polypane.app/docs/integrations/ --- title: 'Integrations' --- Polypane integrates with several applications and tools. For a quick overview, check out out [integrations overview](https://polypane.app/integrations/). ## Pane-level integrations By default, Integration settings are hidden. Click the global menu options icon in the top right of the app and check "Show Pane Integrations" to show the Cog icon above panes. This cog icon above each pane contains the pane integrations: third party applications you can run in the context of your pane. Currently, we support Marker.io. If you'd like us to support other tools, please [let us know](https://polypane.app/support/). ### [Marker.io](https://marker.io/?utm_source=polypane) Connect to Marker.io, select your destination and activate Marker.io for the current pane. Polypane will automatically load the Marker.io capture UI into the pane, allowing you to capture the page or parts of the page, mark them up and add details and then send them to your selected documentation, right from the pane. [Setup instructions](https://polypane.app/integrations/markerio/#setup). ## External tools that support Polypane Polypane can also integrate with other tools, like Tumult Hype and Whisk. ### Code editors and IDE's Polypane supports opening the app and new tabs with most 'open in browser' features or plugins for VS Code, Atom, Webstorm, [Whisk](https://tumult.com/whisk/) and [Hype](https://tumult.com/hype/) and other code editors and IDE's. Polypane registers itself as a browser and HTML viewer so depending on the plugin, Polypane will be automatically recognized. If it isn't. or the Code Editor operates on a whitelist you can add it like any other browser. When Polypane is not yet open, it will be launched and if it's already running, 'open in browser' will open a new tab in Polypane for you. #### VS Code Live Server Configure Polypane as a browser in the settings of the Live Server extension. Open the settings of the Live Server extension and add the following as the `liveServer.settings.CustomBrowser` setting: ```json "liveServer.settings.CustomBrowser": "polypane" ``` When you 'Go Live', Polypane will automatically be started if it hasn't already and a new tab will be opened for you. If Polypane is already running, the new tab will be opened in the existing instance. Depending on your operating system you might need to add the full path to the Polypane executable. #### VS Code Five Server Configure Polypane as a browser in the settings of the Five Server extension. Open your settings and add the following as the `fiveServer.browser` setting: ```json "fiveServer.browser": [ "C:\\Program Files\\Polypane\\Polypane.exe" ], ``` When you 'Go Live', Polypane will automatically be started if it hasn't already and a new tab will be opened for you. If Polypane is already running, the new tab will be opened in the existing instance. Notive the full path above is for Windows and has double back slashes. Depending on your setup, Polypane might be installed in `C:\\Program Files (x86)\\Polypane\\Polypane.exe`. On macOS, the path will be `/Applications/Polypane.app/Contents/MacOS/Polypane` and on Linux it will be `/usr/bin/Polypane`. #### Visual Studio To launch Polypane from Visual Studio you need to add it to the list of browsers and then set it as the defaults. For detailed instructions see [Using Polypane with Visual Studio](https://serversncode.com/using-polypane-with-visual-studio/) written by [James Kenny](https://serversncode.com/). #### [Tumult Hype](https://tumult.com/hype/) When you preview your design by clicking the 'preview' button in Hype and selecting Polypane, it will automatically open the viewports you've specified in Hype so you get the full overview with just a single click. If you click the preview button again Polypane focuses and reloads your existing tab, even if you've made changes to that tab. [Setup instructions](https://polypane.app/integrations/tumult-hype/#setup) Find more information on the Tumult Hype blog: [Hype and Polypane](https://blog.tumult.com/2020/06/15/preview-all-your-responsive-layouts-at-once-with-hypes-new-polypane-integration/) ### Got suggestions? We'd love to implement with more tools. If you want to integrate with Polypane, or know of a tool we should integrate, please [reach out](https://polypane.app/support/). --- # Intro to panel URL: https://polypane.app/docs/intro-to-panel/ --- title: 'Intro to panel' --- The Polypane panel is where you can find a ton of information on your page as well as ways to inspect and edit the page. You can open it with , by selecting "Toggle Panel" in the "View" menu or by clicking the Open Panel icon in the address bar. ### Customizing the Panel location Drag the side of the panel to resize, or click the panel icon in the top right of the panel to switch between having the panel on the right side, the bottom, the left side or detached in its on window. You can also right-click the side panel icon in the address bar to pick where the Panel should open. The panel is divided into four main tabs: Info, Edit, Browse and Workspaces. ### Info tab The info tab has panels that give you information about the structure and contents of your website, letting you see the page in new ways. #### [Meta information](https://polypane.app/docs/meta-information/) The Meta information panel gives you insights into the non-visual aspects of your website and generates social media previews. #### [Outline](https://polypane.app/docs/outline-panel/) The Outline tab shows you various outlines of your page like a list of headings, links, images or landmarks, along with checks for valid structures, broken links and more. #### [Storage](https://polypane.app/docs/storage-panel/) The storage panel shows you the data saved in localStorage, sessionStorage and cookies. You can also edit their values in this panel. #### [Accessibility](https://polypane.app/docs/accessibility-panel/) Runs a full accessibility audit on the current page to quickly find any glaring issues. #### [Source](https://polypane.app/docs/source-panel/) Show the generated HTML source along with HTML validation. ### Edit tab The Edit tab is where you go to inspect and edit the content of your page. #### [Elements](https://polypane.app/docs/elements-panel/) The elements panel lets you inspect and edit elements in all panes at once. #### [Console](https://polypane.app/docs/console/) The Polypane console is a combined console that lets you see console messages and send console commands in all panes at once. #### [Live CSS](https://polypane.app/docs/live-css/) With the Live CSS functionality in Polypane you can quickly style elements in all panes at once using CSS or SCSS. #### [Devtools](https://polypane.app/docs/devtools-panel/) The devtools panel lets you use the Chromium devtools for individual panes. ### [Browse tab](https://polypane.app/docs/browse/) The browse panel lets you show any other website opened alongside your workspace, letting you have your documentation or design system open without having to tab back and forth. It also gives you quick access to various handoff tools. ### [Workspaces tab](https://polypane.app/docs/workspace-management/) Manage and switch between your saved workspaces, use the default workspaces or export your workspace to share with your team or include it in your repository. --- # Intro to panes URL: https://polypane.app/docs/intro-to-panes/ --- title: 'Intro to panes' slug: 'intro-to-panes' --- In Polypane, each viewport is called a "pane", and each pane shows the same page, with your interactions being synced across all panes. Each pane can have a different width, height, zoom level and various other properties. ## The pane header The pane header is where you can configure all the settings of that pane. You can rename a pane, or set a different [device preset](https://polypane.app/docs/device-presets/) by clicking the name of the pane (be default, this is "New pane"). At the right side of the pane header you will find a row of icons that let you activate all sorts of additional features and tools for each pane. From left to right these are: - [Rulers, grids, columns and row overlays](https://polypane.app/docs/rulers-grids-and-guides/) - [Integrations](https://polypane.app/docs/integrations/) - [Screenshots](https://polypane.app/docs/making-screenshots/) - [Image overlays](https://polypane.app/docs/reference-image/) - [Debug tools](https://polypane.app/docs/debug-tools/) - [Emulation settings](https://polypane.app/docs/emulation/) - [Devtools](https://polypane.app/docs/developer-tools/) ### Resizing panes Below that row of icons is where you can change and update the width and height of a pane. Each pane can be resized in a number of different ways like drag and drop, using device preset or using workspaces. Read more on the [Sizing panes](https://polypane.app/docs/pane-sizes/) page. In the focus layout the [Quick switcher](https://polypane.app/docs/layouts/#quick-switcher) lets you switch between the panes you have in the horizontal layout or between the CSS breakpoints. ### Active pane When you click into a pane, a blue border is shown around the pane to indicate that it is the currently active pane. When a pane is active, keyboard input (like space and arrow keys) are sent to the pane rather than to the browser. To clear this, press `esc`. ## Info bar At the bottom of a pane we can show various buttons, though they are only visible when applicable: * [Web Vitals](https://polypane.app/docs/web-vitals/) * [Console stats](https://polypane.app#console-stats) * [Horizontal overflow detection](https://polypane.app/docs/horizontal-overflow/) All of these can be turned on and off in the global settings in the top right of the app. ### Console stats Console stats can be turned on in the global settings in the top right of the app by clicking "Show Console Stats per Pane". When it's turned on, the bottom left of each panel automatically shows counters for console messages, warnings, errors, network and debug logs that were emitted from that pane, so you always know which panes are sending console messages. Click these to open the console to inspect them further. --- # JSON and XML viewer URL: https://polypane.app/docs/json-and-xml-viewer/ --- title: 'JSON and XML viewer' --- When you open a JSON or XML file in Polypane (either from a URL, or as a .json/.xml file on disk) it is shown in a viewer that shows the JSON or XML in a collapsible tree. The viewer works in all panes as well as in the [browse](https://polypane.app/docs/browse/) panel. When opening a JSON or XML file from disk, the viewer will automatically use the full layout. ## JSON viewer ### Tree The JSON tree shows you the data in a formatted tree. From the top bar you can save the json file or copy the json to the clipboard. #### Rich data view Each entry has a type, like number, url, text or datetime with an associated icon and color. For specific types we add more information, like the length for objects and arrays or a pretty-print of the date for datetime fields. Urls show a favicon and clicking them opens them in a new tab. #### Filtering Filter your JSON file with plain text that will be matched against both the properties and values, and only show the entries that match. #### Expand and collapse Quickly expand or collapse all objects and arrays with the "Expand all" and "Collapse all" buttons. Click the down arrow next to the expand or collapse buttons to show a list of properties that you can expand or collapse individually. This makes it easy to navigate large JSON files and see only the parts you care about without repeatedly having to expand or collapse the same data types. ### Raw data view Toggle to the raw data to see the json as it's sent by the server. Click the format button to format the raw data using `JSON.stringify`. The save and copy buttons will use the data as shown in this overview. ## XML viewer The XML viewer works the same as the JSON viewer, but with XML data. It shows the XML in a collapsible tree and allows you to filter, expand and collapse the data. ### Tree The XML tree shows you the data in a formatted tree. From the top bar you can save the XML file or copy the XML to the clipboard. It highlights attributes and automatically detects URLs and shows their favicon. The same filtering and expand/collapse options are available as in the JSON viewer. ### Raw data view Toggle to the raw data to see the XML as it's sent by the server. --- # Known issues URL: https://polypane.app/docs/known-issues/ --- title: 'Known issues' --- These are the known issues in terms of support for various browser capabilities. In future versions some of these might be resolved. While this page contains known issues with implementations in Polypane, a majority of issues you could encounter are the result of specific website implementations, such as difficulty logging in to federated logins like SSO, rate-limited servers or non-standard navigation. We have collected these on a separate page, [website issues you could encounter](https://polypane.app/docs/website-issues-you-could-encounter/). ### React Developer Tools need a reload With the React developers tools installed when first opening the Chromium devtools you might not see the Components and Profiler tabs appear. To fix this, reload your page with the devtools open and they should appear. ### Popups Popups are allowed but they are not synced between panes. ### requestPointerLock crashes Polypane The `requestPointerLock` API is not supported in Polypane, and will crash the app if called. This is a known issue with Electron, and we are looking into it. ### history.replaceState Polypane's implementation of `history.replaceState` does not yet follow the specification and will add an entry into your history list. ### Lost connection in Chromium devtools Sometimes the Chromium devtools lose their connection to your pane, which will show itself as the elements panel no longer showing the correct DOM structure. When this happens, reloading the devtools re-establishes the connection. Click the reload button in the devtools toolbar to do this. ### macOS visual artifacts Sometimes macOS will display weird artifacts over the UI, this is a known GPU issue in the Chromium rendering engine. To work around this you can select "Disable Hardware Acceleration" in the "View" menu. Note that this does come with a performance cost, since rendering now happens purely in software. ### Back/forward buttons on Logitech mouses don't work Many Logitech mouses have a back/forward button, which need to be configured to work with Polypane on macOS and Windows (they are supported out-of-the-box on other operating systems). Follow these steps to [configure Logitech mouses on mac-os](https://polypane.app/docs/configuring-logitech-mouses/). ### Wayland support Electron support for Wayland is turned on in Polypane, but not perfect. If you run into issues (in particular ones that do not appear in other Electron-based apps) let us know. --- # Layout debugging URL: https://polypane.app/docs/layout-debugging/ --- title: 'Layout debugging' --- With the shortcut you can quickly toggle layout debugging in your panes. This adds outlines to all the HTML elements on the pages letting you quickly analyze the HTML structure and find out which elements are causing layout issues. It's like adding `* { outline: red}`, except much faster with different colors for different elements and support for pseudo elements. This debug tool can also be applied on a single pane using [Debug tools](https://polypane.app/docs/debug-tools/), where it's called "Layout debugging". ### Indicator in address bar When layout debugging is active, a small indicator will appear on the right in the address bar. This way you can quickly see if the global layout debugging is active. Click the indicator to disable layout debugging. ### Detecting horizontal overflows Elements that cause a horizontal scroll bar/horizontal overflow are highlighted in red, making it easy to spot them. Read more about [detecting horizontal overflows](https://polypane.app/blog/strategies-for-dealing-with-horizontal-overflows/). ### More layout debugging The [Debug tab in the Elements Panel](https://polypane.app/docs/elements-panel/#debug) shows you information on the offset parent and stacking context of each element along with CSS properties like `display`, `position` and `overflow` that are often the cause of layout issues. To learn more about these concepts, check out our article [Offset parent and stacking context: positioning elements in all three dimensions](https://polypane.app/blog/offset-parent-and-stacking-context-positioning-elements-in-all-three-dimensions/). --- # Layouts URL: https://polypane.app/docs/layouts/ --- title: 'Layouts' --- There are five different layouts in Polypane: Horizontal, Vertical, Focus, Split and Full. You can switch between layouts by clicking the Layout icon in the address bar. The panes in the horizontal and vertical layouts are shared, so your settings are retained between them. Focus layout has its own pane. In horizontal and vertical layout, you can [add as many panes](https://polypane.app/docs/pane-management/) as you like. In the focus layout, you get a single pane in the center of your view. Full layout is just like a regular browser. ## Horizontal (shortcut: ) ![Horizontal layout](https://polypane.app/doc-img/layouts/horizontal.png) Horizontal layout is the default layout in Polypane. All panes are shown on a horizontal workspace side-by-side so you can easily compare them. You can double click anywhere between panes to add a new pane there, and if you resize any of the panes the rest will automatically move out of the way. In the horizontal layout, panes will [automatically be clipped if they are too high](https://polypane.app/docs/pane-sizes/#clipping-in-horizontal-mode). If you want to show the entire pane, double click the zoom value to resize the pane to fit. To zoom out such that all panes fit your window, press or use the View > Zoom UI > Zoom to Fit option. ### Horizontal scrolling Polypane automatically converts normal scroll wheel scrolling to horizontal scrolling when you're in horizontal layout, but there are more ways to scroll horizontally: - Holding shift while scrolling with a scroll wheel will scroll horizontally. - If you have a touchpad, a two finger horizontal swipe will scroll horizontally. - You can hold the spacebar and click to drag, like in most design tools. - You can hold the middle mouse button (your scroll wheel) and drag to scroll horizontally like in most design tools. - Use the and keys on your keyboard to scroll all the way left or right respectively, and / to scroll by a single view. ## Vertical (shortcut ) ![Vertical layout](https://polypane.app/doc-img/layouts/vertical.png) Vertical layout works much the same as horizontal layout, but panes wrap to the next line and you can scroll vertically to see them all. Vertical layout is useful if you want to see a ton of panes at the same time (just zoom out). Apart from scrolling up and down or using the scrollbar, you can also press the spacebar or middle mouse wheel and drag up and down. You can also use and to scroll all the way left or right respectively, and / to scoll by a single view. ### Aligning the panes In the horizontal and vertical layouts you can choose to left, center or right-align the panes. The default for Horizontal is left-aligned and the default for Vertical is center-aligned. ## Focus (shortcut ) ![Focus layout](https://polypane.app/doc-img/layouts/focus.png) Focus layout shows a single centered pane, letting you focus on a single viewport and quickly iterate and try out different sizes. When you try to increase the pane beyond the available width, either by choosing a preset or by dragging, Polypane will automatically zoom out the pane so it fits. ### Quick switcher The quick switcher shows a list of buttons at the top of Focus layout, letting you to quickly switch to any of the pane sizes from the horizontal/vertical view or any of the CSS breakpoints defined in the website you're currently viewing. You can also use your left and right arrow keys to quickly switch between the sizes shown in the Quick switcher. ## Split (shortcut ) The Split layout puts two panes side by side with a draggable divider in the middle. The two panes always take up the full width of the workspace and will automatically update as you drag the divider. Each pane can be full height, or have a custom height set by dragging or by filling in a specific custom value in the pane header. Use this layout when you want to compare two things side by side: just a desktop and mobile layout, or two different URLs. ## Full layout (shortcut ) ![Full layout](https://polypane.app/doc-img/layouts/full.png) Full layout takes all the space available to show a website, just like a regular browsers. It's a nice way to work on sites when you're not working on the responsive aspects, but for example on the JavaScript. When in Full mode, the [pane header buttons](https://polypane.app/docs/intro-to-panes/#the-pane-header) are shown in the address bar. ### Setting a default layout To change which layout is used for new tabs, right click the plus button in the tab bar, then pick the layout you want to use for a new pane. From now on that layout will be used for all new tabs. You can see which one it is by looking at the checkmark in this context menu. --- # List of shortcuts URL: https://polypane.app/docs/list-of-shortcuts/ --- title: 'List of shortcuts' --- Press or while using Polypane to quickly show a dropdown with all the shortcuts for easy reference. ### Default browser functions | Function | Shortcut | | -------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Focus Addressbar | / / | | Focus address bar in [Browse panel](https://polypane.app/docs/browse/) | / / | | Reload | / / | | Reload CSS | | | Empty cache and reload | | | Go back | / | | Go forward | / | | Add tab | | | Duplicate current tab | | | Close active tab | | | Next tab | _(macOS only)_ | | Previous tab | _(macOS only)_ | | Open command bar | | | Close Polypane | | | Toggle fullscreen | | | Show/Hide Address bar | | | Toggle [Dark mode](https://polypane.app/docs/dark-and-light-mode/) | | | Show getting started screen | / | | Show shortcut overlay | / | | Close any open popovers and clear focus | | | Search in panes | | | Search HTML in panes | | | Copy current URL | | | Copy current URL as Markdown | | | Open settings | | | Hiding global menu bar (Linux only) | | ### Layouts Polypane has four different [Layout modes](https://polypane.app/docs/layouts/), you can toggle between. The default is Horizontal. While focus is inside a pane, these shortcuts are not listened to allow you to type them. If that's the case, press to clear focus first. | Function | Shortcut | | ---------------------------------------------- | --------------------------------------------- | | Horizontal | | | Vertical | | | Focus | | | Full | | | Toggle between most recent used and horizontal | | #### Horizontal and Vertical layout navigation | Function | Shortcut | | --------------------------------------------------- | -------------------------------------- | | Scroll to beginning | | | Scroll to end | | | Scroll partially to the beginning by one view | | | Scroll partially to the end by one view | | | Hold to drag in the horizontal and vertical layouts | | ### Pane management | Function | Shortcut | | ---------------------------------------------------------- | ------------------------------------------------ | | [New pane](https://polypane.app/docs/pane-management/) | | | Randomly resize all panes | | | Create panes from [CSS breakpoints](https://polypane.app/docs/breakpoints/) | | | Rotate all panes | | | Apply [workspace](https://polypane.app/docs/workspaces/) (1 through 9) | | | Save panes to [workspace](https://polypane.app/docs/workspaces/) (1 through 9) | | ### Development shortcuts | Function | Shortcut | | ----------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | | Open [Elements Panel](https://polypane.app/docs/elements-panel/) | / | | Open [Chromium Devtools](https://polypane.app/docs/devtools-panel/) | / | | Inspect element in [selected devtools](https://polypane.app/docs/devtools-panel/#using-the-chromium-developer-tools-by-default) | | | Open and focus [Console Panel](https://polypane.app/docs/console/) | / (on macOS) | | Toggle [Panel](https://polypane.app/docs/intro-to-panel/) | | | [Color picker](https://polypane.app/docs/color-picker/) | | | [Overview screenshot](https://polypane.app/docs/making-screenshots/) | | | Toggle [synced scrolling](https://polypane.app/docs/synced-interactions/#scroll-syncing) | | | Toggle [layout debugging](https://polypane.app/docs/layout-debugging/) | | | Toggle [rulers](https://polypane.app/docs/rulers-grids-and-guides/) | | | Clear [console](https://polypane.app/docs/console/) (only when console is open) | | ### Zooming [Global Zooming](https://polypane.app/docs/global-zoom/) for the entire workspace. | Function | Shortcut | | ------------------ | --------------------------------------------- | | Zoom in | | | Zoom out | | | Reset zoom to 100% | | | Zoom to fit | | ### Page Zooming [Page zoom](https://polypane.app/docs/browser-features/#zoom-pages-in-and-out) Page zoom is set per domain, so is applied to all panes. To zoom the text in the Polypane UI, use "Adjust Text Size…" in the View menu. | Function | Shortcut | | ------------------ | -------------------------------------------- | | Zoom in | | | Zoom out | | | Reset zoom to 100% | | ### Mouse interactions Some mouse interactions change if you press certain keys: | Function | Shortcut | | -------------------------------------------------------------------------------- | ---------------------------------- | | Inspect the element under your cursor with [Polypane peek](https://polypane.app/docs/polypane-peek/) | | | Maintain aspect ratio when resizing a pane | | | Clear the cache and reload when clicking reload button | | | Zoom in and out while scrolling | | | Hold to drag in the horizontal and vertical layouts | | ### Screenshot editing shortcuts During [screenshot editing](https://polypane.app/docs/making-screenshots/#screenshot-editing), the following shortcuts are available: | Tool | Shortcut | | ---------------------- | ------------------------------ | | Arrow Tool | | | Line Tool | | | Path Tool | | | Pencil Tool | | | Rectangle Tool | | | Circle Tool | | | Marker Tool | | | Text Tool | | | Erase Tool | | | Sticker Tool | | | Redact Tool | | | Crop Tool | | | Resize Tool | | | Trim Tool (video only) | | And the following shortcuts are available to export the image: | Function | Shortcut | | ---------------------- | ---------------------------------------------- | | Save screenshot | | | Save screenshot as... | | | Copy to clipboard | | | Open screenshot folder | | ## Customize the shortcuts Polypane does not yet have support to change shortcuts. If shortcuts interfere with other apps, you can work around that with dedicated tools like [Hammerspoon](https://www.hammerspoon.org/) on macOS. You can also use Hammerspoon to create custom shortcuts for Polypane. Here is an example Hammerspoon script that replaces to open the command bar with by using Applescript's access to the menu bar, but only when Polypane is focused. ```lua local openPolypaneCommandBarAppleScript = [[ tell application "System Events" tell process "Polypane" activate click menu item "Open Command bar" of menu "View" of menu bar 1 end tell end tell ]] local polypaneKeybinding = hs.hotkey.new({'option'}, 'k', function() hs.osascript.applescript(openPolypaneCommandBarAppleScript); hs.application.open('Polypane.app'); end) local polypaneWindowFilter = hs.window.filter.new('Polypane') polypaneWindowFilter:subscribe(hs.window.filter.windowFocused, function() polypaneKeybinding:enable() end) polypaneWindowFilter:subscribe(hs.window.filter.windowUnfocused, function() polypaneKeybinding:disable() end) ``` --- # Live CSS URL: https://polypane.app/docs/live-css/ --- title: 'Live CSS' --- The "Live CSS" tab in the [panel](https://polypane.app/docs/intro-to-panel/) gives you a full-featured CSS editor that you can use to write CSS that will be applied to all panes. When there is Live CSS active, an indicator is show in the address bar. You can format or clear your CSS with the buttons in the top bar. ### Code editor The Live CSS code editor is fully aware of all CSS syntax and values and will provide suggestions while you type. Select a suggestion with the arrow keys, then press Tab to apply it. ### Selecting elements Use the "select element" icon in the Live CSS header, then click on any element in any pane to get a list of all the CSS selectors that match the element along with any classes and id's on the element, and the element name itself, as suggestions for a selector. With this, you can quickly write CSS to target a single element, or a group of elements, without needing to go to the devtools to find the right element. ### Google Fonts The Live CSS tab will automatically load in any Google font you define in your CSS, letting you quickly try out multiple fonts. All Google fonts are available as suggestions (starting with a capital) so when you type `font-family:` you can easily get to them. Polypane has support for variable fonts served by Google Fonts, and all axes are available for use. ### Selecting panes By default, the CSS is applied to all panes, but you can also select a single pane to apply the CSS to. You can use this if you want to experiment with styling, and want to compare it to the original CSS. Open two tabs side by side, and select one of the panes to apply the CSS to. ### Preserve By default, the CSS will be preserved when you move away from a page, but you can uncheck the "preserve" button, and the CSS will be automatically cleared every time you navigate to a different URL. ### Formatting The Format button uses Prettier to format your CSS on the fly with it's default settings. #### Custom formatting with Prettier You can set custom formatting options by adding a prettier configuration file, like `.prettierrc` or `.prettierrc.js` file in the Polypane settings folder. This will be applied to the Live CSS panel, , the [Source Panel](https://polypane.app/docs/source-panel/) and to any code snippet you copy from the [Elements Panel](https://polypane.app/docs/elements-panel/). The Polypane settings folder can be found in this location: - Windows: `%APPDATA%/Polypane/` - macOS: `~/Library/Application Support/Polypane/` - Linux: `~/.config/Polypane/` Set your preferred [Prettier options](https://prettier.io/docs/en/options.html), for example as a `.prettierrc` file that specifies the use of tabs: ```js { useTabs: true, } ``` This will let you configure Polypane so the code snippets match your projects formatting settings. When Polypane launches, the prettier configuration will be parsed and applied. ### Advanced: set a custom font-size To set a custom font-size for the Live CSS panel, add a file `polypane-livecss-state` (note that this file doesn't have an extension) to the Polypane setting folder with the following format: ```json { "fontSize": "16px" } ``` and set your own custom font size. This file will be parsed on app launch. --- # Live/auto reloading URL: https://polypane.app/docs/live-auto-reloading/ --- title: 'Live/auto reloading' --- Polypane includes both live and autoreloading functionality. Live reloading will automatically refresh your CSS, images or the page whenever you change a file, while auto reloading will reload the page at a set interval. You can find this by right clicking the reload icon and selecting either "Live reload" or "Auto reload", or by going to the "configurators" item in the global Edit menu. Once configured for a tab it will remain active whenever that tab is active. Tabs will show a lightning bold outline when they have live reloading configured but are not currently active. When Live reloading is active, the lightning bold will be filled. ## Live reload Live reloading will automatically update your page (in-place, or with a page reload) whenever Polypane detects a change on your file system. In the configuration panel, select a directory and check the events you want to respond to. When live reloading is active, you'll see a lightning bolt ( ) next to the reload icon. Live reload settings are stored per tab, and will automatically be paused and re-activated as you switch tabs. You can check "Show notifications for file changes" to see popups in the top right corner whenever a file gets saved. This can be useful to see which files Polypane is responding to. ### CSS and images update without a page refresh Live reloading will automatically try to replace the CSS, images and background images in your site without a page refresh. If it can't find a match, or if you're updating another type of file, the page is reloaded. This only works for files linked from the page. That means that css using `@import` can't be matched and causes a page reload. Usng `@import` is generally not recommended for performance reasons, but if you do use it, you can use a build tool to combine your CSS files into one file. Polypane will also try to match .scss/.sass file names to linked CSS files and update the CSS file when the .scss/.sass file is saved. ### Listen to different events By default, Polypane only listens to the change file event, but you can configure it to also refresh when adding and removing files or directories. When editing, often just "Change file" is enough. Adding more events will take more resources, but will also pick up new or removed files. ### Ignored files Polypane automatically ignores some files and folders, like dotfiles, dotfolders, node_modules and .git, from causing reloads. Here is the full list: * any files or folders starting with a dot * node_modules/ * bower_components/ * cache/ * temp/ * tmp/ * .git/ * .idea/ * .vscode * .sass-cache * .gooutput If you think we should ignore more files or folders by default, please let us know. #### Custom ignore patterns To ignore additional folders and files, Polypane looks for a file called "ignorepatterns.txt" in the selected folder or any of its parent folders. Add `anymatch` patterns (like in your `.gitignore`) to this file, one on each line, and Polypane will load them in when starting the app and included them in the list of ignored files. If you want to match specific files or folders, make sure to add `**/` in front of them to make sure anymatch catches them. For example if you want to ignore a "debug.log" file, the line in your `ignorepatterns.txt` file should say `**/debug.log`. **Global ignore patterns** You can also add an "ignorepatterns.txt" file to the Polypane settings folder to have ignore rules that always apply. The location of the application folder differs per platform: [application folder](https://polypane.app/docs/application-folder/). Polypane will load and apply both ignorepatterns files when found. ### Reload delay Depending on your local setup, a resource might not be ready the moment a file has been saved. In that case, Polypane can reload too fast. To make sure Polypane reloads _after_ any post processing has happened, you can configure a delay in seconds. By default, that delay is 0. You can also set decimal seconds ("decisecond", like 0.1s) if your local server needs less than a second to prepare your resources. ## Auto reload Auto reloading is there for when you're working on a website that's not on your local machine (like a staging environment) that you still want to reload automatically. In the configurator, set the number of seconds that you want to wait between reloads. Polypane will wait for a page to load fully before starting the next countdown. --- # Making screenshots URL: https://polypane.app/docs/making-screenshots/ --- title: 'Making screenshots' --- Polypane lets you make screenshots of all your panes together, the visible viewport of a single pane, the full height of a single pane or of a single element. > For a tutorial on all the different ways to make screenshots, check out the article [Capturing screenshots in Polypane](https://polypane.app/blog/capturing-screenshots-in-polypane/). Polypane also supports [recording a pane](https://polypane.app/docs/recording/) with the "Start recording" option. This will create a video of the pane, including all interactions and debug tools. Learn more about [recording](https://polypane.app/docs/recording/) in Polypane. ## Overview screenshot of all panes Click the camera icon ( ) in the address bar or press `cmd/ctrl p` to create a screenshot of all your panes in your current [layout](https://polypane.app/docs/layouts/). The overviews will show both the pane name and the dimensions. ### Screenshot all panes at once Right-click the camera icon in the address bar to choose to create viewport of full page screenshots of all panes on screen. Polypane will store the screenshots in a folder of your choice. ## Single page screenshots In each pane header you will also find a camera icon ( ) to create screenshots of that pane. If you click it three options will appear: Full page, Viewport and Element. Screenshots include the debug tools applied to them, as well as any changes made to the page with [Live CSS](https://polypane.app/docs/live-css/) or the [Elements Panel](https://polypane.app/docs/elements-panel/). ### Viewport screenshots Viewport will create a screenshot for what you see in the current pane. ### Full page screenshots Full page will create a screenshot of the entire height of the page. Creating a full page screenshot takes a while, during which we blur the pane and prevent any interactions. We do a lot to make sure that full page screenshots look like you expect them to and as a result, full page screenshot are generally much [better than other browsers](https://polypane.app/screenshot-comparison/). ### Element screenshots With the Element option, you can highlight any element on the page and click it to create a screenshot of only that element. If you are having trouble clicking the right element, you can also use the [Elements Panel](https://polypane.app/docs/elements-panel/) to select an element to screenshot. #### Element padding You can configure the padding around an element screenshot in the settings. This padding is added to the element screenshot to give it some breathing room. The default is 0 pixels, but you can set it to any value you want with the slider or by typing in a value manually. ### Measured IF you have a visible [Measure overlay](https://polypane.app/docs/rulers-grids-and-guides/#measure-overlay) the "Measured" button will be available and will take a screenshot of the area you have selected. This is useful when you need to screenshot a portion of the page that can't neatly be captured by the element screenshot functionality. ## Screenshot delay You can delay screenshots by 5 or 10 seconds to get your page in order before a screenshot it taken to include parts of the page that require hovers or are time sensitive. To set whether you want no delay, 5 seconds delay or 10 seconds delay, right click the camera icon in the address bar to open up the delay options (They are visible in the pane header as well). A countdown will show to let you know how much time you have left, and on hover the delay will be shown in the camera icon. ## Default action for screenshots You can decide what to do after creating a new screenshot by setting the Default action in any of the screenshot menus. The options are: - Open editor (This is the default) - Save to disk (using the last used folder. Click the notification to open the folder) - Copy to clipboard ## Open screenshot folder Polypane remembers the last used folder for saving screenshots. You can open that folder by clicking the notification that appears after saving a screenshot, or by right-clicking the camera icon in the address bar or above a pane and selecting "Open folder". ## Screenshot editing After a screenshot is made, the editing interface appear. It lets you annotate, redact and crop the image before saving it, powered by [Pintura](https://pqina.nl/pintura/?aff=xLXrx&ref=polypane). ### Saving and copying There's three ways to save or copy your screenshot: - **Save directly to disk** - **Save as… to disk** - **Copy to clipboard** Save directly to disk is the fastest, and will store your screenshot with a predetermined name in the last used folder (By default, your home directory). You can click on the notification to open that folder. We support saving the image as a PNG (default), JPEG or PDF file. Images copied to the clipboard can be pasted into Slack, documents etc. ### Screenshot editing tools #### Annotate The annotate tab will let you annotate the image with lines, arrows, paths, boxes, circles, markers, freeform drawing and text, letting you highlight certain areas of the image before sharing it. Each annotation tool can be switched to with a single character. Hover over the tool to see the shortcut, or go to [Screenshot editing shortcuts](https://polypane.app/docs/list-of-shortcuts/#screenshot-editing-shortcuts) for the entire overview. When selecting a new color, the colors you picked with the [color picker](https://polypane.app/docs/color-picker/) are available for quick selection. #### Stickers (shortcut ) Stickers will let you add Emoji and images from your device, as well as some custom tools. The last seven selected Emoji are visible for you to quick select. - **Select image** Pick an image from disk to add to your screenshot - **#️⃣ Number** Add a new number to the image with every click, so you can quickly explain ordering issues, or refer to the numbers in a ticket or email. - **📏 Measure** Draws a "redline" on the screenshot that shows its length. Use this to communicate size information. Hold **shift** while dragging to align the line vertically, horizontally or diagonally. - **😀 Emoji** A full emoji picker, divided into categories and with search. Any picked emoji will be added to the quick-select option. #### Redact (shortcut ) Quickly redacts parts of the image. Pixels are scrambled before blurring to prevent the retrieval of the original data. #### Crop (shortcut ) Crop the image to different dimensions before saving. You can also zoom out in Crop mode to add whitespace around your image for you to add annotations: #### Resize (shortcut ) Resize the image. Click the lock icon to maintain the aspect ratio. --- # Manage panes URL: https://polypane.app/docs/pane-management/ --- title: 'Manage panes' slug: 'pane-management' --- In horizontal and vertical [layouts](https://polypane.app/docs/layouts/) you can have as many of them as you need. In focus mode, you get a single pane in the center of your view. ### Adding and removing panes Removing and adding panes can be done directly from the workspace. To add a pane, you can: - Press the "+" button at the end of the panes. _(You can hide this in the Global setting menu in the top right of the app.)_ - Double click anywhere between panes to add a pane there. - Right click between panes and select "Add pane here". - Press `ctrl/cmd n` to add one on the beginning of the list. Polypane will automatically scroll the newest pane into view. To delete a pane, hover over its title and a small `x` will appear in the top left corner of a pane. Click it to delete the pane. ### Duplicate a pane You can duplicate a pane by using the "+" button that appears when you hover over the header of a pane. This will copy all the settings of the current pane (width, height, emulation settings and more) and add it as a new pane directly after the current one. ### Changing the order of panes You can change the order of panes by using the arrows in the header of each pane. Hover over the header to show them. Clicking an arrow switches the pane with the one next to it. If you hold `shift` while clicking, you switch with the first or last pane. ### Opening a pane in focus mode Each pane has a crosshair icon in the top left of the pane header, which will let you open that pane in focus mode. --- # Measure text length URL: https://polypane.app/docs/measure-text-length/ --- title: 'Measure text length' --- Select any text in Polypane and right-click it to open the context menu. There you can quickly see the length of the selected text. The ideal line length is between 45 and 70 characters, but because characters usually have variable widths in different fonts, it's not always easy to tell how long a line is. Depending on the text selected, Polypane will show: - The number of characters - The number of words - The number of sentences - The number of emoji Measure text works for all languages understood by your operating system and will assume selected text is written in the page language. It will fall back to english. --- # Mental model of Polypane's browser contexts URL: https://polypane.app/docs/mental-model/ --- title: "Mental model of Polypane's browser contexts" slug: 'mental-model' --- Polypane is a browser that shows your web page in multiple panes simultaneously. Because of that, your site can behave differently compared to when it's shown in a single tab in a regular browser. On this page we will describe the impact this can have on your web pages. There are two contexts that are important to remember: - The **session** is shared across all panes. - **Request headers** and **emulation** settings are unique per pane. ## All panes share a session The shared session means that all panes have access to the same **browser storage data** like cookies, localStorage and sessionStorage. This means things like login status and other application state is automatically shared between all panes and you don't have to log into each pane separately. To inspect this state, you can use the [Storage panel](https://polypane.app/docs/storage-panel/). ## Each pane requests its own resources and has its own emulation settings Panes can run with many different [emulation settings](https://polypane.app/docs/emulation/). This means one pane can pretend to be an iPhone while another can be Firefox on Linux and yet another can be IE6 on Windows (😱). This information is part of the request headers, and server can (and do) send back different resources depending on these headers. To make sure that each pane behaves as closely as possible to whatever they're emulating, we need to let each pane requests it's own resources so they use these different resources. All resources can still be cached, but it's good to remember that each pane requests new resources and each counts as a "page load". ## Where things can go wrong A shared session but separate resources and emulation can cause explainable but unexpected behavior when you move from one context (the page itself) to the other (the shared session state). ### An example Suppose your site has a dark/light mode toggle that uses a value in localStorage but if that's missing uses `prefers-color-scheme` and then stores that data for the next page load. When the panes load, localStorage will be empty and each pane will get `prefers-color-scheme` read out and stored in localStorage. Now suppose we have two panes: one emulating light mode and one emulating dark mode. The light mode pane loads, has nothing in localstorage so reads out `prefers-color-scheme` and stores "light" in localStorage. At the same time, but slightly slower because of network unpredictabilities, the dark mode pane loads. The light mode pane hasn't stored things in localStorage yet when the dark mode pane checks it, so it too reads out `prefers-color-scheme` and stores "dark" in localStorage (inadvertedly overwriting the "light" value from the other pane). Now when you re-load the panes, both will read out "dark" from localStorage and use the dark mode theme, because localStorage is shared between all panes and the site uses that before checking `prefers-color-scheme`. > To work around this specific issue you can run each pane in a different session through the [session management](https://polypane.app/docs/session-management/) feature. ## Using the mental model When you keep the difference between the page context and the session context in mind, things that may seems weird at first start to make a lot of sense. Code that is written under the assumption that your page is only ever shown in a single tab is more quickly "exposed", though the same issues would appear with your site being shown in two tabs in any regular browser. By using the [Storage panel](https://polypane.app/docs/storage-panel/) and configuring which [interactions to sync](https://polypane.app/docs/synced-interactions/) you can still check differences between panes even if your site tries to consolidate them in your session. To learn more about the effects this can have on your website, read our docs on [website issues you could encounter](https://polypane.app/docs/website-issues-you-could-encounter/). --- # Message Bus URL: https://polypane.app/docs/message-bus/ --- title: 'Message Bus' --- While Polypane syncs all interaction events, there are some events we can't accurately sync: - Closed root web components, since they don't emit events beyond their own `shadowRoot`. - Events on `canvas` elements/where the exact x,y position is significant (transposing them won't always work, so we don't). For these situations, you can use the Polypane Message Bus to communicate data to all other panes. ### Message Bug API The Polypane Message Bus is available on `window.__PolypaneBus` and features three functions: ### `window.__PolypaneBus.send(channel, data)` - _channel_, string - _data_, any serializable javascript data (objects, strings, arrays) Sends a message to all other panes. ### `window.__PolypaneBus.on(channel, callback)` - _channel_, string - _callback_, function - _data_, the data sent This adds a listener on `channel` that executes the `callback` function with the received data as only argument every time the `send` API is called in another pane. The function returns a Symbol that you can store as a reference. You can add multiple listeners to a single channel. ### `window.__PolypaneBus.off(channel)` - _channel_, string or Symbol Use this to turn off all the listeners on a `channel` when you use a string, or turn off a single listener if you use the Symbol returned by the `on` API. ### Use-cases As mentioned at the top of this page, you can use this to sync state or events across panes for when these aren't already synced by Polypane. You can sync DOM events, or their result, on closed web components so these can be tested across screen sizes quickly. You can sync global game states between panes on change to keep e.g. canvas games in sync between panes while you test different devices. Got a cool use case? [let us know!](https://polypane.app/support/) #### Only use the Message Bus in Polypane There are various ways to [detect Polypane](https://polypane.app/docs/detecting-polypane/), and of course the `__PolypaneBus` API won't be available elsewhere. You can use this to selectively sync events only in Polypane, or to remove these calls from your code during a build step. --- # Meta information URL: https://polypane.app/docs/meta-information/ --- title: 'Meta information' --- The "Meta" tab in the Info [panel](https://polypane.app/docs/intro-to-panel/) shows the metadata of a page as well as social card previews. Get a quick overview of the way your site is interpreted by bots and shown in rich snippets. ### Site meta information Polypane highlights some of the more important meta information like title, favicon, viewport declaration, canonical url, description and charset, and divides the rest up in different lists: Open graph tags, Twitter tags, Oembed info, Other meta tags, Resource hints, Link tags and Icons. For all meta tags you can copy a fully formed HTML string using the "copy" icon that appears when you hover over them. Polypane will fill in reasonable defaults for missing values. #### Warnings Polypane will give you recommendations for your title and description length, warn you of invalid and unexpected values, missing but recommended values, and highlight any duplicate meta tags. If the site title or description is too long, the overflow is highlighted in red. The language of the page is checked against known locales, for invalid syntax (a WCAG SC 3.1.1 failure), and a suggestion is given for language codes that include the region as those are usually not needed and you are discouraged from using them. #### Mobile friendly check This check follows the guidelines provided by Google and Bing in determining if a page is mobile friendly: - Has a viewport meta tag. - Has `width=device-width` in the meta tag. - At least 60% of the text on the page is larger than 12px. - There are no overlapping tap targets within an area of 48 by 48 pixels. Issues show a button that turns on the appropriate debug tool. This way finding the elements you need to fix takes just a single click. #### Head order (Capo.js) Polypane uses [Capo.js](https://rviscomi.github.io/capo.js/) to show a visualisation of all the elements in your <head> and their order. This can help you optimize the order of elements to improve performance as well as make sure you don't have any invalid elements in your head. Polypane shows two visualisations: one for the current head orders and one for the optimal head order. Hover over each block in the visualisation to see the element, its priority and to see where it should be in the optimal order, visualised by the block being highlighted in both visualisations. If an element has an issue, it will have a striped background. Click open the Capo.js visualisation to see the full list of elements and their order, as well as any issues that are found. #### Missing meta tags For the Open graph, 𝕏 (formerly Twitter) and regular meta tags, Polypane will show you which ones are missing and which of those are required and which are recommended. Clicking the copy button on these will copy a fully formed HTML string to your clipboard. Where possible we add a suggestion, a default value, or the description of the meta tag. #### Suggestions for meta tags Some meta tags come with recommended values. For example, the `og:image` should be a fully qualified URL. Polypane checks for these and show warnings and remediation steps. ### Social media card previews Polypane automatically generates previews for the following: - 𝕏 (formerly Twitter) - Facebook - Slack - Google search result - Linkedin - Discord - Telegram - Bluesky - Mastodon - Threads All of them in both Dark and Light mode. These previews match the actual way they are displayed on each of these sites, using the available data in the same way each social media site does. They are both **pixel perfect** and **character perfect**, meaning that the text that fits in them will render the same, so you can be 100% sure that your meta previews look the same on the live social media site and in Polypane. For social media sites with an official debugger (X, Facebook and LinkedIn) the preview shows a button that opens that in the browse panel with the current URL prefilled. Mastodon cards can show an associated Mastodon author if you define a `fediverse:author` meta property, but only if the Mastodon instance the author is on supports fetching this data. #### Hiding and sorting the social card previews Click the gear icon to sort and filter the social media preview you want to see. You can re-order them by dragging and dropping them in the list, or click to toggle their visibility. ### Screenshotting social card previews Click the Camera icon above each preview to take a screenshot of the preview. This will take a screenshot of the preview as it is shown in the meta panel, with the correct dimensions and text. ### Domain overwrites Most social media show the domain of the page somewhere in their preview. If you develop on localhost, you can overwrite the domain in the meta panel so you can see how your previews look with the correct domain. You can type just the domain, like "polypane.app", or a full URL, like "https://polypane.app". This will overwrite the domain in all social media previews, so you can see how they look with your actual domain. ### Robots.txt When your site has a robots.txt, Polypane downloads and parses it, then checks if the current URL is blocked by any of the defined `User-agent`s, and if you use declarations known to not be supported by any of the specified `User-agent`s, or when you have duplicates in your list. Polypane only parses robots.txt files that send the appropriate content type. ### Humans.txt and ai.txt When your site has a humans.txt or an ai.txt, Polypane downloads and shows that in the Meta panel. ### Security.txt When your site has a security.txt, Polypane downloads and shows that in the Meta panel. We check both the correct `/.well_known/security.txt` location as well as the `/security.txt` fallback location. ### Ads.txt When your site has a ads.txt ("Authorized Digital Sellers", lists the places where people can buy ads on this website), Polypane downloads and shows that in the Meta panel. Find out more at [iab tech labs](https://iabtechlab.com/ads-txt/). ### WebFinger The WebFinger protocol is a way to give more information about the people or entities related to a webpage or web site. It's a json file that, for a personal site, could contain links to for example social media accounts to prove those accounts are really you. Polypane's implemention sends along the current page as resource. You can find out more over at [webfinger.net](https://webfinger.net/). ### Webmanifest When your site has a web app manifest file we'll parse and display its contents so you can check if they are as you expect them. If you added a theme color it is displayed in the general overview as well. ### Structured data When found, the meta panel displays JSON-LD, Microdata and RDF structured data. The data is sorted by type and richly displayed where possible, meaning we automatically detect links, images and arrays and display them accordingly. When an image fails to load a warning is shown, so you can see at a glance if there's any issues you need to remedy. --- # Outline Panel URL: https://polypane.app/docs/outline-panel/ --- title: 'Outline Panel' --- The "Outline" tab in the Info [panel](https://polypane.app/docs/intro-to-panel/) shows you the page structure in various ways: by headings, landmarks, links, images, forms, focus order or accessibility tree. These outlines are used by assistive technologies to allow users to go through your page quickly. - [Headings](https://polypane.app/docs/outline-panel/#headings) - [Landmarks](https://polypane.app/docs/outline-panel/#landmarks) - [Links](https://polypane.app/docs/outline-panel/#links) - [Images](https://polypane.app/docs/outline-panel/#images) - [Forms](https://polypane.app/docs/outline-panel/#forms) - [Focus order](https://polypane.app/docs/outline-panel/#focus-order-tab-order) - [Accessibility tree](https://polypane.app/docs/outline-panel/#accessibility-tree) You can switch between different outlines using the dropdown in the top right, and check or uncheck "show issues" to show just the list or suggest improvements as well. The outlines are updated live on changes to the page, though you can forcibly refetch data with the reload icon in the top left. Hover over any of the elements to scroll them into view on all panes and show a tooltip with their element info. Clicking on the element will open it in the Polypane element panel. Read on for more information on each outline. > Polypane is filled with accessibility features. We wrote a full overview on our blog: [Find and fix accessibility issues with Polypane](https://polypane.app/blog/find-and-fix-accessibility-issues-with-polypane/). ### Headings Shows all the headings and ARIA headings currently on the page. The overview will warn you when it finds the following issues: - The page has more than one H1. - The page has no H1. - Heading levels are skipped. - Headings with duplicate content, missing content or hidden content. - Headings with overly long content. - Using aria heading levels beyond 6 (which is not recommended) and 9 (which is not supported). - When the accessible name and visual name are too different (WCAG SC 2.5.3). - When the accessible name has repeating substrings. None of these are strict WCAG failures or spec violations but they are considered best practices. It will also highlight headings that are presentational, hidden and where the text content is different from the accessible name. To get a visual overview inside the panes, click "Show overlay". This will draw boxes around all headers and display any issues, which will also be visible in the screenshots you make. ### Landmarks This will show all HTML 5 and ARIA landmark elements on the page and display them with the appropriate role. Polypane will warn you if there are issues with your landmarks, such as: - Duplicate landmarks, - Missing landmarks, - Unnecessary labels - Incorrect nesting When you check the 'show potentials' option in the top right, Polypane will also show landmark-like elements in the overview and the overlay and explain why they aren't added to the list of landmarks properly. > If you want to learn more about how these landmark rules work exactly, check out [landmarks and where to put them](https://www.htmhell.dev/adventcalendar/2022/4/), which Kilian wrote for the [HTMHell advent calendar](https://www.htmhell.dev/adventcalendar/). To get a visual overview inside the panes, click "Show overlay". This will draw boxes around all landmarks and display any issues, which will also be visible in the screenshots you make. ### Links Shows a list of links (both `a` elements and elements with `role=link` set). If an element has a `target`, `hreflang` or `title` that will be displayed, and the overview will warn you if there is no text, duplicate content in the `title` or a missing `aria-current` attribute. Additionally, a badge will be shown for any non-https links, for empty `href` attributes and for links that have a placeholder value like `mailto:`. When a link has non-descriptive text, like "click here", "contiune" or "more", we show a warning. External links are given an icon indicating they leave the website. To get a visual overview inside the panes, click "Show overlay". This will draw boxes around all links and display any issues, which will also be visible in the screenshots you make. #### Broken link checking If the links panel is opened or switched to, Polypane will automatically test all the URLS in the page and highlight broken urls or urls with redirects unless you have more than 100 links. In that case, you need to click "Check status" button to test them, so you don't unintentionally overload your server. Document fragment links (starting with `#`) will be checked by testing if the referenced element ID exists on the page. Alternate protocols like `mailto:` and `tel:` are skipped. Not all sites support testing URLs and some will send error codes back indicating this. The appropriate error code for this is `405 Method Not Allowed`, or `429 Too Many Requests` if you have a lot of URLs going to one origin. When that happens Polypane will show a question mark to indicate you need to manually check these. There are also sites that send back alternative error codes like 400, 999 and 503. This isn't a clear indication so we show the error code as-is. > Learn more: [How to find broken links with Polypane](https://polypane.app/blog/how-to-find-broken-links-with-polypane/) #### Additional warnings Polypane also warns you about inaccessible links, incorrect use of anchor (`#`) links and for missing accessible text. We also check the accessible name of the link for the following issues: - When the accessible name and visual name are too different (WCAG SC 2.5.3). - When the accessible name has repeating substrings. When Polypane encounters multiple links with the same URL but different text content, or multiple links with the same text content but different URLs, it will show a warning and a list of the mismatched links. ### Images Shows all the images that are currently visible on the page, with a preview, their current source, `alt` attribute, title, dimensions, file size, aspect ratio and actual dimensions when the image isn't displayed at full size. Image files that can't be found as well as any other issues with the image are highlighted with a warning. You can right-click a preview to save the image to disk or copy the image location. To get a visual overview inside the panes, click "Show overlay". This will draw boxes around all images and display any issues, which will also be visible in the screenshots you make. Polypane makes a difference between content images and presentational images. Presentational images are marked as such either by an explicit `role` or `aria-hidden` and as such do not need an `alt` attribute. You can toggle 'show presentational' to show or hide the presentational images in the overview. #### Alt attributes If the `alt` attribute is missing a warning is shown. An `alt` attribute that is present but empty is seen as intentional so will not show an issue. For `alt` attributes that contain redundant or nondescriptive text, like Emoij's, "A photo of", a color like "a green button", the text "alt" or "placeholder" or repeats the file name we show a warning. alt texts that are too long can be tedious, so Polypane also shows a warning when it detect long descriptions. ### Forms The form outline will list all forms on the page and their fields split out into the following groups: - **Summary** of the form, with the number of fields, required fields, fieldsets and buttons - **The form's configuration** with action, method and other form properties - **The form's fields** with their type, name, label, value and other properties - **The form's fieldsets** with their legend and fields contained in them - **The form's buttons** with their type, name, value and other properties This overview makes it easy to see if all fields have the right settings, if fields marked as required are communicated as such and if you're missing any labels or have duplicate labels. Polypane will warn you about various issues, for example: - Duplicate labels - Missing labels - Repeated text in labels - Form fields with multiple labels - Unknown autocomplete values - The use of `reset` buttons ### Focus order (Tab order) Will show you all focusable elements in the order that they are focused when pressing the tab button, along with any `tabindex` and `autofocus` attributes. The "show issues" checkbox will show you elements that are focusable but not in the (tabbable) focus order. When it finds elements that are not focusable/interactive by default but have been made focusable, Polypane will suggest changing them to a native interactive element instead. It also gives a warning when you use positive numbers for `tabindex`, which are best avoided. It highlights focus stops that go against the reading direction. To get a visual overview, click "Show overlay". This will draw a focus trial along all the focusable elements. Numbers shown in red are elements that go against the reading direction of the page. #### Keeping track of the focused element When you page has an element with focus, that element is indicated in the Focus order list with an arrow in front of the item, and de the list automatically scrolls to move the focused element into view. When the overlay is active, it also shows the currently focused element by filling the dot in blue. ### Accessibility tree The accessibility tree is similar to the DOM (it's also called the AOM, Accessibility Object Model), but the rendering engine builds it up for assistive technology like screen readers who take the accessibility tree and use that to present the page to the user. In the accessibility tree you will find all the relevant elements and their information: role, name, description, state, properties, and children. Polypane will warn you when there are issues with the accessibility tree, like missing roles, missing names, or elements with names that shouldn't have them. For elements linked by `aria-controls`, Polypane will check that the linked IDs are in the DOM and give a warning if they're missing. The accessibility tree will show a warning when multiple elements have the same accessible name. This can be confusing for screen reader users, so it's best to make sure all elements have unique names. #### Generic roles By default, Polypane hides all elements with generic roles. This makes the accessibility tree easier to navigate (since you don't have to click through any nested `div` elements). You can show the generic roles by checking the "Show generic roles" option. Showing generic roles is useful to verify that all the elements you expect to be in the accessibility tree are. If an element doesn't show up but you expect it to be, showing generics will let you inspect why. --- # Pane sizes URL: https://polypane.app/docs/pane-sizes/ --- title: 'Pane sizes' --- There are a number of different ways to set the size of panes and you are free to use whichever method works best for you: dragging to resize, selecting device preset, using your CSS breakpoints, switching between workspaces or manually filling in values. ## Resizing panes manually There are two ways to set a pane size manually: You can type new values in the header or resize them by dragging. When editing the sizes in the header you can also change them with the arrow keys. When using the arrow keys, the pane size will be updated in real-time. Arrow up and down will change by 1, holding will change by 10, holding will change by 100 and holding will change the value by 0.1 (useful when panes are sized in EMs). These shortcuts also work when scrolling. If you've typed a value or accidentally cleared the input, press to revert to the current value. When hovering over the bottom or right edge of a pane, your cursor will change and a draggable bar will appear by which you can drag to resize the pane, either horizontally or vertically. In the bottom right corner a curved bar will appear that lets you resize both dimensions at once. When resizing, hold to maintain a pane's aspect ratio. In horizontal mode you can double click on the resize bar at the bottom of the pane to make it fill to the available height. ### Randomly resizing all panes Press to resize all panes randomly. This is ideal to do some quick stress-testing of your styling. ### Clipping in horizontal mode Panes in horizontal mode are automatically clipped to the height of the application to prevent vertical scrolling. We do this because additional vertical scrolling would make it hard to get the correct overview and when designing responsive websites you will mostly care about the width and not the height, since there is no fold on the web. If you leave the height open the pane will automatically take the full available height and resize along with the app. ## Using Device Presets With the title of a pane selected, an overlay will appear with a list of common devices. These device presets contain full [device emulation](https://polypane.app/docs/emulation/) settings, and can be set to the viewport size (inside a mobile browser) or device size (full pixel dimension). You can find more details on how the device presets work here: [device presets](https://polypane.app/docs/device-presets/). ## Using workspaces You can use the workspaces in the [Workspace panel](https://polypane.app/docs/workspaces/) to replace your current set of panes (or append the workspace to the currently list of panes). ## Zooming panes To the left of the pane dimensions is a percentage value that lets you zoom out an individual pane (to zoom out all panes, use the [global zoom](https://polypane.app/docs/global-zoom/)). This is useful for when you want to see a pane that's larger than your own screen, or when you need to work on a small screen that you want to make larger so you can more easily see it. Double clicking this value will automatically zoom the pane so the given height fits the viewport. While interacting with the zoom percentage you can use the arrow keys to increase and decrease by 1 and hold , and to increase/decrease by 10, 100 and 0.1 respectively (just like for the pane dimensions). If you've typed a value or accidentally cleared the input, press to revert to the current value. ## Rotating panes To rotate a pane (to go from portrait to landscape or the other way around), hover over the pane header to show the rotate icon (a device either in lanscape or portrait, depending on the pane's dimensions) Click it to rotate the pane. You can only rotate panes that have both a width and a height defined. To rotate all panes, press or go to the view menu and click "Rotate all panes". ## Using ems instead of pixels Pane sizes can be set in pixels or in ems and to switch between them you can click `px` in the top right corner of a pane to switch to sizing in `em`, and click again to switch back. Switching to ems will also update the [rulers](https://polypane.app/docs/rulers-grids-and-guides/) and are particularly nice if you also [use ems for your media queries](https://polypane.app/blog/responsive-design-ground-rules/#rule-4-use-ems-in-your-media-queries). --- # Performance URL: https://polypane.app/docs/performance/ --- title: 'Performance' --- Polypane can be a taxing application, since it will load an instance of Chromium for each pane you have open with similar memory and CPU usage as an active tab in other browsers (We need to keep all panes active to accurately sync between them). The main Polypane runtime (excluding the instances running your website) take about 1% of CPU while idle, so the majority of CPU and memory usage is the result of a website's requirements times the number of panes you have open. > In other words: Polypane usually uncovers issues already present in your website, rather than causing them itself. Though Polypane will run fine for the vast majority of users, there are settings and strategies to make everything run smoother. ## First: check if the issue is limited to the current site Most performance issues in Polypane are caused by the site that's running in Polypane being resource intensive due to lots of GPU/CPU intensive tasks like playing video or doing lots of compositing/animation. These things take up a lot of resources, and those requirements are multiplied by the number of panes you have open. In some cases, performance issues are caused by websites doing things in ways Polypane doesn't expect. To figure out if that's the case, try to run Polypane with this docs page and see if the performance issues persist. If they get resolved, please [tell us the URL](https://polypane.app/support/) so we can figure out what that bottleneck is and either help you improve your website or help us improve our application. We _really_ appreciate this. You can also take a look at [Website issues you could encounter](https://polypane.app/docs/website-issues-you-could-encounter/) or use the performance tweaking options below. Sometimes there is no way around a website being resource intensive. If the items below aren't helping, there are other ways to improve performance: [Tweak site performance](https://polypane.app#performance-tweaking). ## Common performance issues ### Excessive DOM size When you have over 20K DOM nodes, Polypane can get noticably slower as it tries to parse the accessibility tree. Try to reduce the number of DOM nodes by simplifying your HTML. As a reference, Lighthouse will already flag any DOM with more than 1400 nodes as excessively large, so simplifying your DOM is a general recommendation here that will also improve your site's performance. ### CSS file size issues Polypane parses CSS to find the breakpoints, sync hover styles and more. The rendering and parsing engine can handle everything to about 10.000 selectors without issue but beyond that performance might be impacted (in both Polypane and Chromium devtools, of course depending on your device). Polypane shows a warnings when it detects more than 10.000 selectors. When it detects more than 15.000 selectors, hover sync, breakpoint detection and overflow detection are disabled to prevent further performance issues. #### Tailwind CSS performance (for v1 and v2) While plain Tailwind CSS 1 and 2 work fine, once you add custom variants the Tailwind CSS file can quickly balloon to 10MB or more. This negatively affects the browser devtools and likewise also negatively affects Polypane's performance. This slowdown can be completely eliminated by using Tailwinds JIT model, which we highly recommend. Tailwind CSS 3 and up use the JIT by default so are not affected. ### Next.js performance Polypane will show a warning if it detects a Next.js app with App Directory running in development mode. If you use the app directory, the [dev server is really slow](https://github.com/vercel/next.js/issues/48748). This is manageable in a browser where you load each page just one time, but in Polypane where you load a page in potentially many panes, this can be a big issue as the performance issues on the server side stack up. Unfortunately Polypane can not control how fast any server serves up a page. When using Next.js with the App directory, limit the number of panes or switch to the [focus or full layouts](https://polypane.app/docs/layouts/) when not actively working on responsive design. ## Browsersync performance Both Browsersync and Polypane attempt to sync things like clicks and the scroll position. If you run both, they end up duplicating or undoing each others actions, leading to a sluggish experience. When using Polypane, we recommend you disable Browsersync completely, or turn off it's `ghostMode` to let Polypane handle the syncing of events. You can do this by adding `ghostMode: false` to your Browsersync config. Read more about [migrating from Browsersync to Polypane](https://polypane.app/docs/browsersync-and-polypane/) Your local dev server might be using Browsersync without you knowing. In that case, Look for the warning popup that Polypane shows when it detects Browsersync. When Polypane detects Browsersync it will [turn off the built-in syncing features](https://polypane.app/docs/browsersync-and-polypane/#want-to-keep-browsersync). ## Polypane configuration options There are a couple of things you can change in Polypane to improve performance. ### Limit the number of panes Though we optimize the resources used by panes that are not visible, we need to keep all of them in memory. This is fine with up to about 8 panes depending on your device, but if you go might higher, like having 15 panes or more, things can rapidly slow down depending on how much resources a site needs. When you want to get an overview of your [breakpoints](https://polypane.app/docs/breakpoints/) and there's more than 15, we show a warning that lets you choose to show "simplified breakpoints" instead. This feature looks at all your breakpoints, then groups them into 6 panes that cover the range of your breakpoints, giving you a good overview. Alternatively, consider the ["Focus" or "Full" layouts](https://polypane.app/docs/layouts/) when not actively working on responsive design. They show just a single pane, but you still have access to all the Polypane features. ### Make sure hardware acceleration is on For macOS, Polypane has a "Disable Hardware Acceleration" option in the View menu. This can help fix graphical issues, but the downside is that Polypane is significantly slower without hardware acceleration (for obvious reasons). ### Running the right architecture Running Polypane through an emulation layer like Rosetta on macOS slows the application down considerably. Polypane's installers on macOS and Windows will install for the right architecture by default (AMD64 or ARM) so this almost never happens, but when you migrate from an Intel machine to an ARM machine (like Apple Silicon) using the migration assistant, it will copy over the AMD64 installation of Polypane. When this happens, performance on the new machine is severely impacted. Because Polypane always updates to the same architecture, you should [redownload and re-install Polypane](https://polypane.app/download/). ### How inactive tabs work in Polypane To preserve memory, Polypane only keeps the current tab active. This is why switching tabs reloads the page (this saves a ton of memory) If you find yourself wanting to switch back and forth between two tabs a lot, consider loading one in the [Browse tab in the panel](https://polypane.app/docs/browse/). ## External applications known to cause issues Polypane runs alongside other applications on your device and uses the network. Some applications can interfere with Polypane's performance. ### Antivirus or Firewall software Polypane is built on Chromium so it contains a lot of network code. Unlike Chrome itself, it's usually not white-listed in general anti-virus or firewall software. This can cause the application to start much slower and/or web pages to load very slow as these tools throttle and analyse the network data. We understand whitelisting Polypane is not something we should ask you to do, but please consider seeing if it makes a difference. If it does, please let us know so we can reach out to these companies and hopefully improve their handling of Polypane. If you want additional assurance, we recommend you upload the installer or binary to [VirusTotal](https://www.virustotal.com/). VirusTotal is owned and maintained by a subsidiary of Google and checks the file with dozens of different antivirus providers. The following firewall/antivirus software are known to throttle Polypane: - Webroot Secure Anywhere - PC Matic security ### Docker Sites served from Docker can be substantially slower to open in Polypane. We think this has to do with the way the Docker URL is resolved, but we're not sure yet. ### Other applications If you're running other resource intensive apps, like Docker, full web servers or multiple resource-heavy applications, Polypane can get less CPU time and so will feel slower. In general, running multiple heavy applications will compete for your CPU and memory so something's got to give. Consider closing the applications you don't currently need to free up both memory and CPU time. ### External or multiple monitors With an external monitor (or multiple monitors) attached, both Windows and MacOS users may experience poor performance across Electron applications. This seems to be a result of an external monitor having a very high resolution putting strain on the GPU, and can also be the result of using anything other than the default color profile for your monitors. If you experience poor performance on an external monitor, first check and see if it uses a calibrated color profile over the default one. On MacOS, running your external monitor in its native resolution instead of scaled can also help. If you want to run it scaled, Clicking "scaled" in your monitors settings while holding Option will show additional "(low resolution)" options which will let the monitor upscale the resolution, instead of MacOS scaling. This will also improve performance. ## Performance tweaking Sometimes there is no way around a website being resource intensive, for example when showing videos or running different compositing effects. To deal with this Polypane will let you turn off resource intensive features. In the top right of the UI you will find the App settings icon. By switching to the "performance" tab in it, you can turn off a number of features that have a big impact on CPU usage: - Disable Animations - Disable Filters (includes backdrop-filter) - Disable Hover Sync - Disable Transitions - Hide Canvas Elements - Hide Iframe Elements - Hide Video Elements Disabling these CSS features and hiding HTML elements makes it easier for the rendering engine to render your page, improving performance. When you have performance settings active, the App settings icon will show a small gauge. You can choose to keep these features in the first pane by checking "Keep in first pane". --- # Polypane Peek URL: https://polypane.app/docs/polypane-peek/ --- title: 'Polypane Peek' --- The fastest way to get the info for any element is by using Peek. ## Using Polypane Peek Press and hold `alt` (on Linux and Windows) or `option` (on macOS) and hover over an element to show the element dimensions and other quick info in a tooltip: From top to bottom: - Element name, along with id and classes. If an element has a grid of flex layout, the tooltip shows a small icon. - Dimensions and aspect ratio, followed by the color contrast and its WCAG rating - Color, font and spacing info like border, margin and padding (depending on what applies to the element.) - Accessibility info like role, the accessible name and whether an element is focusable. Depending on the type of element it also shows relevant info for that type of element, like `alt` text and `currentSRC` for an image, `href` for a link and `action` for a form. This feature is especially useful to quickly find out which color or font is used, or how much padding or margin an element has on any side. Click on the highlighted element and it will open in the [Element inspector](https://polypane.app/docs/elements-panel/) where you can inspect or edit it further. ### Other methods You can also inspect elements by clicking the Inspect button in the address bar, pressing cmd/ctrl + Shift + C or clicking the inspect button in the [Elements panel](https://polypane.app/docs/elements-panel/). You can also right-click an element and select "Inspect element". ### Inspecting elements with `pointer-events:none;` To inspect elements that have `pointer-events: none` applied, press `shift` during inspection. ### Using Peek with the Chromium Devtools You can switch between using Polypane's inspect tooltip or the Chromium devtools inspect tooltip by right-clicking the inspect button in the header and selecting "Inspect Element (in devtools)". ## Color overlays When inspecting an element the contents, padding, border and margins are all visualized on top of the element. - **Margin**: - **Border**: - **Padding**: - **Content**: The colors are shown in the tooltip in front of each margin, padding and border declaration as a reference, and they follow the colors used in the box model view in the [elements panel](https://polypane.app/docs/elements-panel/#box-model/). ## Setting your preferred color notation You can set your preferred color notation in the tooltip from the [global settings](https://polypane.app/docs/browser-features/#change-the-color-notation) to use either `hex`, `rgb`, `hsl` or `hwb` notation. The default is `rgb`. --- # Polypane Portal URL: https://polypane.app/docs/portal/ --- title: 'Polypane Portal' slug: 'portal' --- Polypane portal lets you share your local development environment with other devices and browsers in your network or through a public URL. This allows you to test and inspect across multiple browser engines and across devices directly from inside Polypane and see the interactions and changes you make in real-time across all connected devices. Two use cases for Polypane Portal are: - **Cross-browser/platform testing**: Open a portal to test your site in multiple browsers at the same time to make sure it works in all rendering engines, while only having to test things once. - **Sharing your work**: Open a portal to share your work with clients or coworkers, so they can see the changes you're making in real-time without you having to publish them first. This way you can show in-progress work or go through suggested style changes and have them see the changes in their own browser in real-time. ## Synced actions When you open a portal, all actions you do in Polypane will be mirrored in every connected browser in real-time. This includes: - Scrolling - Clicking - Form filling - Element panel changes - Node highlights - Layout debugging - Live reloading - CSS and HTML editing When using Polypane Portal, you can test and inspect across multiple browser engines and across devices directly from inside Polypane and see changes you make in all in real-time. This means you only have to test things once to test them in all browsers at the same time. Additionally, you can use Polypane's [link sharing](https://polypane.app/docs/link/) to share the current URL with others, and they will be able to open the same page in their own browser. This is especially useful when you're working on a page and want to show it to others without having to publish it first, or when you want to go through some suggested style changes and have them see the changes in their own browser in real-time. ## Opening a portal When showing a local domain URL in Polypane, you can open a portal by hovering over the address bar to show the Portal icon: Click it to open the Portal settings. You can then choose to open the portal on your local network, or on a public URL. When a portal is active, the icon will be colored blue and will stay visible: ## Network portal When opening a portal on your local network, Polypane will start a new local server on port 6820. The portal settings will show you the URL you can use to access the portal from other devices on your network, a button to copy it and a button to show the QR code for the portal. The QR code will open the [share panel](https://polypane.app/docs/link/). This URL will be available to all devices on your shared network (like your phone, tablet or other computers) and will show the same page as you're currently viewing in Polypane. The URL will automatically be updated to include the current path and query parameters, so you can easily share the current page with others. ### Bonjour/mDNS Polypane uses Bonjour (mDNS, sometimes called Zeroconf) to broadcast the portal URL on your local network under the name `PolypanePortal`. This means that you can open the portal on other devices without having to manually enter the URL (when supported). This is especially useful when you're testing on a mobile device or tablet. Bonjour will create a local DNS entry for `.local` that is available for all devices on your network. ## Public portal When switching to a public portal, Polypane will generate a random URL that you can share with anyone. This URL will be available for as long as you keep the portal open, or until you close Polypane. The URL will be available on a subdomain of `polypane.link` and visible to anyone, anywhere, and will show the same page as you're currently viewing in Polypane. The public URL will be shown in the portal settings, and you can copy it to your clipboard or show the QR code for the portal. The QR code will open the [share panel](https://polypane.app/docs/link/). ## Troubleshooting There are a few issues that can prevent Polypane Portal from working correctly. ### Firewall settings Polypane Portal requires Polypane to allow opening up a port on your current device. If you're having trouble opening a portal, make sure that Polypane is allowed to open ports in your firewall settings. When you first try to launch a portal, your operating system might show a dialog asking if you want to allow Polypane to open a port, or allow network access. Make sure to allow this, otherwise Polypane will not be able to open a portal. ### Local domain recognition Polypane checks if your domain is assigned to the loopback IP address on your device to determine if it's local or not. If the portal icon does not show up, you might be binding to a different IP address. To test this, save the following code to a file called `islocal.js` and call it with node ( `node islocal.js` ) from the command line, replacing `YOURDOMAINHERE` with your domain. ```javascript const dns = require('dns'); const { promisify } = require('util'); const isLocalHost = async (hostname) => { try { const addressInfo = await promisify(dns.lookup)(hostname); console.log('addressInfo:', addressInfo); return false; } catch (error) { console.error('Error resolving IP:', error); return false; } }; isLocalHost('YOURDOMAINHERE'); ``` The result should an object with address `127.0.0.1` for family "4" (for ipv4) and `::1` for family "6" (for ipv6). If it doesn't, your domain is not recognized as local. Please [contact us](https://polypane.app/support/) if you think your local domain should be recognized as local but isn't. ### Public URL limitations The Public URL is great for quick sharing but do not rely on it for long-term sharing. The public URL is randomly generated and is only available for as long as you keep the Portal active, or until you close Polypane. In addition, we will close public URLs after a period of time to prevent abuse. --- # Polypane UI overview URL: https://polypane.app/docs/ui-overview/ --- title: 'Polypane UI overview' slug: 'ui-overview' --- Parts of Polypane will be still familiar if you come from a different browser: There's an address bar, forward and backward buttons and a reload button. However, other parts of the UI might be less familiar. With this overview of the Polypane UI you should be able to find most of the options. Polypane can be split into roughly three areas: - **The header**, with the address bar and navigation UI. - **The workspace**, where your panes are. - **The panel**, where the devtools are. ## The header The header is the similar to other browsers: there's a tab bar, an address bar, back and forward buttons and a reload button. The navigational buttons will be clickable depending on if there is a forward or backward history, and right clicking will show you a list of previously visited pages. ### Reload Clicking the Reload icon will reload the page, but if you right click it you get a few more options: - [Reload the CSS](https://polypane.app/docs/reload-css/) - Hard reload - Clear cookies and reload You can also find quick options to scroll to the top or bottom of the page and access the [Live and Auto reloading](https://polypane.app/docs/live-auto-reloading/) configuration from here, which lets you automate reloading pages based on changes you make in your code editor. If you click the reload button again while the page is loading, loading will be stopped. Tabs can be re-arranged by drag and drop, you can click the `+` button to add a new tab (or use ). Right-clicking the `+` button lets you pick a new [layout](https://polypane.app/docs/layouts/) for the new tab. ### The buttons in the header To the right of the address bar is a set of icons that are unique to Polypane. Different layouts can show different buttons depending on whether or not they're available for that layout. From left to right (in horizontal and vertical layouts): - [Change layout](https://polypane.app/docs/layouts/). Click it to choose between horizontal, vertical, focus and full mode. - [Session management](https://polypane.app/docs/session-management/). Switch to a different session. - [Color Picker](https://polypane.app/docs/color-picker/). Pick colors from anywhere on the screen. Right click for the color picker UI. - [Scroll Sync](https://polypane.app/docs/synced-interactions/). Toggle synchronized scrolling on and off. When off, a small `x` is visible on the icon. Right click to manage other synchronisation features - [Breakpoints](https://polypane.app/docs/breakpoints/). Clicking this button will creates panes for all breakpoins in the site CSS. Right click to find a list of all the breakpoints, and the 'simplified' breakpoints option. - [Screenshot](https://polypane.app/docs/making-screenshots/). Makes a overview screenshot of all panes together. - [Inspect element](https://polypane.app/docs/elements-panel/). Click to inspect elements in all panes. Right click to inspect with pane-specific devtools. (this setting is remembered.) - [Open devtools](https://polypane.app/docs/developer-tools/). Click to toggle the developer tools. Right click to open the [Browser extensions manager](https://polypane.app/docs/browser-extensions/). - [Open Panel](https://polypane.app/docs/intro-to-panel/). Click to open the side panel, where you can find Meta information, social media previews, live CSS, handoff tools and an overview of your saved workspaces. - [Global zoom](https://polypane.app/docs/global-zoom/) lets you zoom all your panes at once. The percentage can be clicked and manually changed as well. By double clicking the percentage you can zoom to 100% or zoom to fit. - [Browser Extensions](https://polypane.app/docs/browser-extensions/) Click to toggle showing your browser extensions or right-click to open the extensions manager. - **App settings** contains various global options to turn on and off, like web vitals and console messages, as well as performance options. You can also open this with the shortcut . In Full mode the Pane-specific options are also added to the header. UI. ## The Workspace The workspace is where all your panes are shown. To learn more about the different layouts, read [the layout section](https://polypane.app/docs/layouts/) of our documentation. To learn more about panes and their UI, read the [Intro to panes](https://polypane.app/docs/intro-to-panes/). ## The Panel The panel is where you find some of the more advanced tools that Polypane offers, like the unified console, the combined element inspector and the meta information panel. The panel can be opened by clicking the icon in the header or by pressing and can be docked to the right, left or bottom of the window, or in its own window. For a full overview, read the [intro to panel](https://polypane.app/docs/intro-to-panel/) --- # Polypane and local servers URL: https://polypane.app/docs/other-tools/ --- title: 'Polypane and local servers' slug: 'other-tools' --- Polypane works really well with automatic reloading tools like [Browsersync](https://browsersync.io/) or hot module reloading and can be easily started from code editors like Atom, Whisk and VS Code. For more advanced integrations, check out [Integrations](https://polypane.app/docs/integrations/) ## Launch Polypane from your server If your local dev server automatically opens the URL it serves, you can [configure your device to always open localhost in Polypane](https://polypane.app/blog/always-open-localhost-in-your-development-browser/). If you can configure a specific browser instead, you can use Polypane in stead of other browsers too. Polypane will automatically open a new tab when active, or launch with a new tab containing your URL. ## Browsersync Though Polypane works with browsersync, we recommend turning it off and replacing it with the native functionality in Polypane. Read the [Browsersync and Polypane](https://polypane.app/docs/browsersync-and-polypane/) docs to help migrate. When Polypane detects Browsersync with ghostMode turned on, we automatically disable Polypane's syncing logic. We do this because Browsersync is slightly slower than Polypane's syncing, and so it continuously undoes the scroll syncing Polypane did, leading to a very frustrating experience. To launch Polypane when you start Browsersync, add `--browser 'polypane'` to your CLI command. (Depending on your operating system you might need to provide the full path). Polypane will automatically start with the right URL when you launch Browsersync. This also works with [opn](https://github.com/sindresorhus/opn), [webpack-dev-server](https://webpack.js.org/configuration/dev-server/#devserver-open) and similar tools. ## WPEngine’s Local Development Tool Local WordPress sites that are created using WPEngine’s “Local” development tool use self signed certificates for https that cannot be trusted by Chromium based browsers like Polypane. This prevents urls fetched from the local Wordpress API such as post thumbnails to render when trying to load them. To fix the issue, you must set the certificate’s trust on your local system to trusted. There is a button within the Locals tool next to SSL to "Trust" on your local system. If you’re using Mac, there are extra steps to take that are [documented here](https://localwp.com/help-docs/advanced/managing-local-sites-ssl-certificate-in-macos/). After trusting the self signed cert on your machine, Polypane will be able to display images from URLs fetched from your Local WordPress instance. This is useful if you’re using WordPress in a headless manner. --- # Recording URL: https://polypane.app/docs/recording/ --- title: 'Recording' --- The [pane screenshot menu](https://polypane.app/docs/making-screenshots/) also contains the option to record a pane. This will let you record a video of the pane including all interactions. Afterwards, you can annotate and trim the recording and export it as an mp4 file. > Note: the recording feature is currently not available on Windows on ARM. ## Start recording To start recording, click the camera icon ( ) above a pane to open the screenshot menu. Then select "Start recording" from the menu. The camera icon changes into a red dot, indicating that the recording is in progress. You can stop the recording by clicking the red dot. ### Delay recording The **screenshot delay** options are also applied to recordings. This means you can set a delay before the recording starts, which gives you time to set up the page before the recording starts. ## Custom cursor Because Polypane captures video from the web contents directly, we draw a custom cursor while you're interacting with the pane. The custom cursor will show clicks by changing color and showing a short animation to make it clear where you click. Hovering over links will change the cursor to a pointer and right-clicking will rotate the cursor. ## Video Editing After stopping the recording, Polypane needs to process and prepare the video for exporting. This can take a while, depending on the length of the recording. Once the video is ready, the video editor opens where you can annotate the video with text, shapes, arrows and emoji. You can also trim the video to remove any unwanted parts. Our video editor is powered by [Pintura](https://pqina.nl/pintura/?aff=xLXrx&ref=polypane). From there you can export the video as an mp4 file, either saving it to disk directly, saving as (to select a folder and pick a file name) or by copying it to the clipboard. --- # Reference image URL: https://polypane.app/docs/reference-image/ --- title: 'Reference image' --- The reference image feature lets you overlay an image on top of a pane, or show it and your site side-by-side. With this you can quickly compare a site to the design or to earlier screenshots to detect visual regressions. If a reference image is shown, the icon will show a blue dot. The reference image has two modes: - **Overlaid** shows your site with the image overlaid on top of it. You can apply various filters, and fade between the image and the side. It also has a split view. - **Side-by-side** shows your site and the image next to each other. This mode is only available in the horizontal and vertical layouts. Read on for more info on the two modes. ## Setup Add a reference image by clicking the icon in a pane header. Once you've selected an image, the pane will automatically resize to the width of the reference image. From here, select if you want to show the image overlaid on the site, or side by side, and set an X and Y offset to position the image where you need it. the X and Y offset are number fields that you can increase with the arrow keys. Hold while pressing the arrow keys to increase the offset by 10, and hold while pressing the arrow keys to increase the offset by 100. ### Removing the reference image To quickly remove the reference image, click the icon in the pane header using your middle mouse button. Alternatively, click open the settings and click "reset". ### Troubleshooting The reference images is synced with the main scroller on the page, which you can find with `document.scrollingElement`. If your reference image doesn't scroll along with your page, then you probably have a different scrolling area overwriting that scrolling element (for example, a 100vh height div with overflow:auto as the top element) The scrolling element is the designated scrolling element for the page (usually just the `html` element) and it's optimized compared to other scrollable elements, so it's the one you'll want to use! ## Overlaid Image With the image overlaid you can see both the image and the website, letting you easily see where the differences are. Use the slider to fade between the site and the image, or toggle "Reference image visible" to quickly hide and show the image. There are three overlay styles: - **Normal** shows the image without any modifications - **Difference** sets the "difference" blend mode between the image and the site. Everything that's similar turns black, and differences are highlighted. - **Invert** Inverts the image. Everything that's similar turns grey. The differences from the image are shown inverted while the site retains its original colors. ### Split View slider The overlaid image has a slider on top of your pane so you can scrub between your site and the image. Useful for when you need to compare small details between the two. ## Side-by-side image This shows the image to the right of your pane, while syncing the scroll position so you can compare them side by side. You can disable the synced scrolling from the settings to scroll both individually. --- # Reload CSS URL: https://polypane.app/docs/reload-css/ --- title: 'Reload CSS' --- With the shortcut you can quickly reload all the CSS in a page without refreshing the entire page. You will also find this option by right-clicking the reload button. This is ideal if you're working on just the CSS and don't want to refresh the entire page every time. Instead of manually reloading the CSS, you can also use the [built-in live reloading](https://polypane.app/docs/live-auto-reloading/), and Polypane will reload the css for you after every change, also without refreshing the page. --- # Review and approval by IT and Security URL: https://polypane.app/docs/review-and-approval-by-it-and-security/ --- title: 'Review and approval by IT and Security' --- This guide gives answers to the most common questions you may be asked by your IT or Security teams in order to get approval for Polypane. For information on procurement, see [Sales and Procurement](https://polypane.app/docs/sales-and-procurement/). If you can't find the answer to a question, [reach out to us](https://polypane.app/support/) and we'll do our best to help you. ## General Info **Description of your product or service** Polypane is a web browser for developers, designers, QA and PMs. It helps you build and test websites that are responsive, accessible and performant. **Do you have a designated security/privacy lead who manages your security program? Provide contact information.** Yes. Kilian Valkhof, Founder, kilian@polypane.app **Do you have publicly published privacy and security policies? Provide public links to your Privacy and Security policies.** - [Privacy Policy](https://polypane.app/privacy/) - [Terms of Service](https://polypane.app/legal/) **Do you have a customer information policy?** - [Privacy Policy](https://polypane.app/privacy/) **Data protection role** Controller **Do you have a data access control policy with monitoring? List the roles in the organization who have access to sensitive data.** Polypane is developed by a solo founder that can access sensitive data when resolving customer issues. Sensitive data is limited to very little PII: Name, E-mail and account status. **Do you have a 3rd party vendor assessment and data access policy? List the roles of any 3rd party to the organization who may have access to sensitive data and under what circumstances.** See our [Privacy policy](https://polypane.app/privacy/) to understand how we interact with third parties. We have DPAs for all parties that process our data. ### Internal security programs **Does your organization have a security and privacy program and policies?** Yes. **Do you have a passwords policy?** Yes. **Do you have a system access control policy with monitoring?** Yes. **Do you have a server software update policy? Describe the update and patching mechanisms for operating systems and software to ensure that these are kept up to date.** We do regular updates of the operating systems and packages that we use. ## Data retention, backups, and policies **Do you have a customer information possession policy? Describe your policy and the conditions for returning sensitive data and destroying the data once the service is terminated.** See [Privacy Policy](https://polypane.app/privacy/) and [Terms of Service](https://polypane.app/legal/). **Can you commit to keeping customer information at a strict minimum amount of time after customer stops use?** We delete all information when a customer requests to delete their information. We do maintain that data inside backup for up to thirty days, at which point it's entirely deleted. We retain a users e-mail for up to six months to prevent abuse. **Do you have a procedure for returning personal data in a format allowing data portability?** We can export customer data to a CSV upon termination of service if requested by a customer. **Do you retain customer information in backups after a customer has deleted (or requested deletion of) the data?** Yes. We keep backups of user data for up to thirty days. ## Incident response and reporting **Do you have an incident response policy? How does your organization define a security incident and personal information data breach.** We handle this on a case by case basis. **Describe how customers will be informed of personal data and data security breaches affecting a customer’s data processed by you and your subcontractors and within what timeframe.** They will be informed via email. **Is there a formal company Risk Management program and process that is documented to identify and monitor risks on an ongoing basis?** No. **Are mitigating processes and controls identified for each information security risk discovered?** Yes. **Is there an independent risk, security assessment, or audit performed on your external third parties?** No. **Are network traffic events logged to support historical or incident research?** No for desktop app. An access log is maintained for the management dashboard. ## Miscellaneous **Are all authentication, data transmissions, client,server and web sessions that are transmitting confidential data protected using SSL, SSH, or other transmission encrypted protocol?** Yes, with TLS 1.3 **Is access to diagnostic or maintenance ports on network and system devices restricted?** Yes. **Is there a process to restore data to a geographically separate secondary facility in a disaster scenario?** Yes, our hosting includes redundancy. **Is data or sensitive credentials (e.g. passwords) transmitted electronically encrypted?** Yes, HTTPS. Password encryption is handled by Amazon AWS Cognito, which do not disclose their encryption algorithms. **Legislation** EU GDPR compliant; see "Your rights" section of our [privacy policy](https://polypane.app/privacy/). ## Certification Polypane does not currently have any SOC2/ISO27001/HECVAT certifications or audit. Polypane does not interface with your business logic or store any sensitive PII data. Our service providers are all SOC2 compliant and we have DPAs with the relevant ones. - Paddle, our payment provider, which keeps all your payment data (we don't have access to that): https://www.paddle.com/legal/soc-2-compliance - Supabase, our database provider: https://supabase.com/blog/supabase-soc2 - Sentry, our error logging system: https://docs.sentry.io/product/security/soc2/ - Drift, our (optional) chat support system: https://www.drift.com/security/ - AWS, our email provider: https://aws.amazon.com/compliance/soc-faqs/ --- # Rulers, grids and guides URL: https://polypane.app/docs/rulers-grids-and-guides/ --- title: 'Rulers, grids and guides' --- With Polypane's rulers feature you can easily measure and check alignment and overlay grids, columns and rows on a pane. You can configure these per pane by clicking the rulers icon above a pane. All elements scroll along with the page, and you can set the color of all elements using the color button in the settings panel. ### Rulers To show rulers for all panes in a tab press , click "Toggle Rulers" in the View menu or open the rulers popup for a pane and click "Show Rulers". Rulers are shown for all panes to keep the alignment consistent. Rulers are shown either in pixels or in ems, depending on the settings for a pane (click the "px"/"em" indicator to toggle this). #### Changing the color You can change the color of the rulers, grids and guides in the settings, to make sure it has enough contrast with your page. ### Measure overlay The measure overlay lets you draw a rectangle on the page to measure its dimensions and distances to the edges of the pane. You can draw a rectangle, drag it around and resize it. To toggle the measure overlay, click the measure icon in the top left corner of the pane or click "show/hide measure" in the Rulers popup. While the measure overlay is active you can still scroll the page but clicks will be captured by the overlay. Hide the measure or toggle the rulers ( ) to interact with the page again. The overlay will show the width and height of the rectangle, as well as the distance to the edges of the pane in pixel values. While interacting with the overlay it will snap to any guides you have set, making it easy to measure the distance between two elements. #### Screenshotting the measure If you have a visible rectangle on the screen, the "Measured" button in the [pane screenshot](https://polypane.app/docs/making-screenshots/) menu will be available and will take a screenshot of the area you have selected. This is useful when you need to screenshot a portion of the page that can't neatly be captured by the element screenshot functionality. ### Guides Hover over the rulers to show a guide. On either side of the guide is a number displaying how many pixels from that edge the guide is, making it easy to place. Click anywhere on the ruler to add a permanent guide there, and a click in the same position to remove it again. Alternatively you can open the ruler menu and add guides manually by typing in their pixel or em value (depending on the pane settings). You can change these values with the arrow keys and keys to change the value. Holding will change the value by 10, holding changes the value by a 100, while holding will change the value by 0.1. Adding a negative value will offset rules from the right side of the pane. ## Showing the distance between guides By default, guides show the distance to the edges of the pane, but you can check 'Show distance between guides' to show the distance between all shown guides. This is useful when you want to check the distance between two elements, or when you want to check the size of something. Guides will persist even after you hide the rulers. ### Grid Use the rulers popup for a pane and go to the "grid" tab to configure a grid. A grid has a size and a vertical and horizontal alignment. The size is either in pixels or ems depending on the pane setting, and can be updated with the arrow keys just like the guides. The alignment settings let you align the grid to the edges or center of the page, depending on your needs. The default is top center aligned. An indicator dot in the tab will tell you if grids are active. You can remove the grid again by clicking "clear grid" Click the "dot grid" checkbox to switch between a grid drawn using lines, or a grid drawn using dots. ### Columns Columns can be found in the "columns" tab in the rulers popup. They can be configured with either a fixed column width, or a total number of columns, along with an optional gutter width and offset. Fixed widths are in pixel or ems depending on the pane setting. The offset is a margin from the aligned edge, so you can add e.g. a specific left margin to your design. Gutters are optional, Polypane will automatically add column borders if no gutter is specified. Columns can be left, center or right aligned. For fluid columns you can optionally set a specific width (like 1200 pixels wide) within which to lay out the columns. When kept empty, fluid will use the entire pane width. An indicator dot in the tab will tell you if columns are active. You can remove the columns again by clicking "clear columns" ### Rows Rows can be found in the "Rows" tab in the rulers popup. They can be configured with either a fixed row height, or a total number of rows, along with an optional gutter height and offset. Fixed widths are in pixel or ems depending on the pane setting. The offset is a margin from the aligned edge so you can add e.g. a specific top margin to your design. Gutters are optional, Polypane will automatically add row borders if no gutter is specified. Rows can be top, center or bottom aligned. For fluid rows you can optionally set a specific height within which to lay out the rows. When kept empty, fluid will use the entire pane height. An indicator dot in the tab will tell you if rows are active. You can remove the rows again by clicking "clear rows" --- # Sales and Procurement URL: https://polypane.app/docs/sales-and-procurement/ --- title: 'Sales and Procurement' --- This guide gives answers to the most common questions you may be asked by your sales and procurement teams in order to get approval for Polypane. Teams and procurement companies purchase Polypane every day, and the vast majority of them choose a plan on our [pricing page](https://polypane.app/pricing/) and don't need to ask us any questions. But if you do, we're here to help. ## Volume purchases If you want to purchase Polypane for a large number of seats, [contact us](https://polypane.app/support/) for more information. ## Procurement info Find the information you need to add Polypane to your procurement system below. ### Company information - Company name: Firstversionist B.V. - Also trading under: Polypane B.V. - Address: Essehout 35, 2719MD Zoetermeer, The Netherlands - VAT number: NL859829765B01 - Chamber of Commerce (KVK) number: 74263404 - SAM registration: RTPUGHY2NQ88 - DUNS number: 492971484 - Email: support@polypane.app - Contact Name: Kilian Valkhof - Accounting contact: Kilian Valkhof ### Payment information We accept credit card, PayPal and where available, Apple Pay and Google Pay. We support local currencies through our payment processor Paddle, which also has [procurement information available](https://www.paddle.com/about/procurement). For enterprise plans we also support bank transfers in Euro. [Contact us](https://polypane.app/support/) for more information. ### Onboarding information When purchasing Polypane as a procurement company we need the following information: - The email address of the person that will manage the license - Name of the person that will manage the license - The email address of the person that will receive the invoice (If different) - Company details for the invoice These items will be asked for during the checkout process when going through the [pricing page](https://polypane.app/pricing/), where you can also choose between monthly and yearly billing. When you want to purchase a team plan with more than 10 seats [contact us](https://polypane.app/support/) with the information above and we will create a custom purchase link for you. Likewise, [contact us](https://polypane.app/support/) for enterprise purchases. Enterprise accounts always have a yearly billing period. ### Product information - Type of product: Developer Tooling Software - Product name: Polypane - Product description: Polypane is a web browser for developers, designers, QA and PMs. It helps you build and test websites that are responsive, accessible and performant. - Product website: [polypane.app](https://polypane.app) - Unit price: See our [pricing page](https://polypane.app/pricing/) - Delivery cost: Free via email - Estimated lead time for delivery: Instantly via email ### Supplier, due diligence and onboarding forms If you are looking to purchase an individual or team license and need to fill out a supplier or onboarding form, please find the information for this on the following pages: - The information from this page - [Pricing page](https://polypane.app/pricing/) - [Terms of Service](https://polypane.app/legal/) - [Privacy Policy](https://polypane.app/privacy/) - [Review and Approval by IT and Security](https://polypane.app/docs/review-and-approval-by-it-and-security/) If you can't find the answer to a question, [reach out to us](https://polypane.app/support/) and we'll do our best to help you. Likewise, we are happy to fill this in for you for enterprise purchase orders. [Contact us](https://polypane.app/support/) with the required information and we'll get back to you as soon as possible. --- # Security URL: https://polypane.app/docs/security/ --- title: 'Security' --- Because Polypane is a browser for developers, it has slightly different security settings compared to other browsers, and will allow you to do more on localhost that would otherwise be blocked. ## Invalid ssl certificates For localhost, Polypane will silently allow self-signed certificates. On any other domain or for any other certificate error (like expired or the wrong host) Polypane will show a dialog showing you the url and the error and ask you if it should still open the page. It will do this once per certificate per session. ## Cross origin resource sharing (CORS) Most browsers will block access to cross origin resources for security, but during development this might not be desirable. You can disable Content-Security-Policy-Headers in the "Edit" menu to allow CORS. ## Connection limits are ignored (Dev) servers can limit the amount of connections a single browser can make to them, but this is ignored in Polypane. This way you can view your website in multiple panes, even if the number of panes exceed the maximum number of concurrent connections allowed. Known dev servers that have this limit are webpack-dev-server and the Gatbsy development server. Do note that if your server has any sort of rate limiting, you will still be able to hit that limit. --- # Session management URL: https://polypane.app/docs/session-management/ --- title: 'Session management' --- With different sessions you can test your web application in various states: logged in, logged out, with different user roles, with different languages etc. Each session will have its own cookies, cache and local storage. You can create as many sessions as you want and switch between them on a tab level or on a pane level. ## Creating sessions The tab session manager is available in the address bar and allows you to create and delete sessions for all panes in the current tab. The Emulation popover allows you to create and delete sessions for the current pane only. To create sessions, fill in a name for your session and click on the `+` button. Your new session will be automatically applied and added to the list of custom sessions. To delete a session, click on the trash icon next to it. Any tab or pane using that session will be reverted to the default session. The Default session will always be available and cannot be deleted. It is the session that is used when you open a new tab or pane. ## Tab sessions When a tab has an active session, the name of that session is shown in the address bar, and a checkmark is visible next to the session in the session manager. You can click either the session name in the address bar or the session manager icon to open the session manager. Any tab that uses a custom session will also have a blue top border to indicate that it is using a custom session. ## Pane sessions By default all panes inherit the session of the tab they are in. You can override this by selecting a different session in the Emulation popover. The pane will then show a blue user icon to indicate that it is using a custom session, and you can hover over it to see the name of the session. To remove a pane-level session, click the "Inherit From Tab" button. ### Decoupling interactions When your tab has multiple panes with different sessions, [syncing all interactions](https://polypane.app/docs/synced-interactions/) usually doesn't make sense (the URLs might be different and the panes might be in different states). To decouple the interactions, right-click the sync button in the address bar and click "Disable all". To prevent the panes from syncing their URL, you can also [disable navigation sync](https://polypane.app/docs/emulation/#sync-navigation) under the "network" tab in the [device options](https://polypane.app/docs/emulation/) popover. For more advanced scenarios involving multiple URLs across panes, see [Showing multiple URLs](https://polypane.app/docs/multiple-urls/). --- # Setup URL: https://polypane.app/docs/setup/ --- title: 'Setup' --- To install and activate Polypane, follow these steps. ### Step 0: Make sure you have access To use Polypane you need to create an account, or be invited by a business account holder. If you do not have an account or invite, [register here for an account](https://dashboard.polypane.app/register). ### Step 1: Download and install Polypane Install Polypane by [downloading](https://polypane.app/download/) the installer for your operating system and running it. Polypane is available for Windows 10/11, macOS (A universal app for Catalina and up, with support for both Intel and Apple Silicon) and Linux (.deb and appImage). #### Step 1.5: Download and install the browser extension **While Polypane downloads**, make sure to also install the [browser extension](https://polypane.app/download/#extensions) for your default browser. The extension adds a button to your browser that with a single click launches Polypane and opens the current URL in a new tab. It really helps you get used to Polypane. ### Step 2: Request license When first opening Polypane, you need to request a license key for the device. Fill in the e-mail address you signed up with and we'll send you an email with the key. Each license key is only valid for a single device. It shouldn't take longer than a couple of minutes to get your license key, but do make sure to check your spam folder. _If Polypane tells you there is "no user with this e-mail", you might not yet have verified your email address. Check your inbox for an email from us and click the link to verify your email address._ ### Step 3: Verify license Copy the license into Polypane and verify the license. After this, your copy of Polypane is activated. ### Step 4: All set This confirms that your license is valid and you can start using Polypane. ### Step 5: Follow along with the Quick Start The Quick Start in Polypane will help you understand the interface as you use it. It's available in the first tab you open, and during the trial you can also press or press the "Tutorial" button in the top right. Go to [Into to Polypane](https://polypane.app/docs/) for a video walkthrough of the Quick Start. ### (Optionally) Install on your other machines You can use Polypane on multiple devices. Now that you've activated your first device, you can install it on other devices too. --- # Share panel URL: https://polypane.app/docs/link/ --- title: 'Share panel' slug: 'link' --- When you hover over the address bar in Polypane a QR code icon will appear to the right. Click this to open Polypane's Share panel. Here you can find QR codes for regular links or for Polypane links. Scan them with another device, copy the link or download the QR code for later sharing #### Regular Links Regular links are great to share URLs with your mobile devices. When Polypane detects you have a local URL opened it will automatically **replace that with your internal IP** so it can be opened by other devices on your network. #### Polypane Links Polypane links are like regular links, but they're more powerful and they're perfect to share your workspace with the rest of your team. **Pane Sizes** You can check "include pane sizes" to send along your current list of panes. **Scroll position** You can check "include scroll position" to send along your current scroll position. This feature needs the recipient to also use Polypane 20.1 or higher. **Websafe URL** Instead of using the `polypane://` protocol, this will use a special opener URL (similar to e.g. Zoom) that uses the Polypane HTTPS website to open Polypane. Because this is an HTTPS URL it will be recognized as a URL in more places, and will be easier to share and click. #### The polypane:// protocol When you install Polypane it registers the `polypane://` protocol on your device which lets other programs open links in Polypane directly. Various [integrations](https://polypane.app/docs/integrations/) make use of this feature as well as our [browser extensions](https://polypane.app/download/). #### Portal Links When you have a local server running, you can use [the Portal feature](https://polypane.app/docs/portal/) to share it through Polypane. Use the Portal QR code to quickly share that link with others. When opening a Portal for your network only, Polypane will automatically use the internal IP address of your device like it does for Regular links. --- # Showing multiple URLs URL: https://polypane.app/docs/showing-multiple-urls/ --- title: 'Showing multiple URLs' --- With Polypane, you can show multiple different URLs side by side. whether it's ti compare your local development site with the live production version, testing different pages of your site simultaneously, or comparing your site with competitors. ## Decoupling panes for different URLs By default, all panes in Polypane navigate together through [navigation sync](https://polypane.app/docs/synced-interactions/#navigation-sync). However, you can decouple individual panes to show different URLs while keeping others synchronized. ### Disabling navigation sync for a pane To show a different URL in a specific pane: 1. Click the emulation settings button in the pane header (devices icon) 2. Go to the "Network" tab 3. Toggle off "Sync navigation" When navigation sync is disabled for a pane: - The pane title transforms into an address bar where you can enter any URL - A broken link icon appears before the URL to indicate this pane is decoupled - This pane will no longer follow navigation changes from other panes - Other panes will continue to sync with each other ### Common use cases for multiple URLs **Local vs. Production comparison**: Load your development site in some panes and your live site in others to compare changes, spot differences, or ensure consistency. **Multi-page testing**: Display different pages of your site simultaneously to test navigation flows, check consistency across pages, or verify global changes like header/footer updates. **Competitive analysis**: Compare your site side by side with competitor sites to analyze design patterns, performance, or user experience approaches. **A/B testing**: Show different versions of the same page to compare designs, layouts, or content variations. ## Working with sessions for multiple URLs When using multiple URLs, you might also want to use different [sessions](https://polypane.app/docs/sessions/) to test various user states across your different URLs: - Test logged-in vs. logged-out states - Compare different user roles or permissions - Test with different language preferences - Simulate various user data scenarios Each pane can have its own session, allowing you to test complex scenarios where different URLs might need different authentication states or user contexts. ## Disabling synced interactions for multiple URLs When showing different URLs, you typically want to disable [synced interactions](https://polypane.app/docs/synced-interactions/) since: - The pages might have different layouts and structures - Interactions shouldn't be replicated across different sites - Scrolling and clicking should be independent per URL To disable interaction syncing: 1. Right-click the sync button in the address bar 2. Select "Disable all" to turn off all interaction syncing 3. Or selectively disable specific interactions like scroll sync, click sync, etc. This prevents unintended interactions from affecting all panes when they're showing different content. --- # Simulators URL: https://polypane.app/docs/simulators/ --- title: 'Simulators' --- The Simulators available for panes contain a wide range of different simulations to experience how different impairments affect the way you interact with a page. They are available in the debug tools popup, which you can open by clicking the pen-and-ruler icon above each pane. This popup contains both simulators and debug tools in two separate tabs. To learn more about the debug tools, read the [Debug tools documentation](https://polypane.app/docs/debug-tools/). When a debug tool is active, you can clear it with the "X \[debug tool]" button at the top of the popup and reload it with the "re-apply" button There are over 40 different simulators and debug tools available split into different categories, ranging from color blindness simulators to text contrast checkers to disabling CSS and JS. Do you have an idea for a useful Simulator? [Let us know](https://polypane.app/support/). > Polypane is filled with accessibility features. We wrote a full overview on our blog: [Find and fix accessibility issues with Polypane](https://polypane.app/blog/find-and-fix-accessibility-issues-with-polypane/). ## Quick Mouse interactions - Clicking the debug tool icon with your primary mouse icon will open the debug tool popup. - Right-clicking the debug tool icon will reload the currently selected debug tools, useful for debug tools like the [color contrast checker](https://polypane.app#contrast-checker) (after changes to the page) or the [chaos content debug](https://polypane.app#content-chaos-test) tool to apply new random content. - Middle clicking the debug tool icon removes the current debug tool. Holding while middle clicking will remove the debug tools from all panes. Hold while adding a debug tool will apply it to all panes. ## Overview of all Simulators Polypane has over 40 Simulators and [Debug tools](https://polypane.app/docs/debug-tools/) (which have their own page). For more information on them inside Polypane you can hover the icon to the right of each overlay in the popup. #### A note on color blindness We simulate all 8 types of color blindness. Together they affect roughly 1 in 12 men (8%) and one in 200 women in the world. Between the simulators ending in "\*omaly" and "\*opia", the "\*opia" ones count as "full" color blindness for that type, while "\*omaly" is a milder version. The chosen values for the "\*omaly" options are averages but people with "\*omaly" color blindness can be at any place on the spectrum between no color blindness and full color blindness, so be aware of that. Additionally, it's important to realise that these simulators only _simulate_, and will actually differ from what any individual with a color deficiency will see. Use these simulators to make broad changes for things clearly broken, rather than making small tweaks to something you find aesthetically pleasing. > For more info about the color blindness simulators, read our article [Developing for color blindness with Polypane](https://polypane.app/blog/developing-for-color-blindness-with-polypane/). #### Red-green color blindness The most common forms or color blindness all fall under Red-Green color blindness: **Protanomaly** ![](https://polypane.app/doc-img/overlays/protanomaly.png) **Protanopia** ![](https://polypane.app/doc-img/overlays/protanopia.png) **Deuteranomaly** ![](https://polypane.app/doc-img/overlays/deuteranomaly.png) **Deuteranopia** ![](https://polypane.app/doc-img/overlays/deuteranopia.png) #### Blue-yellow color blindness Less prevalent are Blue-yellow colorblindness. 0.02% of the worldwide population has this. **Tritanomaly** ![](https://polypane.app/doc-img/overlays/tritanomaly.png) **Tritanopia** ![](https://polypane.app/doc-img/overlays/tritanopia.png) #### Full color blindness Full, or near-full loss of color is incredibly rare and affects less than 0.0001% of worldwide population. **Achromatopsia** ![](https://polypane.app/doc-img/overlays/achromatomaly.png) **Achromatomaly** ![](https://polypane.app/doc-img/overlays/achromatopsia.png) **Achromatopsia (cerebral)** ![](https://polypane.app/doc-img/overlays/achromatomaly-cerebral.png) #### Visual impairments Other visual impairments usually blur or dull someone's vision. As people get older, these become more prevalent. **Cataracts** Blurs and clouds vision ![](https://polypane.app/doc-img/overlays/cataracts.png) **Glaucoma (interactive)** Blurs vision, especially around the peripheral vision. Use your cursor to bring different parts of the page into focus. The page remains interactive. **Farsightedness** Makes it difficult to see details up close. ![](https://polypane.app/doc-img/overlays/farsightedness.png) **Astigmatism** Blurring and ghosting of the vision in a single direction. Polypane has emulation for horizontal and vertical astigmatism. ![](https://polypane.app/doc-img/overlays/astigmatism.png) The Astigmatism filters are built by [Kuba](https://cubiq.dev/). > The astimatism filters are not visible on screenshots. This might change in the future. **Tunnel vision** Tunnel vision is the loss of peripheral vision, leaving just the center of your vision. It has a wide range of causes, from permanent (advanced Glaucoma) to temporary (altitude sickness) to situational (wearing goggles). This simulation will follow your mouse cursor as a way to simulate the loss of peripheral vision. **Macular degeneration** The macula is the part of the retina that is responsible for central vision. Macular degeneration is the loss of that central vision. This simulation will follow your mouse cursor as a way to simulate the loss of central vision. ![](https://polypane.app/doc-img/overlays/macular.png) **CMV Retinitis** causes specks in your vision and is caused by the cytomegalovirus in immunocompromised people. **Photophobia** A sensitivity to light. ![](https://polypane.app/doc-img/overlays/photophobia.png) #### Bright sunshine Colors get washed out and low contrast parts of your page become invisible when watching a screen in bright sunlight. ![](https://polypane.app/doc-img/overlays/brightsunshine.png) #### Dimmed Screen Emulates a desktop screen at 40% brightness or a mobile phone with brightness turned all the way down. ![](https://polypane.app/doc-img/overlays/dimmedscreen.png) #### Night mode Many devices have a night mode, that lowers the blue colors and increases the red colors for a more pleasant display when there is less light. ![](https://polypane.app/doc-img/overlays/nightmode.png) #### Dyslexia Dyslexia affects 5 to 10% of the population worldwide, but it might be as high as 17% as not all dyslexia is diagnosed. There is no single way to simulate dyslexia as it affects different people in different ways. Our simulator makes you aware of the reading difficulty it brings. #### Add your own Do you have an idea for a useful Debug tool? [Let us know](https://polypane.app/support/). --- # Source panel URL: https://polypane.app/docs/source-panel/ --- title: 'Source panel' --- The "Source" tab in the Info [panel](https://polypane.app/docs/intro-to-panel/) shows the (generated) HTML source of the current page. The HTML is syntax highlighted and sections are collapsible so you can quickly scroll through the source. By default full words are selected, but you can doubleclick to select entire lines for easy copying. You can reload this view with the reload button in the panel. ## Auto-formatting Polypane automatically formats the HTML to fit the panel so even if you minify your HTML, it will be readable. The page is formatted with Prettier, and you can [change the Prettier configuration](https://polypane.app/docs/live-css/#custom-formatting-with-prettier). If the source contains validation errors, Polypane is not able to format it. ## HTML Validation Polypane automatically validates the generated HTML source and lists anything it finds. Hover over the element or line info to scroll to and highlight the issue in the source, and highlight the element in the panes. Click the element to open it in the Elements panel. Errors are also indicated with markers in source itself. --- # Storage panel URL: https://polypane.app/docs/storage-panel/ --- title: 'Storage panel' --- The "Storage" tab in the Info [panel](https://polypane.app/docs/intro-to-panel/) shows the localStorage, sessionStorage and cookies of the current tab and the sessions in it. When you use multiple browser sessions, you can use the drop down in the top right of the storage panel to switch between them. ## localStorage and sessionStorage The page's localStorage and sessionStorage contain key-values. When you edit a key or a value the field will be tinted so you can see where changes have been made. clicking the 'Store changes' button saves these. You can also add a new item at the bottom of each list. You can delete all items from local or session storage with the "clear localStorage" and "clear sessionStorage" buttons, or delete single items with the trashcan icon on each line. Note that sessionStorage in browsers is stored on a per tab basis. In Polypane this means that sessionStorage is stored only for an individual pane, and is not shared between panes. When items get added, removed or updated, the storage panel automatically updates to show the new values. ### Pinned values You can pin both localStorage and sessionStorage values to have them be applied globally to all pages you open. This is useful for values you want to always apply, for example the `plausible_ignore` value in the screenshot below. Pinned values are always shown at the top. You can unpin them by clicking the pin icon. #### Known localstorage flags for analytics tools - `plausible_ignore`: Set to `true` to ignore the current page in Plausible Analytics - `umami.disabled`: Set to `1` to disable Umami tracking for the current page ## Cookies Polypane shows all cookies that are applied to this page, including httpOnly cookies (they are not available in JavaScript). By default we show the name, value and expiration date: Click the expand toggle at the left to also show the domain and path info, and whether the cookies is market secure, httpOnly or sameSite: Editing any of the values will tint the field so you can see where changes have been made. Clicking the 'Store changes' button saves them. You can also add a new item at the bottom of each list. For the expiration date we automatically show a date time selector and convert this for you. You can delete all cookies with the "clear cookies" button. This functionality is also available in the view menu. Delete single cookies by clicking on the trashcan icon. ### Export cookies You can export cookies with the "Export" button. This will copy a JSON file to your clipboard that's compatible with Puppeteer, Playwright and [Polypane Cloud](https://polypane.cloud). This means you can set up your cookies in Polypane and then use them in your automated tests. ### Import cookies To inmport many cookies at once, copy over their definition in the Import Cookies field and click the "import" button. This feature is useful if you want to copy over the cookies from other browsers. Polypane accepts cookies in the following format, which is also what tools like Playwright and Puppeteer use, and which various browser extensions can export to: ```json [ { "name": "cookie1", "value": "value1", "domain": "example.com", "path": "/", "expires": 1634025600000, "httpOnly": false, "secure": false, "sameSite": "None" }, { "name": "cookie2", "value": "value2", "domain": "example.com", "path": "/", "expires": 1634025600000, "httpOnly": false, "secure": false, "sameSite": "None" } ] ``` A good option to get cookies in this format is to use the [EditThisCookie](https://chromewebstore.google.com/detail/editthiscookie/fngmhnnpilhplaeedifhccceomclgfbg) extension for Chrome, which can export cookies in this format. --- # Switching to Polypane URL: https://polypane.app/docs/switching-to-polypane/ --- title: 'Switching to Polypane' --- Switching to Polypane can be daunting. There's a lot of new UI to get used to along with UI that you won't use (at least not at first) just like a new IDE or design tool. But just like those tools, Polypane will make you more productive once you get used to it. The best way to get used to Polypane is to accept that it's going to take some time to get used to it (remember the last time you switched code editors!) Use it for a while and ignore the parts of the UI you feel you don't need yet. ## Getting your bearings The first step to switching is to get a passing familiarity with the UI. You don't need to know what everything does, but knowing how to manage panes and what to do in the panel get you 80% of the way. To help with this, follow the [getting started tutorial](https://polypane.app/docs/). If you clicked that away when first opening the app, it'll show in each new tab, or get to it by pressing F1. Here's a video of Kilian going through it: ## Use it for your day-to-day work When you have a basic understanding of the UI, start using Polypane for your actual day-to-day work. Create a set of panes that you're comfortable with, save them as a [workspace](https://polypane.app/docs/workspaces/) and use them for a while. You'll quickly get used to the new UI and start to see the benefits. As you get more comfortable, start to explore the additional features Polypane offers, like [the debug tools](https://polypane.app/docs/debug-tools/), [color picker](https://polypane.app/docs/color-picker/) or [grid overlays](https://polypane.app/docs/rulers-grids-and-guides/) to name just a few. When you need any of those, check out the docs we have on them for a flying start. We do our best to document everything to make it easy for you. > **Polypane has [a command bar](https://polypane.app/docs/command-bar/)** so if you're wondering if something is possible, start typing and see if it's there. You can open it by pressing . ## You don't always need the full experience Though having multiple panes is the exciting part of Polypane for many devs, you don't always need those during your day-to-day. Luckily, configuring Polypane to look like a regular browser is easy. Switch to the "Full" [layout](https://polypane.app/docs/layouts/#full-layout-shortcut-b) through the layout switcher or by pressing `B`. Then, if you don't want to use the [Polypane elements inspector](https://polypane.app/docs/elements-panel/) straight away (it has many additional features and works across panes, but it's also a new UI to learn) you can use the [Chromium devtools](https://polypane.app/docs/developer-tools/#chromium-developer-tools) instead. If you open that in panel, Polypane will look like a regular browser with the devtools you're used to. From here, you can start to explore other parts of the application, like the panel and debug tools. ## Dealing with muscle memory Polypane isn't a regular browser, so you'll probably use Polypane in tandem with a browser that you've been using for development for years. It's easy to fall back to that browser and just open devtools when you're in a hurry or when you're not sure how to do something in Polypane. While this might feel like you're saving time in the moment, it's likely anything you would've done would've been faster in Polypane. There are a couple of ways to deal with this, and to make moving from your _browsing_ browser to Polypane as easy as possible: - Use our Browser extension to quickly send the current tab to Polypane - Configure your dev server or OS to open development URLs in Polypane ### Browser extension Install the Polypane browser extension to quickly send your current tab to Polypane (or right-click any url to send it to Polypane). The extension is available for Google Chrome, Microsoft Edge, Apple Safari, Mozilla Firefox, Opera, Brave and Vivaldi and you can get the extension from the [Download page](https://polypane.app/download/). This way you won't have to bother copying the url, opening Polypane and pasting the URL into Polypane. The browser extension adds a Polypane icon to your browser header. With it you can: - Click the Polypane icon to open the current page in Polypane. - Press `alt + r` to open the current page in Polypane. - Right-click any link and click "Open in Polypane". If the app is not open yet, it'll automatically launch. If it is open, it'll open the page in a new tab. ### Configure your dev server or OS to open development URLs in Polypane If your dev server automatically opens localhost in your default browser when you start it, configure that to open Polypane instead. This way you don't have to consciously choose Polypane each time you start devving. You can either configure the dev server itself, or use a browser manager to send localhost URLs to Polypane while keeping your regular browser the default for all other things. #### Dev Servers ##### Browsersync If you use Browsersync, you might have configured it to open your browser using the [browser options](https://www.browsersync.io/docs/options#option-browser). You can replace your current browser with "polypane", or add it to the list of browsers to open. Polypane automatically adapts to work with Browsersync by turning off its own syncing functionality. You can configure Browsersync to disable its syncing features and use Polypane's faster built-in functionality or even replace Browsersync completely by also using Polypane's live reloading functionality. Read the [Browsersync and Polypane](https://polypane.app/docs/browsersync-and-polypane/) docs to help migrate. ##### Create-react-app You can prefix your `start` script with `BROWSER=polypane` to open your app in Polypane directly instead of in your default browser. ```json "scripts": { "start": "BROWSER=polypane react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" } ``` ##### Other Code Editors and IDEs If your code editor or IDE has a feature to automatically launch a browser, you can configure it to open Polypane. Learn more on our [integrations page](https://polypane.app/docs/integrations/#external-tools-that-support-polypane) #### Browser managers For both Mac and Windows there are browser managers available. These will lets you send the URLs you open to any browser they support, either manually or by defining rules. You can configure this to always open localhost in Polypane, for example. The following browser managers have excellent support for Polypane: - [Finicky](https://github.com/johnste/finicky) (macOS) - [Choosy](https://www.choosyosx.com/) (macOS) - [Velja](https://velja.dev/) (macOS) - [BrowserSelector](https://github.com/DanTup/BrowserSelector) (Windows) - [Bowser](https://github.com/blipk/bowser) and [Bowser Gnome extension](https://extensions.gnome.org/extension/2989/bowser-gnome-extension/) (Linux) In addition to these rule-based browser managers, you can also use [Browserosaurus](https://browserosaurus.com/) (macOS) or [Account surfer](https://www.microsoft.com/en-us/p/account-surfer/9phvp9rjr7r7) (Windows) to quickly choose which browser or app to open any URL in. For a full overview of browser managers including setup instructions, check out our tutorial: [Always open localhost in your development browser](https://polypane.app/blog/always-open-localhost-in-your-development-browser/). --- # Synced interactions URL: https://polypane.app/docs/synced-interactions/ --- title: 'Synced interactions' --- Polypane syncs interactions between all panes. You can manage which interactions are synced, or disable them all, by right-clicking the sync button in the address bar. By default Polypane syncs the following user interactions and events: scroll, hover, click, keypress, input, change. It can also sync focus across panes. ### Scroll syncing The scroll position in panes is synced automatically, and you can toggle it on and off using the button in the address bar or by pressing `cmd/ctrl o`. Scroll syncing works on all scrollable elements in both directions. This means that if you have a scrollable element inside a pane, the scroll position of that element will be synced across panes as well. > The main vertical scroll on a page, the one on `document.scrollingElement`, is special in that browsers have optimized that scroller compared to all others. So while Polypane syncs any scrollable element, we recommend using the browsers `scrollingElement` above others for the best performance. #### Syncing is disabled when Browsersync is detected Browsersync also syncs the scroll position, clicks and form elements but because it's slightly slower than Polypane's syncing, it continuously undoes Polypane's syncing, leading to a very frustrating experience. Polypane will **disable its syncing** when it detects Browsersync with "ghost mode" active to prevent this poor behavior. We recommend you [migrate to using Polypane's built-in tools](https://polypane.app/docs/browsersync-and-polypane/) or [turn off ghostMode](https://www.browsersync.io/docs/options#option-ghostMode) in Browsersync and let Polypane handle all the event synchronisation. Polypane will show a popup notifying you about this for every page that it detects browsersync on. ### Mouse interactions Hover and click interactions are synchronized between panes. This means you will see the hover effect of an element in each pane, and click interactions that trigger focus or open a menu are applied everywhere. Mouse clicks are fully simulated. Website code that checks whether a mouse click is synthetic will possibly not be executed. #### Form submissions are prevented When a mouse click event (or keyboard event) triggers a form POST submit action, that event it is not synced across panes to make sure POST calls are only sent once. Most servers will not handle multiple submissions of the same form well. For example, a delete action, database insertion action or a payment action might be triggered multiple times causing unintended side effects. Note that if you use JavaScript event handlers without also using the appropriate `form` semantics, we can not detect this. #### Disabling syncing the next click Sometimes while testing you will want to disable the next click from syncing, for example to prevent a JavaScript form from being submitted. Instead of turning off click syncing and then turning it back on, right-click the page to open the context menu and select "Don't sync next click". ### Keyboard interactions Polypane syncs both input event and key presses, so that form interactions and any shortcuts you may have on a page will be triggered in all panes. ### Form filling Interacting with forms is synced between panes. Anything typed into an input or textarea or any selection made in a select, radio or checkbox is automatically applied in the other panes too. Check out our [form autofilling feature](https://polypane.app/docs/form-autofill/) to fill forms even more efficiently. #### Restrictions File inputs values are not synced, as they are not allowed to be set programmatically for security reasons. When testing a form with file inputs, make sure to set the file input in each pane. ### Focus Usually only a single element can have focus at any one time. By turning on Focus sync, the focus status in each pane is preserved. This lets you test out focus styling across all panes in one go. #### Emulate a focused page Focus sync also lets you emulate a focused page, where interactions like popout menus that disappear when focus is lost are preserved, letting you inspect them. When the sync button is not available (in the Focus and Full layouts) you can open the pane's devtools, click the three-dot menu, go to 'more tools', then 'rendering' and then scroll down to 'Emulate a focused page'. ### Navigation sync Navigation is synced between all panes as a last measure when input syncing doesn't result in the same URL in all panes (for example, because [the mobile size uses a different navigation than the desktop size](https://polypane.app/docs/website-issues-you-could-encounter/#not-syncing-between-panes)). Navigation sync can be turned off in the "network tab" under the [device options](https://polypane.app/docs/emulation/#sync-navigation) of a pane for that specific pane, letting you decouple that pane from the rest. You can use this to compare your local site with the live site, or compare two different sites side-by-side. For a comprehensive guide on working with multiple different URLs in Polypane, see [Showing multiple URLs](https://polypane.app/docs/multiple-urls/). ### Polypane Message Bus For events that aren't synced out of the box by Polypane, you can use the [Polypane Message Bus](https://polypane.app/docs/message-bus/). --- # Tab customization URL: https://polypane.app/docs/tab-customization/ --- title: 'Tab customization' --- Tabs in Polypane can be renamed and given a custom highlight color (also visible in the address bar). These can be configured for a specific tab, or all tabs that have the same domain opened. If you frequently need to work on the same site in various places (like local development, staging server and production), setting up domain customizations will prevent you from refreshing the page in frustration and wondering why your changes aren't being applied ;) ## Tab customization Double click the tab or Right-click it and select "Customize tab" to open the customization menu. Here you can set a custom tab title and tab color. If you only set the tab color but leave the tab title empty, the tab will show the document title as it updates while still showing the custom color. ### Resetting tab customization open the tab customization menu and click "Remove customisations for this tab". If you only set a custom tab color, then instead select the leftmost option for transparent and click "Customize tab" again to remove the color. ## Domain customization Check "Apply to all tabs with this domain" to convert the tab customisation to one that is applied to all tabs that have the same domain open. This means that if you open a new tab with the same domain, it will automatically get the same title and color as the first tab. ### Resetting domain customization Right click the tab with the domain customization applied and select "Customize tab". in the customization menu, click "Remove domain overrides for [domain]". --- # Web Vitals URL: https://polypane.app/docs/web-vitals/ --- title: 'Web Vitals' slug: 'web-vitals' --- We automatically gather web vitals statistics for each pane when you have "Show webvitals status" checked in the Global settings (in the top right corner of the app), and these are shown at the bottom of your pane. When all your web vitals are in the "good" range, it will show a green circle. if there are web vitals that need improvement we show an orange square and show the web vital and its score. For web vitals that score "poor" we show a red triangle and similarly show the Web Vital and the score. Hover over the icon to get an overview of all Web Vitals and their score. Here too we color Web Vitals orange for "needs improvement" and red for "poor". ### Supported web vitals Core web vitals: - **CLS**: Cumulative Layout Shift - **INP**: Interaction to Next Paint - **LCP**: Largest Contentful Paint Other web vitals: - **FCP**: First Contentful Paint - **TTFB**: Time To First Byte Keep in mind that web vitals scoring is non-deterministic to will differ somewhat on each reload. ### Compare your experience to the global averages with CrUX Field Data When you open the Web Vitals popup we will compare the current pane's score to the Field data gathered by CrUX (when available). This way you can see at what percentile your experience sits at, and how your page is doing globally. Use this to compare how closely your experience matches the average of your visitors. CrUX data is available separately for Mobile and Desktop, Polypane will automatically select the one most applicable to the current pane. ### CLS visualisation Click the eye icon next to the Cumulative Layout Shift score to visualize which elements shifts caused your CLS score. With this visualisation, you can pinpoint the Elements whose CSS you need to fix to improve your CLS. Visualization of the Cumulative Layout Shift on the Polypane getting started page. ### LCP visualisation Click the eye icon next to the Largest Contentful Paint to highlight the element causing the largest contentful paint. Learn more about how to analyze and improve your CLS and LCP on our blog: [Improving your CLS and LCP Core Web Vitals](https://polypane.app/blog/improving-your-cls-and-lcp-core-web-vitals/). ### INP attribution Click the eye icon next to the Interation to Next Paint to highlight the element and event type that affected your INP score. --- # Website issues you could encounter URL: https://polypane.app/docs/website-issues-you-could-encounter/ --- title: 'Website issues you could encounter' --- Polypane is really good at surfacing issues with websites. For example with our [debug tools](https://polypane.app/docs/debug-tools/), [outline panel](https://polypane.app/docs/outline-panel/) and [accessibility panel](https://polypane.app/docs/accessibility-panel/). A key thing to realize is that there are certain issues that only happen in, or are more severe because of, multiple panes. Websites are frequently coded in such a way that one session requests one page one time, but with Polypane, one sessions requests a page multiple times, potentially with different device capabilities. This can catch people off guard, thinking Polypane is not working correctly when it is actually surfacing incorrect assumptions or issues in their website. To get a better understanding of the implications this has, please read our docs on the [mental model of Polypane's browser contexts](https://polypane.app/docs/mental-model/). Many of the issues listed below are a direct result of this. ### Login/Logging in on websites not succeeding Some sites prevent users from logging in from multiple panes at once for various reasons: - They dont allow multiple login attempts, - They have a login cooldown timer, - They use a CRSF token or 2FA code that is only valid for a single login attempt, - They automatically log you out when using different user agents - ...or other mitigation strategies All of these will make it look like Polypane can't log into a website. **9 out of 10 times this is remedied by logging in using a single pane**, like in [focus or full layout](https://polypane.app/docs/layouts/), and then going back to multiple panes. If that doesn't work, you can log in using the [Browse panel](https://polypane.app/docs/browse/) and refresh the panes. Since the session is shared across all panes and the browse panel, this should log you in everywhere. #### log in to websites using SSO, oAuth or login redirection To log in to sites using federated login, similarly switch to the [focus](https://polypane.app/docs/layouts/#focus-shortcut-f) or [full](https://polypane.app/docs/layouts/#full-shortcut-b) layouts or log in using the [browse panel](https://polypane.app/docs/browse/). Polypane syncs the session across all panes, so after a reload you'll be logged in everywhere. The reason for needing this is due to how federated logins like SSO or oAuth work: - Many SSO or oAuth solutions depend on multiple redirects and POST requests. If Polypane syncs these redirects during the process, this can interrupt the redirection flow and cancel it. - Many SSO or oAuth solutions see multiple simultaneous logins, or logins with different user agents, as a risk and will abort the sign-in process. While Polypane prevents form submissions from happening in multiple panes, federated logins are often instantiated by javascript, which we can not catch. When this happens in multiple panes, multiple different popups might get opened, or the site will generate and invalidate multiple CSRF tokens (one by one for each request) which can all cause logins to fail. There is no way to work around this while showing the page multiple times and syncing interactions. Luckily, the solutions mentioned above are robust and easy. ### Non-persistent authentication If your site logs you out on every refresh, Polypane can unexpectedly log you out when it needs to sync up the navigation state between panes. Sessions, user interactions and navigation are all synced between panes. This means that when you're logged in anywhere, you're logged in everywhere. It makes sure that panes all get the time needed to navigate on their own as a result of a synced user interaction so syncing happens naturally. However as a last resort, it updates the URL of panes that have not navigated yet. If this subsequently triggers a log out event, that will then get synced to all other panes as well. The only way to work around that is to prevent logging out when [Polypane is detected](https://polypane.app/docs/detecting-polypane/) or finding where the click events are not correctly synced (a common issue is using [different UI elements on different screen sizes](https://polypane.app#not-syncing-between-panes) and making sure you use the same UI elements across sizes. ### Performance issues Polypane runs the same code in each pane so performance bottlenecks are quicker to show. Roughly put, Polypane needs the same amount of resources for each pane as Chrome needs for a single tab. It's essentially rendering multiple full Chrome tabs at the same time, with the CPU and memory requirements that brings, and without the ability to throttle all the non-active tabs (because all panes need to be kept in sync). This means that while your site might perform well on your fast computer in a single tab, when that same code is executed 3, 4 or 5 times, bottlenecks start to appear. Those bottlenecks **were always there**, Polypane just enlarges them. They will also be there when a user has other resource intensive tabs open (like playing a video on YouTube) or has your page open on a less powerful device than yours. If you notice performance issues, try to run Polypane with this web page, and see if the performance issues persist. If they get resolved, please [tell us the URL](https://polypane.app/support/) so we can figure out what that bottleneck is and either help you improve your website or help us improve our application. We _really_ appreciate this. _There are ways to improve performance in Polypane, check out the [Performance](https://polypane.app/docs/performance/) docs for tips on optimizations you can do._ ### Rate limited APIs Each pane in Polypane [requests its own resources](https://polypane.app/docs/mental-model/#each-pane-requests-its-own-resources-and-has-its-own-emulation-settings), so you download them for each pane separately. A rate limited API reaches that limit faster the more panes you have. This is essential for emulation, where your server might send different resources depending on the user agent and other properties. But if your server limits the number of calls you can make, or you have a rate-limited API you use, Polypane will reach that limit faster the more panes you use. If you depend on an API with rate limiting for your development work we _highly recommend_ you replace it with a mock server, caching proxy or disable it. ### Each pane in Polypane contributes to your page load statistics Because Polypane downloads and executes your page for each pane, any anayltics tool will record each visit as well which could lead to quite a spike in your stats after using Polypane. In general it's best practice to configure your analytics tools to ignore your own IP address or otherwise tell it to ignore visits from Polypane. You could also configure your site/app such that the analytics scripts is only ever loaded in production and not in development. #### Simple Analytics automatically filters Polypane visits If you use [Simple Analytics](https://simpleanalytics.com/?ref=polypane) for your visitor stats, any visit with Polypane is automatically filtered out of the results without you having to do anything. ### Not syncing between panes The most common reason for input not syncing between panes is that you're not using the same elements across sizes, or that the same element isn't available in all panes (for example, with HTML that is conditionally added through JS) Polypane **syncs events on the same elements across panes**. If those elements aren't available, no syncing is possible. There's usually two common reasons for this: - **Duplicated UI for different screen sizes**: for example, a mobile menu and normal menu that are different elements. - **Conditional rendering**: elements that are only added or removed to the DOM after a certain event, like a click or a scroll. When you click the normal menu in one pane, that doesn't exist in the other pane, so there is no element for the click to sync to in the other pane. Rather than building and maintaining two sets of components, it's better to build one set of components and use media queries to style them appropriately for the viewport size. This has additional benefits for maintainance, performance and accessibility. When you have DOM that you add and remove on click or hover, Polypane again would try to sync to an element that doesn't exist in the other pane. Rather than manipulating the DOM directly, you can use CSS classes to show and hide elements. This has many additional benefits for discoverability, SEO, error recovery and more. ### Mobile rendering Pages might look fine in Polypane but are zoomed out on actual mobile phones. This is because Polypane by default will use "desktop" rendering. You can use the [emulation](https://polypane.app/docs/emulation/) options to toggle to mobile rendering. Desktop rendering is faster and will make your site look responsive even if you don't set the right `viewport` meta tag. Mobile phones however, have to support the entire internet, including sites that were never optimized for mobile devices in the first place. So when a viewport tag with the right value is not available, It will pretend it's much wider and then zoom out the site to fit. When you're missing a viewport tag, mobile devices will think you didn't make a responsive website, and render it differently. _Tldr: Stick to our [responsive design ground rules](https://polypane.app/blog/responsive-design-ground-rules/) to not be surprised when testing on actual devices._ ### Domains not forwarding correctly Forwarding from HTTP to HTTPS (upgrading) or from the bare domain to `www.` is something that has to be configured correctly on the server. Incorrect configuration can lead to behavior where, if your SSL certificate does not cover all (sub)domains, one of the urls will actually cause an SSL certificate error, or attempt to redirect to an unconfigured domain. Unfortunately, having an incorrectly configured server **happens so often** that modern browsers like Chrome and Firefox detect these issues and will fix them for you, without confronting the end user with the issues causes by an incorrectly configured server. Polypane is a browser for developers, so **it does not compensate for incorrectly configured servers.** It will either not forward, or show an SSL error, in situations where Chrome won't. If you need to explain this to back-end developers or devops, and they point to Chrome working, you can ask them to use Polypane or test all variations of the URL with `curl`, and they'll see which one fails soon enough. ### Non standard navigation If you use non standard navigation, Polypane has no way of knowing it should sync anything between panes. Polypane can accurately sync regular HTTP navigation as well as the History API. This means that any routing solution that uses the History API (React router, Gatsby, Next, Vue router, Reach router, Angular router, etc) works really well in Polypane. In fact this website is built using Gatsby and its built-in routing. When you don't use the browser-supported navigation methods however, Polypane can only depend on input syncing to maintain the state between panes. **Equally as important, assistive technologies will also have a tough time keeping your visitor informed of where they are.** We highly recommend you use a modern and battle tested routing solution, as it will massively improve the user experience. ### Third party scroll syncing issues with Browsersync or Ghostery Tools like Browsersync or Ghostery leads to a janky experience in Polypane because Polypane syncs faster than those tools. Polypane already syncs scrolling, navigation and input events. Polypane does this in-process, but tools like Browser-sync and Ghostery use a local webserver. This makes them (slightly) slower than Polypane. Because of that these tools can actually **reset your scrolling**: they're syncing state from a moment ago while Polypane has already synced the next scroll event, so they cause your site to "scroll back". It's a situation where milliseconds matter and the extra round-trip to a server is enough to get the wires crossed. When Polypane detects that you're using Browser-sync's scroll sync feature the built-in scroll syncing is disabled. We recomment that when you use these tools, you **turn their syncing features off**. For Browser-sync, [it's called "ghost mode"](https://polypane.app/docs/other-tools/#browsersync). --- # Workspace management URL: https://polypane.app/docs/workspace-management/ --- title: 'Workspace management' --- The "Workspaces" tab in the [panel](https://polypane.app/docs/intro-to-panel/) gives you a visual overview of your [workspaces](https://polypane.app/docs/workspaces/), split into the default built-in workspaces and your custom workspaces. ### Default workspaces In the default workspaces tab we have listed some often-used workspaces like device lab, iOS devices, default breakpoints for popular CSS frameworks like Bootstrap, Tailwind and Bulma and a workspace with the most used sizes world wide. ### Custom workspaces Custom workspaces let you store your current set of panes for later use. Click on an empty workspace to save the current set of panes to it (or click the same icon to overwrite). Each workspace will show a visualization of the panes in it, a number (That you can use to quickly switch to it: press + the number), a place to give the workspace a name, and a set of icons. The first icon will replace the current set of panes with the chosen workspace (just like clicking the visualization itself). The second will add the workspace to the current tab. The house icon will set these panes as the default for new tabs. The arrow down icon will overwrite this workspace with the panes currently in use. Click the three-dot icon to show import and export buttons, as well as the empty button that lets you clear the workspace. ### Sorting To change the ordering of your workspaces, or to change which workspace is assigned to one of the shortcuts ( ), drag and drop them by their number: ### Importing and exporting When you export a workspace they get stored as a `.ppws` file that you can share with your team or include in your repository. Import this `.ppws` file to load/overwrite a workspace. --- # Workspaces URL: https://polypane.app/docs/workspaces/ --- title: 'Workspaces' --- Workspaces allow you to save your favorite sets of panes and switch quickly between them. For example, you can have your device lab saved in one workspace, and your desktop sizes in another. Polypane comes with a default set of workspaces based on popular device sizes and CSS frameworks. You can manage your workspaces by using the [Workspace panel](https://polypane.app/docs/workspace-management/). This will show you a visual overview of your workspaces and let you save, restore, import and export them. Each of your custom workspaces come with a number, 1 through 9, that make it easy to save and restore them with a keyboard shortcut. To save your current set of panes into a workspace, press where the number is the workspace you want to save it to. To apply a workspace, press . Applying a workspace will automatically switch you over to a multi-pane [layout](https://polypane.app/docs/layouts/) if you're not already in one. ## Set a new default workspace Polypane uses the three pane workspace for each new tab. If you want to change that you can set any workspace as the default set of panes for a new tab by clicking the "home" icon for that workspace. ![Setting a new workspace with the "Home" icon.](https://polypane.app/blogs/polypane-9-1/workspace.png) You can also set any full tab as the new default new tab. Configure your current tab the way you like, then use "Set current tab as homepage" in the global File menu. This includes not just the panes, but also the URL, sidebar, layout and other tab settings. ## Using existing workspaces Polypane workspaces are exportable and shareable, and there are multiple ways to get a workspace without creating one yourself. ### Built-in workspaces Polypane comes with 9 built-in workspaces, available in the [Workspace management panel](https://polypane.app/docs/workspace-management/). They are: - **Default: 3 panes**: The three panes Polypane starts with. - **Device Lab** A split of iOS and Android devices. - **Most used sizes worldwide** The top 6 most used viewport sizes based on global stats - **iOS devices** All iOS devices - **Android devices** 5 Android devices - **Bootstrap** The default Bootstrap breakpoints - **Material UI** The default (simplified) Material UI breakpoints - **Tailwind CSS** The default Tailwind CSS breakpoints - **Bulma** The default Bulma breakpoints ### Workspaces based on Google analytics The best dimensions to use are the ones that are actually used by your visitors, so we created a small online tool that will let you generate a workspace from your most used browser dimensions according to Google Analytics. Visit it here: [Workspace creator](https://polypane.app/create-workspace/). ### Downloadable workspaces You can download and import new workspaces from anywhere, making it easy to share workspaces with your team. See [Workspace management](https://polypane.app/docs/workspace-management/) for more on that. Though Polypane ships with a few default workspaces, there's always other useful workspaces. Below are a few additional ones: - [Chakra UI](https://polypane.app/workspace-downloads/ChakraUI.ppws) - Breakpoints for the Chakra UI framework. - [Foundation](https://polypane.app/workspace-downloads/Foundation.ppws) - Breakpoints for the Foundation CSS framework. - [Ionic](https://polypane.app/workspace-downloads/Ionic.ppws) - Breakpoints for the Ionic framework. - [Mantine](https://polypane.app/workspace-downloads/Mantine.ppws) - Breakpoints for the Mantine framework. - [Materialize](https://polypane.app/workspace-downloads/Materialize.ppws) - Breakpoints for the Materialize framework. - [Open Props](https://polypane.app/workspace-downloads/Open-props.ppws) - Breakpoints for the Open Props framework. - [Semantic UI](https://polypane.app/workspace-downloads/SemanticUI.ppws) - Breakpoints for the Semantic UI framework. - [Skeleton](https://polypane.app/workspace-downloads/Skeleton.ppws) - Breakpoints for the Skeleton framework. - [UIKit](https://polypane.app/workspace-downloads/UIKit.ppws) - Breakpoints for the UIKit framework. - [Halfmoon](https://polypane.app/workspace-downloads/Halfmoon.ppws) - Breakpoints for the Halfmoon framework. - [Webflow](https://polypane.app/workspace-downloads/webflow.ppws) - Breakpoints for Webflow. For a full overview check our blog article [CSS breakpoints used by popular CSS frameworks](https://polypane.app/blog/css-breakpoints-used-by-popular-css-frameworks/) ### External Workspaces Here are some workspaces created by others: - [Accessibility testing workspaces](https://github.com/lloydi/PolyPane-Config) by [Ian Lloyd](https://a11y-tools.com/) ---