AVR8js-mem for LiaScript: Memory Register Visualization for AVR Microcontrollers

The AVR8js template lets you run Arduino C++ code in the browser with Wokwi components. AVR8js-mem by Fabian Bär extends it with a key teaching feature: real-time memory register visualization. After each simulation cycle, you can display the value of any memory register in binary, hexadecimal, unsigned integer, or custom format — and even plot the values over time as a live diagram.

Quick Start

<!--
import: https://raw.githubusercontent.com/fjangfaragesh/AVR8js-mem/main/README.lia.md
-->

The LiaScript import uses README.lia.md, not README.md.

Memory visualization elements

Place <memout-element> custom elements in your HTML to display register values live during simulation:

<memout-element type="bin"    address="0x25" label="PORTB (binary)"></memout-element>
<memout-element type="hex"    address="0x25" label="PORTB (hex)"></memout-element>
<memout-element type="uint"   address="0x25" label="PORTB (decimal)"></memout-element>
<memout-element type="custom" address="0x25" label="PORTB (custom)" bits="76543210"></memout-element>

For time-series diagrams, use diagram or diagram2:

<memout-element type="diagram"  address="0x25" label="PORTB over time"></memout-element>
<memout-element type="diagram2" address="0x25" label="PORTB (alt)"></memout-element>

The address attribute takes an AVR I/O register address in hex. Common addresses: 0x25 = PORTB, 0x2B = PORTD, 0x26 = DDRB, 0x2C = DDRD.

Running a simulation

Use compileAndRun to start the simulation from a script block:

compileAndRun(
  codeString,   // The Arduino C++ source code (string)
  divId,        // DOM element ID containing the Wokwi components
  cyclesPerFrame,
  frameDelay,
  numCycles,
  callback      // Optional: called after simulation ends
)

Full Example: LED Blink with Register Display

<!--
import: https://raw.githubusercontent.com/fjangfaragesh/AVR8js-mem/main/README.lia.md
-->

# AVR Memory Visualization

## Blinking LED with live PORTB readout

``` cpp    Arduino.cpp
void setup() {
  DDRB = 0xFF;   // Set all PORTB pins as output
}

void loop() {
  PORTB = 0xFF;  // All LEDs on
  delay(500);
  PORTB = 0x00;  // All LEDs off
  delay(500);
}

PORTB (address 0x25) live values:

Try it live — start the simulation and watch the register values update in real time:







  







---

## Example: Shift register pattern

```markdown
<!--
import: https://raw.githubusercontent.com/fjangfaragesh/AVR8js-mem/main/README.lia.md
-->

# Binary Counter

``` cpp Arduino.cpp
uint8_t counter = 0;

void setup() {
  DDRB = 0xFF;  // all PORTB as output
}

void loop() {
  PORTB = counter;
  counter++;
  delay(200);
}

Counter register state:

Try it live — 8 LEDs count in binary while the register display shows each bit:







  







---

## Full Template Demo










---

## Use Cases

**Computer architecture education** — Show students how bit manipulation commands change register values in real time.

**Embedded systems courses** — Correlate C++ code with hardware output (LEDs) and register state simultaneously.

**Binary/hex conversion exercises** — Simulate a value and let students verify the binary, hex, and decimal representations side by side.

**Signal timing analysis** — Use `diagram` mode to visualize the timing pattern of blinking or PWM signals over simulation time.

---

## Technical Facts

| | |
|---|---|
| **Runs in browser** | Yes — WebAssembly (AVR8js) |
| **Server required** | No |
| **Extends** | LiaTemplates/AVR8js |
| **Key element** | `<memout-element>` custom HTML element |
| **Display types** | `bin`, `hex`, `uint`, `custom`, `diagram`, `diagram2` |
| **Components** | Wokwi web components (LEDs, buttons, etc.) |
| **Import file** | `README.lia.md` (not `README.md`) |
| **Author** | fjangfaragesh (Fabian Bär) |
| **License** | CC0-1.0 |
| **Status** | Older project (~4 years), stable |

---

## Try It







 
  
  
 
  
  
 


Try in LiaScript








 
  
  
 
  
  
 


Open in LiveEditor








 
  
  
 
  
  
 


View on GitHub


---

## Related Templates

- [**AVR8js**](/blog/avr8js-arduino-simulation-in-liascript) — base Arduino/AVR8 simulation template
- [**ChemmacrosJS**](/blog/chemmacrosjs-chemistry-macros-in-liascript) — chemistry notation for STEM courses
- [**custom-code-imports**](/blog/custom-code-imports-external-files-in-liascript) — load external code files into executable blocks
- [**lia-coordinate**](/blog/lia-coordinate-interactive-math-plots-in-liascript) — interactive math diagrams for STEM