What we built
An ESP32 plugged into a PC over USB, with a web app (Next.js) connecting directly to the serial port through the Web Serial API and showing the incoming sensor values as a live dashboard of graphs and numbers.
No dedicated application to install — open the browser and the data is there.
Why the web
- Nothing to install — opening a URL is all it takes. Easy to show someone, easy to hand out
- Freedom in the UI — everything React already gives you (charts, layout) applies directly, so you can build further than an off-the-shelf GUI tool
- The Web Serial API connects the browser straight to a USB serial port, closing the distance between a microcontroller and the web
Constraints
Web Serial has three constraints you cannot ignore. Check them before you start designing.
| Constraint | Detail |
|---|---|
| Browsers | Chrome and Edge only. Not Safari |
| Secure context | Only works on localhost or HTTPS |
| Connection origin | The port must be opened from a user gesture (no auto-connect) |
The third one shapes the design. You cannot have "opens the page and connects by itself", so the UI is built around a connect button.
Decide these on the ESP32 side first
Baud rate and wire format (CSV or JSON). Starting without fixing them means rewriting the parsing on the receiving side repeatedly.
Where this setup fits
It works well when you are touching both hardware and web. If you want to concentrate on experiments on the microcontroller side, being able to push the display to an install-free browser is a different level of efficiency.
Conversely, because it is limited to Chrome and Edge, it is a poor fit when you cannot choose the audience's browser. In that case a native application, or having the microcontroller push over HTTP, is the more honest option.
Originally published at tech.rebounder.jp.
Top comments (0)