File System Access API — same file, no duplicates

<div class="pg">
    <h1 class="pg-title">🎮 Is that "Save" button actually saving?</h1>
    <p class="pg-sub">
      Two save buttons, two different platform APIs. The left one is the classic
      <code>&lt;a download&gt;</code> trick — click it a few times and watch the (simulated)
      Downloads folder fill up with copies. The right one uses the real
      <a href="https://developer.mozilla.org/en-US/docs/Web/API/File_System_API" target="_blank" rel="noopener">File System Access API</a> —
      it opens an <em>actual file from your computer</em> and overwrites the same one, for real, every time you click Save.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> The wrong way — <code>&lt;a download&gt;</code></div>
      <p class="hint">Every click below is a brand-new file as far as the browser is concerned. Nothing is actually downloaded to your machine — this list simulates what your real Downloads folder would look like, so it's safe to click as many times as you want.</p>
      <div class="btn-row">
        <button class="btn bad" id="downloadSave">Save (download link)</button>
        <button class="btn ghost sm" id="downloadReset">Clear folder</button>
      </div>
      <div class="folder" id="folder"></div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> The real way — File System Access API</div>
      <p class="hint">This one is not simulated. Pick a real, small text file from your machine (or make one), edit it below, hit Save, then reopen it outside the browser — it will actually have changed.</p>
      <div class="btn-row">
        <button class="btn primary" id="openFile">Open a file to edit</button>
        <button class="btn good" id="saveFile" disabled>Save (overwrite in place)</button>
      </div>
      <textarea class="editor" id="editor" placeholder="Open a file above, then edit its text here…" disabled></textarea>
      <div class="status" id="fsaStatus" style="margin-top:12px">
        <span class="dot info" id="fsaDot"></span><span id="fsaText">Checking browser support…</span>
      </div>
    </div>
  </div>

preview

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