Skip to main content

App Architecture

This page gives a high-level overview of how the Betaflight App is put together, from the user interface down to the flight controller. It is aimed at developers who want to find their way around the codebase before making a change.

Open the diagram full screen to inspect components and their source references, and to use the theme switch, presentation mode and export options.

Layers​

  • Vue 3 UI - the tabs in src/components/tabs/, registered in src/js/vue_tab_registry.ts. Built with the Composition API, Nuxt UI 4 and Tailwind CSS 4.
  • Pinia stores - application state in src/stores/, such as fc, connection, dialog and osd. Components read and write state here rather than talking to the flight controller directly.
  • MSP protocol layer - src/js/msp/ encodes and decodes MSP messages (MSPCodes, MSPHelper, MSPConnector). Only stores, composables and code under src/js should call the MSP client.
  • Transport backends - src/js/protocols/ holds pluggable transports: WebSerial, WebBluetooth, USB DFU (firmware flashing), Tauri (desktop) and Capacitor (Android).
  • Flight controller - the Betaflight firmware acts as the MSP server.
  • Blackbox - flight logs are pulled from the flight controller's dataflash and opened in the Blackbox log viewer, which ships as a tab inside the App. The graphs, spectrum, sticks and 2D craft draw on Canvas, the 3D craft uses three.js and the map uses Leaflet. All of them read state from Pinia stores: the graph renderer uses the graph and workspace stores, and the others use the settings store.

Platforms​

The same codebase is delivered as a PWA in the browser, a desktop app built with Tauri 2, and an Android app built with Capacitor 8.