Demo
Pick an algorithm and hit Start. Bars represent values; green = active comparison.
Comparisons: 0
Swaps: 0
Time: 0ms
How it works
Generator functions yield on every comparison so the UI can step through them.
Generator
Each sort is a JS generator that yields after every comparison or swap.
Step loop
A timer calls .next() on the generator at the chosen speed.
Render
Bar heights and colours update via direct DOM style changes.
Decisions
The tradeoffs that make this maintainable.
Generators over async/await
Generators give synchronous pause-and-resume control without nested callbacks or complex async scheduling.
No canvas, no SVG
Plain divs with percentage heights. The browser handles layout; CSS handles transitions and colours.
Zero dependencies
No chart library, no build tool. One HTML file, inline JS, works anywhere a browser runs.