← Pablobot

Hex dump

Roughly xxd-like: offset, hex nybbles grouped, ASCII column. Compare two pastes side by side with XOR and mismatch highlights. Runs fully in-browser.

UTF-8 text Decode hex-only input (pairs / whitespace)

Payload A

Payload B

</p>
      <button type="button" class="btn" id="update">Rebuild dump</button>
      <button type="button" class="btn" id="copy">Copy dumps</button>
      <p class="hint">Input is capped around <strong>256 KiB</strong> per payload for responsiveness. Prefer <a href="../binary-converter/" style="color:var(--accent)">binary-converter</a> for numeric radix play.</p>
    </div>

<div class="card">
      <p class="pane-label">Compare (offset-aligned)</p>
      <div class="compare-wrap">
        <div class="compare-cell">
          <div class="compare-h">A</div>
          <pre class="lane" id="outA" aria-label="Hex dump payload A"></pre>
        </div>
        <div class="compare-cell xor-cell">
          <div class="compare-h">A XOR B</div>
          <pre class="lane xor-lane" id="outXor" aria-label="XOR of aligned bytes"></pre>
        </div>
        <div class="compare-cell">
          <div class="compare-h">B</div>
          <pre class="lane" id="outB" aria-label="Hex dump payload B"></pre>
        </div>
      </div>
    </div>
    <footer><p><a href="../">Pablobot</a> · static</p></footer>
  </div>
  <script>
    const MAX_BYTES = 256 * 1024;
    const inA = document.getElementById("inA");
    const inB = document.getElementById("inB");
    const outA = document.getElementById("outA");
    const outB = document.getElementById("outB");
    const outXor = document.getElementById("outXor");
    const capWarn = document.getElementById("capWarn");
    /** @type {ReturnType<typeof setTimeout> | undefined} */
    let hexDumpTimer;
    let scrollSyncing = false;

function getMode() {
      return document.querySelector('input[name="mode"]:checked').value;
    }

function parseHexPaste(s) {
      let digits = String(s || "").replace(/0x/gi, "").replace(/[^0-9a-f]/gi, "");
      if (digits.length % 2 !== 0) digits = digits.slice(0, -1);
      /** @type {number[]} */
      const bytes = [];
      for (let i = 0; i + 1 < digits.length; i += 2)
        bytes.push(parseInt(digits.slice(i, i + 2), 16));
      return Uint8Array.from(bytes);
    }

/** @param {HTMLTextAreaElement} el */
    function normalizeInput(el) {
      if (getMode() === "hex") return parseHexPaste(el.value);
      const enc = new TextEncoder();
      return enc.encode(String(el.value || ""));
    }

function asciiDot(b) {
      return b >= 32 && b < 127 ? String.fromCharCode(b) : ".";
    }

/**
     * @param {Uint8Array} u8
     * @param {string} note
     */
    function formatDumpPlain(u8, note) {
      if (!u8.length) return (note ? `# ${note}\n\n` : "") + "(empty)";
      let lines = note ? `# ${note}\n\n` : "";
      const w = 16;
      for (let off = 0; off < u8.length; off += w) {
        const chunk = u8.subarray(off, off + w);
        const hex = [...chunk].map((b) => b.toString(16).padStart(2, "0"));
        const hl = hex.slice(0, 8).join(" ") + "  " + hex.slice(8).join(" ");
        const asc = [...chunk].map(asciiDot).join("");
        lines += `${off.toString(16).padStart(8, "0")}: ${hl.padEnd(49, " ")}  |${asc}|\n`;
      }
      return lines.trimEnd();
    }

/**
     * @param {Uint8Array} self
     * @param {Uint8Array} other
     * @param {boolean} activeCompare both payloads non-empty — apply diff/gap highlights
     */
    function formatLaneHtml(self, other, activeCompare) {
      const w = 16;
      const maxLen = Math.max(self.length, other.length);
      if (!maxLen) return "(empty)";
      let html = "";
      for (let off = 0; off < maxLen; off += w) {
        /** @type {{ h: string, c: string }[]} */
        const cells = [];
        let ascInner = "";
        for (let i = 0; i < w; i++) {
          const idx = off + i;
          const sb = idx < self.length ? self[idx] : null;
          const ob = idx < other.length ? other[idx] : null;
          let c = "";
          if (activeCompare) {
            if (sb !== null && ob !== null) {
              if (sb !== ob) c = "hl-diff";
            } else if (sb !== null || ob !== null) c = "hl-gap";
          }
          cells.push({
            h: sb === null ? "  " : sb.toString(16).padStart(2, "0"),
            c,
          });
          const ch = sb === null ? " " : asciiDot(sb);
          ascInner += c ? `<span class="${c}">${escapeHtml(ch)}</span>` : escapeHtml(ch);
        }
        const hexSpans = cells.map((cell) =>
          cell.c ? `<span class="${cell.c}">${cell.h}</span>` : cell.h,
        );
        const hx = `${hexSpans.slice(0, 8).join(" ")}  ${hexSpans.slice(8).join(" ")}`;
        html += `${off.toString(16).padStart(8, "0")}: ${hx}  |${ascInner}|\n`;
      }
      return html.trimEnd();
    }

/** @param {string} s */
    function escapeHtml(s) {
      return s
        .replace(/&/g, "&")
        .replace(/</g, "<")
        .replace(/>/g, ">");
    }

/**
     * @param {Uint8Array} a
     * @param {Uint8Array} b
     */
    function formatXorPlain(a, b) {
      const maxLen = Math.max(a.length, b.length);
      if (!maxLen) return "(empty)";
      const w = 16;
      let lines = "";
      for (let off = 0; off < maxLen; off += w) {
        /** @type {string[]} */
        const cells = [];
        for (let i = 0; i < w; i++) {
          const idx = off + i;
          const ab = idx < a.length ? a[idx] : null;
          const bb = idx < b.length ? b[idx] : null;
          if (ab !== null && bb !== null) cells.push((ab ^ bb).toString(16).padStart(2, "0"));
          else cells.push("  ");
        }
        lines += `${cells.slice(0, 8).join(" ")}  ${cells.slice(8).join(" ")}\n`;
      }
      return lines.trimEnd();
    }

/**
     * @param {Uint8Array} a
     * @param {Uint8Array} b
     */
    /**
     * @param {Uint8Array} a
     * @param {Uint8Array} b
     * @param {boolean} activeCompare
     */
    function formatXorHtml(a, b, activeCompare) {
      const maxLen = Math.max(a.length, b.length);
      if (!maxLen) return "(empty)";
      const w = 16;
      let html = "";
      for (let off = 0; off < maxLen; off += w) {
        /** @type {string[]} */
        const parts = [];
        for (let i = 0; i < w; i++) {
          const idx = off + i;
          const ab = idx < a.length ? a[idx] : null;
          const bb = idx < b.length ? b[idx] : null;
          if (ab !== null && bb !== null) {
            let c = "";
            if (activeCompare && ab !== bb) c = "hl-diff";
            const v = (ab ^ bb).toString(16).padStart(2, "0");
            parts.push(c ? `<span class="${c}">${v}</span>` : v);
          } else if (ab === null && bb === null) {
            parts.push("  ");
          } else if (activeCompare) {
            parts.push(`<span class="hl-gap">  </span>`);
          } else {
            parts.push("  ");
          }
        }
        html += `${parts.slice(0, 8).join(" ")}  ${parts.slice(8).join(" ")}\n`;
      }
      return html.trimEnd();
    }

/** @param {Uint8Array} raw @param {{ cap: boolean, dropped: number }} meta */
    function applyCap(raw, meta) {
      if (raw.byteLength <= MAX_BYTES) return raw;
      meta.cap = true;
      meta.dropped += raw.byteLength - MAX_BYTES;
      return raw.slice(0, MAX_BYTES);
    }

function run() {
      const meta = { cap: false, dropped: 0 };
      let u8a = applyCap(normalizeInput(inA), meta);
      let u8b = applyCap(normalizeInput(inB), meta);

if (meta.cap) {
        capWarn.hidden = false;
        capWarn.textContent = `${meta.dropped} trailing byte(s) not shown (cap ${MAX_BYTES} per payload)`;
      } else {
        capWarn.hidden = true;
      }

try {
        const activeCompare = u8a.length > 0 && u8b.length > 0;
        outA.innerHTML = formatLaneHtml(u8a, u8b, activeCompare);
        outB.innerHTML = formatLaneHtml(u8b, u8a, activeCompare);
        outXor.innerHTML = formatXorHtml(u8a, u8b, activeCompare);
      } catch (_) {
        outA.textContent = outB.textContent = outXor.textContent = "(encoding error)";
      }
    }

function schedule() {
      clearTimeout(hexDumpTimer);
      hexDumpTimer = setTimeout(run, 140);
    }

/** @param {HTMLElement} src @param {HTMLElement} dst */
    function syncScroll(src, dst) {
      if (scrollSyncing) return;
      scrollSyncing = true;
      dst.scrollTop = src.scrollTop;
      dst.scrollLeft = src.scrollLeft;
      scrollSyncing = false;
    }

outA.addEventListener("scroll", () => {
      syncScroll(outA, outB);
      syncScroll(outA, outXor);
    });
    outB.addEventListener("scroll", () => {
      syncScroll(outB, outA);
      syncScroll(outB, outXor);
    });
    outXor.addEventListener("scroll", () => {
      syncScroll(outXor, outA);
      syncScroll(outXor, outB);
    });

run();
  </script>
</body>
</html>