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
| 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
Usage
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.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.