canvas_app template

A node-graph canvas built from the engine's raw, CSS-parity widget tree: a header bar over a dark canvas holding absolutely-positioned node cards joined by an SVG bezier connector. Clicking a node selects it — the card highlights and the header's "last click" readout updates. Use this template for any demo whose canvas needs positioned nodes with connection lines.

What's in the template

canvas_app/
├── README.md
├── canvas_app.scene/
│   ├── scene.json
│   └── entrypoint.luau
└── canvas_app_layout.module/
    ├── init.luau           ← mount(ctx): builds the widget tree, handles clicks
    └── README.md           ← the layout contract and node-graph model

Run it: layers.load("@builtin::_templates.canvas_app.canvas_app").

How to extend

The widget tree lives in canvas_app_layout.module/init.luau. Edit state there; the tree is rebuilt from that data.

1. Replace the demo nodes and connections in the state defaults with your own. Each node is { id, x, y, label, kind }; each connection is { fromId, toId }.
2. Nodes lay out with absolute positioning — each card's (x, y) come straight from its data, inside a position = "relative" canvas box.
3. The connector is one svg leaf sized to the canvas, drawn behind the cards. It emits one bezier <path> per connection between the node edges.
4. Each card carries onClick = "graph:click:" .. node.id. onCallback parses the id back out, records the selection, and calls ui.updateScreen to re-render.

The layout module's own README.md documents the mount(ctx) contract, the raw widget-tree shape, and the node-graph layout in full.

Discover the surface

• The gui toolbox's widgetTypes and widgetProps tools list the widgets and their props.
• @builtin::examples.ui.* are complete CSS-parity screens in this exact model.
• The UI and styling guides cover the model and the full style surface.