CompressionStream — interactive playground

<div class="pg-header">
  <div class="pg-title">CompressionStream</div>
  <div class="pg-sub">Compress text natively — no pako, no imports</div>
</div>

<section class="pg-section">
  <div class="pg-section-label">Input text</div>

<div class="preset-row">
    <span style="font-size:0.74rem;color:var(--muted);align-self:center">Presets:</span>
    <button class="preset-btn" data-preset="hello">Short string</button>
    <button class="preset-btn" data-preset="json">JSON object</button>
    <button class="preset-btn" data-preset="repeat">Repetitive text</button>
    <button class="preset-btn" data-preset="lorem">Lorem ipsum</button>
  </div>

<textarea class="input-box" id="inputText" placeholder="Type or paste text to compress…">{"users":[{"id":1,"name":"Alice"},{"id":2,"name":"Bob"},{"id":3,"name":"Carol"}]}</textarea>

<div style="display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap">
    <label style="font-size:0.78rem;color:var(--muted)">Format:</label>
    <select class="format-select" id="formatSelect">
      <option value="gzip" selected>gzip</option>
      <option value="deflate">deflate</option>
      <option value="deflate-raw">deflate-raw</option>
    </select>
    <button class="btn-primary" id="compressBtn" style="margin-left:auto">Compress</button>
  </div>
</section>

<section class="pg-section">
  <div class="pg-section-label">Compression result</div>

<div class="compress-grid">
    <div class="panel">
      <div class="panel-header">
        <span>Original</span>
        <span id="origBytes" class="stat-value accent">— bytes</span>
      </div>
      <div class="panel-body">
        <div class="stat-row">
          <div class="stat">
            <span class="stat-label">Characters</span>
            <span class="stat-value" id="origChars">—</span>
          </div>
          <div class="stat">
            <span class="stat-label">UTF-8 bytes</span>
            <span class="stat-value accent" id="origBytesVal">—</span>
          </div>
        </div>
      </div>
    </div>

<div class="panel">
      <div class="panel-header">
        <span>Compressed</span>
        <span id="compBytes" class="stat-value good">— bytes</span>
      </div>
      <div class="panel-body">
        <div class="stat-row">
          <div class="stat">
            <span class="stat-label">Compressed bytes</span>
            <span class="stat-value good" id="compBytesVal">—</span>
          </div>
          <div class="stat">
            <span class="stat-label">Savings</span>
            <span class="stat-value good" id="savingsPct">—</span>
          </div>
        </div>
      </div>
    </div>
  </div>

<div style="margin-top:10px;">
    <div style="font-size:0.78rem;color:var(--muted);margin-bottom:4px">Size ratio</div>
    <div class="byte-bar-wrap">
      <div class="byte-bar" id="byteBar" style="width:0%"></div>
    </div>
    <div style="display:flex;justify-content:space-between;font-size:0.72rem;color:var(--muted);margin-top:3px">
      <span>0% (nothing)</span><span id="barLabel">—</span><span>100% (original)</span>
    </div>
  </div>

<div style="margin-top:12px">
    <div style="font-size:0.78rem;color:var(--muted);margin-bottom:4px">First 64 bytes (hex preview)</div>
    <div class="hex-preview" id="hexPreview">—</div>
  </div>
</section>

<section class="pg-section">
  <div class="pg-section-label">Round-trip decompression</div>
  <p style="font-size:0.85rem;color:var(--muted);margin:0 0 8px">Decompress the output and verify it matches the original:</p>
  <button class="btn-secondary" id="decompressBtn" disabled>Decompress</button>
  <div class="result-text" id="decompressResult" style="margin-top:8px">—</div>
  <div id="matchBadge" style="display:none"></div>
</section>

<section class="pg-section">
  <div class="pg-section-label">The code — copy and use</div>
  <pre class="pg-code"><span class="tok-comment">// Two-function wrapper — write once, use everywhere</span>
<span class="tok-kw">async function</span> <span class="tok-fn">compress</span>(input, format = <span class="tok-str">'gzip'</span>) {
  <span class="tok-kw">const</span> stream = <span class="tok-kw">new</span> <span class="tok-cls">Blob</span>([input])
    .stream()
    .pipeThrough(<span class="tok-kw">new</span> <span class="tok-cls">CompressionStream</span>(format));
  <span class="tok-kw">return new</span> <span class="tok-cls">Uint8Array</span>(<span class="tok-kw">await new</span> <span class="tok-cls">Response</span>(stream).arrayBuffer());
}

<span class="tok-kw">async function</span> <span class="tok-fn">decompress</span>(input, format = <span class="tok-str">'gzip'</span>) {
  <span class="tok-kw">const</span> stream = <span class="tok-kw">new</span> <span class="tok-cls">Blob</span>([input])
    .stream()
    .pipeThrough(<span class="tok-kw">new</span> <span class="tok-cls">DecompressionStream</span>(format));
  <span class="tok-kw">return new</span> <span class="tok-cls">Response</span>(stream).text();
}

<span class="tok-comment">// Usage</span>
<span class="tok-kw">const</span> compressed = <span class="tok-kw">await</span> compress(jsonString);
<span class="tok-kw">const</span> restored   = <span class="tok-kw">await</span> decompress(compressed);</pre>
</section>

preview

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