---
title: "Dashboard Development: Components, State & Libraries · Metrix.Bar"
description: "Build Metrix.Bar dashboards with native components, JavaScript state, optional libraries, and the installed app's validation tools."
canonical: "https://metrix.bar/docs/tech-stack"
language: "en"
---

# 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](https://metrix.bar/dashboards/github-repo.bar) 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](/docs/bar-format.md) 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](/docs/local-api.md) to validate source, run isolated checks, and inspect rendered output.