ESP32 Device Dashboard: A Step-by-Step Guide for Developers

ESP32 microcontrollers are ideal for IoT projects thanks to their low power consumption, integrated Wi-Fi and Bluetooth, and solid performance. In this tutorial, we'll show you how to build a complete ESP32 device dashboard using the Mongoose Library, transforming your ESP32-C6 board into a browser-accessible web dashboard for control, monitoring, and updates.

We’ll guide you step-by-step through creating a function web dashboard with system stats, LED control, device settings, and firmware updates.

The web dashboard you'll build will run directly on the ESP32, accessible from any browser on the same network.

Step 1: Set Up Your Development Environment

Before building your ESP32 device dashboard, prepare your development environment:

Hardware: ESP32-C6 development board
Toolchain: ESP-IDF
Web Server: Mongoose Library
Visual Web UI builder: Mongoose Wizard

We'll use Docker to build ESP32 firmware, so so there's no need to install the ESP-IDF toolchain directly.
The Mongoose Wizard creates a ready-to-go project for you, so all you need is Docker installed—no additional setup on your workstation required.

Step 2. Create the Dashboard Layout

Visit https://mongoose.ws/wizard/ and create a project with three web dashboard pages:

Dashboard Page
Device Settings Page
Firmware Update Page

This tool allows to create your ESP32 device dashboard in a visual way. Click on the "New" button to start a new design. Select ESP32 as the target architecture, and choose an empty dashboard template.

An empty "dashboard" page is created automatically. Add two more pages: device settings page, and a firmware update page.

Step 3. Dashboard Page

The Dashboard page shows:

Device name
Current temperature
RAM usage

We will create 3 cards for those. However the information will be taken from different places. A device name would be settable by the user on the "Device Settings" page. Therefore, it will be backed by the "settings" API endpoint.

Go to the API endpoint editor and create settings endpoint, with a single string attribute device_name in it.

The current temperature and RAM usage are read-only metrics, so create a separate API endpoint for that, called state. Mark it read-only, and create three attributes in it: ram_free, ram_used, and temperature.

Add leds endpoint with a single led1 boolean attribute.

Now we're ready to add UI elements to the Dashboard page. Add "stats row" element, add cards to have 4 in total, and edit their titles and values that reference recently added API endpoints.

Add a panel for the LED toggle. Set toggle button to "autosave".

Step 4. Device Settings Page

Click on the device settings page, and add a panel there. Remove all unnesessary settings, leave only one with the text input. Label it "Device name". Set API reference for the text input to settings.device_name

Step 5. Firmware Update Page

This page would enable OTA firmware updates using the web dashboard:

Handle file uploads using Mongoose
Store new firmware
Reboot after validation

First, add a new API endpoint. Name it "ota", and choose the name "ota". Then on the page, add a panel with the firmware update button.

Step 6. Build and test the firmware

Now the Web dashboard is ready. Click on the Generate button. Wizard creates a new ESP32 project in the output directory. Edit WiFi credentials in main/main.c, then build it and flash it.

$ docker run --rm -v `pwd`:`pwd` -w `pwd` espressif/idf idf.py set-target esp32c6
$ docker run --rm -v `pwd`:`pwd` -w `pwd` espressif/idf idf.py build

Note that the target could any other microcontroller from the ESP32 family, such as ESP32, ESP32S3, ESP32C3, and so on.

Attach a serial console, reboot the device. Get device's IP address from the serial logs. Open your browser, type it device's IP address into the address bar. Now you should see the web dashboard served by the device.

Step 7. Attach UI controls to the hardware

Clicking on LED toggle does not do anything, cause the leds endpoint is not yet linked to the hardware. OTA updates work without any further efforts! The settings page gets saved only to RAM, rebooting the device looses all changes.

RAM and temperature stats show mock data instead of a real one.

Let's link all these API endpoints - leds, settings, stats, to our ESP32 device. For that, we need to override the default API callback functions that are generated in mongoose/mongoose_glue.h with our own custom callbacks.

Let's start with the leds endpoint. Open main/main.c.

Add the following callbacks to bind LED toggle:

#define LED1 15                                                                    
void my_get_leds(struct leds *leds) { leds->led1 = gpio_get_level(LED1); }         
void my_set_leds(struct leds *leds) { gpio_set_level(LED1, leds->led1); }

Right after mongoose_init() call, add this:

gpio_reset_pin(LED1);                                                            
gpio_set_direction(LED1, GPIO_MODE_OUTPUT);                                      
mongoose_set_http_handlers("leds", my_get_leds, my_set_leds);

Conclusion

You’ve just built a full-featured ESP32 device dashboard on your ESP32-C6 using the Mongoose Embedded Web Server. Your web dashboard can now:

Toggle an LED
Display system stats
Let users update device settings
Support over-the-air firmware updates

This web dashboard architecture is ideal for smart devices, industrial sensors, or any IoT product that benefits from a browser-based interface.

The ESP32 device dashboard approach helps eliminate the need for separate mobile apps, making your solution more accessible and cross-platform. Whether you're prototyping or building production devices, integrating a web dashboard into your firmware gives your users intuitive and powerful control.