24 open source command palette libraries you shouldn't miss
Command palettes have been a great success for many companies including Atom, Figma, Jetbrains, Linear and Slack.
Those companies have consistently received requests from customers to enable a command palette.
When they make a release with their command, their announcements have always been picked up, due to the fact that command palettes are great helpers for end users to discover the app more, help onboard and get trained with the latest features.
In this post, we discuss 24 command palettes and how you can make use of them if you would like to go without a SaaS solution like Magny.
While Magny provides off-the-shelf and ready-to-use command palette infra, we thought that this post provides additional value for those who want to benefit from a library directly.
React
Most of the libraries in this post are either built in React, or support React applications.
- Cmdk: A fast, unstyled command palette React component. This is an unstyled command menu, hence you would need to build your own style on top it (e.g using Tailwind CSS).
- Kbar: A fast, portable, and extensible cmd+k interface for your site. It has built-in animations and fully customizable components, and can handle tens of thousands of actions.
- Kmenu: An animated and accessible command menu. It comes with more than 20+ customization and color options.
- React command palette: An accessible JavaScript command palette. It has a different user interface compared to others in this list and resembles the one used in Sublime.
- Scoutbar: User-friendly, easy-to-use, scalable, and highly customizable component.
- React-cmd: A fast, accessible, and pretty command palette for React. There is also a great video showing how to implement react-cmd to your application.
- React super command: A sleek command palette modal for React apps. You can also see a nice demo here.
Vue
- Vue command palette: A fast command palette for Vue. This is also unstyled, hence you need to add your own design on top of the Vue command palette.
Svelte
- Svelte command palette: Dead simple command palette for Svelte. It also provides an API and a way to enable fuzzy searches, eliminating typos conveniently.
SolidJS
- Solid command palette: UI Library for Command Palette in SolidJS webapps. You can control application state, conditionally enable actions and do nested actions.
GTK+
- Plotinus: A searchable command palette in a GTK+ application. Note that this won't work on web apps but just apps that run GTK+ (namely Linux, Windows and MacOS).
Flutter
- Flutter command palette: A Flutter widget that allows you to bring up a command palette. This library has support for keyboardless apps as well.
General
Those do not fall into one of the library-specific command palettes above.
- Ninja keys: Keyboard shortcuts interface for your website. Works with static HTML, Vanilla JS, Vue, React and Svelte. It has a polished, cute interface which doesn't require additional styling and has example integrations with many frameworks in their documents.
- Command pal: The hackable command palette for the web, inspired by Visual Studio Code. Inspired from VSCode, it a lot resembles the VSCode command palette interface. Developers can choose from two themes or develop their own, and benefit from fuse.js library for fuzzy search.
There are also several plugins and extension provided by applications, or can be used specifically with 3rd party tools.
Plugins / extensions
- TW-commandpalette: A command palette for TiddlyWiki (demo)
- Craft CMS command palette: Command palette for Craft CMS.
- Sharepoint command palette: A command palette for Sharepoint portal servers used to faster access to frequent SharePoint actions.
- Godot command palette: A quick file finder and command palette for the Godot game engine.
- WP command palette: A command palette that brings the power of text editor command palette to the WordPress administrator.
- Adobe Illustrator command palette, an open source command palette for Adobe AI.
- Electron command palette, a command palette that can be used in Electron apps. Still in early stage and may have a few features lacking.
- Framer motion command palette, inspired by Linear, Raycast & paco.sh
- Ghidra command palette, a command palette for Ghidra (a software reverse engineering (SRE) suite of tools), meant to give access to hidden or difficult-to-find commands
- Notion palette: A command tool that supercharges your workspace with the command palette within Notion. It has a Chrome extension in which you can add any customizable commands from within Notion.
If you use Chrome (or Chrome based browsers like Brave), there is also a plugin called Commander which adds a command palette extension, a nifty way to control your entire browser without having to move your hands off the keyboard.
Note that when you use a command palette library, you are on your own. If you are product manager without technical skills, you need a development team to implement / install for you. Then, there will be several configurations that requires to be updated each time a command is added.
In the case of Magny, a SaaS based command palette service, the updates are fetched automatically from a database where you can update any time. This eliminates the requirement to depend on the dev team.
Whatever your choice is, a command palette helps users to train, onboard easily and lets them effectively get more benefit from your apps.
Until next time,
Magny Team