Back to features

Command Palette

A keyboard-accessible command palette for Phoenix applications that enables quick navigation and actions via Cmd+K/Ctrl+K shortcuts. Built as a LiveView component with customizable search functionality and extensible result formatting.

Key Benefits

  • Instant Navigation: Jump to any part of your application without clicking through menus
  • Keyboard-First UX: Fully accessible via hotkeys with no mouse interaction required
  • Extensible Search: Protocol-based result formatting allows custom search contexts and data types
  • Zero Configuration: Drop-in LiveView component that mounts directly in your layout

Implementation Details The feature generates a complete command palette system with LiveView integration, hotkey bindings via hotkeys.js, and a protocol-based architecture for search results. The CommandPalette module handles search logic across configurable contexts (app, admin), while CommandPalette.Format protocol enables custom formatting for different data types. Results are wrapped in a Result struct for consistent iteration and display.

Usage Example

# Mount in your layout
<%= live_render(
  @conn,
  YourAppWeb.Live.CommandPaletteLive,
  id: "command-palette",
  session: %{"context" => "app"}
) %>

# Implement custom formatting
defimpl YourAppWeb.CommandPalette.Format, for: User do
  def header(_), do: "Users"
  def label(user), do: user.email
  def link(user, _context), do: ~p"/users/#{user}"
end

Configuration Add contexts to the @possible_contexts list in CommandPalette module to enable different search scopes. The palette automatically adapts to your authentication system and admin interface if present.