The true cost of building an in-house command palette from scratch

Team Magny

• 4 min read
The true cost of building an in-house command palette from scratch

The command palette is a great piece of in-app navigation and a universal search tool to help users understand and onboard faster.

Since the last couple of years, command palettes have risen in popularity, and we have seen many developers working command-palette focused.

This doesn't mean that command palettes solve every problem, but it has proven to be a very viable timesaver, especially for complex B2B tools.

In this post, we are going to explain how much (in terms of time and money) it would cost for a command palette to build from the ground up. Before reading on, we suggest that you read pros and cons of command palette build-vs-buy decision.

We'll break down each component of a command palette first, namely the search bar and the backend. We included the server part since it provides a good understanding of:

  • Keyword breakdown and analysis
  • Bounced keywords analysis
  • Feedback module
  • Ability to modify commands on the fly, without the development team's intervention
  • Logging and audits

Let's start with the search bar first.

Command palette search bar features and cost breakdown

The command palette search bar is the most important and user-facing part of a command palette service. It takes input from the user and shows commands according to the input keyword.

The main components of a search bar are as follows:

  • User interface
  • Parser and styler
  • API
  • Autocompletion and fuzziness capability

To give an example of how a search bar component can grow in complexity, the development of Cmdk started in 2019. The library was updated in 2022 and rewritten again in 2022. Cmk is an open source, headless tool that helps you build a command palette.

This library is a mere couple of thousands of lines long, but lacks a user interface. Other notable command palette libraries include:

  • 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.

Time to build: 400 hours

Command palette server features and cost breakdown

When it comes to the server, we were reluctant to divide this part into two (e.g frontend and backend) as they are tightly integrated together.

In this topic, our main aim is to build a server with the following features:

Projects module

This is where the admin can add different command palettes (e.g test, staging or live), and assign different features to each and every command palette under those categories.

In this section, each search bar would need to be stylized. There are two methods to get this done.

  1. Use a default style (e.g fonts, colors, search bar location and behavior) but don't build the option to make it modifiable from the dashboard.
  2. Add categories and commands from a static list and let the search bar load them every time it is invoked.

Additionally, if you use a drag and drop UI to move categories and commands around and dynamically modify the search bar, that will be an additional cost on top.

Time to build: 800 hours

Analytics module

This is where you see the total search bar opens, search keywords as a table and bounced keywords.

For the sake of simplicity, we'll only show the last 50 keywords for search and bounce sections.

Time to build: 240 hours

Logs

This is where you can debug your commands and search bar. Those would be only from the JS error logs thrown.

Time to build: 80 hours

Feedback

This is where you show a feedback pane to the user when he cannot find a command in the search bar. The system should have the ability to show all past feedback. Alternatively, feedback can also be sent as an email.

Time to build: 160 hours

Server and maintenance costs

Those are minimal and won't be taken into consideration, however it should be handled as another critical resource within the company.

Document indexer

A document indexer will crawl a documentation site, index it, and make it available for the command palette. It requires a link to the document to be taken as input, then the crawler will index the site. We'll omit the periodical crawling requirement as we want a barebones system. There are also several search libraries that will carry the heavy work.

Time to build: 200 hours

Metadata indexer

A command palette should be able to get contextual metadata (e.g list of companies or list of users in a CRM) and make this data searchable. This can be done by exporting this data from the SaaS app and then importing to the command palette.

Time to build: 200 hours

Total cost

The total cost of building a command palette is as follows:

  • Search bar building and optimization costs: 400 hours
  • Server implementation costs: 1680 hours

That would make the total development duration 2080 hours, or 60 weeks if we assume a work-week is 35 hours. If there are 4 developers in the project, that boils down to 15 weeks, or slightly less than 4 months. This doesn't include the tests and Q/A process.

Wrap up

In this blog post we tried to breakdown the costs of building a command palette from scratch. Chances are you can omit a few items (e.g logs) and add more items (e.g more customizations) and the result would change, albeit we believe not dramatically.

Magny makes it easy to start with a command palette service, so you do not bother with the development of a search bar. Contact us today to watch a guided demo.