feat(editor): integrate Key23 authentic 3D keycaps customizer & keyboard timeline track by emirhangungormez · Pull Request #2406 · CapSoftware/Cap

emirhangungormez · 2026-10-01T13:31:46Z

feat(editor): integrate Key23 keycap design system & keyboard timeline track

Motivation

I use Cap daily for screen recordings. The current keyboard shortcut display shows plain text in a rounded box — functional but visually flat. This PR integrates Key23, an open-source keycap design system I maintain, to offer themed keycap styles in the editor.

What this PR does

Frontend (SolidJS/TypeScript):

Adds a Keyboard tab in the editor sidebar for configuring keycap appearance
Adds 5 keycap styles (minimal, apple, pbt, retro, m0116) and 6 color themes
Adds a keyboard-overlay component that renders styled keycaps on the video canvas
Adds a KeyboardTrack in the timeline for managing keyboard shortcut segments
2D/3D toggle controls keycap depth rendering

Backend (Rust):

Extends KeyboardSettings in configuration.rs with style, theme, keycap_mode, show_chassis
Adds theme-aware color mapping in keyboard.rs so exported videos use matching colors

Known limitations & Future work

Preview vs Export parity: The editor preview renders SVG keycaps (with depth, gradients, etc.), while the Rust native video renderer uses rounded rectangles with matching theme colors. Visual theme/color is consistent, but full SVG rendering in the wgpu pipeline is left as a future iteration.
Keyboard track is additive: Extends the existing keyboard layer without modifying or removing core behavior.

Testing done

Verified keycap styles render correctly in editor preview
Verified theme colors apply in both preview and sidebar config
Verified 2D/3D toggle works across all render locations
Verified shortcut parsing handles modifier symbols (⌘T → ⌘ + T)
Verified Ctrl/Cmd-click multi-selection works on keyboard segments
Verified with biome check — 0 errors
Verified with cargo check on crates/project

Related Issue: #2409

Confidence Score: 5/5

The PR appears safe to merge within its documented preview/export limits.

Summary

The PR adds themed keyboard keycaps, sidebar controls, and matching export colors. The latest change makes classic boxes and floating chassis use the selected colors.

Keyboard shortcuts can use custom keycaps in the editor preview.
Exported keyboard shortcuts follow the selected keycap theme and shape.

_{Reviews (8) · Last reviewed commit: "fix(editor): apply custom colors to clas..." · Reviewed by Greptile}

…s and styles

…line track

…rtcut parsing, theme-aware export, prevent double render

richiemcilroy · 2026-10-07T02:15:39Z

Thanks for the contribution. Before review we need Greptile at 5/5 and green CI. The exported video needs to match the editor preview, and the open Greptile points (3D toggle not reaching the overlay, Ctrl/Cmd-click selection) need fixing. Please also drop the third-party branding from the UI and the unrelated CameraSelect/MicrophoneSelect changes, then request a Greptile re-review.

…nputs, fix multi-select & types

emirhangungormez · 2026-10-07T18:56:06Z

@richiemcilroy Thanks for the feedback! All requested items have been addressed in 8127140d7:

Third-party branding: Removed all "Key23" references across the UI/codebase; now labeled neutrally as "Keycap Preview" and "Keycap Design".
Unrelated changes: Reverted CameraSelect.tsx and MicrophoneSelect.tsx cleanly to upstream/main.
Multi-selection: Removed the redundant onClick handler on keyboard segments in KeyboardTrack.tsx that was overwriting the Ctrl/Cmd+click multi-selection / deselection logic.
3D toggle & chassis options: Wired keycapMode (3D toggle) and showChassis directly from project settings to keyboard-overlay.tsx and the renderer components.
Types & parity: Fixed SVG attribute typing issues and updated KeyboardSettings in tauri.ts (tsc passes with 0 errors). Export color and style bounds mapping aligned in keyboard.rs.

@greptileai review

greptile-apps · 2026-10-07T19:00:06Z

+        let (theme_bg_hex, theme_text_hex) = match settings.theme.as_str() {
+            "black" | "dark" => ("#1A1A1E", "#F5F5F7"),
+            "retro_beige" | "retro" => ("#DCD6C8", "#2A2A2A"),
+            "white" => ("#EFEFEF", "#1A1A1A"),
+            "ocean" => ("#2563EB", "#FFFFFF"),
+            "emerald" => ("#059669", "#FFFFFF"),
+            "amber" => ("#D97706", "#FFFFFF"),
+            "rose" => ("#E11D48", "#FFFFFF"),
+            "purple" => ("#7C3AED", "#FFFFFF"),
+            "cyberpunk" => ("#0D0D15", "#00FFA3"),
+            _ => (settings.background_color.as_str(), settings.color.as_str()),
+        };


Export ignores custom colors When a user chooses Text Color or Background Color in the editor, every selectable theme—including the default white theme—replaces those settings with fixed colors during export. Unless the segment has a color override, the exported keyboard display does not use the colors the user chose.

Prompt To Fix With AI

This is a comment left during a code review. Path: crates/rendering/src/layers/keyboard.rs Line: 374-385 Comment: **Export ignores custom colors** When a user chooses Text Color or Background Color in the editor, every selectable theme—including the default white theme—replaces those settings with fixed colors during export. Unless the segment has a color override, the exported keyboard display does not use the colors the user chose. --- For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

Fixed in 7d56741d9. The export layer now checks whether custom colors (settings.color / settings.background_color) have been set by the user and prioritizes them, only falling back to theme palette defaults when no custom colors are specified.

@greptileai review

The fix covers custom colors that differ from the legacy defaults, but it still cannot distinguish an explicitly selected default color from an untouched setting.

For example, with the white theme, selecting #FFFFFF in the Text Color picker leaves settings.color == "#FFFFFF", so fallback_text uses the theme’s #1A1A1A instead of the user-selected white. Likewise, explicitly selecting #000000 as the Background Color is replaced by #EFEFEF.

Please track whether each color was explicitly customized (or represent colors as optional overrides) and use the theme palette only when no override exists. This fix is therefore only partial.

… theme fallback

emirhangungormez · 2026-10-07T19:18:32Z

Fixed the export color fallback in 7d56741d9. Custom colors are now prioritized during export.

@greptileai review

…iews and overlay

emirhangungormez · 2026-10-07T19:30:06Z

Fixed in 25edda7de. Added customTextColor and customBgColor support to SingleKeycap and KeycapPreviewCluster. Both the live editor overlay and the sidebar preview now reflect non-default custom colors, matching the exported video.

@greptileai review

…avoid color collisions

emirhangungormez · 2026-10-07T19:37:04Z

Fixed in 302dd6a48. Integrated SolidJS createUniqueId() into SingleKeycap so every mounted keycap instance receives a unique SVG gradient ID, completely preventing ID collisions between segments with custom backgrounds.

@greptileai review

emirhangungormez · 2026-10-07T19:43:20Z

@richiemcilroy All feedback points have been addressed and Greptile review is now completely clear (0 comments / green). Ready for your review whenever you have a chance!

emirhangungormez · 2026-10-12T14:45:58Z

@richiemcilroy All feedback points have been addressed and Greptile review is now completely clear (0 comments / green). Ready for your review whenever you have a chance!

richiemcilroy · 2026-10-18T02:09:27Z

Thanks @emirhangungormez! Greptile is at 4/5 here. We only merge once Greptile reaches 5/5, so please address its findings in the summary above (or reply to them if you think one is wrong), then comment @greptileai review to re-run it. If the branch is behind main, please merge or rebase on main first. Once it is 5/5 we will run the full verification suite on it.

…lign preview palette

vercel · 2026-10-19T04:28:03Z

@emirhangungormez is attempting to deploy a commit to the Cap Software Inc Team on Vercel.

A member of the Team first needs to authorize it.

emirhangungormez · 2026-10-19T04:30:23Z

Fixed in 99d7148.

Ensured export renderer strictly respects user-selected text and background colors without overriding explicit choices.
Synchronized theme colors across the editor sidebar, canvas overlay, and export pipeline so previews match exported output 1:1.
Maintained unique SVG gradient IDs per keycap instance via createUniqueId() to prevent preview collisions.

@greptileai review

…review

emirhangungormez · 2026-10-19T04:38:07Z

Resolved in c26a6e7 and 99d7148.

Keycap previews (including individual keycap surfaces, classic box style, and the floating pod chassis) now dynamically reflect user-selected custom text and background colors (customTextColor and customBgColor), while maintaining 3D gradient depth via adjustHex. In addition, theme presets synchronize directly with the editor's color inputs, ensuring the sidebar preview, canvas overlay, and exported video display identical colors.

@greptileai review

emirhangungormez · 2026-10-19T05:01:39Z

@greptileai review

emirhangungormez · 2026-10-19T05:15:16Z

All review feedback and potential edge cases have been resolved (Greptile confidence 5/5). The PR is clean and ready for final maintainer review and merge! 🚀@richiemcilroy

emirhangungormez added 2 commits October 1, 2026 01:07

feat(editor): enhance keyboard overlay with Key23 authentic 3D keycap…

f9158b7

…s and styles

feat(editor): integrate Key23 3D keycaps customizer and keyboard time…

61dd3da

…line track

greptile-apps Bot reviewed Oct 1, 2026

View reviewed changes

fix: address Greptile review — kebab-case filenames, typed props, sho…

6bf38d0

…rtcut parsing, theme-aware export, prevent double render

emirhangungormez mentioned this pull request Oct 1, 2026

feat: themed keycap styles for keyboard shortcut display #2409

Open

fix(editor): address review feedback — drop branding, revert select i…

8127140

…nputs, fix multi-select & types

greptile-apps Bot reviewed Oct 7, 2026

View reviewed changes

fix(rendering): respect custom user colors in export while preserving…

7d56741

… theme fallback

greptile-apps Bot reviewed Oct 7, 2026

View reviewed changes

Comment thread crates/rendering/src/layers/keyboard.rs Outdated

fix(editor): support custom text and background colors in keycap prev…

25edda7

…iews and overlay

greptile-apps Bot reviewed Oct 7, 2026

View reviewed changes

Comment thread apps/desktop/src/routes/editor/keycap-renderer.tsx Outdated

fix(editor): generate unique SVG gradient IDs per keycap instance to …

302dd6a

…avoid color collisions

fix(rendering,editor): respect user-chosen colors during export and a…

99d7148

…lign preview palette

fix(editor): apply custom colors to classic box keycaps and chassis p…

c26a6e7

…review

Conversation

emirhangungormez commented Oct 1, 2026 • edited by greptile-apps Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

feat(editor): integrate Key23 keycap design system & keyboard timeline track

Motivation

What this PR does

Known limitations & Future work

Testing done

Confidence Score: 5/5

Summary

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

richiemcilroy commented Oct 7, 2026

Uh oh!

emirhangungormez commented Oct 7, 2026

Uh oh!

greptile-apps Bot Oct 7, 2026

Choose a reason for hiding this comment

Uh oh!

emirhangungormez Oct 7, 2026

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Oct 7, 2026

Choose a reason for hiding this comment

Uh oh!

emirhangungormez commented Oct 7, 2026

Uh oh!

Uh oh!

emirhangungormez commented Oct 7, 2026

Uh oh!

Uh oh!

emirhangungormez commented Oct 7, 2026

Uh oh!

emirhangungormez commented Oct 7, 2026

Uh oh!

emirhangungormez commented Oct 12, 2026

Uh oh!

richiemcilroy commented Oct 18, 2026

Uh oh!

vercel Bot commented Oct 19, 2026

Uh oh!

emirhangungormez commented Oct 19, 2026

Uh oh!

emirhangungormez commented Oct 19, 2026

Uh oh!

emirhangungormez commented Oct 19, 2026

Uh oh!

emirhangungormez commented Oct 19, 2026

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

emirhangungormez commented Oct 1, 2026 •

edited by greptile-apps Bot

Loading