ResizeObserver — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 ResizeObserver — watch the element, not the window</h1>
    <p class="pg-sub">
      Drag the box's bottom-right corner, or move the slider — either way a <code>ResizeObserver</code>
      reports the box's own size live, and the layout inside reacts to <strong>its</strong> width, not your
      browser window's.
    </p>

<div class="banner" id="unsupportedBanner">
      Your browser doesn't support <code>ResizeObserver</code>. Try a recent Chrome, Firefox, Safari, or
      Edge — it's been Baseline since 2020.
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Resize the box</div>

<div class="resize-wrap">
        <div class="resize-box" id="box">
          <div class="mini-cards" id="miniCards">
            <div class="mini-card">📄 Card A</div>
            <div class="mini-card">📄 Card B</div>
            <div class="mini-card">📄 Card C</div>
          </div>
          <div class="box-tag" id="boxTag" aria-live="polite">⏳ measuring…</div>
        </div>
      </div>

<div class="wrap-controls" style="margin-top: 14px">
        <div class="field grow">
          <span class="ctl-label" id="widthLabel">Width — <span id="widthVal">340</span>px</span>
          <input
            type="range"
            id="widthSlider"
            min="160"
            max="680"
            step="10"
            value="340"
            aria-labelledby="widthLabel"
          />
        </div>
      </div>

<div class="presets" style="margin-top: 12px">
        <button class="btn sm" data-w="200" data-h="120">Snap: small</button>
        <button class="btn sm" data-w="420" data-h="180">Snap: medium</button>
        <button class="btn sm" data-w="640" data-h="220">Snap: large</button>
        <button class="btn ghost sm" id="resetBtn">Reset</button>
      </div>

<p class="hint">
        The corner-drag is mouse/touch only — the slider is the accessible equivalent, and both do the
        exact same thing: change the element's own box. Watch the cards inside flip from stacked to
        side-by-side once the box gets wide enough — that's an element-driven breakpoint, the same trick
        behind CSS container queries, done in JavaScript.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Live ResizeObserver readout</div>

<div class="counters">
        <span class="pill" id="cbPill">callback fired: <strong id="cbCount">0</strong>×</span>
        <span class="pill" id="winPill">window "resize" events: <strong id="winCount">0</strong>×</span>
      </div>

<pre class="code" id="entryCode">// resize the box above — the entry appears here</pre>

<p class="hint">
        <code>contentRect</code>, <code>contentBoxSize</code>, and <code>borderBoxSize</code> are the three
        ways one <code>ResizeObserverEntry</code> reports the new size. Drag or slide the box and this
        updates instantly; resize your actual browser window instead and it doesn't move — only the
        "window resize events" counter above does. That's the whole point: the observer reacts to the
        <strong>element</strong>, independent of the window.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> Entry log</div>
      <div class="log-head">
        <p class="hint">Every batch the browser delivers, newest first.</p>
        <button class="btn ghost sm" id="clearLog">Clear</button>
      </div>
      <div class="log" id="log" data-empty="1" aria-live="polite">
        Observing… the box's starting size will appear here in a moment.
      </div>
    </div>
  </div>

preview

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