JSFiddle - React, Tailwind, and code Playground

by dledle2

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Compressed Page Generator CompressionStream('gzip') v05b</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; }
    #stats { margin: 1rem 0; font-weight: bold; }
    #output { height: 300px; white-space: pre; overflow: auto; }
    #description { margin-top: 1.5rem; font-weight: bold; }
    button { padding: 0.5rem 1rem; margin-top: 0.5rem; cursor: pointer; }
  </style>
</head>
<body>
  <!-- Compressed Page Generator v05b -->
  <h1>Compressed Page Generator CompressionStream('gzip') v05b</h1>

  <label for="payloadInput">Paste full HTML page here:</label>
  <textarea id="payloadInput" placeholder="&lt;!DOCTYPE html&gt;&#10;&lt;html&gt;…"></textarea>

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

  <div id="description">Below is the HTML for your standalone runner page:</div>
  <div id="stats"></div>
  <textarea id="output" readonly placeholder="Generated runner page code…"></textarea>

  <script>
    (function() {
      async function compress(input) {
        const blobStream = new Blob([input]).stream();
        const gzipStream = blobStream.pipeThrough(new CompressionStream('gzip'));
        const reader = gzipStream.getReader();
        const chunks = [];
        while (true) {
          const { done, value } = await reader.read();
          if (done) break;
          chunks.push(value);
        }
        const compressedBlob = new Blob(chunks);
        const bytes = new Uint8Array(await compressedBlob.arrayBuffer());
        return { data: btoa(String.fromCharCode(...bytes)), size: bytes.length };
      }

      async function generatePage() {
        const payload = document.getElementById('payloadInput').value;
        if (!payload) {
          alert('Please...