# Send Canvas to your agent Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually. ## Fast path - Download the package from Yavira. - Extract it into a folder your agent can access. - Paste one of the prompts below and point your agent at the extracted folder. ## Suggested prompts ### New install ```text I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete. ``` ### Upgrade existing ```text I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run. ``` ## Machine-readable fields ```json { "schemaVersion": "1.0", "item": { "slug": "canvas", "name": "Canvas", "source": "tencent", "type": "skill", "category": "通讯协作", "sourceUrl": "https://clawhub.ai/lura2/canvas", "canonicalUrl": "https://clawhub.ai/lura2/canvas", "targetPlatform": "OpenClaw" }, "install": { "downloadUrl": "/downloads/canvas", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=canvas", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "packageFormat": "ZIP package", "primaryDoc": "SKILL.md", "includedAssets": [ "SKILL.md" ], "downloadMode": "redirect", "sourceHealth": { "source": "tencent", "slug": "canvas", "status": "healthy", "reason": "direct_download_ok", "recommendedAction": "download", "checkedAt": "2026-04-29T10:06:11.270Z", "expiresAt": "2026-05-06T10:06:11.270Z", "httpStatus": 200, "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=canvas", "contentType": "application/zip", "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=canvas", "contentDisposition": "attachment; filename=\"canvas-1.0.0.zip\"", "redirectLocation": null, "bodySnippet": null, "slug": "canvas" }, "scope": "item", "summary": "Item download looks usable.", "detail": "Yavira can redirect you to the upstream package for this item.", "primaryActionLabel": "Download for OpenClaw", "primaryActionHref": "/downloads/canvas" }, "validation": { "installChecklist": [ "Use the Yavira download entry.", "Review SKILL.md after the package is downloaded.", "Confirm the extracted package contains the expected setup assets." ], "postInstallChecks": [ "Confirm the extracted package includes the expected docs or setup files.", "Validate the skill or prompts are available in your target agent workspace.", "Capture any manual follow-up steps the agent could not complete." ] } }, "links": { "detailUrl": "https://openagent3.xyz/skills/canvas", "downloadUrl": "https://openagent3.xyz/downloads/canvas", "agentUrl": "https://openagent3.xyz/skills/canvas/agent", "manifestUrl": "https://openagent3.xyz/skills/canvas/agent.json", "briefUrl": "https://openagent3.xyz/skills/canvas/agent.md" } } ``` ## Documentation ### Canvas Skill Display HTML content on connected OpenClaw nodes (Mac app, iOS, Android). ### Overview The canvas tool lets you present web content on any connected node's canvas view. Great for: Displaying games, visualizations, dashboards Showing generated HTML content Interactive demos ### Architecture ┌─────────────────┐ ┌──────────────────┐ ┌─────────────┐ │ Canvas Host │────▶│ Node Bridge │────▶│ Node App │ │ (HTTP Server) │ │ (TCP Server) │ │ (Mac/iOS/ │ │ Port 18793 │ │ Port 18790 │ │ Android) │ └─────────────────┘ └──────────────────┘ └─────────────┘ Canvas Host Server: Serves static HTML/CSS/JS files from canvasHost.root directory Node Bridge: Communicates canvas URLs to connected nodes Node Apps: Render the content in a WebView ### Tailscale Integration The canvas host server binds based on gateway.bind setting: Bind ModeServer Binds ToCanvas URL Usesloopback127.0.0.1localhost (local only)lanLAN interfaceLAN IP addresstailnetTailscale interfaceTailscale hostnameautoBest availableTailscale > LAN > loopback Key insight: The canvasHostHostForBridge is derived from bridgeHost. When bound to Tailscale, nodes receive URLs like: http://:18793/__openclaw__/canvas/.html This is why localhost URLs don't work - the node receives the Tailscale hostname from the bridge! ### Actions ActionDescriptionpresentShow canvas with optional target URLhideHide the canvasnavigateNavigate to a new URLevalExecute JavaScript in the canvassnapshotCapture screenshot of canvas ### Configuration In ~/.openclaw/openclaw.json: { "canvasHost": { "enabled": true, "port": 18793, "root": "/Users/you/clawd/canvas", "liveReload": true }, "gateway": { "bind": "auto" } } ### Live Reload When liveReload: true (default), the canvas host: Watches the root directory for changes (via chokidar) Injects a WebSocket client into HTML files Automatically reloads connected canvases when files change Great for development! ### 1. Create HTML content Place files in the canvas root directory (default ~/clawd/canvas/): cat > ~/clawd/canvas/my-game.html << 'HTML' My Game

Hello Canvas!

HTML ### 2. Find your canvas host URL Check how your gateway is bound: cat ~/.openclaw/openclaw.json | jq '.gateway.bind' Then construct the URL: loopback: http://127.0.0.1:18793/__openclaw__/canvas/.html lan/tailnet/auto: http://:18793/__openclaw__/canvas/.html Find your Tailscale hostname: tailscale status --json | jq -r '.Self.DNSName' | sed 's/\\.$//' ### 3. Find connected nodes openclaw nodes list Look for Mac/iOS/Android nodes with canvas capability. ### 4. Present content canvas action:present node: target: Example: canvas action:present node:mac-63599bc4-b54d-4392-9048-b97abd58343a target:http://peters-mac-studio-1.sheep-coho.ts.net:18793/__openclaw__/canvas/snake.html ### 5. Navigate, snapshot, or hide canvas action:navigate node: url: canvas action:snapshot node: canvas action:hide node: ### White screen / content not loading Cause: URL mismatch between server bind and node expectation. Debug steps: Check server bind: cat ~/.openclaw/openclaw.json | jq '.gateway.bind' Check what port canvas is on: lsof -i :18793 Test URL directly: curl http://:18793/__openclaw__/canvas/.html Solution: Use the full hostname matching your bind mode, not localhost. ### "node required" error Always specify node: parameter. ### "node not connected" error Node is offline. Use openclaw nodes list to find online nodes. ### Content not updating If live reload isn't working: Check liveReload: true in config Ensure file is in the canvas root directory Check for watcher errors in logs ### URL Path Structure The canvas host serves from /__openclaw__/canvas/ prefix: http://:18793/__openclaw__/canvas/index.html → ~/clawd/canvas/index.html http://:18793/__openclaw__/canvas/games/snake.html → ~/clawd/canvas/games/snake.html The /__openclaw__/canvas/ prefix is defined by CANVAS_HOST_PATH constant. ### Tips Keep HTML self-contained (inline CSS/JS) for best results Use the default index.html as a test page (has bridge diagnostics) The canvas persists until you hide it or navigate away Live reload makes development fast - just save and it updates! A2UI JSON push is WIP - use HTML files for now ## Trust - Source: tencent - Verification: Indexed source record - Publisher: lura2 - Version: 1.0.0 ## Source health - Status: healthy - Item download looks usable. - Yavira can redirect you to the upstream package for this item. - Health scope: item - Reason: direct_download_ok - Checked at: 2026-04-29T10:06:11.270Z - Expires at: 2026-05-06T10:06:11.270Z - Recommended action: Download for OpenClaw ## Links - [Detail page](https://openagent3.xyz/skills/canvas) - [Send to Agent page](https://openagent3.xyz/skills/canvas/agent) - [JSON manifest](https://openagent3.xyz/skills/canvas/agent.json) - [Markdown brief](https://openagent3.xyz/skills/canvas/agent.md) - [Download page](https://openagent3.xyz/downloads/canvas)