--- title: Polypane versus Sizzy published: true description: Putting two competing frontend development browsers through their paces. tags: Polypane, Sizzy, Tools, Frontend canonical_url: https://www.windowswebdev.io/blog/polypane-vs-sizzy/ cover_image: https://thepracticaldev.s3.amazonaws.com/i/609gnsivhrbvdzdvie47.jpg series: Responsive Dev Browsers --- **NOTE**: No review versions were provided. I bought licenses for both apps. This review was written in mid-2019 and pertains to Sizzy 0.1.2 and Polypane 1 (Chromium 73). I expect the feature sets of both apps will grow over time. I'll update as needed. "But why no Blisk?" you may be asking. Good question. In certain respects, Blisk is a much more robust solution than either Polypane or Sizzy and deserves its own dedicated review. It feels a bit out of place here as it does not allow for displaying multiple viewport panes at once, which is, to my mind, the main draw of the apps under review here. ## Under the hood ### Polypane [Polypane](https://polypane.rocks) is an Electron app with the Chromium browser built in. Yeah, that's right: *Electron.* I realize that comes along with some baggage and may be a deal breaker for you, but it's not for me. Electron has opened up new vistas for Windows (and Linux!) users. Apps that we probably never would have seen (because the design/development community skews heavily toward Mac OS) are also being released for Windows. I can't help but see this as a good thing, even while I will always prefer native implementations (when available). With Chromium as its foundation, you'll have Chrome's dev tools available for inspection and debugging needs. Invoke the dev tools window with the dedicated toolbar button or use the familiar` Ctrl/Cmd+Shift+I` keyboard shortcut. Because it renders your pages with Blink, you'll be viewing your web pages exclusively in a Chrome-like browser. That may be suit your needs just fine, but it does preclude Polypane from really being used for cross-browser debugging. You're still going to need to fire up Firefox, Safari, *(shudder)* IE, etc. to test your code against various browsers. And that's fine. Cross-browser testing just isn't Polypane's (or Sizzy's) purpose. ### Sizzy [Sizzy](https://sizzy.co), too, is built on Electron (with React) and ships with with Chrome dev tools built in, so it's on par with Polypane in that regard. Like Polypane, Sizzy makes exclusive use of Chromium's Blink rendering engine. Per the app's product site: "Sizzy cannot simulate different browser rendering engines, so there's a chance that there might be some minor differences when testing on a real device." The caveat regarding cross-browser testing applies here as well. Fair warning: playing around with the dev tools coincided with Sizzy's becoming unresponsive for me (I had to close and reopen the app), but I don't know if there's any relevant correlation there. It appeared to be an isolated incident. ## UI ### Polypane Polypane strikes one as a Chromium-based browser with most of the chrome stripped out. Bare bones. It gets the job done, but with somewhat less panache than its competitor. There are no menus and no settings/preferences to tweak. Just toolbar buttons and pane-specific controls. You'll need to explore the interface to get a handle on its available functionality. Undoubtedly, some readers will want a dark mode, but Polypane doesn't (yet) provide one. I keep most of my apps light-themed and Polypane's color scheme works well for me. Just something to be aware of. ### Sizzy Sizzy has the more polished UI. It looks … well ... more like a dedicated development *app*, rather than a modded development browser. The interface feels pretty intuitive and frictionless. A dedicated tool panel provides access to device filters (by OS or by type), view mode (default, horizontal, and focus), and some basic "settings" (including the ability to screenshot all panes at once—a nice feature to have if it weren't so buggy, but definitely not a "setting," per se).

![In app tools](https://thepracticaldev.s3.amazonaws.com/i/r938ka14nsouflzqq75q.jpg)

In-app tools

My only problem with Sizzy's Windows implementation (other than the obvious fact that it doesn't look like a native Windows 10 app) is the same one I had with another recent Electron app I came across, Twizzy. The Electron toolkit is flexible and robust, yet Sizzy on Windows comes with the stock white title bar, menu bar, and menu. And this despite the fact that Sizzy only ships with dark themes. These very bright UI components are distracting and stick out like a sore thumb. (To be fair, the Mac version also appears to sport a default Mac-OS-specific title bar, but it doesn't look out of place there.) Compare this with an Electron app like Eagle or Github Desktop which both get this portion of the UI right. I hope the developer sorts this nagging issue in a future release. **Winner:** Probably Sizzy for me, but not by much (and your tastes may differ) ## Workspace management By workspace management, I mean tasks like rearranging and toggling view modes for your visible panes as well as customizing the app's main window. One significant drawback to Sizzy, at least for me, as you'll read below, is its comparatively cumbersome workspace management. ### Rearranging panes/viewports #### Polypane An easy task in Polypane. There are dedicated buttons above each viewport to shuffle your viewports left and right in the default view. As discussed below, the same task in Sizzy requires a lot more work.

![Polypane's dedicated viewport shufflers](https://thepracticaldev.s3.amazonaws.com/i/uvr2s6tv12mtmgv90rsa.jpg)

Polypane's dedicated viewport "shufflers"

#### Sizzy Yes, you can rearrange panes to your liking, but you'll have to access the `Organize Devices` modal dialog, manually rearrange the devices list order, and then save your changes. This feels as tedious it sounds. Maybe you'll get your devices organized just the way you want them and won't need to access this dialog that much. But I tend to rearrange the panes to match my particular focus at any given time—or, at least I would, if Sizzy made it easier to do so. ### View modes #### Polypane Polypane has only two modes: the default (`pane` mode), which lays the viewports out horizontally and `focus` mode (behind the `toggle mode` button) that displays a single viewport. Let me start with that second mode first. I don't find it particularly useful, mainly because it doesn't map to any extant viewport visible in the default view. It's completely it's own thing. You'll need to manually size and resize this single-view pane according to your needs at any given time. I don't find it worth the trouble for my workflow, but I also don't find that I need it with Polypane. As for the default? It works for me better than Sizzy's comparable view (i.e., `horizontal`) for reasons I discuss immediately below. #### Sizzy Sizzy ships with three view modes (and what I'll call a "submode"): `default` (which stacks the viewport panes vertically as needed), `horizontal` (which, as may be obvious, displays them horizontally in a single row), `focus` mode (which toggles a view of your individual viewports), and a new submode just released in the 0.2.1 update: `zen`, which hides the app chrome to provide a less cluttered experience. The `default` stacking view feels unnatural to me and I couldn't get used to it. It's natural enough to scroll vertically through a web page, but I don't like scrolling vertically to bring additional, discrete viewports into view. It feels like comparative visual context is lost. I much prefer viewing the panes laid out alongside one another—`horizontal` mode. Unfortunately, the *only* way to horizontally scroll through your visible panes in `horizontal` mode is to use Shift+Mousewheel. I realize that's pretty much *exactly* how you scroll horizontally on a page that's wider than the viewport, but again, it feels cumbersome here. There's no horizontal scrollbar. Polypane has the better solution in this regard (noted above). `Focus` mode is where Sizzy's workspace management really shines. Once you toggle it on, you can easily navigate between your visible panes with the arrow keys or use the tabs near the top of the interface. Sizzy's `focus` mode implementation is far more refined than the comparable feature in Polypane.

![Sizzy focus tab toggles](https://thepracticaldev.s3.amazonaws.com/i/tatsn5jhpcnchj7n17gm.jpg)

Sizzy focus tab toggles

The `zen` submode is accessible from any of the other modes by pressing the `z` key. ### Zooming the workspace for high-level comparison #### Polypane Yep. Easily done with Polypane. For my workflow, this is a standout feature (one that Sizzy shares). I often find myself needing (or, at least, wanting) to see how all viewport contents compare with one another at a high-level. Scrubby zoom to the rescue.

![Polypane's canvas zoom control](https://thepracticaldev.s3.amazonaws.com/i/wc2kgmo2kx1k84or37yy.png) ![Polypane's scrubby canvas zoom ](https://thepracticaldev.s3.amazonaws.com/i/x9586aemobxqvp45i5qa.gif)

Polypane's scrubby canvas zoom

I would also note a deceptively useful feature in Polypane. Grab an empty area of the canvas/workspace with Spacebar+LeftClick and you can drag the canvas horizontally—left and right. This is so much more intuitive to me than Sizzy's comparable `Shift+Mousewheel` to scroll the canvas horizontally. #### Sizzy Yes, in the `default` (i.e., stacking) view mode, but not in `horizontal`. As a sidenote, when you resize the app window, the viewport panes in the workspace shrink to fit the available space, at least in the `horizontal` view mode. This feels counterintuitive to me. I want the viewport panes to remain at their intrinsic dimensions whether I resize the overarching app window or not.

![Sizzy's scrubby canvas zoom](https://thepracticaldev.s3.amazonaws.com/i/tgkhktwf7wd9f8jtcwap.gif)

Sizzy's scrubby canvas zoom

**Winner:** Unless you need `focus` mode a lot where Sizzy shines and Polypane doesn't, Polypane has the edge here ## Individual viewport management ### Adding a viewport to the workspace #### Polypane Adding baked-in viewports to your workspace with Polypane couldn't be much simpler. You just double click an empty area of the main workspace and an overlaid list appears with all available device profiles. I can't tell you how much *more* I like this approach as compared to wrestling with Sizzy's buried menu to accomplish the same sort of thing. (There, you'll need to access a toolbar menu to display a modal overlay to toggle viewport profiles on and off and then save your changes.) When I'm using Polypane, I use this feature a *lot*. It's fast and frictionless. From a user experience perspective, it's just hands-down better than Sizzy in this regard.

![Adding a viewport to Polypane](https://thepracticaldev.s3.amazonaws.com/i/vgyb9iy6gbfhsw6dddv9.gif)

Adding a viewport to Polypane {.figcaption .mb-8}

#### Sizzy With Sizzy, you have to visit a dedicated (and somewhat out of the way) menu to add even a baked-in device profile. And it always adds the new device viewport to the *right*. If you want to shuffle it left of your prior viewport, as noted above, you'll have to visit the same menu a second time.

![Adding a viewport to Sizzy](https://thepracticaldev.s3.amazonaws.com/i/bogevabo3s5gbdbp9bbu.gif)

Adding a viewport to Sizzy

### Reconfiguring an existing viewport #### Polypane To swap out one of your viewports for another, you just click on the device type label above the viewport and the same overlaid list as mentioned above appears. Choosing a different profile reconfigures the current viewport to the new dimensions. Easy-peasy. And fast. #### Sizzy The same task is not as fast and easy in Sizzy. You'll need to activate the overflow menu above the pane, select `edit` to bring up a modal dialog, manually type in your adjustments, and save your changes.

![Reconfiguring a viewport in Sizzy](https://thepracticaldev.s3.amazonaws.com/i/ipp9on3ij8kx6scr0wat.gif)

Reconfiguring a viewport in Sizzy

But, wait! There's more! You didn't *merely* adjust the viewport there. You actually also edited the *built-in* device profile, and it's gonna stay that way (until you manually reverse your edits or clear the app cache). You probably *didn't* want to do that. I know I sure didn't when I came across first this feature. If you really want to go down this path, you'd want to `clone` the viewport first and then make your modifications. But the underlying point here is that Sizzy doesn't provide an easy way to quickly reconfigure a given pane. It's an all-or-nothing sort of thing—if you change it, you're changing the underlying device definition quasi-permanently. ### Removing an existing viewport from the workspace #### Polypane There's an "x" above each viewport. Click it and the pane goes away. It's really as simple as that. And bringing it back is as simple as double-clicking an empty area of the workspace. #### Sizzy With Sizzy, things are a bit more ... complicated. Yes, you can delete a viewport by accessing the overflow menu and choosing `delete`. A modal will pop up asking you if you're sure you really want to do that. The first time I encountered this, I thought, "C'mon. The stakes aren't *that* high. Why are you making me click again?" Actually, the stakes *are* that high. You're not just removing the viewport from the workspace. You're also removing the device profile from the app completely. If you want it back, you'll need to manually recreate it (or just reset the app cache—I found myself doing that a lot). Sizzy makes it easier to delete a device completely than it does to merely hide it. That feels backwards. The proper way to merely hide a viewport form the workspace is to access the `Organize Devices` menu, click the eyeball icon next to the unneeded device, and save out your change. Cumbersome. **Winner:** Polypane, and at least for my workflow, this is a *huge* win ## Scroll to anchor on refresh ### Polypane Nope. ### Sizzy Yes. This is an interesting feature. Chromium is pretty good about retaining your vertical scroll position on soft reload out of the box, so I didn't find myself using this very much. But it's there and you may find a suitable use case that makes it a standout feature for your workflow. **Winner:** Sizzy ## Baked-in device profiles ### Polypane Polypane ships with quite a few more baked-in device profiles as compared with Sizzy (21 vs. 13). iPhone Xr/Xs max | Phone Xs | iPhone 7/8 | iPhone 7/8 Plus | iPhone SE | Galaxy S8 | Galaxy S7 | Pixel 3 XL | Pixel 3 | Pixel 2 XL | Small Android | Tablet Portrait | iPad | iPad Pro | Galaxy Note | Desktop | Desktop Wide | Desktop HD | 720p | 1080p | Apple TV | Apple Watch ### Sizzy There aren't as many stock profiles to choose from (13)—all Apple and Android devices, except for two generic laptop profiles. iPhone 8 | iPhone 8 Plus | iPhone XR | iPhone XS | iPhone XS Max | Google Pixel 3 | Google Pixel 3XL | iPad Air | Galaxy S9 | Galaxy S9+ | Nexus 7 | Notebook | Laptop **Winner**: Just going by the numbers, Polypane wins this round, but given the fact that both apps are extensible in this regard (see next section), it's tough to view Polypane's higher count as a strong selling point ## Custom device profiles ### Polypane Can you add custom device profiles to Polypane? Yes, but you'll have to work just a *bit* harder for it than you do with Sizzy. Via the UI, you *can* customize the dimensions of any existing viewport in the workspace via pane-specific controls. But you can't save your tweaks for later use. Sure, they'll remain available across sessions. But custom device dimensions are impermanent one-offs—that is, and I stress, within the UI *itself.* However, you can modify [this](https://polypane.rocks/pane-sizes.json) configuration file and save it to the appropriate OS-specific location for your device. Those changes will propagate to the built-in device list for future use. Here's where to save the modified file. * Windows: `%APPDATA%/Polypane/` * macOS: `~/Library/Application Support/Polypane/` * Linux: `~/.config/Polypane/` Personally, I'd rather customize Polypane's config file than manually create custom device profiles via Sizzy's UI (which I find cumbersome), but your mileage may vary depending on your preferences/constraints. ### Sizzy While Sizzy ships with fewer baked-in device profiles, this is more than offset by the fact that you can add your *own.* I don't know what the upper limit is for custom devices profiles, but I didn't find it. To add a new, custom viewport in Sizzy you need to click the plus button in the top-right toolbar and complete the device profile form. You're able to specify a device name, a user agent string, and the the device's dimensions. Once you create a custom device profile, it shows up in your list of available devices (and stays there unless and until you clear the app cache). You can always get back to it. **Winner:** Feels like a tie to me, though if you're particularly averse to customizing a config file (you're probably not), Sizzy may have the edge for you ## Filtering by device types/OS ### Polypane Nope. ### Sizzy Yes. I can see this being very useful for developers who target both Android and iOS, but would like to focus on one or the other sets of devices at a time. You can also, of course, filter out mobile devices and just look at larger screens. This functionality is nicely implemented and works well.

![Sizzy's filter controls](https://thepracticaldev.s3.amazonaws.com/i/t5ful742iihtty5xwisi.jpg)

Sizzy's filter controls

**Winner:** Sizzy ## Derive viewports from your CSS ### Polypane Want to automagically see what your site looks like across your *own* breakpoints rather than those from a canned device profiles list? Polypane absolutely lets you do that. Just click the `Create panes` button in the toolbar and the workspace loads all your media queries as panes in the workspace. This is a standout feature. And if it strikes you as one you'll need ... well ... Polypane is the only game in town right now. ### Sizzy Nope. Not automatically, at any rate. You'd need to manually create them, one by one, and then toggle their visibility on individually. **Winner:** Polypane ## Screenshots ### Polypane Polypane currently only allows you to screenshot the entire set of visible panes. There is no option to screenshot individual viewports. Screenshotting consistently worked as expected, though. I would note that Polypane does not hide the viewport UI (device type, pixel dimensions, etc.), so they will appear in your generated screenshots. I can't decide whether this is a good thing or not. ### Sizzy With Sizzy, you can screenshot individual panes as well as the complete set. Screenshotting the complete set of viewports, however, is currently an experimental feature. Screenshotting individual panes via the on-canvas viewport UI worked like a charm, however. Moreover, Sizzy has the ability to screenshot the viewport or the entire scrolled page—also an experimental feature right now, though thankfully one that appears to work as intended. That's a nice, thoughtful touch. I found screenshotting all panes with Sizzy to be very hit and miss. I can see why it's currently behind an experimental toggle. In my testing, I saw screens spliced together incorrectly into a single image when I was in default view mode as well as horizontal view mode. Feels like I personally would use the side-by-side screenshots that Polypane provides much more often than I'd need Sizzy's individual screenshots. Your mileage may vary according to your use case. **Winner:** Looks sort of like a tie, but somehow in different categories 🤷 ## Keyboard shortcuts If you're a so-called power user—if the first thing you do with a new app is to learn the keyboard shortcuts—both Polypane and Sizzy have you covered. ### Polypane View the list of available keyboard shortcuts [here](https://polypane.rocks/docs/list-of-shortcuts). ### Sizzy You can find Sizzy's shortcuts under the `Settings > Shortcuts` tab. There's a note at the top of this tab promising that shortcuts will soon be customizable! **Winner:** Whichever one allows user-configurable shortcuts first! ## Baked-in Microsoft device profiles Mac users: feel free to eye roll and skip to the next section now. ### Polypane Nope. Not a Surface device in sight. (But at least you can add them to the pane config if you're so inclined) ### Sizzy See above. But, again, you can add your own profiles. That's pretty much all there is to say about that. 👎 **Winner:** Neither ## Try before you buy? ### Polypane Yes. (Seven-day trial.) ### Sizzy No. But contact the developer. He may grant you a quasi-trial period within which you can get a full refund of the purchase price. Even if not, it may not be too financially onerous to shell out $7 for a one-month subscription. At least you'll know whether the tool grabs you enough to commit to the yearly package. **Winner:** Polypane ## Documentation ### Polypane Yes: [here](https://polypane.rocks/docs/) ### Sizzy Doesn't appear so. But there is a [changelog](https://headwayapp.co/sizzy-release-notes). **Winner:** Polypane ## Update cadence Too soon to tell. I will say that Sizzy updated from 0.0.21 to 0.1.2 while I was writing this review and Polypane 1.1 is scheduled to drop tomorrow. **Winner:** not enough comparative info yet ## Odds and ends ### Toggling device orientation In Sizzy, to change a pane's orientation from portrait to landscape, you click the associated device icon (at the upper left of the pane); in Polypane, you click on one of the pixel dimension readouts at the upper right. Neither is particularly discoverable at first blush. Sizzy, however, does provide a hover effect for the device icon, which certainly aids discoverability. Clicking the icon not only toggles the pane to landscape or portrait orientation, it also rotates the device icon itself to the appropriate orientation as well. That's a nice little touch and representative of Sizzy's more polished UI. ### Sizzy's ghost scroll Sometimes when I was using Sizzy and also had another Chromium browser open as well, the web page I was viewing would begin to slowly scroll upwards in both browsers and there was no way to stop it, except by closing one or the other of them. ### Polypane's scroll sync issue If your dev environment makes use of Browsersync (and particularly its scroll sync functionality), be warned that this doesn't play nicely with Polypane. You'll need to either (a) configure Browsersync to *not* sync scroll across devices, or (b) toggle off Polypane's built-in scroll syncing (via the `enable/disable scroll sync` toggle in Polypane's toolbar) and let Browsersync do its thing (which is my preference). You'll need to do one or the other. Otherwise, things *will* get weird. ## Cost Okay. That brings us to the penultimate question. How much will these tools cost you? ### Polypane Polypane runs **$12**/month ($144 billed yearly) or you can subscribe monthly for $15. I initially thought this seemed a bit pricey given Polypane's feature set, which is generally comparable to Sizzy's (at less than half the apparent cost). But Polypane's license allows you to install the app on three *separate* devices. This is well worth noting for purposes of price comparison. Yes, the cost is higher on the face of it, but per install it works out to be as little as $4/device (if you require multiple device seats, as I do). ### Sizzy Sizzy will set you back only **$5**/month ($60 billed yearly). It, too, has a month-by-month option for $7. At less than half the cost per month and with a very similar feature set where it counts, Sizzy is the winner here in terms of a price-to-value comparison—that is, if you only need one seat. Note: Sizzy's license allows you to install the app on one *single* device. To add additional devices, you'll need to purchase additional licenses (at $5/seat). If cost is a deciding factor for you, and you *don't* need multiple seats, you'll probably want Sizzy (that is, *unless*, for *your* workflow, the significantly better tool management UX of Polypane justifies its higher cost. As noted above, Polylpane has a free trial to help you make that determination). **Winner:** Going strictly by the numbers for a *single* license, Sizzy wins (but the story is different if you need/want multiple seats) ## Do you actually need one of these tools? And, finally, the most important question—one that's probably been on your mind throughout the entire review above: do you actually *need* one of these tools? I'll be honest here. If you're budget is currently tight (as mine has been at various points in my life), the short answer feels like: No. Not really. These are nice tools. Good tools. Convenient tools. Helpful tools. I like them both for different reasons. I wish that together they would make a baby that embodied the best of both, name is "Polysizer," and release it to the world. I'd subscribe to that in a heartbeat. Do they speed up your workflow? Quite possibly, but not exponentially so. They certainly *do* reduce the friction of developing a responsive website in real time that looks great across various device types. But they both currently feel like something of a luxury to me. *Very* nice to have—and worth the investment—but not yet indispensable. That said, if the cost is workable for your budget, I highly recommend giving one or both of them a try. **Winner**: You! ✊ ## Summary comparison | | Polypane | Sizzy | | ------------------------------------ | ---------------------------------- | ----------------------------------------------- | | **Under the hood** | Electron (with Chromium) | Electron (with Chromium) | | **Linux support** | ✓ | ✓ | | **Rearrange viewports** | ✓ quick and easy | ✓ comparatively cumbersome | | **Reconfigure viewports on the fly** | ✓ quick and easy | ✕ Not really | | **Remove viewports** | ✓ quick and easy | ✓comparatively cumbersome | | **Zoomable workspace** | ✓ | ✓ | | **Scroll to anchor on refresh** | ✕ | ✓ | | **Baked-in devices** | 21 | 13 | | **Custom device profiles** | ✓ via a modified config | ✕ | | **Filter by device type** | ✕ | ✕ | | **Filter by device OS** | ✕ | ✕ | | **Screenshot individual viewport** | ✕ | ✓ | | **Screenshot all viewports** | ✓ | ✕ Still experimental | | **Derive breakpoints from CSS** | ✓ | ✕ | | **Microsoft device profiles** | ✕ | ✕ | | **Free trial** | ✓ | ✕ | | **Documentation** | ✓ | ✕ | | **Seats/devices per license** | 3 | 1 | | **Cost** | **$12**/month (on up to 3 devices) | **$5**/month (on a single device) | ## Summary I like both of these apps, albeit for different reasons. Polypane has better tool management; Sizzy has a more polished UI and some unique functionality (filter by device/OS, for example). This space is still evolving (pioneered by Blisk, I think—more on that in another review) and I expect great things from both Polypane and Sizzy (and others?) in the future. May their tribe increase. This article was originally published on [windowswebdev](https://www.windowswebdev.io/blog/polypane-vs-sizzy/).

windowswebdev

Polypane versus Sizzy

Join Our Newsletter. No Spam, Only the good stuff.