ESP32 Web Server: Switch LEDs from a Web Page

Your first step into IoT with the ESP32: host a web page with ON/OFF buttons that control real LEDs — the same pattern scales to relays and whole-room lighting.

What you’ll build

The ESP32 DevKit joins your WiFi and serves a page with two buttons per LED. Clicking a button hits a URL like /led1/on, and the ESP32 flips the pin. Swap the LEDs for a relay board later and you have WiFi home automation.

Components you’ll need

Step-by-step guide

1. Add ESP32 board support in the Arduino IDE (Boards Manager → “esp32”), select “ESP32 Dev Module”.
2. Wire the red LED to GPIO16 and the green LED to GPIO17, each through a 220Ω resistor to GND.
3. Enter your WiFi credentials in the sketch and upload (hold the BOOT button if upload stalls).
4. Read the IP address from the Serial Monitor at 115200 baud.
5. Open the IP in a browser and click the buttons — the LEDs should follow instantly.

The code

The sketch uses the built-in WebServer library; each button is just a link to a control URL.

#include <WiFi.h>
#include <WebServer.h>
WebServer server(80);
const int led1=16, led2=17;
String page(){
  return "<h1>ESP32 LED Control</h1>"
    "<p><a href='/led1/on'><button>Red ON</button></a> <a href='/led1/off'><button>Red OFF</button></a></p>"
    "<p><a href='/led2/on'><button>Green ON</button></a> <a href='/led2/off'><button>Green OFF</button></a></p>";
}
void setup(){
  Serial.begin(115200);
  pinMode(led1,OUTPUT); pinMode(led2,OUTPUT);
  WiFi.begin("YOUR_WIFI","YOUR_PASSWORD");
  while(WiFi.status()!=WL_CONNECTED) delay(300);
  Serial.println(WiFi.localIP());
  server.on("/",[](){ server.send(200,"text/html",page()); });
  server.on("/led1/on", [](){ digitalWrite(led1,HIGH); server.send(200,"text/html",page()); });
  server.on("/led1/off",[](){ digitalWrite(led1,LOW);  server.send(200,"text/html",page()); });
  server.on("/led2/on", [](){ digitalWrite(led2,HIGH); server.send(200,"text/html",page()); });
  server.on("/led2/off",[](){ digitalWrite(led2,LOW);  server.send(200,"text/html",page()); });
  server.begin();
}
void loop(){ server.handleClient(); }