HNSW Simulator

Overview

Reading the HNSW paper gives you the algorithm. Building an interactive simulator forces you to handle every edge case — what happens when an insertion lands at the top layer, how the greedy descent behaves near the entry point, why some queries probe far more nodes than others. This is that simulator.

What it does

• Click-to-insert — drop nodes anywhere on the canvas. Each gets a randomly assigned max level (exponential decay), then is linked to its M nearest neighbors at every layer from 0 up to its level.
• Click-to-search — pick a query point. Watch the search start at the top layer's entry node and greedily descend, layer by layer, zooming in toward the answer.
• +15 random bulk insert — populate quickly for stress testing.
• Layer isolation — click any layer badge to highlight just that layer's nodes and edges; the others fade out.
• Structured operation log — every insert and search step rendered with icons, badges, and node chips.
• Live graph stats — node count, max level, entry point, per-layer node breakdown.

Why HNSW

HNSW is the graph that decides what your LLM gets to see in most RAG systems. The hierarchy is the trick: upper layers act as "express lanes" with sparse, long-range links; lower layers fill in dense local detail. Search greedy-descends from the top — O(log n) average — without needing to scan every vector at full resolution.

I wrote about why this matters and where HNSW silently fails in this deep-dive blog post.

Architecture

• React + Vite for the UI; everything runs client-side
• Custom HNSW implementation in JS — insertion (with the diversity-preserving neighbor heuristic), greedy search across layers, and a heap-backed candidate list
• Canvas-based visualisation for node positions and edge drawing
• No backend — the whole simulator runs in your browser

Why build it

For the same reason you'd build a Raft visualizer — the algorithm only becomes intuitive once you can mess with it in real time, watch it succeed, watch it almost-succeed, and see exactly which edges save the day.