How companies benefit from command palette and increase user experience

Command palettes are in the rise during the last couple of years. They allow you to create friendly interfaces that link your "thoughts" to actions from within a simple popup.

Historically speaking, command palettes are the next step - from a UNIX terminal, to a graphical user interface, and now search.

It all started with Sublime. The Sublime author Jon Skinner has added a command palette to version 2 of Sublime, with the following announcement:

“Goto Anything” is how it started, a search pane to jump to other files. Open a folder, press CMD/Ctrl+P, start typing to see a list of matching files, then press Enter to jump to it. Seems simple enough: You think of a file you need, and without leaving the keyboard can switch to that file and continue work.

Sublime's command palette has gotten a lot of interest that it still works the same way as it has been launched years ago.

Since then, command palettes have been seen as a powerful, interactive way to find whatever the user wants in an app. The ease of use (both with a keyboard and a mouse) helped them thrive.

This pattern found its way among power users and professional tools initially, due to the fact that those apps have been considerably complex to work on. They require several steps even to perform basic tasks. With the help of a command palette, it is relatively easier to add functionality - and it all boils down to the fact that the user types what he/she needs, rather than fiddling with a bloated interface.

Let's go through some of the companies using the command palette.

Height

Height is a project management tool. It features a great looking command palette that can do almost everything from within the Height app.

After implementing the command palette functionality, Height founder Michael Villar writes about how convenient it was to bring this feature to Height:

You can navigate through files, lines of codes, and run commands too all from the same UI. Similarly, the Help menu on macOS is really helpful to find a specific feature you know exists but don’t remember where it was placed. We thought, project management tools also have hundreds of features, and are the perfect software to apply a command palette. So I’m really happy that ours enables people to work so much more efficiently.

Visual Studio Code

Visual Studio Code has an amazing command palette feature that gives you access to the entire application's functionality. You can access the VS Code Command Palette in a number of ways. Shift + Command + P (Mac) / Ctrl + Shift + P (Windows/Linux).

This command palette is also well integrated with other 3rd party apps as well, including Github.

Similar to Vscode, PHPStorem, Webstorm and Jetbrains IDE have the command palette option as well, which is (counterintuitively) launched by quickly pressing Shift twice.

GitHub

With GitHub's command palette, you can navigate, search, and run commands on GitHub. The command palette is an on-demand way to show suggestions based on your current context and resources you've used recently.

You can open the command palette with a keyboard shortcut from anywhere on GitHub, which saves you time and keeps your hands on the keyboard.

Warp

Warp really distinguishes itself from other application types - it is a command line terminal. However, Warp has evolved so much that it now even includes a command palette where users can search for almost anything in the popup.

One thing that is been very interesting to see is that it has a GPT-3 powered AI search which converts natural language into executable shell commands. It's like GitHub Copilot, but for the terminal.

Cron

Cron is a calendar service for teams where you share your availability with your colleagues, manage different time zones in one dashboard, unify work and personal calendars in one place. Its command palette is intuitively blended into the app where you can search actions, schedule or update a meeting or set the theme of the overall app.

Jumpstart

Jumpstart a Ruby on Rails SaaS template out there which helps developers to focus on their businesses. It gives a boilerplate environment where payments, accounts, authentication, invoicing and other libraries are already present. What you need to do is to integrate those services and build your own SaaS service on top of Jumpstart.

The command palette is available only in Jumpstart's Pro version.

Superhuman

Superhuman developers are just another example who are aware that you cannot beat a keyboard, and cannot beat the speed of not moving your hands to another device or touching the screen. The well known email client has implemented the command palette feature and even wrote a blog post about how to build a remarkable command palette, telling about their experiences throughout the journey.

Linear

If you’re not familiar with Linear, it’s a project management tool, offering really a great user experience. It also has a very intuitive command palette that lets you access the entire application’s functionality.

Command palette libraries

There are several libraries that have been used in both web and SaaS apps as well. This is a non-exhaustive list. Note that most of the command palettes are written for React, as the React community is widely recognized compared to other environments.

• Cmdk: A fast, unstyled command palette React component.
• Kbar: A fast, portable, and extensible cmd+k interface for your site.
• Kmenu: An animated and accessible command menu.
• Vue omnibar: Create modal popups that emulate omnibar, command palette, open anywhere, or other "search and act" functions/features.
• Laravel Forge command palette
• React command palette: An accessible browser compatible javascript command palette
• Scoutbar: User-friendly, easy-to-use, scalable, and highly customizable component.
• React-cmd: A fast, accessible, and pretty command palette for React.
• Vue command palette: A fast and unstyled command palette for Vue.
• Solid command palette: A command palette for solid.js

Other implementations

We see similar command palette ideas as well, other than the one we mentioned above. Those apps implement in-line command palettes, as in Notion, where you open the core tool/menu behind a "/" menu, in which you type a command after the slash and enter what you would like to search for.

Other apps similar to Notion like Nuclino and Outline have implemented in-line command palettes as well.

There are several applications out there we haven't mentioned - including CircleCI, Datadog, Vercel, Sentry and Netlify. There are even browser-based tools like Omni, which is a Chrome extension helping you manage tabs, bookmarks, browser history and more with shortcuts.

As more and more people learn how to use command palettes, and see the power behind them, the way the technology is built will be shifted and transformed.

Conclusion

The command line is one of the most powerful tools available to developers. If you would like to get more comfortable and productive with it, then a command palette can be a great option.

With an accessible and intuitive command palette, you can access the entire application’s functionality within seconds. There are other advantages as well - since you don’t need a complex interface or installation process, the uptake of command palettes is likely to be wider and faster. They are also likely to be better integrated into your development workflow than command modes.

So give command palettes a shot and see what you discover! You will find that after investing a few minutes in each, you will become more productive and comfortable - and that you’ll forget you even had a choice!

Team Magny