Documentation / Dashboard Development
Dashboard Development
Build native component trees, manage state, and choose optional libraries for .bar dashboards.
Start with a native tree
A dashboard runs JavaScript in a persistent Worker and returns a native component tree from render(env). Plain objects are enough; the official GitHub dashboard provides a complete working example with inputs, credentials, fetching, and interactions.
Use module variables for simple state. For larger dashboards, a standalone state library can subscribe to changes and call $metrix.invalidate(). Initialize subscriptions and timers once outside render().
Optional libraries
Preact h with HTM offers templates without a build step. Vue h or React createElement can also construct trees, but native component names such as Column, Text, and Button are required. The Worker provides no browser DOM, React Hooks dispatcher, or framework component lifecycle. Raw JSX needs an external compilation step.
Remote ESM imports require their CDN origin in <permissions>. Pin package versions and import only the modules you need. Declared modules download during import; later runs can use cached modules offline. See file format for import limits and extended APIs.
Formatting and runtime APIs
Perform parsing, formatting, and data calculations in a Worker-style environment (global scope is self / globalThis, without window or document). A curated subset of Web standards is available by default, including fetch, streams, performance (monotonic high-resolution time), and Date. Opt into extensions as needed via <script apis="..."> (such as localStorage, matchMedia, screen, caches, or intl); desktop-specific capabilities are exposed via $metrix. Timer handles use Node-style objects, and Buffer is a Node-style extension; the environment does not offer full Web Worker or Node.js compatibility. Date uses the host time zone with UTC fallback. Date prototype locale methods are not patched; call Intl constructors explicitly.
Fetch the current app's authenticated GET /v0/types declarations before using advanced components or desktop APIs. Use Local API checks to validate source, run isolated checks, and inspect rendered output.