Vanilla JavaScript Projects

Project 42, Hardware and performance

Arduino Serial Monitor

Plug in an Arduino or ESP32, pick the port, and read what it prints. Numbers are drawn on a live graph, and you can send commands back.

Main API
Web Serial
Streams
TextDecoderStream
Dependencies
None
Your browser
Checking

Serial monitor

Not connected

How it works

  1. Open the portYou choose the port in the browser's picker. The page opens it at the baud rate your board uses.
  2. Read linesBytes flow through a TextDecoderStream and a small TransformStream that splits on new lines.
  3. PlotEach line is checked for numbers. If it has any, they are added to the chart as separate colored lines.
const port = await navigator.serial.requestPort();
await port.open({ baudRate: 115200 });

const lines = port.readable
  .pipeThrough(new TextDecoderStream())
  .pipeThrough(new TransformStream({
    transform(chunk, ctl) { (this.buf = (this.buf ?? "") + chunk).split("\n").slice(0, -1).forEach((l) => ctl.enqueue(l)); this.buf = this.buf.slice(this.buf.lastIndexOf("\n") + 1); },
  }));
for await (const line of lines) show(line);

const writer = port.writable.getWriter();
await writer.write(new TextEncoder().encode("LED ON\n"));