Implementing a Command Palette and Task Timer (part 1)

• roundup

  2 31 9.6 Python

  Mirror of http://hg.code.sf.net/p/roundup/code -- used for CI. Please visit https://issues.roundup-tracker.org to find starter issues or log new issues.

  

I am a developer for the open source Roundup Issue Tracker. It has many use cases. One is to develop issue trackers like GitHub Issues, Bugzilla, or Request Tracker. I also develop a custom issue tracker for a help desk environment. This article describes the steps in adding a task-timing feature for that tracker.

• kbar

  9 4,609 5.9 TypeScript

  fast, portable, and extensible cmd+k interface for your site

There are many command palette implementations in JavaScript. Some are used with specific frameworks. For example, kbar is a React component and spotlight is a Laravel component. I wanted one that would work with Vanilla JavaScript. I identified two candidates:

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• Svelte

  632 76,402 9.9 JavaScript

  Cybernetically enhanced web apps

  

Ninja Keys uses Lit while command-pal uses Svelte. I don't have any experience with either, so.... Both of them can bind any command on the palette to a hotkey thanks to hotkeys.js. Both are MIT licensed. Command-pal is larger in size, but it also bundles all the libraries it needs. It looks like Ninja Keys loads libraries/modules on demand from CDNs on the internet. Being able to use the library without internet access is a nice feature.

• spotlight

  1 803 10.0 PHP

  Discontinued Livewire component that brings Spotlight/Alfred-like functionality to your Laravel application. [Moved to: https://github.com/wire-elements/spotlight] (by livewire-ui)

  

There are many command palette implementations in JavaScript. Some are used with specific frameworks. For example, kbar is a React component and spotlight is a Laravel component. I wanted one that would work with Vanilla JavaScript. I identified two candidates:

• command-pal

  2 58 0.0 HTML

  The hackable command palette for the web, inspired by Visual Studio Code.

command-pal - "The hackable command palette for the web, inspired by Visual Studio Code."

• ninja-keys

  6 1,565 0.0 TypeScript

  Keyboard shortcuts interface for your website. Working with static HTML, Vanilla JS, Vue, React, Svelte.

Ninja Keys - "Keyboard shortcut interface for your website that works with Vanilla JS, Vue, and React."

• lit

  141 17,535 9.4 TypeScript

  Lit is a simple library for building fast, lightweight web components.

  

Ninja Keys uses Lit while command-pal uses Svelte. I don't have any experience with either, so.... Both of them can bind any command on the palette to a hotkey thanks to hotkeys.js. Both are MIT licensed. Command-pal is larger in size, but it also bundles all the libraries it needs. It looks like Ninja Keys loads libraries/modules on demand from CDNs on the internet. Being able to use the library without internet access is a nice feature.

• WorkOS

  workos.com sponsored

  The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  

• hotkeys-js

  4 6,455 7.8 JavaScript

  ➷ A robust Javascript library for capturing keyboard input. It has no dependencies.

Ninja Keys uses Lit while command-pal uses Svelte. I don't have any experience with either, so.... Both of them can bind any command on the palette to a hotkey thanks to hotkeys.js. Both are MIT licensed. Command-pal is larger in size, but it also bundles all the libraries it needs. It looks like Ninja Keys loads libraries/modules on demand from CDNs on the internet. Being able to use the library without internet access is a nice feature.

Suggest a related project