The Internet, From Scratch — BGP, TCP Congestion, Visible Reconvergence
51 autonomous systems. Real BGP. Cut a link and watch UPDATE messages ripple through the network. Toggle to TCP mode and spawn 100 flows — see congestion collapse and AIMD recovery in real time.
What this is
A live simulation of the internet's two foundational protocols. Three tier-1 backbones in a triangle, eight regional ISPs peering with them, forty leaf networks at the edges. Every AS runs BGP — pick a source and destination, watch the packet traverse the chosen AS-path hop by hop. Cut a link and red UPDATE markers ripple through the graph as ASes withdraw and recompute routes. Toggle to TCP mode, spawn 100 concurrent flows from any AS, and watch links turn yellow then red as they saturate. Throughput collapses, AIMD halves rates, the network finds a new equilibrium.
Why this is mind-blowing
The internet is the biggest engineering artifact humans have ever built. Its two core protocols are explained in textbooks but rarely shown working at this scale interactively. You can teach a semester of networking from this single HTML file.
Build a single-file simulation of how the internet actually works.
Generate a network of ~50 autonomous systems with realistic topology
(3 tier-1 hubs, regional ISPs, leaf networks). Each AS speaks BGP
with its peers. Click-to-send-packet UI: pick source and destination,
watch the packet traverse the chosen path hop by hop. When I cut a
link, BGP reconverges live. Toggle to TCP mode, spawn 100 flows, and
watch congestion collapse when a link saturates. Force-directed graph
layout, packets as moving dots.Paste this into Claude, Cursor, or Copilot. Change one thing that matters to you.
What I learned shipping it
- Networking textbooks describe BGP convergence as a sequence of UPDATE messages. Animating those messages as actual ripples on the graph is the difference between 'I memorized this' and 'I see this.'
- AIMD (additive-increase, multiplicative-decrease) — TCP's congestion control — is three lines of code. Watching 100 flows discover and reroute around a saturated link is the kind of thing that makes networking click for students.
- Realistic-ish topology (tier-1 / regional / leaf) emerges from 30 lines of generation code. The real internet has the same shape. Hierarchy is a property of optimization under cost constraints, not central planning.