← Pablobot

Hex dump

Roughly xxd-like: offset, hex nybbles grouped, ASCII column. Paste UTF-8, hex digits, or Base64 (standard / URL-safe). Compare two buffers side by side with XOR and mismatch highlights. Runs fully in-browser.

UTF-8 text Decode hex (pairs / whitespace) Decode Base64 (standard / URL-safe)

Payload A

Payload B

</p>
      <button type="button" class="btn" id="update">Rebuild dump</button>
      <button type="button" class="btn" id="copy" data-analytics-action="copy_result">Copy dumps</button>
      <p class="hint">Input is capped around <strong>256 KiB</strong> per payload for responsiveness. Select dump lines to copy, or use <strong>Copy dumps</strong> for the full export. Prefer <a href="../base64/" style="color:var(--accent)">Base64</a> for encode/decode round-trips.</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>
      <p style="margin-top:.5rem">Also try: round-trip with <a href="../base64/">Base64</a>, fingerprint payloads in <a href="../hash-generator/">Hash generator</a>, or mint IDs in <a href="../uuid-generator/">UUID generator</a>.</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 {string} s */
    function normalizeB64Paste(s) {
      return String(s || "").trim().replace(/\s/g, "");
    }

/** @param {string} b64 */
    function padStdB64(b64) {
      let out = b64.replace(/-/g, "+").replace(/_/g, "/");
      while (out.length % 4) out += "=";
      return out;
    }

/** @param {string} s */
    function parseBase64Paste(s) {
      const raw = normalizeB64Paste(s);
      if (!raw) return new Uint8Array(0);
      const padded = padStdB64(raw);
      if (!/^[A-Za-z0-9+/]*={0,2}$/.test(padded)) {
        throw new Error("Invalid Base64: check alphabet and padding");
      }
      const binary = atob(padded);
      const bytes = new Uint8Array(binary.length);
      for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
      return bytes;
    }

/** @param {HTMLTextAreaElement} el */
    function normalizeInput(el) {
      const mode = getMode();
      if (mode === "hex") return parseHexPaste(el.value);
      if (mode === "base64") return parseBase64Paste(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 (e) {
        const msg = e instanceof Error ? e.message : "(encoding error)";
        outA.textContent = outB.textContent = outXor.textContent = msg;
      }
    }

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>
  <script src="/assets/analytics-registry.js" defer></script>
  <script src="/assets/ga4.js" defer></script>
</body>
</html>