This is a dead simple MQTT web interface. No fancy graph, no fancy feature, just a list of MQTT topics and their content.

• MQTT-Explorer is unmaintained and has a restrictive licence
• terdia/mqttui uses a fancy graph to display the topics and make my browser crash since I have thousands of topics on my broker
• I wanted a simple web ui to deploy alongside my mosquitto broker

• Quarkus framework
• Angular with Material Design

All options bellow will start the app at port 8080. Simply open localhost:8080 in your browser.

git clone [email protected]:gaetancollaud/mqtt-ui.git
cd mqtt-ui
mvn clean package -DskipTests
MQTTUI_MQTT_HOST=my-broker-host.com java -jar ./target/quarkus-app/quarkus-run.jar

git clone [email protected]:gaetancollaud/mqtt-ui.git
cd mqtt-ui
mvn clean package -DskipTests -Pnative
MQTTUI_MQTT_HOST=my-broker-host.com ./target/mqtt-ui-1.0.0-SNAPSHOT-runner

docker run -p 8080:8080 -e MQTTUI_MQTT_HOST=my-broker-host.com ghcr.io/gaetancollaud/mqtt-ui:latest

services:
  mqtt-ui:
    image: ghcr.io/gaetancollaud/mqtt-ui
    ports:
      - 8080:8080
    environment:
      - MQTTUI_MQTT_HOST=my-broker-host.com

You can configure the app using all the configuration options allowed by Quarkus but the easiest is using environment variables:

• List topics in a tree
• Live reload of values using Sever-Sent-Event (SSE)
• Restore the tree as it was when you reload the page
• Restore the selected topic when you reload the page
• Properly display the value and the history
• Properly display the date
• Properly display JSON messages
• Limit the number of history items
• show selected node in the tree
• ARM-based docker image
• Write to a topic
• Delete a topic (send null to the broker)
• Better components architecture (future-proofing)
• Optional: When a new value arrives, highlight it in the UI
• Report a bad MQTT connection in the UI for easy troubleshooting
• Support all MQTT connection option (ssl, etc.)
• Mobile layout