Illuminating IoT: Rui Santos Unveils an ESP32-Powered Web-Based Pixel Art and LED Matrix Shape Editor

By Tech & Maker News Bureau
Published: September 2026

Main Facts

In the ever-evolving ecosystem of Internet of Things (IoT) and maker culture, bridging the gap between browser-based graphical user interfaces and physical hardware has always been a compelling design challenge. Renowned electronics educator and maker Rui Santos has achieved precisely this with his latest project: a browser-based, pixel-by-pixel shape editor that interfaces seamlessly with an 8×8 WS2812B addressable LED matrix via an ESP32 microcontroller.

At its core, the project transforms any standard web browser into a vibrant canvas. Users can paint individual pixels on a digital 8×8 grid, selecting custom colors for each of the 64 RGB LEDs. Once a design is completed, a click of a button transmits the layout over Wi-Fi to an ESP32 web server. The microcontroller processes the payload, scales the global brightness, and drives the physical hardware using a single data pin (GPIO 2).

Unlike volatile test setups that lose their state upon a power cycle, Santos’s implementation incorporates the LittleFS filesystem. This allows up to 10 unique pixel-art shapes to be serialized into JSON format and permanently stored in flash memory. Users can instantly recall these designs, reload them into the web editor for further refinement, delete them, or activate an automated slideshow mode that loops through the saved library at custom intervals (defaulting to two seconds per frame).

The project relies on a robust software stack, including Daniel Garcia’s universally praised FastLED library, the ESP32Async web server architecture, and Benoit Blanchon’s ArduinoJSON 7.X. Designed with both novices and seasoned developers in mind, the project successfully marries asynchronous web handling, local file storage, and hardware-level illumination into a single, highly accessible desktop-to-device pipeline.

Chronology of Development

The journey toward creating a fluid, browser-controlled physical LED display required careful architectural planning, incremental prototyping, and the harmonization of disparate software libraries. While the final tutorial was published in September 2026 on Random Nerd Tutorials, the developmental timeline reflects months of iterative engineering typical of advanced maker projects.

Phase 1: Conceptualization and Hardware Selection

The project originated from a desire to move beyond hardcoded animations on addressable LEDs. While libraries like FastLED make it easy to generate patterns mathematically, enabling end-users to draw custom graphics without reprogramming the microcontroller required a dynamic input method. The ESP32 was chosen as the brain of the operation due to its dual-core processing power, integrated Wi-Fi stack, and ample flash memory. Paired with a standard 8×8 WS2812B Neopixel matrix, the hardware footprint remained compact, affordable, and easy to wire.

Phase 2: Building the Asynchronous Web Server

Early iterations of IoT web servers often suffered from blocking behavior—when the microcontroller was busy updating the LED buffer, the web interface would lag or time out. To solve this, Santos integrated the ESPAsyncWebServer and AsyncTCP libraries. This asynchronous architecture allowed the ESP32 to handle HTTP requests concurrently while maintaining smooth, uninterrupted refresh rates on the physical LED matrix.

Phase 3: Developing the Browser Grid and JSON Pipeline

With the server responding smoothly, attention shifted to the client-side interface. An HTML5 and JavaScript grid was coded to mirror the physical 8×8 layout. Each cell in the browser grid acts as an interactive color picker. When a user submits a drawing, JavaScript packages the color data into a structured format.

To transmit this data efficiently, the project adopted JSON (JavaScript Object Notation). ArduinoJSON 7.X was implemented on the ESP32 side to parse incoming HTTP payloads, translating the color array into variables that the FastLED library could ingest.

Phase 4: Integrating LittleFS for Persistent Storage

A major hurdle in early maker projects is data volatility: turning off the device wipes out the current canvas. Santos integrated LittleFS—a lightweight file system designed for microcontrollers—into the ESP32 partition scheme. This allowed the microcontroller to create, read, and write JSON files directly to its onboard flash memory. By allocating space for up to 10 distinct files, the system gained gallery capabilities, enabling users to store, preview, and reload past creations.

Phase 5: Refining the UI, Brightness Control, and Slideshow Mode

The final developmental push focused on user experience. A global brightness slider was added to the web UI, allowing users to scale light intensity from 0 to 255 (with a default safe-harbor setting of 128). Furthermore, an automated slideshow controller was written into the JavaScript front-end, allowing the ESP32 to cycle through saved LittleFS configurations sequentially, turning the project into a functional, standalone ambient art display.

Supporting Data & Technical Specifications

Building an addressable LED project requires a careful understanding of electrical loads, communication protocols, and memory allocations. Below is a detailed breakdown of the technical specifications, component data, and resource requirements associated with Santos’s ESP32 matrix editor.

Hardware Bill of Materials (BOM)

• Microcontroller: ESP32 Development Board (NodeMCU / ESP-WROOM-32 compatible)
• Display Output: 8×8 WS2812B Addressable RGB LED Matrix (64 total pixels)
• Power Supply: 5V, 2A regulated external AC-DC power adapter
• Wiring/Misc: Jumper wires, breadboard (or custom soldered perfboard)

Electrical Load and Power Consumption

Addressable LEDs like the WS2812B operate at 5V logic and draw significant current depending on color composition and brightness settings:

• Per-LED Current Draw (Max): Each WS2812B LED contains three color channels (Red, Green, Blue), each drawing approximately 20mA at full brightness. Combined white light at 100% draws roughly 60mA per LED.
• Matrix Aggregate Load (64 LEDs): At absolute maximum theoretical white light (all LEDs at 255/255/255), 64 LEDs would theoretically draw nearly 3.84A.
• Real-World Operational Margin: Because typical pixel art graphics utilize mixed colors, sparse pixel lighting, and reduced global brightness (the default code sets brightness to 128 out of 255), actual current draw is significantly lower. However, engineers recommend a dedicated 5V 2A power supply to prevent voltage sags, flickering, or microcontroller resets during high-draw animations.

Software Dependencies and Libraries

The project’s firmware sketch is built on top of the Arduino IDE framework, requiring several specialized third-party libraries:

1. FastLED (by Daniel Garcia): Handles high-performance color driving and timing-critical signal generation for the WS2812B data line. Connected to ESP32 pin GPIO 2.
2. ESPAsyncWebServer & AsyncTCP: Manages non-blocking HTTP GET and POST requests, ensuring smooth Wi-Fi connectivity and instant web-page rendering.
3. ArduinoJSON (v7.X by Benoit Blanchon): Serializes and deserializes matrix states for transfer over HTTP and storage within the filesystem.
4. LittleFS: Manages the onboard flash memory partition, enabling robust file reading and writing without an external SD card module.

Scaling Up: Alternative Form Factors

For makers looking to expand beyond the limitations of a standard 64-pixel square, the underlying code architecture can easily be adapted to alternative layouts available in the broader electronics marketplace:

• 16×16 Flexible WS2812B Panel: Features 256 individual RGB LEDs, quadrupling the resolution of the canvas.
• 8×32 Addressable LED Matrix: Utilizes the same 256-pixel count in an elongated, banner-style geometry, ideal for scrolling marquee text or wide-format pixel animations.

Official Insights & Maker Community Response

The release of the ESP32 8×8 Matrix Shape Editor has generated considerable enthusiasm within the global maker and IoT communities. Educators, hobbyists, and professional embedded engineers have praised the project for its pedagogical value, noting that it elegantly bridges multiple distinct domains of computer science and electronics.

In accompanying documentation released on Random Nerd Tutorials, Rui Santos emphasized the importance of modularity in modern DIY electronics. "The goal was not merely to light up a few LEDs, but to demonstrate how lightweight embedded filesystems can interact with modern web APIs," Santos noted in his system overview. "By decoupling the browser interface from the hardware execution loop using asynchronous web servers, makers can build responsive, highly polished user experiences even on low-cost microcontrollers."

Industry analysts tracking the growth of edge computing and IoT education have highlighted projects of this nature as vital stepping stones for students entering the tech sector. Traditional microcontroller tutorials often isolate students within serial monitor debugging or hardcoded loops. By introducing browser-based control panels, local JSON storage, and Wi-Fi provisioning, projects like the ESP32 matrix editor expose makers to full-stack development paradigms—spanning front-end JavaScript design, network protocol handling, embedded C++ firmware writing, and electrical power management.

Furthermore, community feedback on maker forums has centered on the scalability of the codebase. Early adopters have already begun experimenting with modifying the JavaScript grid to handle larger 16×16 matrices, integrating MQTT protocols to control the display remotely over the cloud, and linking the slideshow timer to live weather or stock market APIs.

Implications for the Maker Movement and IoT Education

The intersection of accessible web technologies and low-cost microcontrollers—exemplified by Santos’s ESP32 matrix project—carries profound implications for the future of hardware prototyping, STEM education, and smart-home customization.

1. Democratization of Full-Stack Hardware Control

Historically, creating a custom graphical control panel for a hardware device required dedicated desktop software development (using languages like C#, Python, or Java) or complex cloud-broker setups. By leveraging the ESP32’s built-in Wi-Fi chip to host a native web server, the browser becomes the application interface. This eliminates platform-dependency issues; whether a user is operating on Windows, macOS, Linux, iOS, or Android, any device with a modern web browser and network access can interface with the hardware instantly.

2. Enhanced Pedagogical Value in STEM Curricula

For educators teaching vocational electronics, computer science, or engineering, this project serves as an ideal multidisciplinary teaching tool. A single semester project can touch upon:

• Circuit Design & Electrical Safety: Calculating Ohm’s law, managing power injection, and understanding current limitations of 5V buses.
• Embedded Systems Programming: Managing GPIO pins, timing constraints, and memory allocation in C++.
• Network Architecture: Understanding HTTP request/response lifecycles, TCP/IP overhead, and asynchronous event loops.
• Data Serialization: Formatting and parsing JSON datasets for persistent storage.

3. The Rise of Edge-Local Smart Objects

In an era dominated by cloud-dependent smart devices—where a dropped internet connection renders home automation hardware useless—projects utilizing local filesystems like LittleFS represent a return to robust, edge-centric design. By storing user data locally on the microcontroller’s flash memory rather than an external cloud server, the device remains fully autonomous, secure, and functional offline.

As microcontrollers continue to drop in price while increasing in processing power and memory capacity, we can expect to see an explosion of similar edge-hosted, browser-managed embedded devices. Rui Santos’s ESP32 8×8 LED matrix editor stands as a stellar blueprint for this next wave of interactive maker innovation, proving that with the right combination of open-source libraries and thoughtful engineering, the boundary between the digital canvas and the physical world is thinner than ever.