setHTML() vs innerHTML — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Watch the payload actually run — or not</h1>
    <p class="pg-sub">
      Pick a payload, choose how it gets inserted, then render it for real. The
      <code>innerHTML</code> and <code>setHTMLUnsafe()</code> modes really do
      insert the string. If something fires, the browser actually ran it; it's
      not an animation.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Pick a payload (or type your own)</div>
      <div class="presets">
        <button class="btn sm" data-preset="safe">Safe comment</button>
        <button class="btn sm" data-preset="script">&lt;script&gt; tag</button>
        <button class="btn sm" data-preset="img">&lt;img onerror&gt;</button>
        <button class="btn sm" data-preset="jsurl">javascript: link</button>
        <button class="btn sm" data-preset="rich">Rich formatting</button>
      </div>
      <textarea id="htmlInput" style="margin-top:10px" rows="4" spellcheck="false" aria-label="HTML to insert"></textarea>

<div class="row-label">How the string gets inserted</div>
      <div class="seg" id="modeSeg">
        <button aria-pressed="true" data-mode="inner">innerHTML (unsafe)</button>
        <button aria-pressed="false" data-mode="unsafe" id="unsafeBtn">setHTMLUnsafe() (unsafe)</button>
        <button aria-pressed="false" data-mode="safe">setHTML() (sanitized)</button>
      </div>

<div id="configRow" hidden>
        <div class="row-label">Which sanitizer config <code>setHTML()</code> gets</div>
        <div class="seg" id="configSeg">
          <button aria-pressed="true" data-config="default">default (no config)</button>
          <button aria-pressed="false" data-config="custom">custom allowlist</button>
          <button aria-pressed="false" data-config="legacy">same allowlist, 2022 key names</button>
        </div>
      </div>

<div class="btn-row" style="margin-top:14px">
        <button class="btn primary" id="run">Render</button>
        <button class="btn ghost" id="reset">Reset</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> What actually rendered</div>
      <div class="stage" id="stage">—</div>
      <div class="status" id="status" style="margin-top:12px">
        <span class="dot info" id="dot"></span><span id="statusText">Pick a payload above and hit Render.</span>
      </div>
      <p class="hint" id="removedOut"></p>

<div class="panel-label" style="margin-top:14px"><span class="n">·</span> DOM after render</div>
      <pre class="code" id="codeOut">—</pre>

<div id="getBlock" hidden>
        <div class="panel-label" style="margin-top:14px"><span class="n">·</span> <span id="getLabel">sanitizer.get(): what the browser actually understood</span></div>
        <pre class="code" id="getOut">—</pre>
      </div>
    </div>
  </div>

preview

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