We know, you're tired of hearing it, but we're working hard on bug fixes and improvements! We want to make Sizzy as stable as possible before we continue adding new features (and boy oh boy do we have tons of ideas!)

🔥 CPU/GPU issues

In this release, we (hopefully) got rid of all the CPU/GPU issues, so your computer isn't stressed out when running Sizzy 🧘‍♂️ If you want to increase the performance even more, you can disable the devices that are not currently visible by going to Settings -> Performance.

💅 New toolbar look on macOS

The Sizzy toolbar got a fresh coat of paint on macOS!

• The title bar is gone
• The window controls are merged with the rest of the toolbar
• The icons are smaller
• The URL bar is smaller and centered
• Overall more compact design

This gives you more vertical space to work with. You can still move the app around by dragging on an empty space in the toolbar.

Why is the new look on macOS only? The main menu on macOS apps is separate from the app window, which makes it easy to achieve this look. On Windows 10, the menu is attached to the app window, and Electron doesn't provide an easy solution to achieve this UI. However, we'll have some ideas in mind, and we'll try to find a custom solution for Windows and Linux in one of the future releases, so stay tuned 🙌

If you cannot update to this version please use the download link that was sent to you in the initial email and download the version manually. If you can't find the download link click here to download the app.

If you have any issue don't hesitate to contact us directly and we'll fix it as soon as possible.

If you want to suggest a new feature or vote on existing features for the next update you can do that in the public roadmap.

Enjoy 🙌

This release is also focused on bug fixes and improvements so there are not a lot of shiny things to play with. However, we have added a few features as well, so let's see what we have:

Navigation Sync is now a visible plugin in the toolbar

This allows you to easily disable/enable the navigation sync from the toolbar and also switch between Navigation Mode v1 and v2.

Absolute Scroll Sync

We added a toggle for switching between normal scroll syncing, and absolute scroll syncing. Absolute Scroll Sync is useful if you're using the Page Navigator or Scroll To Element plugins to navigate all devices to a certain section, and then you want to scroll in a device, and the rest of the devices to scroll with the same amount.

Previously, this wasn't possible because after the first scroll all the devices would jump to a different position, based on the scroll percentage. You can try and switch between the two modes and see the difference.

Partially Reset Config

Now when resetting the config through the Main Menu -> Settings -> Reset Config, you can choose which things to reset instead of resetting the entire config. This way you can preserve your presets, custom devices, etc.

Disable smooth scrolling for Page Navigator and Scroll To Selector plugins

Now in Settings -> Plugins you can disable smooth scrolling for these two plugins, which makes navigation instant.

👌 Improvements

• Improve the responsiveness of the cancel button when cancelling all screenshots at once.
• Replace iPhone XR with iPhone 11 (same resolution and dimensions)
• Replace iPhone XS with iPhone 11 Pro (same resolution and dimensions)
• Fix sync scrolling for pages where body is scrollable instead of document
• Show all the possible options in the device menu when in Zen mode
• Now you can use the "screen resolution" variable in the screenshot name
• Popups are properly tethered to their respective icons
• Add Photo Studio keyboard shortcut: P

🐞 Bug Fixes

• On Windows, the buttons of Sizzy activation window are partially hidden.
• When making a screenshot with frame the layout of the browser UI gets messed up
• It's not possible to cancel a full-page screenshot of one device
• Cloning of devices with browser UI doesn't work properly

If you cannot update to this version please use the download link that was sent to you in the initial email and download the version manually. If you can't find the download link click here to download the app.

If you have any issue don't hesitate to contact us directly and we'll fix it as soon as possible.

If you want to suggest a new feature or vote on existing features for the next update you can do that in the public roadmap.

Enjoy 🙌

You know that moment when you read "bug fixes and improvements" in a changelog and you hate it? Well, we're sorry, but we have an entire changelog focused on bug fixes and improvements. We added a couple of small features, but for the next few weeks we'll focus on the stability of the app.

⚡️ Performance tab in settings

We understand that not everyone has a powerful computer with a lot of RAM to spare, so we added options for offloading some devices from memory when they're not visible. Now you can choose which devices should be kept in memory when switching between different modes and filtering devices.

Please note that when devices are not kept in memory they will refresh the next time they appear on the screen.

🛠 Revamp screenshot settings

Now in Settings -> Screenshots you can choose what the camera icon does for each device, and you can choose what the "Screenshot All" button does in the sidebar.

📸 (Full) Screenshot All

Yeah, yeah… finally! 🥳 We now allow you to take full-page screenshots of all devices at once. You can enable the behaviour from Settings -> Screenshots by changing the action of "Screenshot All".

♻️ Reload CSS plugin

If you enable this plugin from Settings -> Plugins you will get a "Reload CSS" button in the toolbar which allows you to refresh the CSS of a page without reloading the entire page.

👌 Other improvements:

• Upgrade to Electron 6
• New keyboard shortcut: - to jump to resizable mode
• New keyboard shortcut: + to jump to full mode
• Cloned devices keep frame and browser UI
• A filter should get deactivated if all devices satisfying that filter are removed
• Disable "Screenshot All" when there's only one visible device

🐞 Fixes

• Fix: Some devices won't navigate to new URL
• Fix: 100% CPU crash on Windows (it was bug in Electron)
• Fix: Photo Studio cannot save screenshots on Windows
• Fix: Chrome extension doesn't work
• Fix: Devices aren't navigating to the same section using the navigator plugin

If you cannot update to this version please use the download link that was sent to you in the initial email and download the version manually.

If you have any issue don't hesitate to contact us directly and we'll fix it as soon as possible.

If you want to suggest a new feature or vote on existing features for the next update you can do that in the public roadmap.

Enjoy 🙌

Presets

Introducing Sizzy Presets - a special feature that allows you to save a preset by combining any of these properties:

• Currently visible devices
• Theme (along with background and all the other settings)
• Preferred zoom percentage (individual per device + global zoom)
• Align mode (Horizontal, Vertical, Float, Center, etc.)

You can combine any of these properties and save them as a preset. Example of presets:

iOS devices + theme + zoom level + horizontal align

iPhone + iPad + float align

Mix of devices + center align + no device headers

Green background gradient + minimalistic frames (this is like a "custom theme", because this preset doesn't replace the list of devices, it just applies the theme settings)

This feature is really time-saving because with just one click you can quickly switch your entire setup. You can create as many Presets as you want and they will be available as tabs below the URL bar. Presets can be deleted and updated at any time.

Keep in mind, there's no such thing as "selected" preset. When you click on a preset tab, a preset is being applied. If you want to change a preset (add/remove devices, switch theme settings etc.) you need to click on the "update existing preset" button, and you'll be able to choose which preset to update.

Screenshot devices with frames

Now, screenshots are even more realistic with this new feature. A screenshot of a device can be taken together with its frame and browser UI. In order to enable it, visit:

Settings → Screenshots -> Screenshot icon action → Take viewport screenshot with device frame and browser UI.

This feature is also available when screenshotting all devices at once.

Revamped Filters

We're aware that the previous way of filtering devices might've been a little bit confusing, and it also didn't work when the sidebar was collapsed.

That's why we improved the UX for filtering. Now when filtering devices, some filters will be automatically disabled, so you don't end up with an impossible combination and an empty device list.

The filters are divided by OS (iOS/iPadOS, Android, macOS, Windows) and Type of device (Phone, Tablet, Laptop, Desktop).

Optimize CPU usage

We worked on improving the performance of Sizzy, and we decreased the CPU usage while the app is idle from 30% to 0% 🥳
We're working on more performance improvements and the app will be even faster in the future.

Other improvements

• CMD + H shortcut for hiding the app
• Add Windows and macOS in the OS filters
• ESC will close the Page Navigator and Navigate To Element plugins

If you cannot update to this version please use the download link that was sent to you in the initial email and download the version manually.

If you have any issue don't hesitate to contact us directly and we'll fix it as soon as possible.

If you want to suggest a new feature or vote on existing features for the next update you can do that in the public roadmap.

Enjoy 🙌

📸 Sizzy Photo Studio

Introducing Sizzy Photo Studio - a special mode where your pretty designs can pose for a pretty picture. Configure the devices however you want, move them around, resize and rotate them until you get them in the perfect position. Then just press the shutter and you'll get a pretty screenshot ready to share wherever you want. We have way too many ideas about the future of Sizzy Photo Studio, and we can't wait to share them with you!

Set Gradient Background

Custom background colors are great, but they can get kind of boring. Now you can pick from a huge list of gradient backgrounds!

Set Image Background

Gradient backgrounds are great, but they can also get kind of boring 😂️ Now you can pick from a predefined list of images, or add your own custom images!

View Variations

We split the different view variations in Sizzy in Mode and Align.

Mode:

• Default (list of the devices)
• Focus (one device at a time, navigate with arrows)
• Full (one device that takes full width and height)
• Resizable (one device that can be resized)

Align:

• Grid
• Horizontal
• Vertical (New)
• Center (New)
• Float (New)

Float Align

When Float is selected from the Align options, you can freely move devices wherever you want. Move them around, rotate them, and increase or decrease their size until you find the perfect layout.

Drag to zoom in/out

Now you can drag the bottom-right corner of each device to change its individual zoom level. This is way easier than clicking the - and + buttons.

Kill Port Plugin

We added a new plugin which allows you to easily kill a port on your machine. This can come in handy if you have a local development process that's too stuborn! Don't forget to enable it from Settings -> Plugins.

Colors for Minimalistic Device Frames

Previously you could choose between Black and White device frames when the minimalistic setting is on. Now you can choose between Gray, Black, White, and Color. When Color is chosen, you can pick a different color variation.

Customize space between devices

Everyone has a different screen size and wants to squeeze as many devices as possible on it. Now, you can customize the space between devices using a simple slider.

Setting to disable all tooltips

Tooltips can be annoying if you're a pro user. Now you can completely disable them for the entire app if you go to Settings -> General and you toggle the setting off.

Support for macOS Catalina

Even though macOS Catalina is still not released, there are a bunch of thrill-seekers that are already on the beta version. Apple requires apps for macOS Catalina to be notarized, and now Sizzy has joined the notarized gang 😎 (that's totally not a real gang)

Other improvements

• Fixed crazy reload problem
• Fixed overlapping icons in browser UI for desktop and laptop
• Minor bug fixes

If you cannot update to this version please use the download link that was sent to you in the initial email and download the version manually.

If you have any issue don't hesitate to contact us directly and we'll fix it as soon as possible.

If you want to suggest a new feature or vote on existing features for the next update you can do that in the public roadmap.

Enjoy 🙌

Add frames for devices

All default devices have real device frames now. Of course, you can toggle the frames according to your preference. The ability to add custom frames for devices is coming soon.

Minimalistic device frames

You can also toggle an option to make all the frames more minimalistic. For now, they can be gray or white, but soon you'll be able to pick any color.

Theme and UI configuration

We have some good news and bad news. The default Sizzy themes are gone. That's it. That's both the good news and the bad news 😅 Now you can choose a custom background color that will affect the entire app. More customizations and completely custom themes are coming soon!

Add Windows 10 UI

We added Windows 10 UI for some desktop and laptop devices, so now you get a more accurate representation of the viewport height. It also looks prettier.

Android and Chrome UI

We added Android and Chrome UI elements for Android devices. Now you get a more accurate representation of the viewport height, especially on devices that have a notch and need some more space for the status bar (Galaxy S10, Pixel 3XL). Yes, yes, we know, dark mode for the UI is coming soon.

Override user agent for all devices

If for some reason you want all of your devices to have the same User Agent, you can now do that with the User Agent Override plugin, that you can enable from Settings -> Plugin.

After choosing a User Agent, you can close the popup window, and there will be little green indicator icon to let you know that the override is still there.

Individual zoom for devices

While phones are pretty small, and you can see them properly at any zoom level, we have some devices like the iMac and MacBook Pro which can be huge at 100% zoom. So we added individual zoom per device, that's gonna be relative to the global zoom.

That means that the individual device zoom is gonna be combined with the global zoom, instead of completely overriding it. By default, we zoomed out the big devices to 75%, but you can change that at any time.

To change a device's individual zoom you can just click on the zoom level that's next to the device's dimensions. To exit, just click the "x" icon or press ESC.

Automatically adapt device header icons based on the device's width

Previously, the device header would adopt to the global zoom of the app, which doesn't make a lot of sense because some devices are smaller, some are bigger, some might be in landscape etc.

Now the functionality for detecting which layout to present has been improved, and it's using multiple factors to find the correct layout for the header. You can still choose between the different header modes in Settings -> Device.

Other improvements

• Keep scroll position after refresh
• Export/Import devices and settings
• Use F5 to refresh
• Allow rotating all devices when in horizontal or focused mode
• Allow zoom in horizontal mode
• When changing Pixel Ratio on a device it will automatically refresh
• Register first click when Sizzy is not focused (useful when used in split-screen with code editor)
• Add a minimum size restriction for the main window
• Set initial zoom for big devices to 75%
• Add a link to Help Center in Settings -> About

If you cannot update to this version please use the download link that was sent to you in the initial email and download the version manually.

If you have any issue don't hesitate to contact us directly and we'll fix it as soon as possible.

If you want to suggest a new feature or vote on existing features for the next update you can do that in the public roadmap.

Enjoy 🙌

🧪 Alpha & Beta update channels

Now you can live on the edge and get Sizzy updates more often. If you go to Settings -> About you can switch the update channel to Alpha or Beta.

We're aiming to release alpha versions more often, and a few beta versions before the official release. The update will be automatic so you don't have to manually download or install anything.

Note: you can always switch back to a more stable channel and the update will be automatic.

🖥️ Add UI elements for desktop Chrome and Safari on macOS

We're making progress towards adding UI for all the devices in Sizzy. In this update we added:

• macOS dock
• macOS status bar

Safari browser

Chrome browser

Again, this is not only a cosmetic change. This will affect the height of each viewport, so you get a more accurate representation of what you would see on a real device.

📲 Add DPR setting for each device

Now you can specify the Pixel Ratio for each device. We already added the correct DPR for the default devices, and you can update the custom ones that you have added manually.

Now the srcset attribute should work properly for images, yay! 👍️

✅ Detect if your app is running in Sizzy

If you want to detect if your app is running in Sizzy, you can do that by checking if the window.__sizzy object exists. It might be useful to do this check if you want to disable animations, switch a theme, do some A/B testing etc.

Sizzy adds extra info about each device to the window.__sizzy object. Here's how a sample object would look:

 {
      totalDevicesCount:8,
      device: {
            index: 3,
            name: "iPhone 7",
            id: "iphone-7"
        }
    }

This information is useful because you can use it to activate different features, themes, etc. based on the device name or the device index.

Example

Let's say that our app has 2 themes, dark and light, and we want to test both of them in Sizzy. So we want every device to have a different theme instead of switching between the two themes.

We can write this code:

    const sizzy = window.__sizzy;
    const darkTheme = sizzy.device.index % 2 === 0;

So then in our code we can easily set the theme to dark for every second device.

A/B testing

You can also use this information to enable/disable a feature on some of the devices. This is pretty useful for A/B testing.

Demo

We published an example here.

Try opening this url in Sizzy.

🛠 Other improvements

• Add Galaxy S7, S8, S8+ devices
• Sizzy will remember the size and position when it's closed, and when it's open again it will launch with the same size and position
• Add "Hide Application" in the menu (macOS)
• Bug fixes and stability improvements

If you cannot update to this version please use the download link that was sent to you in the initial email and download the version manually.

If you have any issue don't hesitate to contact us directly and we'll fix it as soon as possible.

If you want to suggest a new feature or vote on existing features for the next update you can do that in the public roadmap.

Enjoy 🙌

📐 OS and Browser UI

We added the OS and Safari UI elements for each iOS device. The results in Sizzy are now the same as what you would see on a real device.

This is not only a cosmetic change, but it also affects the height of the viewport. We wanted it to be as accurate as possible, both in portrait and in landscape mode.

For now, this works only for iOS devices. We're releasing the UI for the rest of the devices in the next update. We will also add more UI configuration settings soon, so stay tuned.

Note: You can disable this feature in Settings -> Device.

📲 New navigation & sync actions across devices

⚠️ This feature is disabled by default, and you can enable it by going to Settings -> Plugins -> Synchronize actions across devices -> Switch Navigation to V2

🕹 Sync clicks and form inputs

Manually closing a cookie popup or filling in a form on each device is not exactly a great experience.
Now you can choose to synchronize more actions like clicking and filling forms. Once you perform an action on one device, it should be automatically replicated on all the other devices.

♻️ Navigate SPA without reloading the page

If you're working on a SPA (Single Page App), you can now click on links and navigate pages without the entire page reloading. Finally, huh?

Note for the more technical folks: The new navigation and action sync is implemented using Browsersync, which is not perfect and doesn't work in all scenarios. Keep that in mind when you're debugging an issue.

🔓 Allow visiting websites with an invalid SSL certificate

So many users have requested this feature and now it's finally here.

Of course, you can configure this per website. When you visit a website with an invalid SSL certificate you will get a prompt and choose whether you want to allow it.

🐞 Fix for Gatsby, Next, and Nuxt

These frameworks have a limitation on how many tabs (devices) they can connect to. We thought that we cannot override this limitation, but it turns out it's possible, and the fix is finally here!

Now you can use as many devices as you want and live-reload should work perfectly 🎉

If you cannot update to this version please use the download link that was sent to you in the initial email and download the version manually.

If you have any issue don't hesitate to contact us directly and we'll fix it as soon as possible.

If you want to suggest a new feature or vote on existing features for the next update you can do that in the public roadmap.

Enjoy 🙌

Sizzy 0.3 is here, and we're super excited about this release! 🤩
Here's what's new:

🕵️‍♀️ Universal inspect element

Now you can easily inspect elements across all of the open devices at once.

Just toggle the "Inspect Element" mode from the sidebar, or press Ctrl + Shift + C or ⌘ + Shift + C to turn it on, select your element, and it'll be opened in the device's dev tools. Nifty, huh? 🤩

Note: Docking the dev tools is high on our priority list, but we're currently blocked because of a bug in Electron 😞 Hopefully it will be resolved soon!

👆 Emulate touch

Using a mouse cursor on a mobile device is not as natural as using touch. Just click inside a device that supports touch and the cursor will change to a touch cursor. You can still use the scroll wheel to scroll even when the touch cursor is enabled.

In order to exit the touch cursor mode just click away from the device or press ESC.

Note: you can also completely disable this option in Settings -> Device.

Tap, scroll and swipe to your heart's content 🤘

🖱 Right-click menu

Now you can right-click inside of any device and you'll see the following options:

• Inspect - for easily inspecting an element
• Copy - for copying selected text
• Paste - for pasting text in an input or a textarea
• Copy Link - for copying the address of a link
• Copy Image Address - for copying the address of an image

💻 More configuration options for each device

• Specify if a device can be rotated
• Specify input type (Touch / Mouse)
• Choose a mobile OS (Android / iOS)
• Choose a device type (Phone, Tablet, Laptop, Desktop)

Note: You would have to edit each custom device that you made and specify all of these options because previously they weren't available.

🌍 Toggle network connection

• Toggle network connection for all devices from the sidebar.
• Toggle network connection for each individual device from the device's header.

📦 Manage cache & cookies

We added some useful options for managing the cache and cookies of the website you're working on. In the sidebar you can find the following buttons:

• Button to clear cache
• Button to clear cookies
• Button to completely disable cache while working with Sizzy

🛠 Configurable device header

Now you can configure the icons that appear in the header of each device by changing the setting in Settings -> Device.

• Minimal: Don't show any icons
• Balanced: Show the 3 most important icons
• Full: Show a full row of icons

Note: soon the device header will be completely customizable so you can choose your own icons.

🔁 Reload & Hard Reload devices

• Press Ctrl + R / ⌘ + R to reload all devices.
• Press Ctrl + Shift + R / ⌘ + R to do a hard reload (clear cache and reload all devices).
• Press Shift while clicking on the refresh button to do a hard reload (this also works with the reload button of each device).

🔍 New zoom options in the sidebar

• Quickly jump to a specific zoom setting (25%, 50%, 75%, 100%)
• + and - buttons for increasing/decreasing zoom

📱 New devices

• Google Pixel 2
• iMac Retina 27"
• MacBook Air
• MacBook Pro 15"
• iPhone 5
• iPad Pro 10.5"
• iPad Pro 11"
• iPad Pro 12"
• Notebook
• Desktop
• Laptop S
• Laptop M

⌨️ New keyboard shortcuts

• ⌘ + Shift + C / Ctrl + Shift + C to inspect element
• ⌘ + Option + I / Ctrl + Shift + I to open dev tools for a device (device must be focused)

👌 Other changes and improvements

• Improved look for sidebar and dialogs
• Press ESC to dismiss any toast or notification
• Separate buttons for rotating devices in portrait and landscape
• Devices that are default in Sizzy cannot be deleted or edited anymore. If you want a custom version of a default device, just clone it first. You can always hide default devices.
• Bug fixes and stability improvements

If you cannot update to this version please use the download link that was sent to you in the initial email and download the version manually.

If you have any issue don't hesitate to contact us directly and we'll fix it as soon as possible.

If you want to suggest a new feature or vote on existing features for the next update you can do that in the public roadmap.

Enjoy 🙌

This is a minor update with few bug fixes regarding license activation.

💻 Rename Devices

Also, we just added the ability to rename the activated devices through the License Manager so you can easily recognize each device. You can find a link to the License Manager in Settings -> About -> Manage license.

We're working hard on Sizzy 0.3 and we're aiming for a release next week. We can't wait to share all the exciting new features with you 🥳

If you cannot update to this version please use the download link that was sent to you in the initial email you have received and download the version manually.

If you have any issue don't hesitate to contact us directly and we'll fix it as soon as possible.

If you want to suggest a new feature or vote on existing features for the next update you can do that in the public roadmap.

Enjoy 🙌