About DevTools
DevTools is a suite of interactive simulations of the infrastructure developers rely on every day. Instead of reading static diagrams, you run real commands against a simulated system and watch it react — that is where the mental model comes from.
How it works
Simulation engines
Each tool is a pure TypeScript engine that models the real system — commits, refs and remotes for Git; the call stack, queues and event loop for JavaScript; containers and pods for Docker and Kubernetes; services and requests for AWS; topics, partitions and consumer groups for Kafka; tables, documents and relationships for databases; the full request path for web communication. The visualization only renders what the engine says happened.
Everything in your browser
There is no server behind the tools and no account to create. State lives in memory on your machine, nothing you do leaves the page, and a reset always brings you back to a clean slate.
Built for understanding
Every command shows its effect step by step, and preset scenarios put you in the situations that are hard to set up on purpose — diverged remotes, conflicting merges, rebalancing consumers.
Where the tools stand
- Git VisualizerLive
Run add, commit, merge, rebase, cherry-pick and more against a simulated repository — and watch the commit graph, branches and remote react to every command.
- JavaScript InternalsLive
Step through the JavaScript runtime — the event loop, call stack and queues, the Array node canvas, scope chains and closures, DOM events, and the browser rendering pipeline. All sections are live.
- Docker WorldIn progress
Build containers, images, networks and volumes on an interactive canvas — then schedule them onto a simulated Kubernetes cluster and watch pods, services and scaling behave.
- AWS PlaygroundIn progress
Wire core AWS services together on an interactive canvas and watch how requests, queues and storage interact across your architecture.
- Kafka PlaygroundLive
Design topics, partitions, producers and consumer groups on an interactive canvas, then simulate the cluster — watch messages flow, scrub the timeline, inject broker and consumer failures, and track live throughput and lag.
- DatabaseIn progress
A schema builder and visualizer — design tables, relationships and indexes on a canvas, and flip the same model between SQL and NoSQL to see it both ways.
- Web CommunicationIn progress
Follow a request across the wire — DNS, handshakes and HTTP visualized hop by hop, all the way down to the packets.
The best way to see what this is about is to use it.
Try the Git Visualizer