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

Opening the device drawer, dragging in a device, then closing it is ... who has time for that? 🙄

We just made you 4.3% more productive by allowing you to manage devices in the workspace with $butler$ 🚀

The commands are:
- Add X to workspace
- Remove X from workspace

<Video id="cl5rte9vq198772mpkiep9w1sn" />



Butler action for managing devices in the workspace

With the new `navigate` command in <Feature slug="butler">Butler</Feature>, you can type in a CSS selector and navigate all devices to that element (if the element is found).

<Video id="ckkml8sro5662762nrbci6a8gan" />

> Tip: You can also navigate all devices to a certain element through the "Navigate To Element" plugin in the Toolbar.

Butler command: Navigate to Element

With <Feature slug="butler"> Butler </Feature> you can easily switch themes to Light, Dark, or Auto, from any place in the app.

<Image id="ckk2oxbug630562nrb7xfz9jka" />


Butler actions for switching theme

Open screenshots and video folders from Butler

You can encode and decode any string in a variety of formats.

<Image id="ckidf4kyk766836rastcjk1ln" />

<Image id="ckidf5ssg860236ran4o355uv" />

New Butler feature: Encode and decode strings

Convert different color formats directly in Butler. Nifty!

<Image id="ckideiybp021736raxq0zgqq6" />

<Image id="ckideizmv025436rajuhjycds" />

New Butler feature: Color converter 

What is that annoying process that's hogging up port 3000? Let's google "how to kill a port" and open the terminal for the 1493813th time...

Not anymore! Just type `kill` in Butler and type the port that you want to kill. Boom. Gone. 

<Image id="ckidea5qt189752nlxz3u8yt4g" />

New Butler feature: Kill Port

Yup, no need to visit some shady website in order to get a random `uuid`. Butler is here to help!

<Image id="ckide7guz183152nlxxe38a6zm" />

New Butler feature: Generate uuid

You can directly get a `bcrypt`-ed string from Butler. Might be useful for creating bcrypted passwords on the fly.

<Image id="ckide6l7w175132nlxregjlovl" />

New Butler feature: Generate a bcrypted string

Yup, no need to open the Terminal and google how to do this every time. Just type `ip` in Butler and you'll get both your internal and external IP address.

<Image id="ckide3zzo163372nlxwny8lg6a" />

New Butler feature: Get internal/external IP address

Even if you're not using <Feature slug="projects">Projects</Feature> in Sizzy, this Butler action will be super useful for quickly adding a todo that you don't want to forget about.

<Image id="ckide2rab158072nlxzumeilwf" />

<Image id="ckidev8jh470336raxz0tt0mz" />

New Butler feature: Create notes and todos

You can say that now Butler has some ... math skills!  

Get it? Mad skills? Math skills? Anyone? Nevermind.

You don't have to open a Calculator if you want to do a quick calculation. You can do that directly in <Feature slug="butler"> Butler</Feature>.

<Image id="ckiddx50j132392nlxpffo2cpk" />

And yes, we're well aware that the first thing that you're going to try is to break this feature and find a bug. Good luck!

New Butler feature: Calculator

New Butler feature: Search and navigate to any tab in settings

With the new `fontawesome` workflow in $butler$ you can preview the FontAwesome icons as you're searching.   

![](https://i.ibb.co/xC3SwZL/11-23-2020-13-27-34.png)


Browse Font Awesome icons in Butler

$butler$ is getting smarter with each version of Sizzy 😇

We added support for the following workflows:

## Can I Use  
![](https://i.ibb.co/yQGkx3x/11-16-2020-11-43-58.png)

## npm  
![](https://i.ibb.co/V9sRbph/11-16-2020-11-43-29.png)  

## Font Awesome
For now, you can search the icons and copy their class names. In the next version, we'll also display the icons.

![](https://i.ibb.co/8jRMrFX/11-16-2020-11-43-42.png)


New workflows for Butler

During development, you constantly need to search for stuff on the web, but previously you had to:  

- Open the reference browser
- Open a new tab
- Type your query

Now, you can quickly and easily do this from Butler 🥳 

![](https://i.ibb.co/V3vzPDr/10-30-2020-14-25-27.png)

The search options will appear when there are no other matches found in $butler$. If there's still a match but you want to search for something you can add a space after your query. 

Soon, we'll add keywords to Butler so you'll be able to trigger the searches by typing in a keyword (for example: `g styled-components` for searching google)

By default, you can search Google, npm, Stack Overflow, and GitHub, but you can customize the built-in search engines, remove them, and add new ones by going to <Highlight> Settings -> Butler -> Search Engines </Highlight>. 

![](https://i.ibb.co/2qTDY8y/10-30-2020-14-24-11.png)

Note: The URLs must contain `{{search}}` for the search engine to be valid, for example: `https://github.com/search?q={{search}}`

Search engines for Butler

When you want to start working on another project, until now you had to run 2 commands:

- Activate project in Sizzy
- Open in Editor

Now, there is a new action in $butler$ that will allow you to do both of them at the same time: Activate the chosen project and open it in your code editor.

Hopefully, this will save you a lot of time and make project switching less tedious!

New Butler action: Activate project and open in editor 

$butler$ commands will now be sorted by usage, so the commands that you use most often will be more easily accessible.

Sort Butler commands by usage

We're gonna improve the Butler with every update, so you can easily do more things without touching a mouse. In this version, we added the following actions:

- Screenshot all devices with a frame
- Full screenshot all devices
- Jump to any align mode from any other mode
- Reset reference browser
- Clear completed todos
- Search the content of notes and press enter to copy  a note to the clipboard
- Manage Projects
- Project Settings
- Create a new project 

Also, the Butler shortcut (`Cmd + Shift + P` or `Ctrl + Shift + P`) can now be invoked when you're in the reference browser.

Butler improvements

If only one device is visible (Focus Mode or Full/Resizable Mode) all of the options that are available when right-clicking the device are also available in Butler.

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

If more devices are visible (Responsive Mode), the following actions are available in Butler:

- Reset Zoom
- Screenshot All
- Switch All To Portrait/Landscape  

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

Butler: Device Actions

If a project is active, the following actions will be available in Butler:

- Open Notes
- Open Todos
- Bookmark current URL
- Deactivate project
- Search and open bookmarks
- Search and open any reference or pinned link in the reference browser
- Edit active project  

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


Butler: Active Projects

Yeah, the name is totally not inspired by Alfred, why would you say that? 🤨

You can trigger the Butler by pressing `Cmd + Shift + P` on macOS, `Ctrl + Shift + P` on Windows/Linux, or by saying "Batman sucks!"

The Butler gives you easy keyboard access to most features in Sizzy: 

- Focus on any device
- Switch to any view or align mode
- Activate a project
- Open a project in your code editor
- Open a project in Finder/Explorer
- Switch to a preset
- Switch Docked Panel tabs (Console, DevTools, Request Headers, Cookies, Local Storage, Source)
- Access Menu Bar Items (Reload App, Import/Export Config, Check For Updates, etc.)

We're just getting started with adding functionality to the Butler, so if you have any ideas you can [tweet them at us](https://twitter.com/sizzyapp) or add them to the [public board](http://sizzy.co/roadmap).  

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


Butler

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

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

Session Manager

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

Simulate Languages

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

Plugins

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

Software Keyboard

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

Customize everything

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

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

DevTools

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

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

CSS overrides

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

Undocking Windows

Styles Inspector

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.

Glink

kitze / Sizzy