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; services and requests for AWS; topics, partitions and consumer groups for Kafka; 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 InternalsPartially ready
Step through the JavaScript runtime — call stack, Web APIs, queues and the event loop. Event Loop and the Array node canvas are live; Scope, Event and Render are next.
- AWS PlaygroundIn progress
Wire core AWS services together on an interactive canvas and watch how requests, queues and storage interact across your architecture.
- Kafka PlaygroundIn progress
Design topics, partitions, producers and consumer groups on an interactive canvas and watch messages flow through the cluster.
- 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