# Polypane 31: Canvas layout, elements panel improvements and Chromium 155 This release has a new canvas layout that lets you freely arrange panes on an infinite canvas. The elements panel now lets you filter styles, search the DOM tree, quickly navigate to and back from custom property definitions, and has a new flex item explainer that can tell you exactly how flex items are sized and positioned. Polypane 31 also has device presets for the latest iPhone devices, and runs on Chromium 155. ![Polypane icon](/img/brand/polypane-icon.svg)**What's [Polypane](/)?** Polypane has everything a browser has, plus all the tools you need to build responsive, fast, accessible, and SEO-friendly websites and apps with multi-viewport synchronised previews, comprehensive device emulation and extensive accessibility tooling. ## Canvas layout The canvas layout gives you an infinite canvas that you can freely position and resize panes on. This is our most powerful, and most complex, layout yet, and I'm excited to see the configurations people end up with. If you've used other infinite canvas tools before, you'll find the canvas layout in Polypane familiar yet enhanced with features tailored for web development and testing. Panning and zooming are easy, panes snap and align as you move them, and you can draw rectangles on the canvas to add panes with that size. The minimap provides you with an overview of the entire canvas so you never get lost, while also making it easy to navigate to different areas or rearrange panes quickly. ![canvas layout minimap](data:image/png;base64,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) I see a lot of potential in the canvas layout for creating highly customized and efficient workflows. For example, an accessibility workspace could have different sections divided up by WCAG criteria, letting you quickly test a criterion and then pan over to the next one. [Learn more about the canvas layout](/docs/layouts/#canvas-shortcut-shortcutdisplay-letterc-) ## New devices Polypane 31 adds device presets for the latest iPhone devices, including the iPhone 18 Pro, iPhone 18 Pro Max and iPhone Duo. With the Duo having two screens, its preset is split into 'folded' and 'open' presets so you can accurately test both configurations. ![iPhone Duo device preset](/static/iphoneduo-97d12fbf2f73f4bf8cd0f5c8f54ad373.png) As you've come to expect, Polypane accurately emulates the screen sizes, pixel density, user-agent, small viewport height and safe area insets so you can test your web pages under realistic conditions. Polypane now also ships with a 5K screen preset for testing ultra-high-resolution displays. ## Performance monitoring One thing that running your page in multiple panes will quickly reveal is the performance impact of your web page. Unfortunately, since Polypane is the only place where you have multiple panes open, it can be easy to chalk performance issues up to Polypane rather than the page you have open. Polypane now has performance indicators for CPU and memory use per pane. Once they reach certain thresholds they will show warnings, helping you quickly identify which pages at what sizes are significantly impacting performance. ![Resource usage badges](data:image/png;base64,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) [Learn more about resource usage](/docs/pane-resource-usage/) ## Elements panel improvements The elements panel got several improvements in Polypane 31, including visualisation for flex items and the ability to quickly navigate to custom property definitions and back. ### Navigate to custom property definitions and back Each CSS property that uses a custom property now has a reference icon. Clicking that icon scrolls you down to where the custom property is defined, so you don't have to search through your styles manually. The CSS value itself remains editable and you will never scroll away when focusing it. When you go to the definition this way, the elements panel adds a "back to..." button to your styles that will remain visible until you interact with another part of the panel or navigate away. That means you can go to a definition, change it, and then in one click return to where you use the variable, never losing your place in the styles overview. [CSS Custom Properties docs](/docs/elements-panel/#css-custom-properties) ### Flex item visualisation The elements panel now has a new flex item visualisation for children of flex containers. With the flex item visualisation you can see how all the various flex and sizing properties interact with each other to determine the final size of a flex item. ![Flex item visualisation](/static/flexitem-f328e400b63fcd9fe77705e395e4849b.png) The visual representation will show the base size in blue, the flexibility (whether it can grow or shrink) in purple, and any constraints in orange. The black outline represents the actual size of the element within its flex container. Matched constraints show a lock icon. Below the visual representation you'll find a breakdown of the values that contributed to the size: * **Final size** shows the actual final size of the flex item. * **Base size** shows the initial size of the flex item before any flexibility is applied, and the CSS that determined it. * **Flexibility** shows whether the flex item can grow or shrink, by what factor and what the additional absolute pixel adjustments are. * **Constraints** like maximum or minimum size show when the flex item is subject to them, and whether they are currently matched. The responsible CSS rule, the resulting value and whether or not the item was clamped to the constraint are also shown. ![Flex item visualisation example](/static/flex2-009d4b5f5d409b7ab713be9e4165f675.png) I would be remiss if I didn't acknowledge the Firefox DevTools team's excellent work on their flex item visualisation. Their implementation served as a great inspiration for my own version, and gave me a solid jumping-off point. [Flex item docs](/docs/elements-panel/#flex-item) ### Active scrolling indicators If the elements panel is open and you scroll any element, the scroll badge for that element will now light up: When you're debugging scrollable areas and have a hard time figuring out which element you are actually scrolling, the active scroll indicators make it immediately clear. If you've accidentally [stopped using the root scroller](/blog/the-root-scroller-and-how-not-to-lose-it/) at a specific device width, the scroll badges will also help you identify the active scroller quickly. [Scroll badge docs](/docs/elements-panel/#scroll-badge) ### Search in DOM When the DOM tree view has focus you can press ⌘ f to search in the DOM tree. Matching elements are highlighted as you type and Polypane jumps to the first match. ![Search in the DOM tree view](/static/domsearch-03f4207495f9ba7931f1e7fcd2007d25.png) [Search DOM tree docs](/docs/elements-panel/#search-dom-tree) ### Filter styles The Style tab in the elements panel has a new "filter styles" input that allows you to quickly find specific CSS rules. ![Filter styles input in the Style tab](/static/style-995a1e3bbab5ec961c3433ee2dbc08ef.png) CSS properties and custom properties are suggested from the list of specified styles for the selected element, and matching is done on both properties and their values. [Elements panel Style tab docs](/docs/elements-panel/#style) ## Screenshotting improvements Several aspects of our screenshotting functionality have been improved in Polypane 31, making it easier and more reliable to capture exactly what you need. ### New visible workspace option The overview screenshot is great for seeing all your panes at once, but sometimes you want to create a nice screenshot of just the panes currently visible. The new Visible Workspace screenshot lets you do exactly that. Like the overview screenshot it captures the content of multiple panes in a single image, but only includes the panes that are currently visible in the workspace. This works great with the canvas layout, but is also available in the other layouts. ### Wider character support The titles in the Overview screenshot (and now the Visible Workspace screenshot) were previously limited to ASCII characters but have now been updated to support a much wider range of characters (extended Latin). **💙 Thanks Eric** for asking about this! ### High DPI screenshotting High DPI screenshotting is one of those things whose support fluctuates and changes between Chromium and Electron versions, and recent versions of Polypane weren't doing a good job. In Polypane 31 the screenshot capturing is much more reliable and now properly supports high DPI displays. Most screenshots will be as fast as they were, but when Polypane notices that it needs to capture in tiles for high DPI, it switches to that automatically. **💙 Thanks Thomas** for pointing this out! So now, when you create a screenshot in Polypane 31, it will automatically handle high DPI displays correctly, ensuring the best quality without any additional steps. [Screenshot docs](/docs/making-screenshots/) ## Per-pane zoom for accessibility testing Normal Chrome ties page zoom to the origin, so that any page on the same site in any tab will have the same zoom level. For end users this is really nice, but if you do accessibility testing, being able to have a normal pane, a pane at 200% and a pane at 400% zoom side-by-side is extremely useful. ![Three panes at 100, 200 and 400% zoom.](/static/pagezooms-012385d49c792de744ed0050dd44178c.png) Polypane 31 allows you to set different zoom levels for each pane, making accessibility testing for WCAG 1.4.4 and 1.4.10 much more efficient. In a pane's [emulation settings](/docs/emulation/), set the rendering to desktop, then change the page zoom from "default" to "isolated". This will show a separate zoom control for that pane, allowing you to set the desired zoom level. ## 25% smaller download size and faster load Due to various improvements in our codebase and optimizations in our build process (Polypane now has far fewer dependencies that are shipped) the download size of Polypane 31 is about 25% smaller compared to earlier releases. Shipping smaller bundles also means that the app has to parse less code on startup, resulting in faster load times. ## Video recording improvements Our video recording is once again faster and more accurate due to two changes. ### Native cursor recording Our initial implementation got frames directly from the web contents surface, meaning it could not capture the native mouse cursor. Our current implementation can, so Polypane no longer needs a synthetic cursor. The click indicators are still there though, and they look as good as before. ### Mediabunny for faster video processing I fully replaced ffmpeg with [Mediabunny](https://mediabunny.dev) for video processing in Polypane 31. What you'll notice is that most videos now load instantly in the video editor. Mediabunny is an amazing piece of software that provides efficient and high-quality video processing. This is important because the MediaRecorder stream Polypane uses on its own doesn't do a great job. The Mediabunny library had issues dealing with Chromium's VP9 codec on Linux specifically that meant Polypane was dependent on ffmpeg for cross-platform compatibility. I worked with Mediabunny's maintainer Vanilagy to resolve these issues (they got shipped in Mediabunny 1.60.0), and want to give a big thanks to them for their help and support! **💙 Thanks Vanilagy!** [Video recording docs](/docs/recording/) ## Meta panel updates The meta panel no longer warns users when `initial-scale=1` is missing from the viewport meta tag. While there are still some situations where this matters, it is no longer needed to make sites render correctly on mobile devices. For that, `width=device-width` is sufficient. **💙 Thanks Declan** for doing the research into this! ### llms.txt If you have an `llms.txt` file on your site, the meta panel will now display its contents, making it easy to verify what you're serving. Note that even if your llms.txt file is using Markdown, Polypane will render it as plain text. ### Fetch logic improvements Polypane will now follow your site's cache settings when it comes to requesting all well-known files (like robots.txt, llms.txt, and others) _unless_ you explicitly reload the meta panel data. If you have a dev server that spits out a log message for every request, this improvement will help reduce unnecessary noise by respecting the cache settings. [Meta panel docs](/docs/meta-information/) ## Console panel The console panel has received several under-the-hood improvements that you'll mostly see as better performance for 'busy' consoles, and more accurate logging of errors resulting from console scripts. **💙 Thanks Adrian** for helping us figure this out! [Console panel docs](/docs/console/) ## Outline panel ### Link checking improvements Polypane checks for broken links by doing a HEAD request. This is the smallest fetch you can do to verify if a link is working. Unfortunately, not every server or website supports HEAD requests, leading to false positives (where HEAD returns a 404, but the link itself is actually working fine). When Polypane gets a HEAD response that's potentially a false positive, it will now attempt a GET request asking for zero data to confirm the link's status. Many sites that previously gave incorrect statuses, like Bluesky and LinkedIn, now have their links correctly verified. ### Quicker image outline updates The outline panel will now also listen to attribute changes on images, so that any changes you make to images are immediately reflected in the outline panel. ### Hidden elements in overviews You can now explicitly choose to list or hide hidden elements in the outline panel overviews. This gives you more control over what you want to test and ensures that you can focus on the elements that matter most to your workflow. **💙 Thanks Eric** for requesting this!! [Outline panel docs](/docs/outline-panel/) ## Quality of life improvements ### Address bar interactions I've refined the way the address bar interacts with the escape key to match other browsers more closely: 1. The first Esc will close the suggestions dropdown, but keep any autocomplete text intact. 2. The second Esc will revert the address bar to the current URL, fully focused. 3. The third Esc will blur the address bar entirely. **💙 Thanks Mark** for asking for improvements here! 404s are now also handled better to make sure they don't end up in the address bar suggestions list. ### Crash overlay and experimental features toggle Polypane ships with [experimental web platform features](/experimental-web-platform-features/) turned on by default. This means you can try out new and upcoming features (like [`random()` in CSS](/blog/experimenting-with-the-new-pure-css-random-function/)) before they are officially released. Sometimes however, these features can cause instability and crash your panes (they're experimental, after all). ![Crash overlay](/static/crash-7d57a11887e2f9af438cdad1ab7bc7d5.png) When that happens, Polypane shows a clear crash notification with options to reload the pane or disable experimental features. Disabling the experimental web platform features can also be done from the global settings. ### Browse panel functionality The browse panel now also has page zoom controls: ![Browse panel zoom controls](/static/browsezoom-7de5bddc5075dedd7537dc485a985ebe.png) **💙 Thanks Jay** for asking for the page zoom controls! As well as its own UIs for things like basic auth, change confirmations and extension installation. ![Browse panel notifications](/static/browsenotifs-5d247815843f866cd85bf2c372734dea.png) This places messages and interactions closer to the context in which they occur. [Browse panel docs](/docs/browse/) ### Copy existing project When creating a new project, you can now copy over all its properties from an existing one, making it easier to maintain consistency across your projects. **💙 Thanks Christian** for requesting this! ### Indicator for constrained panes Panes that are larger than the available space are scaled down to fit, so you have the correct dimensions. They now get a lock icon with an explanation, making it clear that their size is constrained. **💙 Thanks Goh** for requesting this! ## Chromium 155 Polypane 31 is built on Chromium 155. For all the experimental features enabled in this release, check out the [experimental web platform features overview](/experimental-web-platform-features/). ## Get Polypane 31 Polypane is available for Windows, Mac, and Linux in 64-bit and ARM versions. Polypane automatically updates, but you can also go to [the download page](/download/) to download the latest version! > **Don't have Polypane yet? There is a 14-day trial available. > [Try it for free](https://dashboard.polypane.app/register).** No credit card needed. ## Polypane 31 Changelog **New** * **New** Canvas layout mode * **New** Devices: Add new iPhone 18 Pro, iPhone 18 Pro Max, iPhone Duo and 5K device presets * **New** Show CPU and memory usage per pane * **New** Elements panel: Flex item visualisation * **New** Elements panel: Go to custom property definition (and back!) * **New** Screenshots: new "visible workspace" option * **New** Crash overlay and experimental features toggle * **New** Updated Chromium **Improved** * **Improved** Significantly smaller download size * **Improved** Significant performance improvements for large pages * **Improved** Screenshots: Support full range of text characters in overview screenshots * **Improved** Screenshots: Much better screenshotting for panes that are naturally larger than the window (Thanks Thomas!) * **Improved** Recording: Much faster processing of video * **Improved** Recording: Now uses the native pointer * **Improved** Panes: Allow zoom per pane instead of per origin * **Improved** Panes: Height or width constrained panes now get a lock icon with explanation (Thanks Goh!) * **Improved** Console panel: Improve performance for large log outputs (Thanks Adrian!) * **Improved** Elements panel: Scroll badges get highlighted when you scroll in panes * **Improved** Elements panel: Filter styles in style tab * **Improved** Elements panel: Search in DOM tree * **Improved** Meta panel: No longer recommends adding `initial-scale=1` (Thanks Declan!) * **Improved** Meta panel: Now shows llms.txt contents * **Improved** Meta panel: Smarter and less frequent fetching of well-known URLs * **Improved** Browse panel: Supports page zoom UI (Thanks Jay!) * **Improved** Browse panel: Supports extension installation confirmation message * **Improved** Outline panel: Explicitly choose to list or hide hidden elements in overviews (Thanks Eric!) * **Improved** Outline panel: Image outline updates after attribute changes * **Improved** Outline panel: The overlay labels are now better positioned and less intrusive * **Improved** Outline panel: Smarter fallback when testing URLs that don't support HEAD * **Improved** Outline panel: Clearer messages for URLs blocked due to Cloudflare challenges * **Improved** Projects: You can now copy settings from existing projects (Thanks Christian!) * **Improved** Address bar: Automatically clear 404 URLs from the suggestion history * **Improved** Address bar: Better support for different `esc` states like other browsers (Thanks Mark!) * **Improved** Peek: Now remains visible when hovering pseudo-elements * **Improved** Command bar: Can now also toggle CSP, CSRF and web security * **Improved** Command bar: Can now trigger all global screenshot actions * **Improved** Camera icon in header now opens popup instead of creating overview screenshot * **Improved** Removed the workspace tooltip (Thanks Mark!) * **Improved** Accessibility state for many buttons is now more accurate **Fixes** * **Fix** Deleting sessions used by other projects would cause internal reloads (Thanks Chris!) * **Fix** Screenshots: Split layout screenshots work again * **Fix** Browse panel: Now handles application popups better * **Fix** Debug tools: re-apply button did not always work * **Fix** Debug tools: Color blindness filters did not get applied in 30.1 * **Fix** Portal: Injected CSS now handles nesting and media query order correctly * **Fix** Console: Now shows errors originating from incorrectly typed commands * **Fix** Elements panel: When editing before/after styles, the styles remain visible * **Fix** Elements panel: Scrollbar for child nodes no longer overlaps dimensions (Thanks Rick!) * **Fix** Outline panel: Overlays now clear when refetching data (Thanks Eric!) * **Fix** Relaunching the app on Mac no longer requires a full quit (Thanks Jonathan!) --- Polypane is the browser built for developers and designers — try it at https://polypane.app.