WebSerial for LiaScript: Connect Your Code Editor to Real Hardware

Bridging the gap between learning materials and real hardware is one of the hardest challenges in TVET and embedded systems education. The WebSerial template connects the LiaScript code editor directly to a microcontroller via Chrome’s Web Serial API.

Write Python code in the slide, click run, and the code is sent to a connected MicroPython device (ESP32, Raspberry Pi Pico, BBC micro:bit). Output appears in the integrated terminal, and the terminal accepts interactive input.

Quick Start

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

Requirement: Chrome or Edge browser (Web Serial API is not available in Firefox or Safari).

Macro: @WebSerial (end-of-block macro)

Attach @WebSerial at the end of any code block to add a serial connection and terminal.

```python
for i in range(10):
    print("Hello World", i)
```
@WebSerial

When the student clicks Run:

1. Chrome prompts to select a serial port (e.g. /dev/ttyUSB0, COM3)
2. The code is sent to the device in MicroPython paste mode (Ctrl-E / Ctrl-D)
3. Output streams back into the terminal
4. The terminal accepts interactive input (typed lines are sent to the REPL)

How It Works

The template uses MicroPython’s paste mode (REPL protocol):

1. Send Ctrl-C twice to interrupt any running code
2. Send Ctrl-E to enter paste mode
3. Stream all code lines with CR+LF
4. Send Ctrl-D to execute
5. Read output until the REPL prompt (>>>) appears

The baud rate is fixed at 115200 — the default for most MicroPython boards.

Example: Blink LED

```python
from machine import Pin
from time import sleep

led = Pin(2, Pin.OUT)  # GPIO2 on ESP32

for _ in range(10):
    led.value(1)
    sleep(0.5)
    led.value(0)
    sleep(0.5)

print("Done blinking!")
```
@WebSerial

Note: Clicking Run requires a connected MicroPython device and Chrome/Edge. The live editor below lets you explore and edit the code — connect hardware to run it.

Example: Read Temperature Sensor

```python
from machine import ADC, Pin
import time

adc = ADC(Pin(34))
adc.atten(ADC.ATTN_11DB)

for i in range(5):
    raw = adc.read()
    voltage = raw / 4095 * 3.3
    print(f"Reading {i}: raw={raw}, voltage={voltage:.2f}V")
    time.sleep(1)
```
@WebSerial

Cleanup and Reconnect

The terminal includes a stop button that:

• Cancels the active read loop
• Closes the serial port cleanly
• Resets all connection variables

Clicking run again will prompt for port selection anew.

Full Template Demo

Use Cases

TVET embedded systems — Write and test MicroPython programs for real microcontrollers directly from learning materials, removing the need for separate IDEs.

IoT workshops — Live-code ESP32 or Pi Pico projects during class, with output visible in the slide terminal.

Physical computing courses — Control motors, sensors, displays, and LEDs with code written in the course and executed on the board immediately.

Lab experiments — Read sensor values in real time during hardware labs, with code pre-provided as editable LiaScript blocks.

Technical Facts

Try It

Related Templates

• AVR8js — simulate AVR/Arduino in the browser (no hardware needed)
• MicroBit-Simulator — BBC micro:bit simulation with MicroPython
• CodeRunner — server-side code execution for 20+ languages
• Pyodide — Python in the browser via WebAssembly