Skip to content

Build a Canvas panel

A Canvas source contains title, HTML, CSS, JavaScript, permission requests, and optional ui_mode. Missing ui_mode means system; custom retains semantic tokens while disabling shared component styling.

{
"title": "Service health",
"html": "<main class=\"click-card\"><h2>Healthy</h2><output id=\"latency\">18 ms</output></main>",
"css": "main { max-width: 32rem; margin: 1rem; }",
"javascript": "",
"permission_requests": [],
"ui_mode": "system"
}

Click injects the versioned click-ui-v1 kit before panel CSS. The frozen theme interface is:

click.ui.version
click.ui.themeId
click.ui.reducedMotion
click.ui.onChange(listener)

Use capability-broker query/subscription/invoke APIs supplied by the trusted shell. Never call the Host management API directly and never embed a bearer token. Create and update panels manually in the native editor or through Host MCP.