# Documentation Documentation Learn how Polypane improves your workflow Show menu * #### Getting started * [Quick Start](/docs/) * [Setup instructions](/docs/setup/) * [Switching to Polypane](/docs/switching-to-polypane/) * [UI overview](/docs/ui-overview/) * [Customizing Polypane](/docs/customizing-polypane/) * [Shortcuts](/docs/list-of-shortcuts/) * [Helper for other browsers](/docs/helper-extension-for-other-browsers/) * #### Core concepts * [Projects](/docs/projects/) * [Workspaces](/docs/workspaces/) * [Layouts](/docs/layouts/) * [Portal](/docs/portal/) * [Playgrounds](/docs/playgrounds/) * [Command bar](/docs/command-bar/) * [Session management](/docs/session-management/) * [Accessibility overview](/docs/accessibility-overview/) * #### Browser features * [Browser features overview](/docs/browser-features/) * [Tab customization](/docs/tab-customization/) * [Dark and light mode](/docs/dark-and-light-mode/) * [Global zoom](/docs/global-zoom/) * [Browser extensions](/docs/browser-extensions/) * #### Panes * [Intro to panes](/docs/intro-to-panes/) * [Manage panes](/docs/pane-management/) * [Sizing panes](/docs/pane-sizes/) * [Synced interactions](/docs/synced-interactions/) * [Showing multiple URLs](/docs/showing-multiple-urls/) * [Device presets](/docs/device-presets/) * [Emulation](/docs/emulation/) * [CSS Media Breakpoints](/docs/breakpoints/) * [Web Vitals](/docs/web-vitals/) * [Horizontal Overflow detection](/docs/horizontal-overflow/) * [Resource usage](/docs/pane-resource-usage/) * #### Devtools * [Polypane Peek](/docs/polypane-peek/) * [Screenshots](/docs/making-screenshots/) * [Video Recording](/docs/recording/) * [Chromium & Polypane Devtools](/docs/developer-tools/) * [Layout debugging](/docs/layout-debugging/) * [Rulers, grids and guides](/docs/rulers-grids-and-guides/) * [Image overlay](/docs/image-overlay/) * [Debug overlays](/docs/debug-overlays/) * [Simulators](/docs/simulators/) * [Find elements](/docs/find-elements/) * [Measure text length](/docs/measure-text-length/) * [Color Picker](/docs/color-picker/) * [JSON and XML viewer](/docs/json-and-xml-viewer/) * [Form Autofill](/docs/form-autofill/) * [Live reloading](/docs/live-auto-reloading/) * [Reload CSS](/docs/reload-css/) * [Share panel](/docs/link/) * #### Integrations * [Integrations](/docs/integrations/) * [MCP server](/docs/mcp-server/) * [Message Bus](/docs/message-bus/) * [Local servers support](/docs/other-tools/) * #### Side panels * [Intro to panel](/docs/intro-to-panel/) * [Meta](/docs/meta-information/) * [Elements](/docs/elements-panel/) * [Console](/docs/console/) * [Network](/docs/network-panel/) * [Outline](/docs/outline-panel/) * [Browse](/docs/browse/) * [Workspaces](/docs/workspace-management/) * [Snippets](/docs/snippets/) * [Accessibility](/docs/accessibility-panel/) * [Storage](/docs/storage-panel/) * [Source](/docs/source-panel/) * [Chromium Devtools panel](/docs/devtools-panel/) * #### Workflows * [Responsive debugging](/docs/responsive-debugging-workflow/) * [Accessibility audit](/docs/accessibility-audit-workflow/) * [Social card and Open Graph](/docs/social-card-and-open-graph-workflow/) * [Team workflows](/docs/team-workflows/) * #### Troubleshooting * [Mental model of browser contexts](/docs/mental-model/) * [Site issues](/docs/website-issues-you-could-encounter/) * [Detecting Polypane](/docs/detecting-polypane/) * [Security](/docs/security/) * [Performance](/docs/performance/) * [Known issues](/docs/known-issues/) * #### Reference * [FAQ](/docs/faq/) * [Command line options (CLI)](/docs/command-line-options/) * [Experimental Chromium features](/docs/experimental-chromium-features/) * [Changelog](/docs/changelog/) * #### For teams & organizations * [Pitching Polypane to your team](/docs/pitching-polypane/) * [Info for IT and Security teams](/docs/review-and-approval-by-it-and-security/) * [Info for Sales and Procurement](/docs/sales-and-procurement/) # Polypane Documentation Polypane is a browser for developers and designers with tons of features that help you build websites that are responsive, accessible and of high quality. ## Introduction For a high-level overview of Polypane, watch the video below. [embedded content](https://www.youtube.com/embed/uGr-6Bsg1pU?&autoplay=false&start=0) ## Quick Start The best way to begin with Polypane is to follow the Quick Start guide available within the application. This hands-on tutorial walks you through the common actions in Polypane and learn the UI. [embedded content](https://www.youtube.com/embed/tdOKznrXuow?&autoplay=false&start=0) ## Key features * **Multi-Viewport Display**: Visualize your website across multiple viewports simultaneously, referred to as "[panes](/docs/pane-management/)" in Polypane. * **Easy Pane Management**: Easily [manage panes](/docs/pane-management/) by adding, removing, and resizing them according to your needs. Customize their behavior based on [CSS breakpoints](/docs/breakpoints/), device presets, or create [completely freeform panes](/docs/pane-sizes/). * **Synced [Interactions](/docs/synced-interactions/)**: Seamlessly interact with all viewports, ensuring synchronized scrolling, hovering, and form input for efficient testing. * **Versatile [layouts](/docs/layouts/) Options**: Choose from horizontal, vertical, or focus layouts to tailor your workspace. Switch to the Full layout for a more traditional browsing experience. * **Enhanced Testing Tools**: Access a variety of tools, including [image overlay](/docs/image-overlay/) and [media query emulation](/docs/emulation/), to streamline your testing process. ## Exploring Polypane Delve deeper into Polypane's features to uncover its full potential: * **[Panes](/docs/intro-to-panes/)**: Explore all the functions of panes, like [emulation](/docs/emulation/), [debug tools](/docs/debug-overlays/), [image overlay](/docs/image-overlay/) and more. * **Devtools**: A wide variety of devtools are available in Polypane, like [Layout debugging](/docs/layout-debugging/), many ways to make and edit [screenshots](/docs/making-screenshots/) of different parts of your page, a quick [color picker](/docs/color-picker/) and more. * **[Panels](/docs/intro-to-panel/)**: Utilize various panels within Polypane, such as the [Elements panel](/docs/elements-panel/), [Meta panel](/docs/meta-information/) and [Outline panel](/docs/outline-panel/) for better insights into your web projects. * **[Portal](/docs/portal/)**: Invite other browsers to the party and test and share your work across different devices and browsers. ## Switching to Polypane Switching to a new development tool can take some getting used to. We have a few pointers on how to make the [switch to Polypane](/docs/switching-to-polypane/) easier. Beyond that, familiarize yourself with Polypane's [user interface and navigation](/docs/ui-overview/) and browse through the extensive documentation to find the features you need. ## Need help? Chat with us in the app If you encounter any challenges or have questions while using Polypane, don't hesitate to reach out though mail, chat or our [support resources](/support/). No AI chatbots, just real humans ready to assist you. During the trial period click on "Onboarding support" to open a live chat with us right inside the app. This is available for everyone under the "Chat with us" option in the Help menu. PP ### Have a question about Polypane? Reach out via (real human) chat, Slack or our contact form: [Contact Support](/support/) ### Build the way you already build, without missing anything. Free 14 day trial, no credit card needed. * 1 Create your account. Takes a minute. * 2 Download the app. For Windows, Mac & Linux. * 3 Build your next project with Polypane [Start Free Trial](https://dashboard.polypane.pro/register/?ref=page-bottom) ![]() ![Polypane UI](/static/0ebe271b91ab5fde888eb246b687bd6d/3a31f/app4.png) const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img\[data-main-image\]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source\[data-srcset\]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1)}} --- Polypane is the browser built for developers and designers — try it at https://polypane.pro.