dedicated visualizer
Binary Search
Halves the remaining search range around the middle element of a sorted array. This page keeps the runner, chart, and controls focused on a single algorithm so the walkthrough feels calmer than the overview page.
session controls
Compare this algorithm against a related one, turn on quiz mode, or keep the current state in a shareable URL.
current shareable URL
Copy the URL to preserve this exact dataset, target, compare mode, and quiz state.
browse more
Want a different problem or visual mode? Jump back to the catalog and open another dedicated page.
open catalogscenario presets
Load a focused input that reveals a specific behavior quickly instead of hand-editing every value first.
dataset controls
Use your own array, randomize a fresh one, or restore defaults. The same dataset is shared by both panels in compare mode.
Enter up to 12 integers. Values are normalized to the range 1–99 for clean visualization.
chart + counters
The visualization and the live counters stay together so each step is easier to read.
current action · start range
current action
start range
comparisons
0
final 3
low
0
final 5
mid
—
final 5
high
8
final 5
steps
1 / 7
index 0
2
still in search range
index 1
5
still in search range
index 2
8
still in search range
index 3
12
still in search range
index 4
16
still in search range
index 5
23
still in search range
index 6
38
still in search range
index 7
56
still in search range
index 8
72
still in search range
run summary
Finished in 7 steps. 23 matches the middle value, so the search is complete.
comparisons
3
low
5
mid
5
high
5
steps
7
current explanation
Binary search starts over the entire sorted range to find 23.
simple explanation
Only sorted data can be cut in half like this.
pseudocode
complexity card
best
O(1)
average
O(log n)
worst
O(log n)
space
O(1)
algorithm notes
intuition
Binary search throws away half the remaining possibilities after every comparison.
tradeoffs
- Very fast on sorted data.
- Requires random access and sorted input.
- Not helpful when data changes constantly unless you keep it sorted.
when to use it
Use when the data is sorted and you need fast repeated lookups.
interview tips
- Be careful with low/high updates and off-by-one errors.
- State the invariant that the target, if present, must stay inside the current range.
what I learned building this
typed definitions
One algorithm schema now drives the catalog, counters, pseudocode, notes, and visual modes, which keeps the UI consistent as the lab grows.
replay over mutation
Precomputed steps made it much easier to synchronize explanations, metrics, quiz prompts, and scrubber playback without hidden state drifting out of sync.
portfolio framing
Shareable URL state, compare mode, and responsive layouts mattered as much as the algorithm logic because this page needs to teach clearly and still feel polished as a product.
more in this lane
Want a different take on the same problem family? These stay in the same category but change the strategy.