btoa() vs toBase64() — interactive playground

<div class="pg">
    <h1 class="pg-title">🔐 btoa() vs <code>toBase64()</code></h1>
    <p class="pg-sub">
      Type (or pick) some text, then encode it two ways: the classic
      <code>btoa()</code> and the native <code>Uint8Array.prototype.toBase64()</code>.
      Watch what happens the moment the text isn't plain ASCII.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Text to encode</div>
      <textarea class="ta" id="input">Hello 👋 World</textarea>
      <div class="presets" style="margin-top:12px">
        <button class="btn sm" data-preset="Share this report link">Plain ASCII</button>
        <button class="btn sm" data-preset="José's café">Latin-1 accents (fine)</button>
        <button class="btn sm" data-preset="Hello 👋 World">With emoji</button>
        <button class="btn sm" data-preset="Łukasz's café">Non-Latin1 letter</button>
      </div>

<div class="btn-row" style="margin-top:16px; flex-wrap:wrap; gap:10px">
        <div class="seg" id="alphabetSeg" role="group" aria-label="Base64 alphabet">
          <button aria-pressed="true" data-alphabet="base64">base64</button>
          <button aria-pressed="false" data-alphabet="base64url">base64url</button>
        </div>
        <label class="toggle">
          <input type="checkbox" id="omitPadding" /><span class="switch"></span>
          <span>omit padding (=)</span>
        </label>
      </div>

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

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Result</div>
      <div class="cmp">
        <div class="cmp-card">
          <h3>The old way — btoa()</h3>
          <div class="status" id="oldStatus">
            <span class="dot info" id="oldDot"></span><span id="oldStatusText">Click "Encode it both ways."</span>
          </div>
          <div class="code" id="oldOutput" style="margin-top:10px; word-break: break-all;"></div>
        </div>
        <div class="cmp-card">
          <h3>The native way — toBase64()</h3>
          <div class="status" id="newStatus">
            <span class="dot info" id="newDot"></span><span id="newStatusText">Click "Encode it both ways."</span>
          </div>
          <div class="code" id="newOutput" style="margin-top:10px; word-break: break-all;"></div>
          <div class="roundtrip" id="roundtrip"></div>
        </div>
      </div>
      <p class="hint" id="hint">
        <code>btoa()</code> only accepts characters U+0000–U+00FF — that actually covers
        accented Latin letters like <code>é</code>, so "café" encodes fine. Step outside that
        range — an emoji, a <code>Ł</code>, a Cyrillic letter — and it throws. <code>toBase64()</code> runs on the raw UTF-8 bytes from
        <code>TextEncoder</code>, so it never sees a "character" at all.
      </p>
    </div>
  </div>

preview

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