duck vim Course
Learn duck-vim from scratch. 8 lessons that take you from zero to building production keyboard interfaces.
This course teaches you how to build keyboard-driven interfaces with duck-vim. Each lesson builds on the previous one, introduces one core concept, and includes runnable code.
Prerequisites: Basic TypeScript/JavaScript knowledge. Lessons 4+ assume familiarity with React.
Lessons
| # | Title | What you'll learn |
|---|---|---|
| 1 | Introduction | Why keyboard shortcuts matter, how duck-vim works at a high level |
| 2 | Your First Shortcut | Registry, KeyHandler, and registering your first binding |
| 3 | Understanding Key Binding Strings | Parsing, aliases, the Mod key, and validation |
| 4 | React Integration | KeyProvider, useKeyBind, and useKeyCommands |
| 5 | Multi-Key Sequences | Vim-style sequences like g+d, timeout, and prefix matching |
| 6 | Display Formatting | Rendering shortcuts in your UI with platform-aware labels |
| 7 | Key Recorder and Settings | Building a shortcut customization UI |
| 8 | Advanced Patterns | Scoped bindings, command palettes, conflict detection, and testing |
How to follow along
Each lesson includes complete, copy-pasteable code. You can either:
Read the lessons in order for a conceptual understanding. No setup required.
Setup
Create a new Vite project with React and TypeScript:
npm create vite@latest duck-vim-playground — --template react-tsnpm create vite@latest duck-vim-playground — --template react-tsNavigate into the project directory:
cd duck-vim-playgroundcd duck-vim-playgroundInstall duck-vim:
npm install @gentleduck/vim
npm install @gentleduck/vim
Start the dev server:
npm run devnpm run dev