iotdata, by Data Frontieriot
data
Block coding

Uploading the program to the board over USB, straight from the browser

How the browser talks to the board through Web Serial, what the ESP32 needs before it can receive the program, how to get the code onto the Arduino Nano with the Arduino IDE, and the most common cable, driver and busy-port problems.

Data Frontier Engineering· Published October 22, 2026

The block coding IDE runs in the browser and can still write the program to a board plugged in by USB cable. What makes this possible is Web Serial, a feature of the desktop versions of Google Chrome and Microsoft Edge that lets a web page talk to a serial port, with the user's permission.

How the browser talks to the board

  1. You click Connect board in the IDE.
  2. The browser opens its own window listing the available serial ports. The page can't see any port until you choose one; that's a browser security rule.
  3. You pick the board's port, and the IDE talks to it until you disconnect or close the tab.

Firefox and Safari don't support Web Serial, and it isn't available on iPad or iPhone. In those cases, the IDE still builds the program and offers the code as a download.

ESP32: MicroPython first

The ESP32 ships from the factory without MicroPython. Before the first upload, you need to flash the MicroPython firmware onto the board, just once. The most common ways:

  • From the MicroPython website: download the firmware for your board from micropython.org and flash it with the esptool utility.
  • With Thonny: the Thonny editor has a MicroPython installer for the ESP32 in its interpreter settings.

With MicroPython flashed, uploading from the IDE works like this:

  1. The IDE stops whatever program is running.
  2. It writes the new program to the board's memory as main.py.
  3. It resets the board, which starts running the new program.

Since the program is saved as main.py, it runs every time the board powers up, even when it's disconnected from the computer and running on a power supply.

Arduino Nano: through the Arduino IDE

The Nano needs a compiled program, and C++ compilation doesn't happen in the browser. Today, the block coding IDE generates the complete C++ code and hands it over in two ways: copied to the clipboard or downloaded as an .ino file. From there:

  1. Open the file in the Arduino IDE.
  2. Under Tools, choose the Arduino Nano board and the port.
  3. Under Processor, choose ATmega328P. If the upload fails with a sync error, try ATmega328P (Old Bootloader): many Nano-compatible boards ship with the old bootloader.
  4. Click Upload.

The Servo library the code uses comes preinstalled with the Arduino IDE.

The most common problems

The port doesn't show up.

  • Charge-only cable. Many cheap USB cables only have the power wires. The board lights up and the computer doesn't see it. Swap the cable before trying anything else.
  • Driver. Boards with the CH340 converter (common on Nano-compatible boards and on many ESP32 boards) or the CP2102 may need the chip maker's driver on Windows.

The port shows up, but the connection fails.

  • Port in use. Only one program at a time can use the port. Close the Arduino IDE serial monitor, Thonny or any other tab with the IDE open.

The ESP32 doesn't respond.

  • Make sure MicroPython is flashed: without it, the board doesn't understand the commands.
  • Some boards require holding down the BOOT button while flashing the firmware, but not while uploading the program.

The board resets when the servos move.

  • That's not an upload problem, it's a power problem: the servos are drawing current from the USB port. See the section on the power supply in robot arm with four mini servos.

Ready for the first upload

Open the block coding IDE, choose the board, build a beep card and upload it. If the buzzer beeps, the path from the browser to the robot is working.