An interactive, single-file binary heap / priority queue that runs entirely in your browser — no backend, no build step.
▶ Live: https://dev48v.github.io/binary-heap/
A binary heap is a complete binary tree stored in a plain array, keeping one rule at every node — in a min-heap, a parent is ≤ both its children. That rule alone gives you O(log n) insert and extract, and a ready-made priority queue. This shows the tree and the array at the same time so the two views click together.
- insert — the value lands at the end of the array, then bubbles up, swapping with its parent while it's smaller, until the heap rule holds.
- extract-min (or max) — the root is the answer; it's removed, the last element moves to the top, and it sifts down, swapping with its smaller child until it settles.
- heapify — build a valid heap from a shuffled array in O(n) by sifting down from the last parent up (faster than n inserts, which would be O(n log n)).
- min ↔ max — flip the ordering and watch the whole array re-heapify.
- Live array view with indices, plus stats: size, height, root, and a validity check.
No pointers needed. For index i:
parent(i) = ⌊(i − 1) / 2⌋
leftChild(i) = 2i + 1
rightChild(i) = 2i + 2
Because the tree is always complete (filled left-to-right), those formulas always land on the right slot. That's why heaps are cache-friendly and compact — the whole structure is one contiguous array.
The heap is the priority queue behind Dijkstra and Prim (pull the cheapest edge/node next), Huffman coding (merge the two smallest frequencies), heapsort (repeatedly extract the max), event simulations, and "top-k" queries.
Insert a few values and watch them bubble up; extract the root and watch sift-down; hit heapify random to build one in O(n); flip min/max and watch it rebuild.
It's one file. Open index.html, or:
python -m http.server 8000 # then visit http://localhost:8000MIT © 2026 dev48v — dev48v.infy.uk