Hex Viewer

Stable

Futuristic binary data, memory dump, and byte inspector console with synchronized bidirectional ASCII decoding, live pattern search, and offset jumping.

Installation

$pnpm add @siberui/react

Import

tsx
import { HexViewer } from '@siberui/react';

Basic Memory Hex Dump

Renders raw text or Uint8Array bytes across a 3-column military layout (Memory Offset Address, Hex Matrix, and Decoded ASCII). Hovering any byte triggers synchronized neon highlighting and bottom HUD telemetry inspection.

SYSTEM_MEMORY // STACK_01[50 BYTES / 4 LINES]
OFFSET
0123456789ABCDEF
DECODED ASCII
00400000
534942455255495F42494E4152595F50
SIBERUI_BINARY_P
00400010
41594C4F41445F3078374634415F454E
AYLOAD_0x7F4A_EN
00400020
435259505445445F4845414445525F53
CRYPTED_HEADER_S
00400030
5953
YS
HOVER OR CLICK A BYTE TO INSPECT RAW VALUESENCODING: UTF-8 / RAW HEX
tsx
<HexViewer
  data="SIBERUI_BINARY_PAYLOAD_0x7F4A_ENCRYPTED_HEADER_SYS"
  baseOffset={0x00400000}
  signal="cyan"
  maxHeight="280px"
  title="SYSTEM_MEMORY // STACK_01"
/>

Byte Search & Pattern Matching

Highlight matching hex bytes and ASCII substrings in realtime using the searchQuery prop or the built-in toolbar search box.

PACKET_INSPECTION // MATCH_FILTER[97 BYTES / 7 LINES]
OFFSET
0123456789ABCDEF
DECODED ASCII
00000000
53494245525F55495F5041594C4F4144
SIBER_UI_PAYLOAD
00000010
5F56322E305F5155414E54554D5F4C41
_V2.0_QUANTUM_LA
00000020
54544943455F4349504845525F454E41
TTICE_CIPHER_ENA
00000030
424C45445F4B45593D30784445414442
BLED_KEY=0xDEADB
00000040
454546344639415F5345435552495459
EEF4F9A_SECURITY
00000050
5F4F564552524944455F4752414E5445
_OVERRIDE_GRANTE
00000060
44
D
HOVER OR CLICK A BYTE TO INSPECT RAW VALUESENCODING: UTF-8 / RAW HEX
tsx
<HexViewer
  data={samplePayload}
  searchQuery="QUANTUM"
  signal="amber"
  maxHeight="260px"
  title="PACKET_INSPECTION // MATCH_FILTER"
/>

Signal Accent Themes

Select an active signal color tone using the signal prop to match your console theme.

THREAT_ANALYSIS // QUARANTINE[46 BYTES / 3 LINES]
OFFSET
0123456789ABCDEF
DECODED ASCII
00000000
4D414C574152455F5349474E41545552
MALWARE_SIGNATUR
00000010
455F484153485F3078393946465F524F
E_HASH_0x99FF_RO
00000020
4F544B49545F4445544543544544
OTKIT_DETECTED
HOVER OR CLICK A BYTE TO INSPECT RAW VALUESENCODING: UTF-8 / RAW HEX
tsx
<HexViewer
  data="MALWARE_SIGNATURE_HASH_0x99FF_ROOTKIT_DETECTED"
  signal="rose"
  maxHeight="240px"
  title="THREAT_ANALYSIS // QUARANTINE"
/>

Tactical Binary Forensics Inspector

Full forensics dashboard embedded inside a ChamferCard chassis with jump-to-address navigation and clipboard copy actions.

FORENSICS // DUMP_04

CORE MEMORY FORENSICS

BUFFER_SYNCED

Live hexadecimal dump of decrypted kernel instruction space.

KERNEL // RAM_SNAPSHOT[66 BYTES / 5 LINES]
OFFSET
0123456789ABCDEF
DECODED ASCII
00800000
4B45524E454C5F50414E49435F44554D
KERNEL_PANIC_DUM
00800010
505F3078303031415F5649525455414C
P_0x001A_VIRTUAL
00800020
5F414444524553535F4D415050494E47
_ADDRESS_MAPPING
00800030
5F504147455F4641554C545F42595041
_PAGE_FAULT_BYPA
00800040
5353
SS
HOVER OR CLICK A BYTE TO INSPECT RAW VALUESENCODING: UTF-8 / RAW HEX
tsx
<ChamferCard signal="green" glow tag="FORENSICS // DUMP_04" statusDot="green" className="w-full">
  <ChamferCardHeader>
    <div className="flex items-center justify-between">
      <div className="flex items-center gap-2">
        <Binary className="h-4 w-4 text-emerald-400" />
        <ChamferCardTitle>CORE MEMORY FORENSICS</ChamferCardTitle>
      </div>
      <Badge variant="glass" dot dotColor="green">BUFFER_SYNCED</Badge>
    </div>
    <ChamferCardDescription>
      Live hexadecimal dump of decrypted kernel instruction space.
    </ChamferCardDescription>
  </ChamferCardHeader>
  <ChamferCardContent>
    <HexViewer
      data="KERNEL_PANIC_DUMP_0x001A_VIRTUAL_ADDRESS_MAPPING_PAGE_FAULT_BYPASS"
      baseOffset={0x00800000}
      signal="green"
      maxHeight="260px"
      title="KERNEL // RAM_SNAPSHOT"
    />
  </ChamferCardContent>
</ChamferCard>

API Reference

PROPERTIES (11)← swipe to inspect →
PropertyDescriptionTypeDefault
data
Raw binary data as a Uint8Array, byte array, or UTF-8 string.
Uint8Array | number[] | string
-
bytesPerRow
Number of bytes rendered per line (8, 16, or 32).
8 | 16 | 32
16
baseOffset
Starting base memory address offset.
number
0
signal
Neon signal accent theme.
"cyan" | "violet" | "green" | "amber" | "rose"
"cyan"
searchQuery
Search string to highlight across hex and ASCII columns.
string
-
showToolbar
Displays the top action toolbar (search, copy, jump to offset).
boolean
true
showInspector
Displays the bottom live telemetry inspection bar.
boolean
true
showAscii
Displays the right-side decoded ASCII column.
boolean
true
showOffset
Displays the left-side memory offset address column.
boolean
true
onByteSelect
Callback fired when a byte is clicked or selected via keyboard.
(offset: number, byte: number) => void
-
onByteHover
Callback fired when a byte is hovered.
(offset: number | null, byte: number | null) => void
-

Accessibility & Keyboard Navigation

  • Keyboard Focus: The byte grid is keyboard focusable via tabIndex={0} and each byte cell features semantic role="gridcell" attributes.
  • Clipboard Actions: The COPY HEX and COPY ASCII toolbar buttons copy formatted strings to the clipboard with visual confirmation feedback.