Why we started the Magny command palette: going above and beyond

There are tens of thousands of SaaS apps out there. Many have been developed from scratch to help product managers to build better products, gain customers and retain them. They provide a great casual experience within the application.
On average, a SaaS platform benefits from 80 different services.

This gives platforms an opportunity to focus on the app itself, rather than trying to create everything from scratch. This eliminates the extra effort and funds for building the support services. We know those services - chatbots, help services, documentation, forums, new announcement widgets and more.

Since 2021, we have seen many different command palette platforms. We have tried most of them in order to implement them in our web pages but without luck. They were either cumbersome to implement or lacked features that we dreamt of having, e.g integration with external resources like documentation.

As Magny team, we have also sat down and calculated the need to implement a command palette popup. It would take us several weeks to make something usable - even with a ready-to-bake command palette library.

The main problem was that, while it looked easy to build something usable, there were hidden hurdles.

Moreover, once you start to embed a command palette in your app, you need to update it frequently. Added team management? Edit the file. Implemented 3rd party integrations? Edit the file. Add SSO? Edit the file. This list goes on and on.

The Magny history

Product management needs a focus and tedious tasks are all over the place, killing our productivity. Command palettes are no exception for this. For technical SaaS services, the command palette is rising but lacking a great user interface / service to manage every command.

While they are user friendly than traditional command line interfaces and offer ergonomic advantages and there are lots of great examples out there including Github, Linear and VSCode, we have sensed the urgency to come up with a service.

This is how Magny was born.

We first sat down and checked all the command palette interfaces out there. The ones we looked at all were done inhouse, and had relatively had great, bonded interface that looked like it is a part of the application.

Then we have checked React, Vue and vanilla JS based command palette libraries. We have found great implementations eg. Kbar, Kmenu and Cmdk. We have even used one of them as a basis (cmdk) so that we don't really have to reinvent the wheel. Cmdk was mature, had a userbase and lots of Github activity - so we settled down on using this library.

In about 4 months we have built our SaaS interface running on the shoulders of GraphQL, Nodejs, Vue and a few additional help tools. Naturally our Magny command palette was also implemented within Magny as well.

It has been a great learning curve for us, as command palette as a service (CPaaS) is a relatively new domain, and we expect to see more and more players and innovations in this space.

What does Magny command palette provide?

Magny has 2 main components:

1. The Magny widget, or popup, which is ready to run when the app loads. The search is performed within this widget.
2. The Magny dashboard where the admin users enter commands and corresponding actions.

While it is possible to open Magny via the shortcut cmd/ctrl-K (the magical combo for most of the command palettes), it is highly recommended to use a visual search (launcher) for end users to start searching for anything and discover the widget.

This is a copy-paste from the initial requirements document that has barely changed since it is written. It gives a list of what product managers can expect from Magny:

• Make searches via commands and perform actions.
• Ability to provide recommendations based on the URL (page) of the application.
• Perform a fuzzy search to eliminate any mistyping.
• Break down search results using tab bars.
• Customizable appearance of the user interface to match the brand.

This list is still valid. We'll see more and more features coming to Magny as time evolves.

We have also decided to provide Magny for free, without user and project limitations. Coming from an open-source background, we believe that Magny should reach potentially hundreds of SaaS apps, and pricing should not be a limiting factor.

How will you earn money? you would ask. We'll provide a paid version of Magny for companies in need to get constant support, chat, API services and additional analytics (e.g deadends and search terms). A small company (arguably) don't need those details.

What are the future plans?

We had 1-1 conversations with more than 30 product managers and developers before starting the platform. While some of them were keen to see a working prototype, others argued around the need of such a platform, pointing out the ease of implementation of a simple command palette.

Those who were interested with the idea had come up with several roadmap items - of which some of them are mentioned below:

• Advanced analytics: Once we launch Magny, each command run needs to be logged. In v2 there will be an integration with 3rd party analytics provider so you can directly send data to Amplitude, Mixpanel and other services. This was an idea we received, and didn't hesitate to add in our roadmap.
• Deadends: When the user presses ESC or closes the widget, the typed command needs to be logged. This way you will be able to understand which commands are typed, but never reach an action.
• Releases: It enables a "staged rollout" of changes that you make to Magny commands and configuration. This will help make sure that a Magny is always functional and working well within your app.
• Availability condition: This will enable which commands are available to which types of users, and under what conditions.

As you can see, there are several great (but absolutely needed) features coming along the way.

There is also another that will benefit from AI, but it is too early to give a hint about what is coming (another way of saying that we are not "sure" :-).

Until next time, stay safe.