Bindable slots

Spec slots that should update at runtime use a { $bind: "field.path" } ref instead of a literal value. The viewer resolves each ref against the latest pushed state envelope on every render.

Bindable props

Component	Bindable props
KPI	value, delta, trend
StatGrid	stats (the whole array)
LineChart, AreaChart, BarChart	data
PieChart	data

Other props (label, title, xKey, series, theme) are part of the structural spec — bake them at authoring time.

Example

Authored spec:

{
  "root": "root",
  "elements": {
    "root": {
      "type": "Stack",
      "props": { "direction": "vertical", "gap": "lg" },
      "children": ["headline", "trend"]
    },
    "headline": {
      "type": "KPI",
      "props": {
        "label": "MRR",
        "value":  { "$bind": "kpis.mrr.value" },
        "delta":  { "$bind": "kpis.mrr.delta" },
        "trend":  { "$bind": "kpis.mrr.trend" },
        "unit":   null
      }
    },
    "trend": {
      "type": "LineChart",
      "props": {
        "title": "Weekly signups",
        "xKey":  "week",
        "series": [{ "key": "signups", "label": "Signups", "color": "var(--chart-1)" }],
        "data":   { "$bind": "weeklySignups" }
      }
    }
  }
}

Pushed state envelope:

{
  "state": {
    "kpis": {
      "mrr": { "value": "$48k", "delta": "+4%", "trend": "up" }
    },
    "weeklySignups": [
      { "week": "W1", "signups": 340 },
      { "week": "W2", "signups": 420 }
    ]
  }
}

Dotted paths

{ $bind: "kpis.mrr.value" } walks state.kpis.mrr.value. Missing keys resolve to undefined, and the renderer falls back to the component’s default for that slot — typically a dash or empty bar.

Tip: before authoring or editing bindable slots, have your AI tool call the get_streamboard_data MCP tool. It returns the live pushed state alongside every { $bind } path reconciled against that state (present / sampleType) plus any unboundStateKeys — so typo’d paths and schema drift surface instead of silently falling back to defaults.

Codegen

streamboard streamboards codegen <id> generates a typed StreamboardState interface from the spec’s bind refs plus matching push() and pull() helpers wired to @streamboard/sdk. Get compile-time checks against the spec without hand-rolling types.

streamboard streamboards codegen <id> --out src/streamboard.generated.ts