An interactive, single-file binary search tree that runs entirely in your browser — no backend, no build step.
▶ Live: https://dev48v.github.io/binary-search-tree/
A BST keeps one invariant at every node: everything on the left is smaller, everything on the right is larger. That single rule is what makes search, insert, and delete run in O(height). This shows the rule at work.
- Insert — a new value walks down from the root, going left or right by comparison until it finds an empty spot. Watch the path light up.
- Search — same walk: compare, turn left or right, never scan the whole tree. The comparison count is the depth, not the size.
- Delete — the interesting one. Three cases: a leaf just goes; a node with one child is replaced by that child; a node with two children is replaced by its in-order successor (the smallest value in its right subtree) — the one swap that preserves the ordering.
- Four traversals, animated in visit order:
- in-order (Left, Node, Right) → comes out sorted every time
- pre-order (Node, Left, Right) → used to copy/serialize a tree
- post-order (Left, Right, Node) → used to delete/free a tree bottom-up
- level-order (breadth-first) → row by row
Live stats show node count, height, min, and max.
- random tree, then in-order — always sorted ascending. That's a one-liner sort.
- search a value and count the comparisons — it's the depth, not the size.
- delete a node with two children and watch the in-order successor take its place.
- Insert values in sorted order (1, 2, 3, …) and watch the tree degenerate into a linked list — height = n. That worst case is exactly why balanced trees (AVL, red-black) exist.
Insert/search/delete logic, the in-order-successor delete, and all four traversals are the real algorithms; the animation replays the node visits.
It's one file. Open index.html, or:
python -m http.server 8000 # then visit http://localhost:8000MIT © 2026 dev48v — dev48v.infy.uk