With this ESP32 project, you can draw on an 8×8 WS2812B LED matrix from a browser on your local Wi-Fi network. The ESP32 hosts the editor and controls the 64 RGB LEDs; it can also save up to ten named designs in LittleFS so you can reopen, edit, delete, or cycle through them after a reboot. You will need an ESP32, the matrix, a suitable 5 V supply, Arduino IDE, and the project’s required libraries.
How the ESP32 matrix editor works
The ESP32 joins your Wi-Fi network, starts a web server, and prints its local IP address to the Arduino IDE Serial Monitor. Open that address in a browser connected to the same network to use the editor. The browser sends drawings and controls to the board; the ESP32 updates the matrix and handles saved designs.
As an Amazon Associate I earn from qualifying purchases.
The project page includes the sketch, wiring guidance, and editor workflow: ESP32: WS2812B 8×8 Matrix Shape Editor Web Server (Arduino IDE).
Free tools Windows power users keep installed
One-click scans. No signup required.
What you need
- An ESP32 development board supported by the Arduino IDE.
- An 8×8 WS2812B RGB matrix, with 64 individually addressable LEDs.
- A regulated 5 V power supply. The project lists a 5 V, 2 A adapter.
- Jumper wires and a USB connection for programming and viewing serial output.
- The libraries FastLED, ESPAsyncWebServer, AsyncTCP, and ArduinoJson. LittleFS and Wi-Fi support are provided through the ESP32 Arduino environment.
Install or configure ESP32 board support and select a board matching your specific hardware. Espressif’s current Arduino-ESP32 documentation describes Core 3.3.12, based on ESP-IDF 5.5, but that does not establish that this project was tested with that core version. Board choices depend on the ESP32 SoC variant and flash configuration. See Espressif’s Arduino-ESP32 documentation.
#1 Best Overall
- 2.4GHz Dual Mode WiFi + Bluetooth Development Board
- Support LWIP protocol, Freertos
- SupportThree Modes: AP, STA, and AP+STA
- Ultra-Low power consumption, Compatible with Arduino IDE
- ESP32 is a safe, reliable, and scalable to a variety of applications
The project uses FastLED; Adafruit NeoPixel is another library for single-wire LED pixels, but it is not a substitute for the library specified by this sketch. Its reference lists version 1.15.5: Adafruit NeoPixel documentation.
Wire the matrix and power it safely
| Connection | Connect to |
|---|---|
| Matrix DIN | A suitable ESP32 digital output; the example sketch defaults to GPIO 2. |
| Matrix V− / GND | ESP32 GND and the external supply’s ground. |
| Matrix V+ / 5 V | 5 V output from the external supply. |
| External supply ground | Matrix V− and ESP32 GND, so the data signal has a common ground reference. |
Check the matrix labels and connector pinout before applying power; connector arrangements can differ. The tutorial estimates approximately 50 mA per LED at full brightness. On that estimate, 30 LEDs showing full-brightness white could draw as much as 1.5 A, which is why the project recommends a 5 V, 2 A adapter. These are the tutorial’s approximate figures, not independent measurements. Actual draw varies with brightness and displayed colors.
Rank #2
- Dual-Core Performance Up to 240 MHz: Run sensor processing, wireless communication, automation logic and connected-device tasks on a 32-bit dual-core ESP32 platform designed for responsive embedded and IoT projects
- Built-in Wi-Fi and Bluetooth 4.2: Connect to 2.4 GHz Wi-Fi networks or use Bluetooth Classic and BLE for wireless sensors, smart devices, remote controls, home automation and other connected projects
- Flexible Power-Saving Modes: ESP32 power-management features support dynamic clock scaling and low-power operating modes, helping developers reduce energy use in compatible sensing, monitoring and connected-device applications, suitable for battery-powered Internet of Things (IoT) devices.
- USB-C Programming with CP2102: Connect through USB-C for power, sketch uploads and serial monitoring, while GPIO, UART, SPI and I2C interfaces support sensors, displays, motor drivers and other modules (USB-C cable not included)
- Over-the-Air Update Support: Configure OTA functionality through a compatible ESP-32 software framework to update deployed firmware over Wi-Fi without reconnecting the board by USB for every revision
The project notes that the ESP32’s 5 V supply may be used when the LEDs are not driven at full-brightness white. For predictable operation, especially when many pixels are bright, use a suitable external 5 V supply and join its ground to ESP32 ground. Do not power the matrix through an arrangement that exceeds the board, cable, or supply’s current capacity.
Match the sketch to your panel
Before uploading, check the sketch’s settings for the data pin, LED color order, row wiring orientation, and horizontal and vertical flips. The example defaults to GPIO 2, but the correct pin is the one you actually wired and that your ESP32 board can use. Matrix panels may route rows in different directions or use different color orders, so a mismatch can make pixels appear in the wrong positions or with incorrect colors.
Rank #3
- Powerful ESP-32 Board: Unlock the world of Internet of Things (IoT) and advanced electronics with the heart of this kit: the ESP-32 board. It features a powerful dual-core processor, integrated Wi-Fi and Bluetooth 4.2, making it perfect for building connected, smart devices that communicate with your phone or the cloud. It's fully compatible with the Arduino IDE for easy programming.
- Super Starter Kit: This kit contains over 35 different modules and electronic components, including sensors, displays, motors, and input devices. From LEDs and buttons to an OLED screen, servo motor, and keypad, you have everything needed to explore a vast range of projects in one box.
- Step by Step Online Tutorial: Jump right in with our detailed, beginner-friendly tutorial. Access 30+ projects with complete code, clear circuit diagrams, and step-by-step instructions. Learn the fundamentals of electronics, coding, and how to utilize the ESP-32's unique capabilities without any prior experience.
- Hands-on Learning for All Skill Levels: Perfect for students, makers, engineers, and hobbyists. Start with basic circuits and coding, then progress to intermediate and advanced IoT applications. Build practical projects like weather stations, smart home controllers, remote-controlled devices, and interactive gadgets. The skills you learn are the foundation for real-world innovation.
- Quality & Great Support: Elegoo is committed to quality. We provide a clear, detailed tutorial guide, refined code, and a well-organized component kit. All modules are carefully selected for reliability and ease of use. Our dedicated technical support team and active online community are ready to help you succeed in your learning journey.
Choose the row layout and flip settings to match the physical panel rather than assuming every 8×8 matrix is wired the same way. If the drawing is mirrored, upside down, or scrambled, revisit those settings and confirm the panel’s wiring pattern before changing the editor data.
Configure, upload, and open the editor
- Install ESP32 board support and libraries. In Arduino IDE, configure ESP32 boards, then install FastLED, ESPAsyncWebServer, AsyncTCP, and ArduinoJson through the available library tools or the project’s documented setup.
- Enter your Wi-Fi credentials. Replace the example network name and password in the sketch with credentials for the local Wi-Fi network the ESP32 should join.
- Set the hardware options. Match the data pin, color order, row orientation, and flips to your matrix and wiring.
- Connect and upload. Select the correct ESP32 board and port in Arduino IDE, then upload the sketch.
- Read the Serial Monitor. After the board connects to Wi-Fi, use the printed IP address. If it does not connect, check the credentials and network availability.
- Visit the address in a browser. Use a phone or computer on the same local network and enter the ESP32’s IP address. The editor page is served directly by the board.
Draw, preview, and manage saved shapes
Use the browser editor to color pixels on the 8×8 grid. Previewing sends the current drawing to the matrix without requiring it to be saved as a shape. When you save, the ESP32 stores a named design and its brightness along with the 64 RGB pixel values.
Rank #4
- 2.4GHz Dual Mode WiFi + Bluetooth Development Board
- Support LWIP protocol, Freertos;ESP32 is a safe, reliable, and scalable to a variety of applications
- SupportThree Modes: AP, STA, and AP+STA
- Ultra-Low power consumption, Compatible with Arduino IDE
- 1PCS 30Pin ESP32 Development Board 2.4GHz WiFi Dual Cores Microcontroller Integrated with Antenna RF Low Noise Amplifiers Filters
Saved shapes are JSON files in the ESP32’s LittleFS filesystem, with a maximum of ten shapes. The gallery lets you reopen a saved shape, edit it, delete it, or display it. You can also start a slideshow through stored shapes.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteLittleFS must mount successfully for stored files to be available. In the published sketch, setup attempts to format the filesystem if mounting fails, then creates the shapes directory if needed. Formatting can erase existing saved files, so treat a mount failure as a possible data-loss situation rather than assuming the stored designs will survive automatic recovery.
Best Value
- 2.4GHz Dual Mode WiFi + Bluetooth Development Board
- Ultra-Low power consumption, works perfectly with the Arduino IDE
- Support LWIP protocol, Freertos
- SupportThree Modes: AP, STA, and AP+STA
- ESP32 is a safe, reliable, and scalable to a variety of applications
What the web server controls
The editor uses these routes to serve the interface and handle its controls:
| Route | Purpose |
|---|---|
GET / |
Serves the editor page. |
GET /api/shape/list |
Lists saved shape slots. |
POST /api/shape/save |
Validates and writes shape data. |
POST /api/shape/display |
Displays a saved shape. |
POST /api/shape/delete |
Deletes a saved shape. |
POST /api/preview |
Displays a temporary drawing. |
POST /api/clear |
Turns off the matrix. |
POST /api/slideshow |
Controls slideshow cycling. |
FastLED drives the pixels, ESPAsyncWebServer with AsyncTCP handles web requests, ArduinoJson processes shape data, and LittleFS stores the files. The page itself is HTML, CSS, and JavaScript embedded in program memory. Espressif also documents its own HTTP server component, but this project uses ESPAsyncWebServer; the two should not be confused. See Espressif’s HTTP Server documentation.
Slideshow timing and common fixes
The project article’s API description says the slideshow interval has a 100 ms minimum, but the published code clamps values below 250 ms to 250 ms. For that sketch, 250 ms is the effective minimum. If you change the interval logic, keep the user interface and server-side validation consistent.
Recommended Free Tools
Quick Recap
- The ESP32 does not appear on Wi-Fi: check the entered credentials, confirm the network is available, and watch Serial Monitor for connection output and the IP address.
- The browser cannot reach the editor: confirm the browser and ESP32 are on the same local network and use the current address printed by the board.
- The matrix stays dark: verify 5 V and ground connections, the shared ground between the supply and ESP32, the DIN connection, and the configured data pin.
- Colors are wrong or pixels are misplaced: check color order, row orientation, and horizontal or vertical flip settings against the actual panel.
- Saved shapes are missing: check LittleFS mounting and be aware that the sketch’s format-on-mount-failure behavior can erase stored files.
- The display resets or behaves erratically at high brightness: assess the supply, wiring, and current capacity for the displayed pattern rather than relying on the 2 A label alone.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
