AVR8js for LiaScript: Simulate Arduino and AVR Microcontrollers in the Browser

Teaching embedded systems and Arduino programming typically requires physical hardware: boards, LEDs, cables, and a lab environment. The AVR8js template removes that requirement entirely.

Built on the AVR8js microcontroller emulator and Wokwi web components, it allows you to write Arduino sketches in your LiaScript course and simulate them in the browser — complete with virtual LEDs, push buttons, LCD displays, NeoPixels, servos, sensors, and serial output.

Note: Sketch code is compiled by the Wokwi build service. An internet connection is required for compilation.

Quick Start

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

Three macros: @AVR8js.sketch for simple sketches, @AVR8js.project for multi-file projects, and @AVR8js.asm for AVR assembly.

Macro 1: @AVR8js.sketch — Run an Arduino Sketch

@AVR8js.sketch is the simplest macro. Attach it to a code block containing a complete sketch.ino Arduino program. The code is compiled and run in a simulated Arduino Uno environment.

```c    sketch.ino
void setup() {
  Serial.begin(9600);
}

void loop() {
  for (int i = 1; i <= 5; i++) {
    Serial.print("Count: ");
    Serial.println(i);
    delay(500);
  }
  Serial.println("---");
  delay(1000);
}
```
@AVR8js.sketch

Try it live — the sketch compiles in the browser and prints to the serial monitor:

Adding Wokwi Components

Hardware components are added as HTML elements in the same section as the code block. Components are automatically wired to the simulated Arduino by pin number.

<div id="led-example">
  <wokwi-led pin="13" color="red"></wokwi-led>
  <wokwi-pushbutton pin="2" color="green"></wokwi-pushbutton>
</div>

```c    sketch.ino
const int ledPin = 13;
const int btnPin = 2;
bool ledState = false;

void setup() {
  pinMode(ledPin, OUTPUT);
  pinMode(btnPin, INPUT_PULLUP);
  Serial.begin(9600);
}

void loop() {
  if (digitalRead(btnPin) == LOW) {
    ledState = !ledState;
    digitalWrite(ledPin, ledState ? HIGH : LOW);
    Serial.println(ledState ? "LED ON" : "LED OFF");
    delay(200);
  }
}
```
@AVR8js.sketch(led-example)

The id of the containing <div> is passed to @AVR8js.sketch(id) to connect the components to the simulation.

Try it live — click the green button to toggle the red LED:

Macro 2: @AVR8js.project — Multi-File Projects

@AVR8js.project(elementId, file1, file2, ...) supports multiple files. One file must be sketch.ino; additional files can include header files, libraries, and configuration.

```c    sketch.ino
#include "config.h"

void setup() {
  Serial.begin(9600);
  pinMode(LED_PIN, OUTPUT);
}

void loop() {
  for (int i = 0; i < BLINK_COUNT; i++) {
    digitalWrite(LED_PIN, HIGH);
    delay(BLINK_DELAY);
    digitalWrite(LED_PIN, LOW);
    delay(BLINK_DELAY);
  }
  delay(1000);
}
```
```c    config.h
#define LED_PIN 13
#define BLINK_COUNT 3
#define BLINK_DELAY 200
```
@AVR8js.project( ,sketch.ino,config.h)

Note: the first argument to @AVR8js.project is the element id (empty means no components), followed by the filenames.

Macro 3: @AVR8js.asm — AVR Assembly

For low-level embedded programming courses, @AVR8js.asm runs AVR assembly code directly in the simulator.

```asm
.include "m328pdef.inc"

.org 0x0000
  rjmp main

main:
  ldi r16, 0xFF
  out DDRB, r16    ; PORTB = output

loop:
  sbi PORTB, 5     ; LED on
  rcall delay
  cbi PORTB, 5     ; LED off
  rcall delay
  rjmp loop

delay:
  ; Simple software delay
  ldi r18, 200
d1: ldi r17, 200
d2: ldi r16, 200
d3: dec r16
    brne d3
    dec r17
    brne d2
    dec r18
    brne d1
  ret
```
@AVR8js.asm

Available Wokwi Components

Full Template Demo

Use Cases

Arduino introduction courses — Teach digital I/O, analogWrite, PWM, and interrupts without requiring students to own hardware. The simulation includes the Arduino Uno register layout and timing.

TVET and vocational training — Embed working circuit simulations in training materials. Students experiment with components and read serial output without a lab.

Electronics prototyping — Demonstrate common Arduino circuits — LED blink, button debounce, PWM fading, sensor reading — as interactive examples that students can modify.

AVR assembly programming — Teach register-level programming, port manipulation, and hardware timers using the @AVR8js.asm macro.

Hybrid courses — Students who do not have hardware can follow the simulated course; those with physical Arduino boards can use the same code on real hardware.

Technical Facts

Try It

Related Templates

• p5js — visual and interactive simulations in the browser
• WebDev — HTML/CSS/JS for web-facing electronics projects
• CodeRunner — server-side execution for C, C++, and other embedded-adjacent languages