CompressionStream API Demo — Free Real Gzip-in-Browser Tool

<section class="csd-wrap">
  <span class="csd-tag">compressionstream api · gzip in the browser</span>
  <h1>Compress text, client-side</h1>
  <p id="csdStatus">Type or paste text below — it's compressed with the real CompressionStream API, no server involved.</p>

  <textarea class="csd-input" id="csdInput" rows="6" placeholder="Paste some text here… (longer, more repetitive text compresses better)">The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</textarea>

  <div class="csd-grid">
    <div class="csd-stat"><span id="csdOriginal">0 B</span><small>original size</small></div>
    <div class="csd-stat"><span id="csdCompressed">0 B</span><small>compressed (gzip)</small></div>
    <div class="csd-stat"><span id="csdRatio">0%</span><small>size reduction</small></div>
  </div>

  <div class="csd-verify" id="csdVerify"></div>
  <p class="csd-note" id="csdNote"></p>
</section>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:radial-gradient(120% 90% at 50% 0%,#0c1f1a,#04100d 60%);color:#fff;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:26px}
.csd-wrap{width:100%;max-width:560px}
.csd-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#5eead4;background:rgba(94,234,212,.1);border:1px solid rgba(94,234,212,.3);padding:5px 12px;border-radius:99px;margin-bottom:14px}
.csd-wrap h1{font-size:clamp(26px,5.5vw,36px);font-weight:800;letter-spacing:-.03em}
.csd-wrap>p{font-size:13.5px;color:#9cc9bd;margin-top:8px;line-height:1.6}
.csd-input{width:100%;margin:20px 0;padding:14px;border-radius:12px;background:#08150f;border:1px solid rgba(94,234,212,.25);color:#e4fbf3;font:13px/1.6 ui-monospace,monospace;resize:vertical}
.csd-input:focus{outline:none;border-color:#5eead4}
.csd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.csd-stat{background:#08150f;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:14px 8px;text-align:center}
.csd-stat span{display:block;font-size:18px;font-weight:800;color:#5eead4}
.csd-stat small{font-size:10px;color:#5f8a7c;text-transform:uppercase;letter-spacing:.05em}
.csd-verify{font-size:12.5px;padding:12px 14px;border-radius:10px;background:#08150f;border:1px solid rgba(255,255,255,.08);color:#a9d9cb;margin-bottom:12px}
.csd-verify.ok{border-color:rgba(94,234,212,.4);color:#5eead4}
.csd-verify.bad{border-color:rgba(248,113,113,.4);color:#f87171}
.csd-note{font-size:11.5px;color:#5f8a7c;line-height:1.6}

var input = document.getElementById('csdInput');
var statusEl = document.getElementById('csdStatus');
var originalEl = document.getElementById('csdOriginal');
var compressedEl = document.getElementById('csdCompressed');
var ratioEl = document.getElementById('csdRatio');
var verifyEl = document.getElementById('csdVerify');
var noteEl = document.getElementById('csdNote');

function formatBytes(n) {
  if (n >= 1024 * 1024) return (n / (1024 * 1024)).toFixed(2) + ' MB';
  if (n >= 1024) return (n / 1024).toFixed(2) + ' KB';
  return n + ' B';
}

async function streamToBytes(readableStream) {
  var reader = readableStream.getReader();
  var chunks = [];
  var total = 0;
  while (true) {
    var result = await reader.read();
    if (result.done) break;
    chunks.push(result.value);
    total += result.value.length;
  }
  var out = new Uint8Array(total);
  var offset = 0;
  for (var i = 0; i < chunks.length; i++) {
    out.set(chunks[i], offset);
    offset += chunks[i].length;
  }
  return out;
}

var supported = typeof CompressionStream !== 'undefined' && typeof DecompressionStream !== 'undefined';
var debounceTimer = null;

async function runCompression() {
  var text = input.value;
  var encoder = new TextEncoder();
  var originalBytes = encoder.encode(text);
  originalEl.textContent = formatBytes(originalBytes.length);

  if (!supported) return; // handled entirely by the fallback branch below

  try {
    // Real gzip compression via the browser's native CompressionStream,
    // backed by the same zlib/gzip implementation the browser uses for
    // network responses -- not a JS reimplementation.
    var cs = new CompressionStream('gzip');
    var compressedStream = new Blob([originalBytes]).stream().pipeThrough(cs);
    var compressedBytes = await streamToBytes(compressedStream);
    compressedEl.textContent = formatBytes(compressedBytes.length);

    var ratio = originalBytes.length > 0
      ? ((1 - compressedBytes.length / originalBytes.length) * 100)
      : 0;
    ratioEl.textContent = (ratio < 0 ? 0 : ratio).toFixed(1) + '%';

    // Round-trip: decompress what we just compressed and verify it matches
    // the original bytes exactly, so the ratio above is demonstrably real
    // rather than a display trick.
    var ds = new DecompressionStream('gzip');
    var decompressedStream = new Blob([compressedBytes]).stream().pipeThrough(ds);
    var decompressedBytes = await streamToBytes(decompressedStream);
    var decodedText = new TextDecoder().decode(decompressedBytes);

    var matches = decodedText === text;
    verifyEl.className = 'csd-verify ' + (matches ? 'ok' : 'bad');
    verifyEl.textContent = matches
      ? 'Round-trip verified: decompressing the compressed bytes reproduces the original text exactly.'
      : 'Round-trip mismatch — decompressed text did not match the original (unexpected).';

    statusEl.textContent = 'Compressed and verified using the real CompressionStream/DecompressionStream gzip codec.';
  } catch (err) {
    verifyEl.className = 'csd-verify bad';
    verifyEl.textContent = 'Compression failed: ' + (err && err.message ? err.message : String(err));
  }
}

if (supported) {
  noteEl.textContent = 'Byte counts come from real TextEncoder/gzip output, not an estimate — very short or already-dense text can even compress LARGER due to gzip header/footer overhead, which is expected and shown honestly here.';
  input.addEventListener('input', function () {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(runCompression, 250);
  });
  runCompression();
} else {
  // CompressionStream is unsupported in some older browsers. There is no
  // honest way to fake a real gzip byte count, so rather than invent a
  // plausible-looking ratio, this fallback clearly states no compression
  // was performed and only reports the real, measurable original size.
  statusEl.textContent = 'CompressionStream API unsupported in this browser — compression cannot run here.';
  compressedEl.textContent = 'N/A';
  ratioEl.textContent = 'N/A';
  verifyEl.textContent = 'No round-trip check possible without the compression API.';
  noteEl.textContent = "This is a real limitation, not a simulated one: without CompressionStream/DecompressionStream, this demo only shows the original text's true byte size and cannot honestly report a compressed size or ratio. Consider a JS gzip polyfill library if you need this to work in unsupported browsers.";
  input.addEventListener('input', function () {
    var bytes = new TextEncoder().encode(input.value);
    originalEl.textContent = formatBytes(bytes.length);
  });
  runCompression();
}