$ show mulaRahul/keyviz
Keyviz is a free, open-source desktop application built with Tauri v2 (Rust backend) and React 19 (TypeScript frontend) that visualizes keyboard and mouse actions in real-time. It is designed for content creators, streamers, and educators who want to display keystrokes and mouse clicks during tutorials, presentations, or live streams. The application runs as a system tray utility with two windows: a transparent, always-on-top visualization window that renders animated keycaps and mouse indicators, and a separate settings window for customization. State is synchronized between windows via Tauri events using a custom Zustand middleware. The core input pipeline relies on a vendored fork of the `rdev` crate, which provides cross-platform global input listening (Windows low-level hooks, macOS CGEventTap, Linux X11 via XRecord). A background Rust thread captures keyboard and mouse events, detects a configurable toggle shortcut (default Shift+F10), and emits structured `input-event` payloads to the frontend. The frontend then displays animated key overlays with multiple keycap styles (minimal, laptop, lowprofile, pbt), mouse click rings, scroll indicators, and configurable animations (fade, zoom, float, slide). Users can filter which keys are shown, adjust alignment, margins, monitor selection, and customize colors, gradients, borders, and backgrounds. The settings UI provides a sidebar with tabs for General, Appearance, Keycap, Mouse, and About. It includes a theme toggle (light/dark), import/export of style configurations as JSON, and a Pro upsell. Persistence is handled via Tauri's plugin-store, with a custom storage adapter for Zustand. The project also includes a large set of reusable UI primitives built on Base UI, Radix UI, and React Aria Components, such as color pickers, gradient pickers, number scrubbers, shortcut recorders, and alignment selectors. While the codebase is well-architected and feature-rich, it carries some technical debt from the vendored rdev fork and a mix of UI libraries.
The LLM identified 5 files worth highlighting for reuse:
Implements a custom Zustand middleware (`tauriEventMiddleware`) that diffs state changes and emits Tauri events to synchronize state across multiple windows. The `listenForUpdates` function applies partial updates on receiver windows. This pattern is reusable for any multi-window Tauri application requiring real-time state synchronization without a central store.
Exports a `components` map keyed by keycap style name (minimal, laptop, lowprofile, pbt) that selects the appropriate rendering component based on Zustand state. This registry pattern decouples style selection from rendering logic and can be extracted to support pluggable visual themes in any application.
A full-featured color picker component with HSL sliders, hex/rgb/hsl input fields, an eye dropper button, and format switching. Built on React Aria Components for accessibility. It is self-contained, well-structured, and can be reused in any React project requiring color selection.
A gradient picker that allows users to define linear gradients with multiple color stops, angle control, and preview. It uses a canvas for rendering and supports adding/removing stops. While it has a note about comma-split parsing limitations, the core pattern is reusable for any application needing gradient customization.
Provides a comprehensive mapping from raw key codes to display-friendly labels, with platform-aware logic (macOS, Windows, Linux) and categorization (modifier, letter, digit, punctuation, etc.). The `switchPlatform` utility enables clean platform-specific value selection. This module is self-contained and can be reused in any application that needs to display human-readable key names from low-level input events.