Khanfar-Hex-Viewer

A dual-panel hex editor + file comparator with search, highlighting, byte/word/dword decoding, and a visualization window for byte heatmaps and diffs. This guide is written for new users and explains every button and control.

1) What this app does

  • Open and view one or two binary files in a classic hex + ASCII layout (16 bytes/line).
  • Edit bytes directly in Hex or ASCII mode (when Edit Mode is ON) and save the modified file.
  • Compare File 1 vs File 2 and highlight byte-level differences. Navigate differences with Prev/Next.
  • Search for hex sequences or text strings, and Highlight All matches using Regex/Hex/Text.
  • Inspect values of the selected byte: bit pattern, signed/unsigned byte, 16‑bit word, 32‑bit dword.
  • Visualize the file(s) as byte-value heatmaps and difference maps, and export images.

App name in code: Khanfar-Hex-Viewer. Dark theme by default.

2) Layout overview

Top Buttons (File controls + Compare + Navigation + Visualize + Edit + Info)
Search + Highlight Bar

Left Info Panel (file size, offset, byte/word/dword decoding)
Center Main View: Two synchronized hex panels (File 1 left, File 2 right)
Bottom Status Bar (ready / edit mode / diff count / selected offset)

Both hex panels scroll together. Click inside a panel to make it the “active panel” for search/highlight.

3) Quick Start (Most common workflow)

  1. Click Open File 1 and select a file.
  2. (Optional) Click Open File 2 and select a second file.
  3. Click COMPARE to highlight differences.
  4. Use < Prev / Next > to jump between diffs.
  5. Use Goto to jump to a hex offset (example: 0x1A2B).
  6. Use the Search bar to find bytes/strings; use Highlight to mark all matches.
  7. Click 📊 Visualize for a heatmap/diff map and export PNG if needed.
  8. To edit: turn Edit Off → Edit On, make changes, then Save.

4) Top Buttons — What each one does

ButtonWhereWhat it doesNotes
Open File 1 Top Left Loads a binary file into the left panel (File 1). If file is >5MB, app warns you before loading.
Save (File 1) Top Left Saves the current File 1 contents to disk. Use after edits.
Open File 2 Top Right Loads a binary file into the right panel (File 2). Comparison requires both files loaded.
Save (File 2) Top Right Saves the current File 2 contents to disk. Use after edits.
COMPARE Center Compares File 1 and File 2 byte‑by‑byte and highlights differences. Also builds a list of diff offsets for Prev/Next navigation.
< Prev Center Jump to the previous difference. Only works after running Compare.
Next > Center Jump to the next difference. Highlights the byte in both panels.
Goto Center Prompts for a hex offset and scrolls both panels to that location. Accepts formats like 0x10 or 10 (hex).
📊 Visualize Center Opens the Visualization Window to view byte heatmaps and diff maps. If you selected a text range, it can visualize only that region.
Edit Off / Edit On Center Toggles edit mode. When ON, you can type in the hex or ASCII region to modify bytes. When OFF, typing is blocked to prevent accidental changes.
ℹ Info Center Opens an external help website in your browser. URL is configured inside the app.

5) Search & Highlight controls

Search

  • Search entry: type either hex bytes (AA BB CC) or plain text.
  • Choose mode: Hex or Text.
  • Press Enter or click Find Next.
  • The app starts searching from the current cursor position; if it reaches EOF, it can restart from 0.

Highlight

  • Highlight entry: pattern to mark across the file.
  • Modes:
    • Regex: advanced (pattern is applied to the raw byte content).
    • Hex: highlight a byte sequence.
    • Text: highlight a UTF‑8 string.
  • Highlight All marks every match in the active panel.
  • Clear Highlights removes all highlight marks.

Tip: Click inside the left or right hex pane to set it as the active panel. Search/highlight runs on that panel’s file.

6) Editing bytes safely

  1. Click Edit Off → turns into Edit On.
  2. Click where you want to edit:
    • Hex region (middle): type hex digits 0-9 A-F.
    • ASCII region (right): type printable characters.
  3. The app updates both the hex + ASCII representations automatically.
  4. Save with Save for the corresponding file.

If Edit Mode is OFF, keystrokes are blocked (this prevents accidental modifications).

7) Info Panel (left) — what values mean

  • File Size: shown in decimal and hex.
  • Offset: current cursor offset (decimal + hex).
  • Value: ASCII character (or .) and the 8-bit binary pattern.
  • Byte: hex value, unsigned (0–255), and signed (-128–127).
  • Word (16-bit): reads 2 bytes starting at the offset (little-endian).
  • DWord (32-bit): reads 4 bytes starting at the offset (little-endian).

The info panel updates when you move the cursor or select a byte.

8) Status Bar messages

  • Ready: no ongoing operation.
  • File Loaded: a file was successfully opened.
  • Comparing…: comparison is running.
  • Differences: N: how many offsets differ.
  • Edit Mode: On/Off: current edit state.

9) Visualization Window (📊 Visualize)

The Visualization Window converts file bytes into images so you can quickly see patterns (entropy, repeated regions, aligned structures) and differences.

Visualization Modes

ModeWhat you seeWhen to use
File 1Heatmap of byte values (0–255) for File 1.Spot blocks, compressed areas, headers.
File 2Heatmap of byte values for File 2.Same as File 1 but for the right file.
DifferenceRed mask: red pixels where bytes differ.Quickly see where changes happen.
Side by SideFile 1 heatmap, File 2 heatmap, and diff mask together.Compare structure + exact diff regions.
Table GridSpreadsheet-like hex table with red cells for differences.Best for small selected regions (≤20,000 bytes).

Controls

  • Width: controls how many bytes per row (16–1024). Smaller width = taller image.
  • Colormap: color palette for heatmaps.
  • Export Image: save current view as PNG.
  • Refresh: force redraw (useful after resizing).
  • Diff Thickness: makes tiny diffs more visible by “thickening” them (0–6).
  • Show Only Differences (Table Grid): show only rows that contain differences.

Click to Jump

Clicking a cell in the plot shows the exact byte offset and jumps the main editor to that location.

10) Tips & troubleshooting

  • No diff navigation? Run COMPARE first.
  • Search not working? Make sure the active panel contains a loaded file and your pattern is valid.
  • Hex search format: AA BB CC (spaces optional). Don’t include 0x between bytes.
  • Regex highlight: is applied to raw bytes; invalid regex will show an error.
  • Large files: loading & visualization may be slower. Consider selecting a smaller range before visualizing.
  • Editing: Only printable ASCII is allowed in the ASCII area; only hex digits in the hex area.