MQTT Tiles

screenshot of MQTT Tiles
vue

Open-source MQTT-based IoT dashboard visualization tool. Has full MQTT 5.0 support. Allows easy dashboards sharing. Works with any MQTT broker supporting the WSS protocol.

Overview:

MQTTTilesLogoDashboard is a web dashboard based on MQTT, supporting MQTT 5.0 and 3.1.X protocols. It allows connections to multiple brokers and features multiple subscribe widgets. Users can save configurations in the browser's local cache or in retain messages on the broker. The live version of MQTTTiles is available for exploration.

Features:

  • ES6 Javascript: Modern JavaScript syntax for efficient code.
  • Vue.js (Quasar): Utilizes the Vue.js framework with Quasar components for the frontend.
  • Writing .vue files: Supports writing components in Vue single-file components.
  • Vuex: State management pattern for Vue.js applications.
  • Webpack: Module bundler for building the application.
  • Responsive layout: Ensures the dashboard adapts to different screen sizes.
  • NPM ecosystems: Leverages NPM for managing project dependencies.
  • Material theme: Uses a material design theme for visual aesthetics.
  • Dev Hot Reload: Provides hot reloading for a smooth development experience.
vue
Vue

Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.

dashboard
Dashboard

A dashboard style website template is a pre-designed layout that features a user interface resembling a control panel or dashboard. It typically includes charts, graphs, tables, and other data visualization tools that allow users to monitor and analyze data in real-time.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

prismjs
Prism JS

PrismJS is an open-source, lightweight, and extensible syntax highlighting library that supports a wide range of programming languages and markup formats.