JavaScript Proxy traps, live

<div class="wrap">
    <h1>🎮 Proxy Trap Inspector — try it</h1>
    <p class="sub">
      This isn't a simulation — it's a real <code>new Proxy(target, handler)</code> running in this page,
      with a <code>set</code> trap that validates every write and notifies subscribers when a value
      actually changes (the same mechanism Vue 3's reactivity system is built on).
    </p>

<div class="panel">
      <h2>Write to the proxied state</h2>
      <div class="row">
        <label for="ageInput">age</label>
        <input type="text" id="ageInput" value="31" inputmode="numeric" />
        <button id="setAge">Set age</button>
      </div>
      <p class="caption">
        The <code>age</code> field is guarded by a validation rule: <code>typeof v === "number" &amp;&amp; v &gt;= 0</code>.
        Try a negative number or type letters — the <code>set</code> trap rejects it before the object ever changes.
      </p>
      <div class="row" style="margin-top: 12px;">
        <button class="preset" data-preset="valid">Preset: valid (33)</button>
        <button class="preset" data-preset="invalid-negative">Preset: negative (-5)</button>
        <button class="preset" data-preset="invalid-type">Preset: not a number ("old")</button>
        <button class="ghost" id="reset">Reset log</button>
      </div>
    </div>

<div class="panel">
      <h2>Live proxied object</h2>
      <div class="state">
        <span>name: <b id="nameVal">Ada</b></span>
        <span>age: <b id="ageVal">31</b></span>
        <span>writes accepted: <b id="acceptCount">0</b></span>
      </div>
    </div>

<div class="panel">
      <h2>Trap activity log</h2>
      <div class="log" id="log"></div>
      <p class="status" id="status">Status: <b class="ok">idle — try setting age above</b></p>
    </div>
  </div>

preview

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