Build

The Number Is Not in the File — One File, Two Pictures

By makemind · May 27, 2026

Through part 2 a screen shows only what the file says. Build a queue display that way and every new number means sending a new screen file.

Leave the spot open

{ "type": "page", "title": "Step 3",
  "initialState": { "now": "0", "waiting": 0 },
  "content": { "type": "center",
    "child": { "type": "linear", "direction": "vertical", "spacing": 10, "alignment": "center",
      "children": [
        { "type": "text", "text": "NOW SERVING", "style": { "fontSize": 15, "letterSpacing": 5, "color": "#6b7280" } },
        { "type": "text", "text": "{{now}}", "style": { "fontSize": 92, "fontWeight": "bold", "color": "#111827" } },
        { "type": "text", "text": "{{waiting}} waiting", "style": { "fontSize": 20, "color": "#6b7280" } } ] } } }

Two things are new.

initialState — what this screen holds the moment it opens, so nobody stares at an empty slot.

{{now}} — put the state's now here. It can stand alone or sit inside a sentence, as in {{waiting}} waiting.

Putting values in

Pass a key and a value — rt.stateManager.set('now', '42') — and whichever nodes use that key redraw. The host does not know which ones, and does not need to.

Wired to what the client course built, there is nothing to set one at a time.

onToolCall: (tool, params) async {
  // pour the server's map straight in
  final r = await client.callTool(tool, params);
  final state = jsonDecode((r.content.first as TextContent).text)
      as Map<String, dynamic>;
  state.forEach(rt.stateManager.set);
},

Server part 3 made the tool return {"now": ..., "waiting": ...}. When that map's keys match the {{...}} names on the screen, there is no translation code in between.

This content requires Developer or above

Sign in and upgrade your plan to continue reading.

View Plans
Twitter