JSFiddle - React, Tailwind, and code Playground

by dledle2

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Compressed Page Generator (Brotli) (needs to import an external wasm module) v04a</title>
  <style>
    body { font-family: sans-serif; padding: 1rem; }
    label { display: block; margin: 1rem 0 0.5rem; font-weight: bold; }
    textarea { width: 100%; box-sizing: border-box; font-family: monospace; margin-bottom: 1rem; }
    #payloadInput { height: 200px; }
    #output { height: 300px; white-space: pre; overflow: auto; }
    #stats { margin-top: 1rem; font-style: italic; }
    #description { margin-top: 1.5rem; font-weight: bold; }
    button { padding: 0.5rem 1rem; margin-top: 0.5rem; cursor: pointer; }
  </style>
</head>
<body>
  <h1>Compressed Page Generator (Brotli) (needs to import an external wasm module) v04a</h1>

  <label for="payloadInput">Paste full HTML page here:</label>
  <textarea id="payloadInput" placeholder="<!DOCTYPE html>\n<html>…"></textarea>

  <button id="generateBtn">Generate Page</button>

  <div id="description">Below is the HTML for your standalone runner page:</div>
  <div id="stats">Original size: 0 bytes | Compressed size: 0 bytes | Compression ratio: 0 | Final output size: 0 bytes | Total ratio: 0</div>
  <textarea id="output" readonly placeholder="Generated runner page code…"></textarea>

  <script type="module">
    // 1. Load Brotli-WASM (browser ESM build)
    const brotliPromise = import(
      "https://unpkg.com/[email protected]/index.web.js?module"
    ).then(m => m.default);

    // 2. Compress function: text → Uint8Array → Brotli → Uint8Array
    async function compress(text) {
      const brotli = await brotliPromise;
      const inputBytes = new TextEncoder().encode(text);
      const compressedBuffer = brotli.compress(inputBytes);
      const compressedBytes = new Uint8Array(compressedBuffer);
      return compressedBytes;
    }

    // 3. Generate the runner page HTML, embedding compressed data & decompressor
    async function generatePage() {
...