Get in touch

Engineering playgrounds for JavaScript runtime, network systems, and UI internals.

Each lab explains a real behavior model with step-by-step state transitions and instrumentation-minded visuals. Start with the Event Loop Visualizer below.

Event Loop Visualizer

See how JavaScript schedules sync code, microtasks, and macrotasks.

Code Input

1. Run→2. Step / Auto Play→3. Reset
Start here: click Run first. Step and Auto Play unlock after Run.
Custom code runs in an isolated Web Worker with a timeout guard.

Call Stack

0
    Empty

    Web APIs

    0
      Empty

      Microtask Queue

      0
        Empty

        Task Queue

        0
          Empty

          Event Loop

          Next source
          Waiting

          Console Output

          No output yet.

          Current Explanation

          Select an example or paste code, then click Run to generate simulation steps.

          Timeline Log

          Run a simulation to see step history.
          Step progress: not started (click Run).
          Speed
          700 ms

          More labs in progress

          The next set extends beyond JavaScript scheduling into transport-level request flows and React rendering semantics.

          Upcoming

          HTTP Lifecycle Playground

          Visualize DNS, TCP/TLS, request/response cycles, retries, caching, and latency segments in one flow.

          Upcoming

          React Rendering Visualizer

          Step through render/commit/effect phases with state updates and scheduling priorities.

          Upcoming

          Runtime Observability Sandbox

          Track logs, metrics, and traces for mini services to show how production debugging actually works.