ESP32 Web Serial API: Live Sensor Data in Next.js
This article may contain affiliate links. Its content is not affected by advertising.
In short
The Web Serial API requires a secure context and a user gesture to start a connection, so you must be on localhost or HTTPS and open the port from something like a button click.
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.
Frequently asked questions
Q1Which browsers does it work in?
Chrome and Edge only. It does not work in Safari. It is a poor fit for anything where you cannot constrain which browser the audience uses.
Q2Can it connect automatically when the page loads?
No. Web Serial requires port selection to originate from a user gesture. Put a connect button on the page and open the port from that click.
Q3What should I decide on the ESP32 side first?
The baud rate and the wire format. Fixing CSV or JSON up front keeps the parsing on the receiving side simple. Changing it later means changing both sides.
What this article is based on
- Markdown file
Every claim in this article comes from the records above. The repositories we operate are private so we cannot link to them, but which file, which lines, and at which commit we read them is recorded for every article. Nothing here is written from guesswork.