Skip to main content

Command Palettes

I have been writing online for over two decades, using various platforms on the web and software on Mac/PC.

Introduction to Command Palettes

My discovery of command palettes was fairly straight forward when my preferred note-taking app, Obsidian, gave a prompt to hit CMD+P to bring up a list of commands. I didn't think anything of it when I first saw it. My first thought was it saved me some time from going through the menu bar to find the right tool, and saved me from having to remember the different key combinations to bring up the right action.

It wasn't until I started exploring different apps that I realized how ubiquitous command palettes were becoming. They were popping up in other note-taking apps (Notion, Sublime), communication apps (Discord, Slack), and others. When I discovered it was in Facebook Messenger's app on iOS, that's when I knew it was moving beyond specialized software and going more mainstream.

What I experienced was the Baader–Meinhof phenomenon, it turns out, as command palettes have been around longer than I thought.

What are they?

The word palette is the French word for the wooden slab that painters held while painting. They use a palette knife to mix the paint on it, and have a variety of paints at the top arranged in an order of their choosing (lightest to darkest or complementary colours beside each other). In the digital age, the term is used to describe the toolbar full of commands where there were different options. For example, a mini-window for picking colours, or brush types/sizes, etc. They were generally visible for quick access or hidden and only revealed through the menu bar.

Command palettes are similar to the painting palette: they offer a variety of commands at the fingertips of the user without having to browse through a menubar or remember key commands. A quick command to open up the palette (a / being the more common one) and then the user can either keep typing to narrow the search or use the arrow keys to the correct selection.

Matthew Guay wrote a pretty extensive history of how command palettes evolved from text editors to their current iterations. It's wealth worth the read if you are interested in learning more on the development path of this technology.
The History of Command Palettes: How Typing Commands Became The Norm Again

Examples

The best way to describe command palettes is by showing some examples of them through the different software. This is not meant to be a complete nor extensive list, as the examples grow by the day and it will be impossible to keep it updated. Below are some examples from the software I am most familiar with, but the first one is an image of how command palettes were started in text applications.

Web Development Resources

Command palette for Sublime text editor

Command palette for Sublime text editor

Sublime Text Editor

Sublime is a text editor, generally used by code developers to keep their projects organized. It can be as simple or as complicated as you need it to be with a lot of flexibility in how it is setup and used.

The command palette originally started as a search bar for documents by name, and then quickly expanding to be the command palette that is used today. The list of commands is based on the most recent and popular used ones, but the list can also be edited to be a set list of commands.

Wordpress

Wordpress is software to create and host a website, blog, store, and so on. It is one of the most popular platforms for people to use for their websites around the world, and has been for several years.

One of their latest software releases, introduced the concept of blocks. The blocks are how the post is laid out or the page is built. Each block consists of different elements that are edited separately. The most popular block is going to be Text, but other examples would include images, YouTube videos, photo galleries, etc. The number of block types is growing with each software update.

With the release of their latest version of their editor (for pages and blog posts) called Gutenberg, they also added a command palette. It is very easy to use. Hit the / and either select one of the options or keep typing until you find the option you would like. After each block creation, the algorithm will help determine which blocks will populate for you, but I believe Text may always be present.

Wordpress Screenshot

Command palette for Wordpress

Command palette for Wordpress

Scroll to Continue
Command palette changing after a search

Command palette changing after a search

Facebook Messenger

Earlier in 2022, Facebook announced the introduction of shortcuts to their Messenger app on iOS. Part of this feature is the integration of an abbreviated command palette, which is handy when typing on your iPhone. Hitting a / in the Messenger chat field, brings up the option to send a message in silent mode, attach a sticker, send a GIF, a shrug, table flip, and change the theme. Pretty basic but the sticker and GIF options will be the most useful for people to use.

Facebook Messenger

Command Palette from Facebook Messenger on iOS

Command Palette from Facebook Messenger on iOS

Slite

Slite is a newer web platform for organizations to share work, documents, internal discussions, and more. It's very similar to Notion and could be considered an alternative for Basecamp. It also has mobile and desktop apps available.

One of the big features of Slite is the extensive command palette that is available when creating documents or adding to a discussion. Again, it is activated with a /, and brings up a large window of options. Keep typing and the options narrow down. An option can be selected by hitting Return or using the arrow keys to select the correct one.

The nice thing about Slite's command palette is how static it is. The options never change, and the order remains the same every time the window is shown. It is worth signing up for a free account just to explore the document creation process, because I am sure some other applications will copy their procedure for document creation.

Slite Screenshot

Command Palette from Slite

Command Palette from Slite

Other Examples

As mentioned previously, there are countless examples for command palettes out on the internet. I shared the ones that will be the most common and the more interesting ones to use. The others below are for more select users that may be more valuable for the tech savvy individuals.

Hopefully this has been of interest to you, because I believe you will see command palettes showing up every place you enter text on a computer, whether it is a web application, your phone, or a desktop application.

Obsidian

Command Palette in Obsidian

Command Palette in Obsidian

Notion

Command Palette from Notion

Command Palette from Notion

Discord

Command Palette from Discord

Command Palette from Discord

Slack

Command Palette from Slack

Command Palette from Slack

How to Build a Remarkable Command Palette

  • How to build a remarkable command palette
    Command palettes allow users to move faster and become infinitely more proficient. Superhuman's Tim Boucher reveals how to build a remarkable command palette for your product.

iOS Development

This content is accurate and true to the best of the author’s knowledge and is not meant to substitute for formal and individualized advice from a qualified professional.

© 2022 James McCullough

Related Articles