hexplore

hexplore is the hex-viewer component extracted from a larger binary analysis tool. Drop a file on the embed above to inspect it in the browser — offset navigation, ASCII panel, and basic struct annotation.

origin

I built a full binary analysis suite over about six months. The hex viewer was the most self-contained piece and the most useful in isolation, so I spun it out as a standalone library and a browser embed.

features

• Offset navigation with keyboard (g to go-to, G for end)
• Highlights null bytes, printable ASCII, and high bytes in different colors
• Struct overlay — define a layout in a simple schema and it draws field boundaries and labels
• Syncs selection between hex and ASCII panels

the browser port

The TUI version is Zig. The browser version compiles the same core to WASM and replaces the terminal rendering layer with a Canvas 2D context. The struct parser and the offset-to-screen mapping are identical — only the draw calls change.

// Shared core — same in TUI and WASM builds
pub const HexView = struct {
    data:   []const u8,
    offset: usize,
    cols:   u8 = 16,

    pub fn visibleRows(self: HexView, height: usize) usize {
        return @min(height, (self.data.len - self.offset + self.cols - 1) / self.cols);
    }
};

embedding in your own page

The embed is a plain iframe pointing at a static HTML+WASM bundle. Pass ?file=<url> to preload a file:

<iframe src="https://yourhandle.dev/demos/hexplore/?file=/samples/elf64"
        width="100%" height="340"></iframe>