command palette

Command palettes with examples

This blog post explains the different ways a command palette can be utilized in an application.

Team Magny

Dec 27, 2022 • 8 min read

Magny was born with a need to build better command palettes, after looking at existing command palette libraries. While they were great looking, it took us more than 2 weeks to implement something usable in our previous video conference call application.

This brought us the idea of a SaaS command palette platform where people can easily deploy their actions and help users onboard faster.

It is an efficient and user-friendly way to provide access to a large number of actions within an app and can help users perform a wide range of tasks quickly.

Let's first ask chatGPT what a command palette is.

And the purpose it serves below. While the command palette notion is new, ChatGPT can pinpoint the main idea easily.

Command palette types

As Retool builds its command palette, they have surveyed prior art in this area. They have found that most command palettes fell into one of two categories:

Content focused command palettes
Action focused command palettes

Content focused command palettes include widgets that are primarily focused on finding content. Rather than using the command palette to perform actions, users rely on patterns like context menus and direct manipulation.

Whereas action focused command palettes are primarily focused on performing actions like archiving emails or triaging project issues. While these command palettes can offer the ability to search for content, actions and content tend to stay separate.

Essential features of a command palette

Many applications started to implement a command palette, but what are some of the most essential features of building a command palette? Here is a non-exhaustive list:

The command palette should easily be initialized using a keyboard extension (eg. cmd-k), and the application ideally has a visible search field on the main page that runs the command palette when clicked.
It should be accessible from anywhere within the application, not the main page.
It should have fuzzy search to eliminate typos and forgive the end user.
It should ideally support both action and content-type commands.

Below, we are going to go over some of the features that a command palette would need to include. Chances are your command palette doesn't include all of those features, and this is more than acceptable, as this blog aims to list as many ways as possible a command palette is used.

1. Provide guidance about settings

This will be one of the most used features in your command palette. Often, the user will look for a specific setting. Users may or may not know where the setting page is, but sometimes SaaS apps have several configuration parameters like Look & Feel, API, domains, organization information, and such.

To make things more complex, those settings may be under the name "Application settings", "Project settings", "Account settings" or "Integration settings". If you were to look for an API key, where would you navigate first, Integration settings or Application settings? A command palette is very handy when you don't have to or want to remember the exact location.

Note that I have omitted the main menu items, as they are easily discoverable unless buried in a nested list.

2. Educate users about a feature

There are several ways to help users get aligned with a feature that you introduced lately. A great user onboarding flow makes it significantly more likely that customers will find and use your new feature.

Assuming that you’ve conducted careful user research and that the feature you’ve built is valuable, the customers that adopt your new features are less likely to churn.

You can let your users know about your new feature in several ways, including product tours (e.g walkthroughs), announcing using blog posts and podcasts, using tooltips to explain one feature at a time, or (drumroll) command palettes.

With Magny, when users login to your dashboard, you can let them view your latest blog post or video using the "Recommended" section. This section will stay afloat on top of all the commands, helping users view the latest feature you added.

3. Save time with tutorials and customer help

A command palette is a great example of telling users the shortest path of a menu or an action. Take this example - which is an easier way to explain how to upgrade?

Go to the Settings menu by clicking the hamburger icon on the top right, and then click on Teams > Plans > Payments.
Type "⌘ - k" and type Payments.

Definitely the 2nd one. We see this pattern increasingly in Stack Overflow and Reddit, hence when you implement a command palette, chances are you'll spend less time telling users how to find a particular feature in place.

Another example is Superhuman where they are extremely leaning toward explaining a particular feature using their command palette.

4. Announce product updates

A command palette can also be used to announce product updates. When there is an update, there are several ways to let the user know, and sometimes all those methods may not be enough to let the user know which features have been implemented in the new release.

Raycast does this extremely well. The very upper part of the Raycast app is devoted to either education (updates) or walkthroughs. When you click on the "See what's new" link, a generic HTML container opens and shows the new features of Raycast.

5. Act as a complete UI replacement

I admit command palette is a very hard way to replace a UI, especially when it comes to building a Swift UI, but folks at DetailsPro made it happen. Their November 2022 update adds keyboard commands, making it easy for designers who love the keyboard to create in SwiftUI faster than ever before.

Watch this video for a recap.

0:00

Simply press ⌘K and keyboard actions appear instantly. You can discover and filter through a range of context-specific actions.

All from your keyboard, you can arrow up and arrow down to select an action, and then press return to complete it.

6. Provide action guidance

With the command palette, you can create commands in minutes to support a feature you would otherwise take hours to create help articles and tutorials for. That's in fact the most used feature of a command palette. With the help of synonym words, whatever the user types can match a command.

7. Exploit application metadata

A metadata is what you can retrieve from your backend and make it usable for the command palette (at least let's name it like this for now). Without metadata, you cannot really benefit from a good command palette experience, as there won't be any contextual and instantaneous information you can retrieve and search on.

GitHub has built a tremendous command palette you can use to do almost everything with the mouse. Check this animation, for example, where you can search for issues, pull requests, repositories, users, groups, and much more.

What makes GitHub's command palette great is that, with the command palette open, you can use modes to find specific types of resources and execute commands:

> to enter command mode
# to search for issues, pull requests, discussions, and projects
! to search for projects
@ to search for users, organizations, and repositories
/ to search for files within a repository scope

8. Filtering out data by category

When you have a big list of data, you need filtering capabilities. This gives more power to users when they search for a document, for example, that has a creation date, person or parent page it belongs to. This speeds up the search process and makes the user feel more in control.

Notion has a good example of filtering data by category. When you press Cmd-k, you have all those options. When you click on "date", a date filter shows up where you can select a date range.

9. Add some fun with focus mode and confetti

There is always some room for a smile when it comes to command palettes, too. Particl's command palette has a Confetti option that fires up confetti all around when you press y-a-y.

Use it during product demo meetings when everything works as expected :-)

At Threads, developers created an environment where you can efficiently catch up, unblock, inform and connect with your team. To do this, being able to stay on task is critical. What the devs did is to add a "Focus" mode.

When you enter the focus mode either with the command "Focus" (or coffee as a synonym), the left menu disappears so you can pay attention to the middle pane, without getting disturbed.

0:00

And sometimes you want "stupid simple but working well" kind of examples for users.

Future of command palettes

Command palettes have been around for over a decade and typing commands is becoming the norm again. Companies like Docker, GitHub, Raycast and Linear have been focusing on building a great command palette experience, and we see 5-10 apps adding command palettes every week, and then mentioning this in their blog, realizing this is a game changer for their users.

This is mainly the reason the workflow of a power user has changed by retaining the core value of finding efficient and smart ways to get tasks done.

Power users have been ignored for some time. We see this by looking at how many apps really have a true keyboard shortcut or a command palette. However, command palettes have started to change this pattern.

The future of command palettes holds a lot of opportunities. While there is even not a handful of command palette services out there (Commandbar, Magny) we are confident that there will be many, despite the fact that it is quite hard to build one from the ground up.

Soon enough, command palettes will have the opportunity to:

Benefit from natural language processing. For example, you can create, plan and assign tasks by just typing using natural language.
Make connections between apps, using Zapier or similar inter-app connectivity services.
Adapt and implement multi-language environments with internationalization support.