Chris Greening Turns to WebSerial to Build a "Better Serial Plotter" for Arduinos and More
Device-agnostic visualizer includes some handy features, and runs entirely in-browser.
Edinburgh-based maker Chris Greening has developed a "better serial plotter," offering a richer interface for those who find the serial plotter built in to the Arduino IDE too limited — and running entirely in-browser thanks to the WebSerial application programming interface (API).
"I've built a web-based serial plotter that makes visualizing data from Arduino, [Espressif] ESP32, and other microcontroller projects much easier," Greening explains of the project. "No drivers, no installations — just open your browser and start plotting! It should work the same was as the Arduino Serial Plotter, so you can just output your data in a comma separated list and it will plot it on the graph."
The ability to view sensor data in a real-time plot is key to both fault-finding and interpretation — but while the Arduino IDE's capabilities on this front have improved, its built-in functionality is still somewhat limited. That's what Greening's alternative seeks to solve — by connecting a web browser to the microcontroller over a WebSerial link, supported in some but not all Chrome-based browsers including Opera and Edge.
Written Typescript with Vite and React plus Tailwind CSS, and with the assistance of the Anthropic Claude large language model, the data visualizer includes real-time multi-series plotting, pan and zoom functionality, automatically-updated real-time histograms and statistics including minimum, maximum, mean, median, and standard deviation, color customization, a bidirectional serial console, and a responsive design suitable for large and small format devices.
The source code for the project is available on GitHub under the reciprocal GNU General Public License 3, along with a link to a live version with an integrated signal generator for experimentation without hardware; additional information is available in Greening's Substack post.. "Ideas, issues, and pull requests are welcome," Greening writes. "If you're testing with specific hardware, please share device details and sample output so we can improve defaults and parsing."