VIM Master

VIM Master VIM Master is a lightweight in-browser game that teaches core Vim motions and editing commands through short, focused levels. No installs required—just open index.html and start practicing. Demo Open index.html directly in your browser. directly in your browser. Best viewed on desktop for full keyboard support. Screenshot Features Normal/Insert modes with an on-screen status bar Command log showing your keystrokes Levels that validate your action outcomes (not just keystrokes) Supports: h j k l , w b e , gg G , 0 $ , x , dd , dw , yy , p , i , a , o/O , cw , D , r , ex-commands :q , :wq , , , , , , , , , , , , , , , ex-commands , Numeric counts for motions/operators (e.g., 3w , 2dd , 5x , 5G ) , , , ) Undo/redo support ( u , Ctrl+r ) , ) Completion modal with Enter to advance Levels How to Exit (Ex Commands): type :q or :wq then Enter Basic Movement: h j k l Word Movement: w b e Line Jumps: gg G Insert Mode: a + typing + Esc Delete Basics: dd , dw , x Yank & Put: yy , p Line Bounds: 0 , $ Append & Open Lines: a , o , O Change Word: cw (then type, Esc ) Delete to End & Replace: D , r Counts: use 3w to move multiple words Undo/Redo: dd , then u , then Ctrl+r Controls Navigation: h left, j down, k up, l right left, down, up, right Words: w next, b back, e end next, back, end Lines: 0 start, $ end, gg first line, G last line (or nG to go to line n) start, end, first line, last line (or to go to line n) Insert: i insert at cursor, a append after cursor, o new line below, O new line above insert at cursor, append after cursor, new line below, new line above Delete: x delete character, dd delete line, dw delete word, D delete to end of line delete character, delete line, delete word, delete to end of line Change: cw change word (deletes word and enters Insert) change word (deletes word and enters Insert) Replace: r then any printable character (supports symbols like ! @ # < > & ) then any printable character (supports symbols like ) Counts: prefix a number before commands (e.g., 3w , 2dd , 5x , 5G ) , , , ) Undo/Redo: u undo, Ctrl+r redo undo, redo Exit Insert mode: Esc How Validation Works Each level defines a target cursor location, target text, or target content layout. Validation is resilient to trailing spaces and blank lines where appropriate. You progress when the outcome matches the target; keystroke sequences themselves aren’t strictly enforced. Run Locally No build step. Just clone and open the file: # Clone your fork git clone https://github.com/ < your-username > /vimmaster.git cd vimmaster # Open directly in a browser (double-click on Windows) start index.html # Windows # or open index.html # macOS # or xdg-open index.html # Linux If your browser restricts local file access, serve it with any static server, for example: npx serve . # then visit the printed URL Tech Stack Plain HTML/CSS/JS Tailwind CDN for styling No dependencies, no frameworks Contributing Issues and PRs are welcome! File: index.html contains all the logic and level definitions. contains all the logic and level definitions. Keep code readable and avoid adding heavy dependencies. Favor small, focused levels that teach a single concept well. License MIT Acknowledgements