the JavaScript event loop

<div class="wrap">
    <h1>⏱️ The event loop, one queue at a time</h1>
    <p class="sub">
      Queue a mix of <b>sync</b>, <b>microtask</b> (<code>Promise.then</code>), and
      <b>macrotask</b> (<code>setTimeout</code>) work, then hit Run. Watch the call
      stack empty first, then <i>every</i> microtask drain, then one macrotask —
      exactly the order the real engine uses.
    </p>

<div class="panel">
      <div class="add-row">
        <span class="lbl">queue work</span>
        <button data-add="sync">+ sync log</button>
        <button data-add="micro">+ microtask (.then)</button>
        <button data-add="macro">+ macrotask (setTimeout)</button>
      </div>

<div class="run-row">
        <button id="run" class="primary">▶ Run</button>
        <button id="reset" class="ghost">Reset</button>
        <button id="preset" class="ghost">Load classic example</button>
      </div>

<div class="lanes">
        <div class="lane">
          <h2>Call stack <span id="stackTag"></span></h2>
          <div class="items" id="stackItems"><span class="empty">empty</span></div>
        </div>
        <div class="lane">
          <h2>Microtask queue <span id="microTag"></span></h2>
          <div class="items" id="microItems"><span class="empty">empty</span></div>
        </div>
        <div class="lane">
          <h2>Macrotask queue <span id="macroTag"></span></h2>
          <div class="items" id="macroItems"><span class="empty">empty</span></div>
        </div>
      </div>

<div class="log">
        <div class="lbl">execution order</div>
        <ol id="logList"></ol>
        <span class="empty" id="logEmpty">queue some work above, then hit Run</span>
      </div>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.