Skip to main content
The command palette is your fastest way to navigate TryDevUtils. It provides fuzzy search across all utilities, letting you jump to any tool in seconds. Command palette interface showing search results

​
Opening the command palette

You can open the command palette in multiple ways:
1

Keyboard shortcut

Press ⌘K (macOS) or Ctrl+K (Windows/Linux) from anywhere in the app.
2

Slash shortcut

Press / from anywhere in the app (similar to Vim or Spotlight search).
3

Click search button

Click the “Search” button in the header (visible on larger screens).
4

Type on homepage

When on the homepage, just start typing any letter (a-z) to automatically open the command palette with that character.
The automatic typing detection on the homepage only works with letters (a-z, A-Z) and only when you’re not already typing in an input field.

​
Searching for utilities

The command palette uses fuzzy search to find utilities across multiple fields:
  • Utility name - “JSON Toolbox”, “Base64 Converter”, etc.
  • Description - “Format, validate, diff, schema, convert & query”
  • Utility ID - “json”, “base64”, “uuid”, etc.
Search is case-insensitive and matches partial strings, making it easy to find what you need with just a few keystrokes.

​
Search examples

Matches:
- JSON Toolbox (name contains "json")
Once the command palette is open, navigate through results using your keyboard:
​
↑ / ↓ (Arrow keys)
navigation
Move selection up or down through the filtered results.
​
Enter
action
Navigate to the selected utility.
​
Esc
action
Close the command palette without navigating.
​
Mouse hover
action
Hovering over an item automatically selects it and prefetches the utility for faster loading.

​
Performance optimizations

The command palette includes several performance optimizations:

​
Lazy loading with prefetch

When you hover over a utility in the command palette, TryDevUtils automatically prefetches that utility’s code in the background. This ensures instant loading when you select it. 
// From CommandPalette.tsx:133-136
onMouseEnter={() => {
  setSelectedIndex(index);
  prefetchUtil(util.id);  // Prefetch on hover
}}

​
Smart state management

The command palette resets its state when opened to ensure a clean search experience:
  • Search query is cleared
  • Selection index resets to 0
  • Input automatically receives focus

​
Scroll into view

The selected item automatically scrolls into view as you navigate with arrow keys, ensuring you always see the current selection.

​
Utility information display

Each utility in the command palette shows:
​
Icon
visual
A color-coded icon representing the utility’s category and function.
​
Name
text
The full name of the utility (e.g., “JSON Toolbox”, “Base64 Converter”).
​
Description
text
A brief description of what the utility does.
​
Utility ID
badge
The short ID shown in a badge (visible on larger screens), useful for direct URL navigation.

​
Keyboard shortcuts reference

At the bottom of the command palette, you’ll find a quick reference of available keyboard shortcuts:
  • ↑↓ - Navigate through results
  • ↵ (Enter) - Select the highlighted utility
  • esc - Close the palette

​
Platform-specific behavior

​
Web version

The command palette displays the ⌘K shortcut hint in the header’s search button.

​
Desktop version

The desktop app shows the appropriate modifier key (⌘K on macOS, Ctrl+K on Windows/Linux) and includes an additional ⌘F / Ctrl+F shortcut to focus the sidebar filter.

​
Extension version

In the Chrome extension, the command palette includes the ⌘K hint in the integrated search bar at the top of the utilities view.

​
Implementation details

The command palette is built with the following components:
  • Dialog component - Accessible modal dialog from shadcn/ui
  • Custom event handling - Keyboard navigation with arrow keys and Enter
  • Real-time filtering - Updates results as you type
  • Auto-focus input - Ensures immediate typing when opened
The command palette is implemented in /src/components/CommandPalette.tsx and uses React hooks (useCommandPalette) for global state management.

​
Tips and tricks

You don’t need to type the full utility name. Just type a few characters that match what you’re looking for:
  • “jwt” → JWT Decoder/Encoder
  • “sql” → SQL Formatter
  • “diff” → Text Diff, JSON Toolbox (which has diff functionality)
The command palette stays keyboard-focused, so you can quickly search, select with Enter, and start working in the utility without touching your mouse.

​
Source code reference

The command palette implementation can be found in:
  • Main component: /src/components/CommandPalette.tsx:20-176
  • Hook for global state: /src/components/CommandPalette.tsx:179-235
  • Keyboard shortcuts: /src/components/KeyboardShortcuts.tsx

Build docs developers (and LLMs) love

Get started for freeTalk to us