Examples
Sample widgets in the monorepo you can clone, run locally, and pack as .tgz for the Gallery. Sources live under docs/widgets/examples/ on the develop branch.
| Example | What it demonstrates | Source |
|---|---|---|
| dx-walkthrough-vue | Minimal Vue 3 + TypeScript + Tailwind 960×540 tutorial widget: SDK handshake, CONFIG_UPDATE, timeTick clock/counter, frameEnter / frameExit. Best starting point before the footer demo. See DX walkthrough. | GitHub folder |
| footer-clock-weather-vue | Vue 3 + TypeScript SPA for a 1920×200 footer: clock + live weather (Open-Meteo), vite-plugin-doohnut-widget, ScaleToFitView, frameDimensions.json. Pack with pnpm run pack. | GitHub folder |
| adsb-exchange-vue | 1920×1080 Vue widget: iframe wrapper around ADS-B Exchange (tar1090) with configurable center, zoom, airport / ICAO, and kiosk-style URL flags; vite-plugin-doohnut-widget, Tailwind, SDK, ScaleToFitView. | GitHub folder |
| sdk-debugger | Logs postMessage traffic and exercises config fields across campaign / playlist / frame scopes; Vite + vite-plugin-doohnut-widget (pnpm dev for mock host overlay, pnpm run pack for .tgz). | GitHub folder |
More references
- widgets.md — longer overview that may mention additional examples (clock-weather, config-debugger, map demos, shared config helpers). If a path is not in your checkout, browse the
examplestree on GitHub. - DX walkthrough — guided path using dx-walkthrough-vue.
- Local development — Vite plugin, mock host, and packaging.
- Widget SDK — npm package and browser API.