Switching to Polypane

Switching to a new browser for development takes effort, we get that. You're used to the way your current browser works and you use it for your regular browsing too. With the following tips and tools, switching to using Polypane becomes a little easier.

Configure Polypane to look like other browsers

You can make Polypane work similar to regular browsers by switching to the "Full" layout, and opening the Chromium devtools. This will give you a full 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.

Browser extension

The Polypane browser extension is available for Google Chrome, Microsoft Edge, Apple Safari, Mozilla Firefox, Opera, Brave and Vivaldi. It let you quickly open the current tab tab or any url in Polypane. You can get the extension from the Download page.

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 clik "Open in Polypane".

Polypane will auto-start if not open yet.

Integrating with your existing toolchains

Since Polypane behaves just like a regular browser for external tools, it fits well in any toolchain. Anywhere you can configure a browser you can switch to Polypane and that will let you open your projects in Polypane directly, reload and more.

Browsersync

If you use Browsersync, you might have configured it to open your browser using the browser options. You can replace your current browser with "polypane", or add it to the list of browsers to open.

To configure Browsersync to work nicely with Polypane, read the instructions at other tools. Alternatively, you can fully replace browsersync with built-in Polypane features.

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.

"scripts": {
    "start": "BROWSER=polypane react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

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 (macOS)

With Finicky you can set which URLs are opened in which browser, ideal if you always want to open for example localhost in Polypane, while keeping your regular browsing in your default browser.

Follow the installation instructions for Finicky, then add the following handler to your .finicky.js file to open all localhost URLS in Polypane.

module.exports = {
  defaultBrowser: 'Google Chrome',
  // Or "Safari", "Firefox" etc.
  handlers: [
    {
      match: /^https?:\/\/localhost.*$/,
      browser: 'Polypane',
    },
  ],
};

Choosy (macOS)

Choosy can either prompt you when you open a new URL, or you can configure rules to open specific URLs in specific browsers, and comes with a UI to configure different rules.

Browserosaurus (macOS)

Browserosaurus is an open source application developed by Will Stone. Use the settings to favorite Polypane and open it with "space", or add a single letter (like "P") to use to open links in Polypane.

Account surfer (Windows)

Account surfer is available via the Microsoft Store and is developed by Marat Dospolov. Hotkeys are dependent on the position.

Bowser and Bowser Gnome extension (Linux)

Bowser is an open source application and available as a Gnome extension or a stand-alone python application. Add a rule for "localhost" and set it to open Polypane.

Full overview and setup instructions

For a full overview of browser managers including setup instructions, check out our tutorial: Always open localhost in your development browser.