Documentation

Everything you need to get the most out of the visualizer.

Getting started

Pick any algorithm from the catalog to open its visualizer page. At the top you'll find the interactive canvas with a playback bar and a toolbar; below it, tabs with the full theory, code in twelve languages, applications, interview questions, a quiz, and a personal notes area. Hit Play and watch the algorithm run, or step through it manually to study each operation.

The control surface
Play / PauseAuto-advance through steps, or hold still.
Step forward / backMove exactly one step at a time in either direction.
ScrubberDrag to jump to any step instantly.
SpeedAnimation speed from 0.25× to 4×.
ResetReturn to the first step.
DifficultyChoose Very Easy → Expert to scale the dataset size.
Random / Custom inputGenerate fresh data, or type your own.
Undo / RedoStep backward and forward through your input edits.
Save / LoadPersist a dataset on this device and restore it later.
Export / Import JSONShare or back up an exact visualization state as a file.
Screenshot (PNG) / SVGCapture the canvas as an image.
Zoom / Pan / FullscreenScroll or use the controls to zoom; drag to pan; press F for fullscreen.
Keyboard shortcuts
Play / pauseSpace
Next step / Previous step→ / ←
Reset to startR
Toggle fullscreenF
Speed up / Slow down+ / −
Open global searchCtrl / ⌘ + K
Color legend

Colors are consistent across every visualization:

ActiveComparingSwappingSorted / DonePivotFoundVisitedDiscardedSpecial
Difficulty levels

Five presets scale the size and complexity of generated datasets:

1
Very Easy
2
Easy
3
Medium
4
Hard
5
Expert
Practice & mastery

Practice mode turns the catalog into an active study session. Take quiz sprints drawn from any category, or predict the next step of a running algorithm. Your accuracy is tracked per category and rolls up into a mastery level — from Novice to Master — so you can see exactly where you're strong and where to focus.

Playground

The Playground is a free-form editor. Draw your own graph node by node and edge by edge, or type a custom array, then run any compatible algorithm on your creation. Structures are encoded directly in a shareable deep link, so you can hand someone a URL that reproduces your exact setup.

Frequently asked questions

Is my data private?

Yes. Everything — favorites, notes, saved states, quiz progress — lives in your browser's localStorage. Nothing is uploaded to a server.

Does it work offline?

Once loaded, visualizations run entirely in your browser with no network calls, so they keep working offline.

Can I use my own input?

Absolutely. Every visualizer has a Custom Input option with validation, plus JSON import for exact states.

How do I share a specific example?

Use Export JSON to save the state, or the Playground's deep links which encode your structure directly in the URL.

Which browsers are supported?

Any modern evergreen browser (Chrome, Edge, Firefox, Safari). A recent version is recommended for the smoothest animations.

How are new algorithms added?

Each algorithm is a single self-contained module — metadata, a step generator, and content — so the catalog grows without touching the core engine.