algo.
Animated walkthroughs of classic algorithms, with the code highlighted line by line as they run.
- Vite 7
- TypeScript
- PrismJS
- Vitest
- Vercel
Overview
This is a site where you can watch classic algorithms run. There are five so far: the Sieve of Eratosthenes, binary search, insertion sort, merge sort, and quicksort. Each one has an animation, a line of narration for the current step, and the code beside it with the running line highlighted.
It began in 2021 as a single sieve demo in vanilla JavaScript. In 2026 I rebuilt it in TypeScript with Vite and no framework, and I've been adding algorithms since. I kept the pacing slow on purpose, and you can pause it and go one step at a time.
Highlights
A list of steps
The 2021 version animated from inside the algorithm's loops, sleeping between iterations. Nothing could stop a run once it started, so a reset left the old loop going. Now each algorithm returns a list of steps and a small player walks it. That's what makes pause, step, and reset work.
Three languages, one run
The code panel shows each algorithm in JavaScript, Python, or Java. The steps are the same in all three. Each listing says which of its lines a step belongs to, so the highlight lands on the right line in whichever one you pick.
Wrapping code on a phone
On a phone the longer lines of code don't fit. A browser wraps at the last space that fits, which can strand a lone brace on its own row. I wrote a small line breaker that scores each place a line could break and picks the one a person would.
A closer look
