Examples · Dashboard

A business dashboard with charts: 54 lines of AppSPEC

A three-screen dashboard with a ticker, KPI tiles with sparklines, line, donut and bar charts, a revenue table, capacity meters and an activity and alert feed.

Run full-screen Open in Studio Read the full spec

Running live in the sandbox with fixed demo data. Anything you add stays in this browser.

The state graph

3 screens, 0 wires

Screens are nodes and WIRE labels are edges. Screens in blue appear in the navigation; orange edges write a record on the way.

How it works

Walking through the spec

01Screens are states

3 screens, each a <STATE>. overview, revenue, health appear in the navigation because they carry a NAV label. Children lay themselves out by containment: ROW, COL and GRID arrange them, and everything else stacks.

<STATE ID="overview" NAV="Overview" ICON="layout-dashboard">
…
<STATE ID="revenue" NAV="Revenue" ICON="chart-column">
…
<STATE ID="health" NAV="Health" ICON="heart-pulse">

02Screens connect by label

This app needs no <WIRE>: navigation comes from NAV labels, and its buttons call component actions directly, such as player.play({id}) or paint.keep(sketches).

03Data flows through the key-value pipe

Every input publishes its value into the pipe under its ID, and every screen can read the pipe with {placeholders}. The pipe drives filtering and display; no wire writes a record.

04Components made of components

<DEFINES> builds PAGEHEAD from existing components, with named parameters, and the states use them like built-in tags.

<DEFINES>
  <!-- A page title with a "demo data" note: a component made of components -->
  <PAGEHEAD TITLE="" NOTE="">
    <ROW JUSTIFY="between" ALIGN="end">
      <COL GAP="2px">
        <TEXT STYLE="eyebrow" TEXT="Tidewater · demo data" />
        <TEXT STYLE="h1" TEXT="{title}" />
      </COL>
      <TEXT STYLE="small" TEXT="{note}" />
    </ROW>
  </PAGEHEAD>
</DEFINES>

05One attribute sets the look

THEME="fintech" sets every colour, radius and typeface. Change the word and the whole app restyles; all 31 themes work with every component.

<APP ID="pulse" NAME="Pulse" THEME="fintech" LOGO="activity" LAYOUT="side" WIDTH="1280px">

What this would typically take

The pieces a conventional stack needs

A typical implementation of the same app assembles these parts, each with its own code, libraries and configuration. The size depends on the team and the tools, so we do not quote a number for it.

Here the same app is one 54-line document built from general-purpose components: CARD, CHART, FEED, GRID, KPI, METER, PAGEHEAD, TABLE, TEXT, TICKER.

Charting	A charting library, its configuration per chart, tooltips, legends and axis formatting.
KPI tiles	Components for values, changes and sparklines.
Data loading	Fetching each dataset and wiring it into the right widget.
Layout	A sidebar shell, a responsive grid and navigation between screens.
Tables and feeds	A sortable table, a meter component and an activity list.
Build tooling	A bundler, a dev server and a build configuration.

The full specpulse.appspec · 54 lines

<APP ID="pulse" NAME="Pulse" THEME="fintech" LOGO="activity" LAYOUT="side" WIDTH="1280px">

  <DATA SRC="api/" />

  <DEFINES>
    <!-- A page title with a "demo data" note: a component made of components -->
    <PAGEHEAD TITLE="" NOTE="">
      <ROW JUSTIFY="between" ALIGN="end">
        <COL GAP="2px">
          <TEXT STYLE="eyebrow" TEXT="Tidewater · demo data" />
          <TEXT STYLE="h1" TEXT="{title}" />
        </COL>
        <TEXT STYLE="small" TEXT="{note}" />
      </ROW>
    </PAGEHEAD>
  </DEFINES>

  <STATE ID="overview" NAV="Overview" ICON="layout-dashboard">
    <PAGEHEAD TITLE="Overview" NOTE="Updated 27 Sep 2026, 17:00 UTC" />
    <TICKER SRC="tickers" />
    <KPI SRC="kpis" COLS="4" />
    <ROW ALIGN="stretch" GAP="16px">
      <COL SPAN="2" MIN="320px">
        <CHART SRC="revenue" TYPE="line" X="month" Y="revenue,expenses" NAMES="Revenue,Expenses" UNIT="$" TITLE="Revenue and expenses" SUBTITLE="Last 12 months" HEIGHT="260px" />
      </COL>
      <COL MIN="300px">
        <CHART SRC="channels" TYPE="donut" UNIT="%" TITLE="Traffic by channel" SUBTITLE="Share of sessions, September" HEIGHT="260px" />
      </COL>
    </ROW>
    <GRID COLS="2" MIN="320px">
      <CHART SRC="regions" TYPE="hbar" UNIT="$" TITLE="Revenue by region" SUBTITLE="September, thousands" HEIGHT="220px" />
      <CARD TITLE="Activity" SUBTITLE="Last 24 hours"><FEED SRC="activity" /></CARD>
    </GRID>
  </STATE>

  <STATE ID="revenue" NAV="Revenue" ICON="chart-column">
    <PAGEHEAD TITLE="Revenue" NOTE="Monthly, USD" />
    <CHART SRC="revenue" TYPE="bar" X="month" Y="revenue" UNIT="$" TITLE="Monthly revenue" HEIGHT="300px" />
    <TABLE SRC="revenue">
      <COL FIELD="month" LABEL="Month" />
      <COL FIELD="revenue" LABEL="Revenue" TYPE="money" />
      <COL FIELD="expenses" LABEL="Expenses" TYPE="money" />
    </TABLE>
  </STATE>

  <STATE ID="health" NAV="Health" ICON="heart-pulse">
    <PAGEHEAD TITLE="System health" NOTE="Thresholds: amber at 70%, red at 90%" />
    <GRID COLS="2" MIN="320px">
      <CARD TITLE="Capacity"><METER SRC="systems" /></CARD>
      <CARD TITLE="Alerts"><FEED SRC="activity" WHERE="tone IN warning|error" STYLE="alerts" /></CARD>
    </GRID>
  </STATE>

</APP>

Open in Studio All examples