Keythm

A free typing test with realistic mechanical keyboard sounds
Try it live »

Website · Issues · Request Feature

Table of Contents

• About
• Features
• Tech Stack
• Getting Started
• Scripts
• Contributing
• Follow Me
• Deployment
• Give A Star
• Star History

About

Keythm is a free online typing test with realistic mechanical keyboard sounds and real-time WPM tracking. Practice with timed tests, word counts, quotes, or zen mode — featuring an interactive on-screen keyboard, satisfying key sounds, and detailed accuracy stats.

✨ Features

Area	What you get
Test modes	Time (15s–120s), word count, quotes (length presets), zen
Mechanical key sounds	Realistic per-key audio feedback via Web Audio; multiple keyboard themes
Virtual keyboard	Interactive on-screen keyboard that highlights keys as you type (desktop)
Results	WPM, raw speed, accuracy, character breakdown, consistency, elapsed time, WPM-over-time chart
Keyboard themes	6 color schemes — Classic, Mint, Royal, Dolch, Sand, Scarlet — each tints the entire UI
Typing fonts	9 fonts — Geist Mono, JetBrains Mono, Fira Code, IBM Plex Mono, Source Code Pro, Inter Tight, Space Grotesk, Nunito, Atkinson Hyperlegible
Settings	Theme (light/dark/system), accent color, font picker, show keyboard, sound volume, live WPM, ghost mode
Haptics	Optional vibration on supported hardware

Settings persist in localStorage.

🛠 Tech Stack

Keythm is built using the following technologies:

• TypeScript: Typed superset of JavaScript.
• Next.js 16: React framework with App Router.
• React 19: UI library.
• Tailwind CSS: Utility-first CSS framework.
• Base UI: Unstyled, accessible component primitives from MUI.
• shadcn/ui: Pre-styled component recipes.
• Motion: Animation library for React.
• Recharts: Composable charting library.
• Drizzle ORM + LibSQL: Type-safe database layer.
• Biome: Fast linter and formatter.
• Serwist: PWA / service worker toolkit.
• Vercel: Deployment platform.

🧰 Getting Started

1. Make sure Git and Bun (or Node.js 20+) are installed.

2. Fork this repository and clone your fork:

   git clone https://github.com/<your-username>/keythm.git
   cd keythm

3. Install dependencies and start the dev server:

   bun install
   bun dev

4. Open http://localhost:3000 in your browser.

📜 Scripts

Command	Description
bun dev	Development server
bun run build	Optimized production build
bun start	Serve the production build
bun run lint	Lint with Biome
bun run lint:fix	Lint and auto-fix with Biome
bun run format	Format with Biome
bun run typecheck	Type-check with TypeScript

🔧 Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the repo
2. Create a new branch (git checkout -b improve-feature)
3. Make the appropriate changes in the files
4. Commit your changes (git commit -am 'Improve feature')
5. Push to the branch (git push origin improve-feature)
6. Create a Pull Request

🚀 Follow Me

📃 Deployment

Method	Description	Action
🔧 Manual Build	Create an optimized production build.	bun run build
▲ Vercel (Recommended)	Deploy instantly on the Vercel platform.
🌐 Netlify	Deploy easily on Netlify.

For more details, check the Next.js deployment docs.

⭐ Give A Star

If you found this project useful, give it a star to help more people discover it!

🌟 Star History

(back to top)