When you are debugging binary structures, analyzing network packets, or checking compiled firmware artifacts, a solid Hex Viewer is an essential tool.
But there’s a massive security catch.
Many popular online hex dumpers require you to upload your files to their remote servers. If your binaries contain proprietary code, credentials, embedded API keys, or private salts, you are leaking your secrets to the cloud.
To fix this risk, I wanted a secure, robust alternative that runs completely in a local memory sandbox.
Say hello to the Binary File Hex Viewer on tools.kandz.me.
👉 Use the Live Tool: https://tools.kandz.me/hex-viewer
🧠 How It Works Under the Hood
Unlike traditional cloud converters, this app processes everything client-side. Here is the core architecture that makes it work smoothly and securely in the browser:
1. Zero-Upload Sandbox with FileReader
We completely bypass remote servers by using the browser's native HTML5 FileReader API. When you load a binary file, we execute:
reader.readAsArrayBuffer(file);
This transfers the raw bytes directly into the client's local memory space as a static Uint8Array. No network packets containing your file ever leave your device.
2. Dynamic Endianness Decoding via DataView
Reconstructing multi-byte numbers (like Int32 or Float32) from contiguous bytes is notoriously tricky because different processor architectures store data differently (Little Endian vs. Big Endian).
To solve this, the byte inspector utilizes JavaScript's low-level DataView API. Because we point the view directly at our localized array buffer, we can perform instant endianness flips simply by toggling a boolean argument:
// Little Endian
const littleVal = dataView.getFloat32(offset, true);
// Big Endian
const bigVal = dataView.getFloat32(offset, false);
3. Protecting the DOM with Chunking
Trying to render a 1MB binary file as individual DOM tables will immediately freeze your browser's paint cycles.
To ensure a smooth 60fps experience, the layout operates on a pagination model driven by modern reactivity. Instead of rendering the full array, we calculate a dynamic slice based on a small chunk size (e.g., 512 bytes):
const pageStart = currentPage * pageSize;
const currentChunk = fileBuffer.slice(pageStart, pageStart + pageSize);
This keeps the rendered element tree incredibly small, ensuring instant load times and lightweight touch scrolling on mobile viewports.
🛠️ Give it a spin
Keep your files where they belong—on your own machine. Try the viewer for yourself and see how easy it is to analyze binary layouts:
🔗 https://tools.kandz.me/hex-viewer
Let me know your feedback in the comments, and what primitive types or endian formats you'd like decoded next!
Top comments (0)