VimLegends & TmuxLegends: learn Vim and tmux by playing

TL;DR

I built two free, open-source browser games to learn Vim and tmux by actually playing:

🟣 VimLegends — learn Vim inside a real editor. Play · Code
🟢 TmuxLegends — learn tmux one prefix key at a time. Play · Code

No install, no mandatory account, and it works 100% offline. Every level is scored VimGolf-style: the fewest keystrokes possible to earn ⭐⭐⭐.

The problem

Most Vim-learning games are maze-based: you move a character with hjkl around a grid. It’s fun, but the muscle memory you build doesn’t really transfer to a real editor — the moment you open an actual file, you’re lost.

I wanted the opposite: a game where every keystroke is exactly the one you’d use in Vim or tmux day to day. What you learn while playing should replay identically in your terminal, with no mental translation.

🟣 VimLegends — a real editor, not a maze

VimLegends’ core difference: every challenge runs inside a genuine CodeMirror 6 editor with the real Vim keymap (@replit/codemirror-vim). Skills transfer 1:1 to Vim/Neovim, because they are literally the same keys.

The content spans 6 worlds, 77 levels (71 challenges + 6 bosses), from bare survival to advanced automation:

Survive — modes (i a o Esc), motion hjkl, first edits x dd u
Comfortable — words w b e, line ends 0 $, jumps gg G, f, cw
Faster — operators × motions × text objects (ciw ci( ci" daw cit), visual mode
Seeker — search / ? n *, f t ;, %, substitution :s :%s//g, marks
Superpowers — registers "a "0 "_, macros q @ @@, the famous ., gn, Ctrl-a
Legend — :g :v, :sort, :normal, gU g~, J gJ, block-insert, gqip

A few mechanics that make it feel less like homework:

👾 Boss fights — multi-stage battles with an HP bar that’s actually a keystroke budget: spend too many keys and the boss repels you (but losing only costs a retry).
🧠 Vim-state goals — a challenge can verify your registers, marks, modes and macros, not just the buffer’s final text.
🕹️ Motion Rush — a whack-a-mole arcade mode to drill hjkl speed in combos.
📱 Quiz mode — a touch-first, tap-to-answer trainer that covers the whole curriculum without a keyboard (great on mobile).
📄 Downloadable cheatsheet — every command it teaches, exported as Markdown or printable HTML (→ Save as PDF).

🟢 TmuxLegends — the grammar of the prefix

TmuxLegends is VimLegends’ little sibling, for tmux. You learn tmux the way you actually use it: press the prefix (Ctrl-b), then a key — split panes, flip between windows, detach a session, grep the scrollback in copy mode.

Here an interesting technical choice came up. For Vim, there’s a real Vim you can embed in the browser (CodeMirror). For tmux, there isn’t. So I wrote a pure-TypeScript tmux simulator: a state machine over the sessions > windows > panes tree, with tmux’s modal grammar (normal > prefix > …), copy mode, and the : command prompt.

Because that simulator is pure data with no DOM, the same reducer drives both the play surface and the headless tests. The upshot: every level’s par is machine-proven solvable, not guessed by hand.

The curriculum: 6 worlds, 40 levels (34 challenges + 6 bosses) — pane splitting, windows, sessions & copy mode, layout rearranging, the : command line, and layout scripting to finish. You get the same mechanics as VimLegends: boss fights, Prefix Rush (a 30-second reflex drill), quiz mode, and a tmux cheatsheet you can export as a PDF (generated offline, with zero dependencies).

🎨 The shared foundation

Both games share the same template and the same bespoke design system, “Nightglass” (only the accent hue changes: Vim purple / tmux green). The stack: React 18 + strict TypeScript + Vite + Zustand + Tailwind v4 + framer-motion, self-hosted fonts, Web-Audio sound effects.

🤖 A customizable 3D Hero — a cel-shaded robot (three.js / react-three-fiber) you restyle (body, visor, accessory, aura) that idles, punches while you type, and celebrates your wins. Weak devices (reduced-motion, software GPU…) fall back automatically to a “lite” tier in procedural SVG — a complete experience, not a downgrade.
💾 100% offline — progress lives in localStorage with versioned migrations; fonts and models are self-hosted. An optional backend adds Google/GitHub sign-in and verified score links — but you can ignore all of it and lose nothing.

Pars are proven, not guessed

This is the engineering detail I’m proudest of. In both games, every challenge’s par is proven reachable by a reference solution driven through the real engine — the same Vim keymap / the same tmux reducer the UI uses. Adding a level requires adding its solution to the test suite, or the build breaks.

In practice, it’s impossible to ship a level whose keystroke target is unbeatable: the machine solves it before you do. All told, ~105 tests on the VimLegends side and ~80 on TmuxLegends lock the content down.

Try it

It’s playable in 30 seconds, nothing to install:

🟣 VimLegends — vimlegends.com · press x once and you’ve cleared level 1 at par.
🟢 TmuxLegends — tmuxlegends.com · Ctrl-b then %, your first split.

Both projects are free and open source. If you like the idea, a ⭐ on GitHub is always appreciated — and feedback, bug reports and level ideas are very welcome:

Happy golfing ⌨️