STM32 Web Interface Renders Differently Across Browsers

Hi,

I’m working on an STM32-based device that hosts a simple web UI for configuration via an embedded HTTP server.

The interface loads correctly in Chrome, but in Firefox, Safari, and some mobile browsers pages either render incorrectly or fail to load. The MCU shows no runtime errors, and files appear to be served correctly.

I’ve verified MIME types, disabled browser caching, and reduced HTML/CSS/JS to isolate the issue, but browser behavior still differs.

Has anyone experienced browser compatibility issues with STM32-hosted web interfaces?
Any advice on HTTP headers, buffer sizes, or embedded web UI best practices would be helpful.

Thanks,
John

[Andrew Neil]

---

@unknown wrote:

Has anyone experienced browser compatibility issues with STM32-hosted web interfaces?

---

It's not specific to STM32 - browser compatibility issues are a common issue across all platforms!

Try something like "html checking tools" in your favourite internet search engine or AI tool; eg,

https://www.google.com/search?q=html+checking+tools

which suggests that "html validation" may also be a good search...

[MStackDev_376]

Hi John,

I can suggest you an alternative that allows you to design your web UI without worrying about writing frontend code or browser incompatibilities.

Instead of writing the HTML/CSS/JS by hand, you can use a tool called Mongoose Wizard. It's a no-code builder that allows you to create a web UI without writing any line of frontend code, you simply use it by dragging and dropping components (buttons, sliders, text fields, charts, etc.) in a visual interface. It's designed especially for embedded developers who need a professional web UI, primarily for the purpose of simplifying the frontend development.

Moreover, the Wizard tool also ensures that the UI is connected to the C/C++ backend, more precisely UI components (e.g. toggles switches for turning on LEDs, charts displaying sensor data, etc.) are linked to variables from the backend code. This is all generated automatically.

When you're finished designing the web interface, the Wizard generates a complete, ready-to-compile project for your board. The project uses the Mongoose Networking Library to serve the UI to the browser and handle any other networking task your project may require.

This way, you don't have to worry about writing frontend code and even networking code, since the networking component is handled by Mongoose. You can just focus on the specifics of your firmware.

Both the Wizard and the Mongoose library are well documented here. Also, here are some video tutorials that show practical guides on how to create various embedded UI-based projects in the Wizard.

Heads up: I am part of the Mongoose development team and I hope this helps you with your project.