About the Sorting Algorithm Visualizer
An animated, step-by-step visualiser for the six core sorting algorithms — built for students, teachers, and interview prep.
What it is
The Sorting Algorithm Visualizer turns abstract sorting logic into something you can actually see. Pick an algorithm, press play, and watch a row of bars compare, swap, and slide into order — each comparison highlighted in amber, each swap in red, each sorted element turning green as the algorithm works its way through the array.
Every algorithm is implemented as a step generator that produces a sequence of discrete operations — comparisons, swaps, and overwrites — which the animation layer replays at whatever speed you choose. That means you can slow down to follow a single step, pause mid-run, or race through a hundred-element array at maximum speed.
Everything runs in your browser. No server, no login, no data ever sent anywhere.
Key features
Six algorithms
Bubble, selection, insertion, merge, quick, and heap sort — the full set covered in most CS courses and interview prep guides.
Comparison & swap highlighting
Bars turn amber during comparisons and red during swaps or writes, so your eye naturally follows what the algorithm is doing.
Play, pause, step, and reset
Full playback controls so you can study each operation individually or watch the whole sort at a glance — and reset back to the original array any time.
Adjustable size and speed
Set the array anywhere from 5 to 100 elements and the speed from a deliberate one-step-per-600ms all the way to near-instant at 5ms per step.
Live stats
A stats bar tracks the step count, comparison count, and swap count in real time — making the O(n²) vs O(n log n) difference tangible.
Big-O complexity reference
Each algorithm shows its best, average, and worst-case time complexity and whether it is stable — connecting the animation to the theory.
Why visualising helps
Reading pseudocode for bubble sort tells you that it compares adjacent elements repeatedly. Watching it sort a 30-element array makes it obvious why 900 operations are needed — you see every redundant comparison, every small bubble drifting slowly to the right. That intuition sticks in a way that a paragraph of text rarely does.
Merge sort's efficiency becomes equally obvious: the array splits, sorts its halves, and merges them back in a fraction of the comparisons, the pattern of green regions spreading outward from sub-arrays until the whole thing is done. Quick sort's pivot behaviour — how a good or bad pivot choice affects the number of swaps — is something you have to see to truly understand why its worst case is O(n²).
That's why this tool exists. Algorithms that look identical in terms of their interface — take an array, return a sorted array — have dramatically different internal behaviour. Seeing that behaviour is the fastest path to understanding it.
Who it's for
CS students
Follow your lecture notes with a live animation alongside — step through the exact comparisons and swaps your textbook describes.
Educators and teachers
Embed or link the tool from lecture slides, course notes, or class websites. It's free, no-account, and works on any device.
Interview candidates
Solidify your Big-O intuition before coding interviews by watching the difference between O(n²) and O(n log n) algorithms on the same data.
Curious learners
No prerequisites needed — just pick an algorithm and press play. The visual is self-explanatory even without a CS background.
Completely free
No account, no rate limit, no premium tier. Sort a 5-element array or a 100-element array, switch algorithms as many times as you like, and share the link freely. If you find it useful in your studies or teaching, linking to it is all we ask.