DEV Community

Bilal Malik
Bilal Malik

Posted on

I built a minimalist typing speed tester with real-time WPM, CPS, and post-session analytics

Most typing speed tests are cluttered with ads, distracting animations, and metrics that reset
before you can read them. I wanted something clean - just you, the text, and honest numbers.

So I built BitType. A minimalist typing environment with real-time WPM tracking,
CPS, accuracy, and a full post-session analytics dashboard.

Live at bittype.vercel.app - open source, MIT licensed.


Table of Contents


The Problem

Typing test tools tend to fall into two camps:

  • Bloated with ads, accounts, leaderboards, and social features you never asked for
  • So bare-bones that all you get is a WPM number with no context

BitType sits in the middle — distraction-free interface, but with enough depth in the analytics
to actually understand where you're losing speed or accuracy.


What It Does

Real-Time Telemetry

WPM and Accuracy update dynamically with every single character you type — not just at
the end of a word. The timer triggers automatically on your first keystroke for precision tracking.

Instant Visual Feedback

Correct characters shift to a subtle style. Mistakes are marked immediately in red.
No waiting until the end of the word — every keystroke gives you signal, reinforcing
muscle memory in real time.

Post-Session Analytics Dashboard

When you finish, a full breakdown appears:

Metric Description
WPM Words per minute at completion
Raw WPM Unpenalized speed before accuracy correction
CPS Characters per second
Accuracy Percentage of correct keystrokes
Total Errors Exact mistake count
Time Taken Precise session duration

Adaptive Word Engine

Every new session generates a fresh randomized paragraph — no memorizing the same sentence
to inflate your score.


How a Session Works

  1. The displayed text loads — start typing immediately, timer triggers on your first keystroke
  2. WPM and accuracy refresh live with every character
  3. Correct keystrokes are styled subtly, errors highlighted in red
  4. Type the final character — state flushes automatically and the analytics dashboard loads
  5. Hit "Back to Training" for a new randomized paragraph and go again

Post-Session Analytics

The dashboard gives you everything you need to diagnose your session — not just a WPM trophy.
Raw WPM vs final WPM shows the accuracy penalty. CPS gives a granular view of your burst speed.
Error count tells you whether you're trading accuracy for speed.


My Favourite Detail — Performance Titles

After each session the engine evaluates your speed and precision and unlocks a title:

  • Speed Demon — High velocity combined with strong accuracy
  • Perfect Typist 🏆 — Achieved through 100% precision

Small detail, but it makes hitting a personal best feel like it actually means something.


Tech Stack

Tool Purpose
HTML5 + CSS3 + JavaScript Core structure, styling, and app logic
Precision timing API Zero-lag keystroke tracking
Vercel Deployment

Run It Locally

git clone https://github.com/byllzz/bittype.git
cd bittype
Enter fullscreen mode Exit fullscreen mode

No dependencies, no build step. Open index.html directly in your browser and start typing.


If BitType helped you hit a new personal best - a ⭐ on the
GitHub repo means a lot.
Drop your WPM score in the comments below 👇

Top comments (0)