Beyond Mouse Clicks: Crafting Keyboard UX for React SaaS Web Platforms
Session Description
We all grew up with keyboard shortcuts—Ctrl+C, Ctrl+V, and Alt+Tab were second nature. But web apps forgot this muscle memory. Now, shortcuts are making a comeback, and it's time to bring desktop-like efficiency back to the web.
At Zivy, we built a framework for conflict-free, cross-platform keyboard shortcuts. I'll be presenting this library, currently part of our private codebase but soon to be open-sourced.
What I'll Cover:
Cross-Platform Challenges - Why Mac vs Windows handling is brutal
Scalable Architecture - Single keys, modifier combos, and vim-style sequences (G+I navigation)
Smart Context Detection - Preventing shortcuts when users are typing - single-key shortcuts are great but tricky because they can't trigger while user is typing
Real-World Gotchas - Shortcuts live with your component, that means feature disabled, shorcut automatically removed
One shortcut, multiple use cases - Want to implement closing several overlay menus, using the same Esc key without complexity, we've got you covered
There are several open-source JS libraries (react-keyboard-hook, mousetrap js, KeyboardJS) which help in integrating keyboard shortcuts but none of them are giving all the above-mentioned features out-of-the-box.
Key Takeaways
Ready-to-use React hooks - Copy-paste patterns for immediate implementation
Cross-platform compatibility - Handle Mac Cmd vs Windows Ctrl seamlessly
Sequential shortcuts - Build vim-style multi-key combinations (G+I navigation)
Smart conflict prevention - Stop shortcuts from firing when users are typing
Performance best practices - Efficient event management without memory leaks
References
Session Categories
Which track are you applying for?
Speakers
Anshul Sahni
Reviews
It's a weak OSS story. This feels more like a JS talk, than a FOSS talk. Can accommodate if we have space. Waitlist #1?
Can do this as a short lightning talk instead.
Can do this as a short lightning talk instead.
Agreed with reviewer #1 that this looks more like a JS talk. I don't know if there is anything novel being done here and we can't comment on that without the library being OSS which it isn't for now. +1 waitlist
While the topic is interesting, it has a weak FOSS story and leans more towards a general JavaScript or web development talk. Additionally, since the library is not yet open-sourced, reviewers were hesitant to approve it without being able to evaluate its novelty and quality.
For future submissions, we recommend that you either reframe your talk to have a stronger FOSS-specific angle or submit it once the library is open-sourced and you have a clear contribution story to share.