Polypane 27: Projects, a Snippets Panel and Chromium 142

Polypane 27 is out! This release brings a new project-focused workflow, a new snippets panel, improved DOM editing and is built on Chromium 142. Here's everything that's new in Polypane 27.

What's Polypane? Polypane is the browser for web developers who care about their craft and their users. It's a Chromium-based stand-alone browser for Mac, Windows and Linux that shows sites in multiple synced panes and helps you make your site more responsive, more accessible and faster.

Polypane Projects

A project-based workflow has been one of the most requested features for Polypane, and it took me a while to find the right approach. Starting with Polypane 27, Projects are now a core part of Polypane.

A new button in the top left of the app shows you the project you're currently working on, and clicking it opens the project overview.

Your projects control the entire browser. Create a project for each of your websites or clients and switch between them easily. All tabs, bookmarks, sessions and other settings are stored per project so you never have to spend time re-configuring Polypane when switching between different tasks.

Did you notice that said bookmarks? Yes, Polypane has bookmarks now! All the relevant pages and URLs can be added to your Project bookmarks and quickly opened from the new Bookmarks button, in regular tabs or in the Browse panel.

Projects is set up in a way that's very easy to get started with (you can even ignore it if you want, or only use the bookmarks part) and very powerful for everyone that works on multiple projects.

Check out the Projects documentation to learn more.

Snippets Panel

Over five years ago Polypane 2.1 (!) introduced the Live CSS panel, which let you add CSS that would be applied to all panes in Polypane. While it was a great way to quickly test CSS changes, the Elements panel has caught up and exceeded it in functionality.

In 27, the Live CSS panel has been rebuilt into the new Snippets panel. The Snippets panel lets you add both CSS and JavaScript snippets that can be saved, edited and run on any page you visit.

It's filled with clever features that make it a joy to use, like code completion for CSS and JS, smart bookmarklet support and grouping of snippets to quickly toggle an entire set of snippets on and off.

There's also a robust importing/exporting system that lets you share snippets between different Polypane installations and across your team, or import bookmarklets from other browsers. Expect more snippet sharing in the future!

New macOS Icon

Polypane 27 ships with a new macOS icon that uses the new Liquid Glass style, with special styles for light, dark and tinted mode.

Elements panel updates

The Elements Panel has received several improvements in Polypane 27 to make it easier to use and more powerful.

Line numbers for CSS Styles

The CSS Styles section in the Elements panel now shows line numbers for each CSS rule, making it easier to identify where styles are coming from.

An often requested feature that was really complex to implement, but our line number detection is on par with other major browser devtools now.

Force @starting-style

The Elements panel now has a "Force starting style" feature in the toggle element states dropdown that lets you see the styles that would be applied to an element when it's added to the dom.

When turned on, the starting styles will be applied and the element will get a special badge in the tree view to indicate that it's using the starting styles.

This build ons on the support for editing @starting-style (also visible in the screenshot) that we added in Polypane 20 back in June of 2024.

Updated hide element shortcut (on macOS)

In Polypane 26 we added a "Hide element" shortcut to quickly hide the selected element in the elements panel. On macOS this was set to use CMD + H, but this conflicted with the system-wide shortcut that hides the current application.

In Polypane 27, we've changed the shortcut to Ctrl h to prevent this conflict. On Windows and Linux, this was already set to Ctrl h and remains unchanged.

Duplicate and remove elements

You can now right-click any element in the tree view to duplicate or remove it from the DOM. This makes it easy to quickly test changes to the DOM structure without needing to write code.

Unlike other browser devtools, right-clicking an element in the tree view won't also select that element so you never lose context when working with the Elements panel.

Other context menu options

The new context menu on the elements now also quickly lets you select, hide or copy the element (as innerHTML, outerHTML, CSS selector or XPath) without needing to select the element first.

Meta panel

We've split out alternate links in the Meta panel into their own section separately from other link elements. alternate links can be used for things like RSS feeds, alternate language versions of a page and other resources related to the current page. Thanks Charlie for the suggestion!

The alternate links for apple.com. Note: truncated

As you're used to from Polypane, we'll automatically check for duplicates and issues with your alternate links and show warnings when something is amiss.

Slack ditched their small-image design for link previews recently, so we've updated the Meta panel design to match their new look as well.

New debug tools

We've added two new debug tools to Polypane 27 to help you test and debug your sites.

Slow down view transitions

The view transitions debugging debug tool will slow down all your view transitions and highlight the incoming and outgoing elements, making it easier to see what's going on during the transition without having to edit your own CSS.

Force hover styling

The new force hover styling debug tool will apply the :hover styles to all interactive elements on the page, much like the already existing focus and focus-visible debug tools.

This makes it easy to test hover styles across your entire site without needing to hover over each element individually. Thanks Ron for suggesting this one!

Punycode domain support

When it comes to browsers there's always more "weird" stuff that you need to handle, and one of those things is punycode or IDN domains.

Regular domains can only use ASCII characters, but IDN (Internationalized Domain Names) allow the use of non-ASCII characters in domain names. things like accents on letters, non-latin characters and even emojis can be encoded in domain names starting with xn-- to make them work in the DNS system.

Polypane 27 now has full support for punycode domains, so you can visit and work with sites that use these characters in their domain names without any issues and Polypane will display the nice looking version of the domain in the address bar. Thanks Christian for reporting this one!

Download notifications

we've improved the download experience by adding start, end and error notifications for downloads, so you always know when a download has started and finished, or if there was an issue downloading a file.

Let us know if a full download manager is something you'd like to see in Polypane!

Notable bug Fixes

Widevine DRM launch fix

On Monday and Tuesday of this week, the Widevine CDM servers were down, which caused issues across many browsers that rely on Widevine but can't bundle it like Google itself does with Chrome. Unfortunately for Polypane, downloading the Widevine CDM is part of the launch process, and when the download failed, Polypane would stall during launch.

The issue got resolved on Widevine's side, but to prevent this from happening again Polypane 27 now has a fallback mechanism that allows it to launch even when Widevine can't be downloaded. I want to give a big shoutout to Alexandra for being the first to report this issue and for helping debug the cause. Thanks Alexandra!

Page zoom shortcuts on Windows

The page zoom shortcuts no longer worked on Windows 11 due to ...something. We've switched the shortcut registration method and now it works again. Thanks Ron for reporting this one!

Console.log(undefined) fix

To prevent noise in the console, Polypane didn't print 'undefined' to the console when that was logged. This helps with noise, but is annoying when you need to verify if something is actually undefined. In Polypane 27, we've fixed this so that console.log(undefined) now correctly prints undefined to the console. Thanks Luke for reporting this one!

Chromium 142

Polypane 27 is built on Chromium 142. For all the experimental features enabled in this release, check out the experimental web platform features overview.

Get Polypane 27

Polypane is available for Windows, Mac and Linux in 64 bit and ARM versions.

Polypane automatically updates on Mac, Windows and on Linux when using the AppImage. Otherwise, go to the download page to download the latest version!

Don't have Polypane yet? There is a 14 day trial available.
Try it for free. No credit card needed.

Polypane 27 Changelog

New

• New Projects to group tabs, bookmarks and sessions
• New Snippets panel to save and run JS and CSS snippets
• New Meta panel: Show overview of alternate links (Thanks Charlie!)
• New Elements panel: Duplicate and remove elements
• New MacOS Liquid Glass icon
• New Chromium 142

Improvements

• Improved Elements panel: shows line numbers for CSS Styles
• Improved Elements panel: Hide and copy element in context menu
• Improved Elements panel: Force starting style feature
• Improved Download start and end notifications
• Improved Support for punycode domains (Thanks Christian!)
• Improved Browse panel: Automatically uses the tab or project session
• Improved Full page layout now uses the page title as name instead of "new pane"
• Improved Debug tools: Slow down view transitions tool
• Improved Debug tools: New force hover styling debug tool (Thanks Ron!)
• Improved Measure rectangle is now called Area
• Improved Area screenshot now activate areas when not visible
• Improved Meta panel: Slack design update
• Improved Don't ask for confirmation when importing workspace into empty slot
• Improved Accessible name calculation for form elements (Thanks Ron!)
• Improved Extensions: Now open new tabs in main UI instead of browse panel (Thanks Ron!)
• Improved Performance across the app thanks to react-compiler

Fixes

• Fix Prevent stalled application launch when Widevine DRM can't be downloaded (Thanks Alexandra!)
• Fix Noticeable white corners in dark mode for error views
• Fix Emulation icon no longer always has an active dot (Thanks Randall!)
• Fix Console: console.log(undefined) is now printed in the console (Thanks Luke!)
• Fix Page zoom shortcuts on Windows now work again (Thanks Ron!)
• Fix Replace cmd + h to hide element with ctrl + h on Mac (Thanks Michel!)
• Fix Horizontal layout no longer can be dragged in certain configurations
• Fix Fix 'paste and go' context menu option on Address bar