OLED Animation Maker OLED Maker

How to Live Connect Your OLED to the Browser (WebSerial)

By Ashish · May 19, 2026 · 6 min read · WebSerial, Live Preview

ESP32 microcontroller with SSD1306 OLED connected by USB to a laptop running browser live WebSerial animation preview
Live connect: edit in the browser, see frames on your physical OLED instantly.

Live connect lets you preview OLED animations on real hardware while you edit in the browser — no re-flashing the Arduino for every pixel change. The OLED animation maker uses the Web Serial API (WebSerial) to stream frames over USB. This guide shows the full setup for Arduino Uno, ESP32, and ESP8266.

What you need

  • Arduino Uno, Nano, Mega, ESP32, or ESP8266
  • SSD1306 or SH1106 OLED (128×64 typical)
  • USB cable to your PC
  • Google Chrome or Microsoft Edge (WebSerial required)
  • oledanimationmaker.com — free, no install

Step 1: Wire the OLED

Connect I²C OLED to your board (see our Arduino OLED tutorial):

  • Uno/Nano: SDA → A4, SCL → A5
  • ESP32: SDA → GPIO 21, SCL → GPIO 22
  • ESP8266: SDA → D2, SCL → D1
ESP32 board wired to 0.96 inch I2C OLED display with labeled SDA SCL power and ground connections
Correct wiring is required before live connect will work.

Step 2: Configure the tool

  1. Open oledanimationmaker.com
  2. In the header, set Board (Uno, ESP32, etc.)
  3. Set Display — SSD1306 or SH1106, and size (128×64)
  4. Set I²C address — usually 0x3C

The generated receiver sketch matches these settings automatically.

Step 3: Upload the WebSerial receiver sketch

  1. Click Connect in the app header (or open the hardware modal)
  2. Copy the receiver sketch — it matches your board, display, and library
  3. Paste into Arduino IDE and upload once to your board
  4. Leave the board powered via USB

You only upload this receiver sketch once per project session (unless you change board or display type).

Step 4: Live connect in the browser

Laptop screen showing OLED animation maker editor with drag and drop workflow for live hardware preview
  1. Click Connect again in Chrome or Edge
  2. Select your board’s USB serial port when prompted
  3. Draw, import GIF, or play a template — frames stream to the physical OLED
  4. Adjust FPS on the timeline and see changes in real time

This live oled preview workflow is much faster than uploading a full animation sketch after every edit — ideal for tuning ssd1306 animation timing and pixel art.

Troubleshooting live connect

  • Port not listed — install CH340/CP2102 USB drivers; try another cable (data, not charge-only)
  • Blank OLED — wrong I²C address or display type (SSD1306 vs SH1106)
  • Connect fails — close Arduino IDE Serial Monitor (only one app can use the port)
  • Firefox/Safari — WebSerial not supported; use Chrome or Edge
  • ESP8266 — use 3.3V, D2/D1 pins; see ESP guide

When to use live connect vs Get the Code

  • Live connect — editing, debugging, tuning FPS and pixels
  • Get the Code — finished project; flash standalone sketch without PC attached

Try live connect now — free

Open the tool, upload the receiver once, click Connect, and preview on your real OLED.

Open OLED Animation Maker →

Popular searches: webserial oled arduino · live oled preview · connect arduino to browser · oled animation maker live · webserial ssd1306 · esp32 oled real time

Related tutorials