# 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/) * #### 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. This Quick Start guide aims to help you become familiar with Polypane's basic features. ## 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 Your Free Trial](https://dashboard.polypane.app/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.app.