About
Algorithms make more sense when you can watch them work.
Most people meet data structures and algorithms as pseudocode next to a diagram frozen at one moment. What happens between one line and the next is left to your imagination.
algo·visual shows that part. Every comparison, swap, pointer change and table cell is a step you can pause on, rewind or replay, with the real code highlighted next to it. I made it for students, whether you are seeing this for the first time or revising for an exam or an interview, and for anyone who learns by poking at things.
How to use it
Four ways to play with it
Play, pause, step
Space plays and pauses, and the arrow keys move one step. Each step explains itself in a sentence.
Scrub backwards
Drag the timeline anywhere. Every step is saved as a snapshot, so going back is as easy as going forward.
Change the input
Randomise it, type your own values, build a list of operations or draw walls on a grid.
Compare two
Run two algorithms on the same input with one shared clock and see which one finishes first.
Press ? anywhere to see every shortcut, or ⌘K to jump to an algorithm.
Try these
Six experiments worth five minutes each
Break quick sort
Feed it an array that is already reversed. Every pivot is the worst one possible, and the comparison counter climbs towards n².
Open it 02Watch insertion sort cruise
On nearly sorted input each key barely moves. Count the shifts, then give bubble sort the same input.
Open it 03Why balancing matters
Insert 10, 20, 30 and so on into a plain BST and an AVL tree side by side. The BST turns into a linked list. The AVL tree rotates to stay short.
Open it 04BFS vs A*
Same maze, same clock. A* reaches the flag after exploring a fraction of the cells. Draw your own walls and race them again.
Open it 05Make every key collide
With m = 7, the keys 7, 14, 21, 28 and 35 all hash to bucket 0. The O(1) average turns into a walk down one long chain.
Open it 06Pay for the shortcut
Dijkstra treats the shaded cells as mud that costs 5 to cross. The cheapest path happily takes the long way round.
Open itHow it's built
Every algorithm runs once, then you replay it
- 1
Algorithm
Each algorithm is a plain TypeScript generator. It runs once and saves a snapshot whenever something worth seeing happens: the data, what is highlighted, the current line of code, the live variables and a one-line explanation.
- 2
Timeline
The snapshots go into an array. Play, pause, rewind, jump to the end and compare mode only change which snapshot is on screen, so nothing ever runs twice.
- 3
Renderer
A renderer draws one snapshot. Every element keeps a stable id, so going from one snapshot to the next turns into a spring animation without any per-algorithm animation code.
The algorithms never touch the interface, so each one can be tested on its own. Every highlighted line has to exist in the code you see, and every result is checked against a separate reference implementation on dozens of random inputs. Pages are generated ahead of time, so the deployed site is plain static files. All of it is on GitHub.
- algorithms
- 36
- renderers
- 11
- categories
- 5
- static pages
- 100%
Made by
Imran Sefat
@ImranSefat
I built algo·visual because algorithms are much easier to follow when you can watch each step happen. If it helped something click for you, or there is an algorithm you would like to see here, send me a message.
Open source
Ask for what you want to see
algo·visual is free and open source under the MIT license. You don't need to write code to help: ideas from people learning this material are the most useful kind of contribution. Each link below opens a short form on GitHub.
Request an algorithm
Tell me which algorithm or data structure you want and what should happen on screen.
Open an issueSuggest a feature
A new control, a clearer explanation or something that would help in a class.
Open an issueReport a bug
Paste the page URL. It records the exact input and step, so the problem is easy to reproduce.
Open an issueImranSefat/algo-visual
MIT licensed. Pull requests are welcome.
Credits
Built on open source
Everything below is open source or free to use, and this site would not exist without the people who maintain it. Thank you.
Framework and language
- Next.jsMIT
Routing, static generation, OG images
- ReactMIT
UI and the React Compiler
- TypeScriptApache-2.0
Every algorithm and component
Interface
- Tailwind CSSMIT
Styling and theme tokens
- shadcn/uiMIT
Buttons, dialogs, sliders, selects
- Radix UIMIT
Accessible primitives under shadcn/ui
- cmdkMIT
The ⌘K search
- class-variance-authorityApache-2.0
Component variants
- tw-animate-cssMIT
Dialog and card entrances
Animation, state and layout
- MotionMIT
Spring and layout animations
- ZustandMIT
Playback and input stores
- nuqsMIT
Shareable URL state
- d3-hierarchyISC
Tree layouts for BST, AVL and trie
- d3-forceISC
Graph layouts
Code, fonts and icons
- ShikiMIT
Syntax highlighting at build time
- GitHub VS Code themesMIT
Code colours, light and dark
- GeistOFL-1.1
Interface typeface
- JetBrains MonoOFL-1.1
Code and numbers
- LucideISC
Icons
- Simple IconsCC0-1.0
LinkedIn mark
- OcticonsMIT
GitHub mark
Testing and randomness
- VitestMIT
Correctness tests for every algorithm
- LighthouseApache-2.0
Performance and accessibility checks
- mulberry32Public domain
Seeded random inputs, by Tommy Ettinger
Inspiration
- Algorithm Visualizer
The idea of recording a trace once and replaying it
- VisuAlgo
How much ground one visualizer can cover
- Data Structure Visualizations, David Galles (University of San Francisco)
How clear pointer-level animation can be
The GitHub and LinkedIn marks are trademarks of their owners and only link to my profiles. Each license is the one the project publishes for the version this site uses.