VimLegends & TmuxLegends : apprendre Vim et tmux en jouant

TL;DR

J’ai développé deux jeux (applications web), gratuits et open source, pour apprendre Vim et tmux en jouant :

🟣 VimLegends — apprendre Vim dans un vrai éditeur. Jouer · Code
🟢 TmuxLegends — apprendre tmux à coups de préfixe. Jouer · Code

Pas d’installation, pas de compte obligatoire, 100 % hors-ligne. Chaque niveau est noté en fonction de son optimisation : le moins de frappes possible pour décrocher ⭐⭐⭐.

Le constat

La plupart des jeux pour apprendre Vim reposent sur des labyrinthes : on déplace un personnage avec hjkl dans une grille. C’est ludique, mais les automatismes acquis se transposent mal dans un éditeur réel — dès qu’on ouvre un vrai fichier, on est perdu. Quant à tmux, il n’existe pour ainsi dire aucun jeu pour l’apprendre.

Je voulais l’inverse : un jeu où chaque frappe est exactement celle que l’on utiliserait dans Vim ou tmux au quotidien. Ce qui s’apprend en jouant doit pouvoir être reproduit à l’identique dans son terminal, sans gymnastique mentale.

🟣 VimLegends — un vrai éditeur, pas un labyrinthe

La différence fondamentale de VimLegends : chaque défi se déroule dans un véritable éditeur CodeMirror 6, équipé du vrai keymap Vim (@replit/codemirror-vim). Les automatismes acquis en jouant sont directement réutilisables dans Vim/Neovim : ce sont exactement les mêmes touches.

Le contenu couvre 6 mondes, 77 niveaux (71 défis + 6 boss), des bases de survie jusqu’aux automatisations avancées :

Survive — les modes (i a o Esc), le déplacement hjkl, les premières éditions x dd u
Comfortable — les mots w b e, les extrémités 0 $, les sauts gg G, f, cw
Faster — opérateurs × mouvements × text objects (ciw ci( ci" daw cit), le mode visuel
Seeker — recherche / ? n *, f t ;, %, substitution :s :%s//g, marques
Superpowers — registres "a "0 "_, macros q @ @@, le fameux ., gn, Ctrl-a
Legend — :g :v, :sort, :normal, gU g~, J gJ, block-insert, gqip

Quelques mécaniques qui rendent l’apprentissage moins scolaire :

👾 Combats de boss — des affrontements en plusieurs étapes, avec une barre de vie qui est en réalité un budget de frappes : trop de touches et le boss vous repousse (mais une défaite ne coûte qu’une nouvelle tentative).
🧠 Objectifs sur l’état de Vim — un défi peut vérifier vos registres, marques, modes et macros, pas seulement le texte final du buffer.
🕹️ Motion Rush — un mode arcade façon « tape-taupe » pour travailler la vitesse des déplacements hjkl et enchaîner les combos.
📱 Mode quiz — un quiz tactile pour réviser tout le programme sans clavier (idéal sur mobile).
📄 Cheatsheet téléchargeable — toutes les commandes enseignées, exportables en Markdown ou en HTML imprimable (→ enregistrer en PDF).

🟢 TmuxLegends — la grammaire du préfixe

TmuxLegends est le petit frère de VimLegends, version tmux. On y apprend tmux comme on l’utilise vraiment : on tape le préfixe (Ctrl-b), puis une touche — découper des panes, passer d’une fenêtre à l’autre, détacher une session, rechercher dans le scrollback en copy-mode.

Un choix technique intéressant s’est imposé ici. Pour Vim, il existe un vrai Vim embarquable dans une application web (CodeMirror). Pour tmux, rien de tel. J’ai donc écrit un simulateur tmux en TypeScript pur : une machine à états sur l’arborescence sessions > windows > panes, avec la grammaire modale de tmux (normal > prefix > …), le copy-mode et l’invite de commande :.

Ce simulateur ne manipule que des données, sans DOM : le même code pilote donc la surface de jeu et les tests automatisés. Résultat : l’objectif de frappes de chaque niveau est prouvé atteignable par la machine, et non estimé à la main.

Au programme : 6 mondes, 40 niveaux (34 défis + 6 boss) — découpage de panes, fenêtres, sessions & copy-mode, réorganisation de layouts, ligne de commande :, et pour finir le scripting de layouts. On y retrouve les mêmes mécaniques que dans VimLegends : combats de boss, Prefix Rush (un exercice de réflexes de 30 secondes), mode quiz, et une cheatsheet tmux exportable en PDF (générée hors-ligne, sans aucune dépendance).

🎨 Le socle commun

Les deux jeux partagent le même template et le même système de design maison, « Nightglass » (seule la teinte d’accent change : violet pour Vim, vert pour tmux). Côté stack : React 18 + TypeScript strict + Vite + Zustand + Tailwind v4 + framer-motion, polices auto-hébergées, effets sonores générés en Web-Audio.

🤖 Un Hero 3D personnalisable — un robot en cel-shading (three.js / react-three-fiber) que l’on personnalise (corps, visière, accessoire, aura), qui s’anime en continu, donne des coups de poing pendant que vous tapez et célèbre vos victoires. Les appareils modestes (reduced-motion, GPU logiciel…) basculent automatiquement sur une version « lite » en SVG procédural — une expérience complète, pas une version au rabais.
💾 100 % hors-ligne — la progression est stockée dans le localStorage avec des migrations versionnées ; polices et modèles 3D sont auto-hébergés. Un backend optionnel ajoute la connexion Google/GitHub et des liens de partage de score vérifiés — mais on peut très bien s’en passer sans rien perdre.

Les objectifs de frappes sont prouvés, pas devinés

C’est le détail d’ingénierie dont je suis le plus fier. Dans les deux jeux, le « par » de chaque défi — l’objectif de frappes à atteindre, comme au golf — est prouvé atteignable par une solution de référence exécutée dans le vrai moteur : le même keymap Vim, le même simulateur tmux que ceux de l’interface. Ajouter un niveau impose d’ajouter sa solution à la suite de tests, sans quoi le build échoue.

Concrètement, il est impossible de livrer un niveau dont l’objectif serait inatteignable : la machine le résout avant vous. Au total, une centaine de tests côté VimLegends et environ 80 côté TmuxLegends verrouillent le contenu.

Essayez-les

On peut jouer en moins de 30 secondes, sans rien installer :

🟣 VimLegends — vimlegends.com · appuyez une fois sur x et le niveau 1 est bouclé au par.
🟢 TmuxLegends — tmuxlegends.com · Ctrl-b puis %, et voilà votre premier split.

Les deux projets sont libres et open source. Si le concept vous plaît, une ⭐ sur GitHub fait toujours plaisir — et les retours, rapports de bugs et idées de niveaux sont les bienvenus :

Bon golf ⌨️