Sizzy has a variety of plugins that will speed up your development workflow

The "Scroll to selector" plugin is one of the most useful features in Sizzy. It allows you to write a CSS selector, and all of the devices will automatically scroll to it.

Now, when you close the plugin popup, if you have written a selector the plugin will remain active (indicated with the green dot), and even after refresh all of your devices will scroll to that selector.

<Video id="ckidd8qa940782nlxg6igir2o" />

The Scroll To Selector plugin can remain active after the popup is closed

With the new Grid Overlay Plugin, you can easily check the grid alignment of your page across different devices.  

![](https://i.ibb.co/f4TKqZq/11-23-2020-13-24-28.png)


Grid Overlay

Even though Sizzy doesn't simulate different browser rendering engines, we're trying our best to bring you the best simulation experience.

So far, we're simulating:    

- Device Size
- Device Frame
- Device Pixel Ratio
- Device User-Agent
- Input type
- Operating System UI
- Browser UI

In this version, we added a software keyboard, which will bring you even closer to the real experience.

![](https://i.imgur.com/NPm2ClV.gif)

### Behaviour
The default behaviour is that the keyboard will automatically pop up whenever you are focused on an input field, whether that's by clicking or by pressing tab.

You can change this behaviour for all devices by clicking on the keyboard icon in the plugins section:

![](https://i.ibb.co/5h1K23d/11-16-2020-12-11-41.png)

You can also change this per device if you want to test different scenarios on different devices by going to the device menu and choosing "Keyboard Mode":

![](https://i.ibb.co/vq1v9vr/Clean-Shot-2020-11-16-at-12-13-28.png)

![](https://i.ibb.co/ZYbPK9Q/11-16-2020-12-12-57.png)

### Input types

The keyboard shows different modes for:    

- Text input  
- Password input (hides the autocomplete row)  
- Number input 

We'll add more modes and customizations in the future.

### Not purely cosmetic
The keyboard actually restricts the viewport height, just like a real device would do. Also, the centring field behaviour is different on iOS and Android devices, so we tried to match them accordingly. There are a few edge cases left and hopefully, we'll handle them in the future.

### The keyboard is resizable

![](https://i.imgur.com/fyzRFLD.gif)

You can resize the keyboard by dragging the top edge. The size you choose will be persisted for the device.

There is not a standard keyboard height for every platform. It varies depending on a lot of things like the type of input (text, number, URL), whether autocomplete suggestions are enabled, the device's font size settings, etc. Android also allows user to directly customize keyboard height and some devices with bezel-less bottom add some padding below the keyboard to raise the keyboard. 

Software Keyboard

Now you can easily reorder the icons of the plugins by dragging them. 

Don't forget that you can easily disable plugins in the plugins popup if you don't want your toolbar to be cluttered.  

![](https://i.imgur.com/87jIWW5.gif)


Reorder plugin icons with drag and drop

The left sidebar is going away soon, so we moved a few buttons and converted them to Sizzy Plugins, so you can easily enable or disable them from the [Plugins popup](https://www.notion.so/sizzy/Plugins-85a4b6633afb4efea74c58d8094c597a).

-   Network Manager
-   System Color Scheme switcher
-   Touch Pointer
-   Manage Cache

We removed the "clear cache" button and the "enable/disable cache" toggle from the Cache popup, and you can find it as a separate "Manage Cache" plugin. Soon we'll allow you to reorder plugins 💪  

![](https://i.imgur.com/jiI6WHP.png)


More Plugins

Using a mouse cursor on a mobile device is not as natural as using touch. 

With the Emulate Touch Plugin you can alternate between a touch cursor and a normal cursor by clicking on the plugin icon in the toolbar

<Image id="ckkdtpd493376492nrb7vdfu08f" />

You can still use the scroll wheel to scroll even when the touch cursor is enabled.

This feature is super useful when you want to simulate real scrolling and swiping, especially on elements like carousels, galleries, etc.

<Video id="ckkdto6lk3367752nrbf9afpbd1" />

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

Emulate Touch Plugin

Syncing the scroll position between devices can be useful, but given the fact that all the devices have a different height, you'll never end up in the same spot on all of them.
 
The Page Navigator plugin for Sizzy allows you to easily navigate a page by `section` or `h1`, `h2`, and `h3` elements. When you click on  the "next" and "previous" buttons, all the devices will navigate to the exact same spot.

<Video id="ckkdt29s33301062nrblzliphzv" />

Page Navigator Plugin

Plugins

Easily store the code snippets that you often use and stop opening your previous projects to copy and paste code.

<Image id="cl5rtq2nj208662mpkqizj3xym" />

You can find it in the Snippets tab in the left Sidebar.

You can add [Project](https://docs.sizzy.co/L-EL-projects) specific snippets which will automatically switch when you switch projects, or you can have some global snippets.

<Video id="cl5rs4djv135452mpkbii5w1em" />

You can search and copy the code snippets by title or their content with $butler$.

<Image id="cl5qtsuo842642mwaquqkznwt" />



Easily store the code snippets that you often use and stop opening your previous projects to copy and paste code.

Snippets Manager

The new API Inspector will help you quickly monitor, test, and troubleshoot your APIs, saving time and effort. Test your REST, GraphQL, or form requests and view well-formatted responses. You can even save requests as part of your project. 

We've made it really simple to use with the right options you need.

<Image id="cl48br84j6673502hqgcj5qmkre" />

Find it in the Debugging Panel to start using it.

Easily inspect and play with APIs in Sizzy. Supports REST and GraphQL.

API inspector

With the URL Editor Popup, you can visually edit the parts of your URL: origin, paths, query params, etc.

URL Editor Popup

Sizzy has a built-in console for debugging. The look is totally customizable and you can filter our certain annoying logs forever.

Sizzy Console

A live preview of how your website will look when shared on different websites or apps (Facebook, Twitter, Google, Slack, etc.)

Social Media Preview

A browser within Sizzy that automatically changes tabs and bookmarks based on the project that you're working on.

Reference Browser

The Sizzy DevTools allow you to inspect multiple devices at once.

DevTools

CSS overrides

The tabbed panel docked on the right side in Sizzy. It contains a bunch of useful tabs with tools that will help you with debugging your website.

Debugging Panel

Similar to the Spotlight feature on macOS, Butler allows you to search everything in Sizzy and easily perform certain actions without touching a mouse. 

Butler

A software keyboard will automatically pop up whenever you are focused on an input field

Easily organize all the projects on your disk. Activate them in Sizzy, or open them in finder, explorer, or your code editor of choice.

Projects

You can undock certain windows in Sizzy if you want to move them to a separate monitor.

Undocking Windows

Simulate a different locale for each device to test and debug different languages in your app

Simulate Languages

Styles Inspector

Easily switch between user sessions without logging in and out manually all the time.

Session Manager

The entire UI of Sizzy is super customizable so you can make it 100% yours.

Glink

kitze / Sizzy