He Turned Arduino and ESP32 Into 3D Interactive Lessons on the Web

Dilum Sanjaya built an interactive learning website for Arduino and recently made one for ESP32 as well. Both pages use 3D models to show the development boards, which you can drag to rotate and zoom in to inspect components. Each lesson comes with a schematic, pin explanations, and example code, plus a simulator that runs directly.

Let's look at the ESP32 version first. There are 20 lessons, starting with 'Meet the ESP32' and going on to blinking two LEDs, a refrigerator alarm, using Wi-Fi, a siren, a mini piano, a distance meter, driving wheels, a barrier gate, Bluetooth communication, board-to-board communication, a smart parking space, a water pump, a keypad lock, a solar tracker, radar, and pick-and-place. Both flagship features, Wi-Fi and Bluetooth, are covered in the lessons.

The page explains the ESP32 DevKit very plainly: dual-core up to 240 MHz, Wi-Fi and Bluetooth on the same chip, 3.3 V power—every pin is 3.3 V, not 5 V. The interface also explains the onboard circuitry: USB-C supplies 5 V, and a regulator steps it down to 3.3 V; both EN and GPIO 0 have pull-up resistors, so each button pulls the pin low. For beginners, these details are far friendlier than reading a datasheet.

The Arduino version follows the same approach, with 16 foundational lessons. Modules visible in the demo video include 'Meet the Board,' 'Blink an LED,' 'Press a Button,' 'Turn a Knob,' and 'Mix Colors.' The page likewise has a 3D model, lesson list, code editor, and serial monitor.

Both apps were made with Opus 5.5. Project links:

After the tweet was posted, a user named Capt Venkat commented, 'This will kill a lot of apps.' Another user, Vae Victis, said teaching kids Arduino is hard because it's all text and kids can't grasp the key points, and that they plan to try this. Another user asked whether it would be open-sourced. The author replied that they are considering making it an open-source project so anyone can contribute their own circuit ideas.

The hard part of learning hardware is feedback. If the circuit isn't wired correctly, the light doesn't turn on, but you don't know what's wrong. This kind of webpage makes feedback tangible: click once in the browser and the LED lights up; change the code and the behavior changes. Physical hardware is simplified into a visual model, but the key logic is preserved.

Another user, Aprender Gratis, put it bluntly: 'While others are making cat apps and games, someone is already on another level.'

This is what a tool should be like: it keeps people who want to learn from being easily discouraged.