WiFi-Controlled WS2812B LED Strip with Web UI

Smart-home LED strips are sold for $80 with a phone app that breaks every six months. The hardware inside is the same five-dollar WS2812B strip you can buy on AliExpress, plus a microcontroller that costs another five. This project replaces the locked-down vendor box with an ESP32 you control. The web UI runs on the ESP32 itself — open http://led-strip.local on any device on the LAN and you have a color picker, preset buttons, and animations.

Architecture

Architecture: a single ESP32 hosts the web server and drives the strip directly. The 5V/10A power supply powers both — a fully lit strip can pull 9 amps at peak white.

Bill of materials

• ESP32 dev board — $7
• WS2812B strip, 5 m, 60 LEDs/m, 300 LEDs total — $14
• 5V / 10A power supply (laptop-brick style) — $7
• 1000 µF capacitor across PSU — $0.50
• 470 Ω resistor between ESP32 GPIO and DI — $0.05
• Breadboard, jumpers, JST-SM connector — $3

Total around $30. If you want shorter strips for a desk, a 1 m / 60-LED segment costs around $5 and you can drop to a 5V/2A supply.

Wiring

WS2812B    ESP32           PSU
+5V    ----              -- 5V
GND    --- GND        -- GND
DI     --- GPIO 5 (via 470Ω resistor)

The 1000 µF capacitor goes across the 5V and GND of the strip, as close to the strip's first pixel as possible. It absorbs the inrush current when many LEDs turn on at once and prevents the first pixel from flickering. The 470 Ω resistor on DI dampens reflections on the data line, which matters for runs over about 30 cm.

Firmware design

The firmware runs two things in parallel: a web server (using ESPAsyncWebServer on the ESP32 core) and the FastLED animation loop. The web server registers handlers for paths like /color?r=255&g=80&b=20, /preset?name=ocean, and a static index page that contains the color picker. Each handler updates a small state struct and the animation loop reads from it.

The animations themselves are deliberately simple: solid color, breathing, color wheel rotation, and a fire effect. Each one is implemented as a function that accepts the LED array and a frame counter. Adding new animations is a matter of writing one function and adding a button to the HTML.

Going further

• Add mDNS (ESPmDNS) so the device is reachable as led-strip.local instead of an IP.
• Persist the last color in NVS flash so it survives a power cycle.
• Wire a physical pushbutton to GPIO 0 for a dumb on/off fallback when the WiFi is broken.
• Add MQTT support so Home Assistant can control it.

Key code: main loop

This is the heart of the firmware, taken from the working sketch. The complete file (with config template, library list, and the rest of the helpers) is around 84 lines and is included in the downloadable project package — request it via the form below.

void loop() {
static uint8_t frame = 0;
    if (state.mode == State::SOLID) {
        fill_solid(leds, NUM_LEDS, state.color);
    } else if (state.mode == State::BREATHE) {
        uint8_t b = beatsin8(20);
        fill_solid(leds, NUM_LEDS, state.color);
        FastLED.setBrightness(scale8(state.brightness, b));
    } else if (state.mode == State::RAINBOW) {
        fill_rainbow(leds, NUM_LEDS, frame, 7);
    } else { // FIRE
        for (int i = 0; i < NUM_LEDS; i++) {
            leds[i] = HeatColor(qsub8(random8(180), abs8(i - frame % NUM_LEDS) * 4));
        }
    }
    FastLED.show();
    frame++;
    delay(20);
}