React Memory Map
The address map, drawn the way datasheets draw it: high addresses on top, region blocks proportional to size (with a clamp so a 64 KB ROM stays readable beside a 1 GB DDR window), hatched unmapped gaps, and grouped hex addresses (0x4000_0000). A synced table lists base/end/size and attribute chips — hover either side and both highlight, like the Register Map. Declare only your regions; gaps are computed, and overlapping regions are detected automatically and flagged in red with an alert.
AXM-330 — System Address Map
0xBFFF_FFFF
DDR1 GB
unmapped1022.9 MB
DMA_CTRL64 KB
Peripherals1 MB
unmapped511.5 MB
SRAM512 KB
unmapped511.9 MB
OTP16 KB
Boot ROM64 KB
0x0000_0000
| Region | Base | End | Size | Attr |
|---|---|---|---|---|
| DDR | 0x8000_0000 | 0xBFFF_FFFF | 1 GB | RWX |
| DMA_CTRL | 0x4010_0000 | 0x4010_FFFF | 64 KB | Device |
| Peripherals | 0x4000_0000 | 0x400F_FFFF | 1 MB | Device |
| SRAM | 0x2000_0000 | 0x2007_FFFF | 512 KB | RWX |
| OTP | 0x0001_0000 | 0x0001_3FFF | 16 KB | RO |
| Boot ROM | 0x0000_0000 | 0x0000_FFFF | 64 KB | RX |
Hover a block or a table row — both highlight. Hatched bands are unmapped; overlapping regions would flag in red.
Installation
npx shadcn@latest add memory-map.json
Usage
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| regions | MemRegion[] | — | { name, base, size, attr? } — any order |
| title | string | — | Header label |
| addressBits | 32 \ | 64 | 32 |
| height | number | 380 | Visual column height in px |
formatHex and formatSize are exported for reuse in your own tables.