Web Share API — interactive playground

<div class="pg">
    <h1 class="pg-title">📤 Ask the OS, don't guess the icons</h1>
    <p class="pg-sub">
      Fill in what you want to share, then hit <strong>Share natively</strong>. If your
      browser supports <code>navigator.share()</code>, you'll see your device's real
      share sheet — not five hardcoded guesses.
    </p>

<div id="unsupportedBanner" class="banner info" style="display:none;">
      This browser doesn't expose <code>navigator.share</code>. That's exactly the
      branch a real feature-detect falls back to — see the fallback row at the bottom.
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Compose the share</div>
      <div class="wrap-controls">
        <div class="field grow">
          <span class="label">Title</span>
          <input type="text" id="titleInput" value="Web Share API playground" />
        </div>
        <div class="field grow">
          <span class="label">Text</span>
          <input type="text" id="textInput" value="Worth a look — three lines instead of five icons." />
        </div>
      </div>
      <div class="field" style="margin-top:12px">
        <span class="label">URL</span>
        <input type="text" id="urlInput" value="https://bestpractic.org/" />
      </div>
      <div class="btn-row" style="margin-top:14px">
        <label class="toggle">
          <input type="checkbox" id="fileToggle" /><span class="switch"></span>
          <span>Also try sharing a generated image file</span>
        </label>
      </div>
      <div class="presets" style="margin-top:14px">
        <button class="btn sm" data-preset="link">Preset: just a link</button>
        <button class="btn sm" data-preset="file">Preset: link + generated image</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Share</div>
      <div class="btn-row">
        <button class="btn primary" id="shareBtn">Share natively</button>
        <button class="btn ghost" id="checkBtn">Check file support only</button>
        <button class="btn ghost" id="resetBtn">Reset</button>
      </div>
      <p class="status" id="statusLine" style="margin-top:12px">
        <span class="dot" id="statusDot"></span>
        <span id="statusText">Ready — click "Share natively" to open your device's share sheet.</span>
      </p>
      <p class="hint">
        Tip: click Share, then dismiss the sheet <em>without</em> picking anything.
        Watch the log below — canceling is reported as normal, not as an error.
      </p>
      <div class="log output" id="log">Waiting for you to share something…</div>
    </div>

<div class="panel" id="fallbackPanel" style="display:none;">
      <div class="panel-label"><span class="n">3</span> The fallback this browser needs</div>
      <p class="hint">No native share sheet here, so a real app still needs something to show. This is the one place the old row earns its keep:</p>
      <div class="row-icons">
        <span class="icon">🔗 Copy link</span>
        <span class="icon">✉️ Email</span>
        <span class="icon">🐦 X</span>
      </div>
    </div>
  </div>

preview

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