A premium, gamified typing trainer built for developers, DevOps engineers, and terminal warriors.
Type faster. Fail smarter. Level up.
Typo is a gamified technical typing speed game that goes far beyond "just type what you see." It uses progressive difficulty, spaced repetition, real-time analytics, and immersive feedback to build genuine muscle memory for the characters and patterns developers use every day — brackets, pipes, semicolons, terminal commands, and more.
Whether you're a beginner who just learned what a shell is, or a senior engineer who wants to shave milliseconds off every keystroke, Typo adapts to you.
Choose your track and climb level by level:
| Track | Focus |
|---|---|
| 🖥️ Terminal & Git | Shell commands, Git workflows, bash scripting |
| 🐍 Python | Python syntax, indentation-heavy code, f-strings |
| 🌐 JavaScript | ES6+, async/await, arrow functions, JSX |
| 📦 Misc / General | Broader dev vocabulary and mixed patterns |
Each track starts with plain English descriptions of the commands, then transitions into real code snippets — rewarding you with a seamless ramp-up that keeps you in flow state.
- Level 1–3: Short, simple sentences describing terminal concepts
- Level 4–6: Single-line commands with flags and arguments
- Level 7–10: Multi-line scripts, complex pipes, and chained commands
- Text gets progressively longer and more complex as you advance, without ever feeling like a cliff
Powered by a Leitner-style spaced repetition algorithm:
- Every character you mistype is tracked and stored
- Mistakes are weighted and surfaced more frequently in future sessions
- As you correctly type a character, its weight decreases
- Your personal
MistakeVaultis persisted inlocalStorage— it survives refreshes - View your most common errors in real time during the game
- Earn XP on every completed lesson based on WPM, accuracy, and streak
- Climb through leagues: Bronze → Silver → Gold → Platinum → Diamond
- Weekly Leagues reset each Monday — compete globally for top placement
- Your rank and XP are saved locally and displayed in the HUD
- A live canvas-based line graph updates every 2 seconds
- Tracks your WPM trend throughout the current session
- Color-coded zones for slow / moderate / fast / elite typing speeds
- A fully rendered on-screen keyboard visualizes which keys you're hitting
- Keys light up in real time when pressed
- Color intensity reflects mistake frequency — red = most common error keys
- Helps identify weak fingers and hand positioning issues
Meet Cygwin, your in-game typing coach:
- Lives in the bottom-right corner of the arena
- Reacts dynamically to your performance (cheering, worried, idle)
- Gives you real-time pep talks and contextual tips
- Disappears gracefully when not needed
First time? Typo has you covered:
- A multi-step tutorial dialog greets new players on first launch
- Explains the core loop, streak system, and how to navigate tracks
- Skippable, but rewarded — completing it unlocks a bonus XP package
- Never shown again after completion (stored in
localStorage)
Every lesson completion triggers:
- An animated XP burst overlay with personalized messages
- Confetti effects for milestone levels and league promotions
- Encouraging messages that adapt to your performance (great WPM, perfect accuracy, streak maintained)
- A clear "Next Lesson →" prompt so you always know what to do next
- No sound files needed — all audio is generated via the Web Audio API
- Every keypress produces a satisfying click sound
- Error keystrokes produce a distinct, non-jarring audio cue
- Volume is adjustable and can be muted from settings
- Toggle sound effects on/off
- Toggle auto-advance to next lesson
- Switch between keyboard themes
- All settings persist via
localStorage
For power users and contributors only.
Activate the hidden dev menu with:
Ctrl + Shift + D
The dev console opens an overlay with:
- Force-complete current level — skip to the results screen instantly
- Unlock all levels — bypass the progression gate
- Reset all progress — wipe XP, league, unlocked levels, mistake vault
- Add XP manually — inject XP to test league promotion
- Dump state to console — log the full game state JSON
- Toggle god mode — no accuracy penalty, infinite streak
- Node.js v16+ (for local dev server)
- A modern browser (Chrome, Firefox, Edge, Safari)
# 1. Clone the repository
git clone https://github.com/sarang-cmd/typo.git
cd typo
# 2. Install dependencies
npm install
# 3. Start the dev server
npm run dev
# 4. Open in browser
open http://localhost:3000The app is a zero-dependency static site. No build step required.
npm run devjust spins up a local HTTP server.
👉 https://typo-technical-typing-3000.web.app
Deployed on Firebase Hosting — globally distributed, HTTPS, zero-config CDN.
typo/
├── index.html # Main app shell — all UI markup and modals
├── app.js # GameEngine, MistakeVault, SoundSynthesizer, WpmChart
├── snippets.js # All typing content across tracks and difficulty levels
├── styles.css # All styles — dark mode, animations, mascot, HUD
├── package.json # Scripts and metadata
├── firebase.json # Firebase Hosting config
└── .firebaserc # Firebase project binding
| Class | Responsibility |
|---|---|
GameEngine |
Orchestrates the entire game loop, input handling, level progression |
MistakeVault |
Tracks per-character error history, implements spaced repetition weighting |
SoundSynthesizer |
Generates all audio via Web Audio API (no sound files) |
WpmChart |
Renders the live WPM trend line on an HTML5 <canvas> |
| Layer | Technology |
|---|---|
| Structure | Vanilla HTML5 |
| Logic | Vanilla JavaScript (ES6+, no frameworks) |
| Styling | Vanilla CSS (custom properties, animations, glassmorphism) |
| Audio | Web Audio API |
| Graphics | HTML5 Canvas |
| Storage | localStorage |
| Hosting | Firebase Hosting |
| Dev Server | http-server (via npx) |
Zero runtime dependencies. No React, no Webpack, no TypeScript. Just fast, raw web tech.
Contributions are welcome! Here's how to get started:
- Fork this repository
- Create a branch:
git checkout -b feature/my-feature - Add your changes — new snippet tracks, features, or bug fixes
- Open a PR with a clear description
Edit snippets.js and follow the existing structure:
{
id: 'my-track',
name: 'My Track',
levels: [
{ id: 1, text: "Short, easy intro text.", difficulty: 1 },
{ id: 2, text: "A slightly longer sentence.", difficulty: 2 },
// ... up to 10 levels, increasing complexity
]
}MIT © Sarang
Built with ❤️ for developers who type for a living.