メニュー
Display interactive HTML content, visualizations, dashboards, or games on connected OpenClaw nodes (Mac, iOS, Android). Supports live reloading, remote navigation, JS execution, and canvas snapshots for development, testing, and presentation scenarios.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use the ClawHub CLI to search, install, update, and publish agent skills from clawhub.com. Use when you need to fetch new skills on the fly, sync installed skills to latest or a specific version, or publish new/updated skill folders with the npm-installed clawhub CLI.
Execute shell commands and scripts on the user's local machine.
多模态 AI 图片理解工具。将图片发送给支持 vision 的 LLM 模型，获取图片的语义理解和详细描述。可分析截图、设计稿、图表、报错信息等。
Unified memory search and management system for retrieving, storing, and organizing information across daily logs, persistent memory, SOPs, and execution traces. Use this skill to recall past events, manage knowledge bases, update important notes, or filter historical data by tags and time ranges.
智能 OCR 文字提取工具。从图片中识别文字，支持中英文混排、图像预处理（灰度化+二值化提升识别率）、表格结构还原为 Markdown 格式。
Batch-generate images via OpenAI Images API. Random prompt sampler + `index.html` gallery. Ideal for rapid prototyping, generating placeholder assets, testing AI art variations across models (GPT-Image, DALL-E 3/2), and building local thumbnail galleries with customizable resolution, quality, and output formats.
| name | canvas |
| description | Display interactive HTML content, visualizations, dashboards, or games on connected OpenClaw nodes (Mac, iOS, Android). Supports live reloading, remote navigation, JS execution, and canvas snapshots for development, testing, and presentation scenarios. |
| version | 1.0.0 |
| author | DunCrew |
| tags | ["ui","display","html","visualization","openclaw"] |
| keywords | ["canvas","display html","present content","webview","screenshot","navigate","hide canvas","openclaw nodes"] |
| dangerLevel | safe |
| inputs | [{"name":"action","type":"string","description":"Action to perform: present, hide, navigate, eval, snapshot","required":true},{"name":"node","type":"string","description":"Target OpenClaw node ID (e.g., mac-63599bc4...)","required":true},{"name":"target","type":"string","description":"Full HTTP URL or relative file path to display or navigate to","required":false},{"name":"script","type":"string","description":"JavaScript code to execute within the canvas context (used with eval action)","required":false}] |
| metadata | {"openclaw":{"emoji":"🎨","primaryEnv":"shell"}} |
Display HTML content on connected OpenClaw nodes (Mac app, iOS, Android).
The canvas tool lets you present web content on any connected node's canvas view. Great for:
┌─────────────────┐ ┌──────────────────┐ ┌─────────────┐
│ Canvas Host │────▶│ Node Bridge │────▶│ Node App │
│ (HTTP Server) │ │ (TCP Server) │ │ (Mac/iOS/ │
│ Port 18793 │ │ Port 18790 │ │ Android) │
└─────────────────┘ └──────────────────┘ └─────────────┘
canvasHost.root directoryThe canvas host server binds based on gateway.bind setting:
| Bind Mode | Server Binds To | Canvas URL Uses |
|---|---|---|
loopback | 127.0.0.1 | localhost (local only) |
lan | LAN interface | LAN IP address |
tailnet | Tailscale interface | Tailscale hostname |
auto | Best available | Tailscale > LAN > loopback |
Key insight: The canvasHostHostForBridge is derived from bridgeHost. When bound to Tailscale, nodes receive URLs like:
http://<tailscale-hostname>:18793/__openclaw__/canvas/<file>.html
This is why localhost URLs don't work - the node receives the Tailscale hostname from the bridge!
| Action | Description |
|---|---|
present | Show canvas with optional target URL |
hide | Hide the canvas |
navigate | Navigate to a new URL |
eval | Execute JavaScript in the canvas |
snapshot | Capture screenshot of canvas |
In ~/.openclaw/openclaw.json:
{
"canvasHost": {
"enabled": true,
"port": 18793,
"root": "/Users/you/clawd/canvas",
"liveReload": true
},
"gateway": {
"bind": "auto"
}
}
When liveReload: true (default), the canvas host:
Great for development!
Place files in the canvas root directory (default ~/clawd/canvas/):
cat > ~/clawd/canvas/my-game.html << 'HTML'
<!DOCTYPE html>
<html>
<head><title>My Game</title></head>
<body>
<h1>Hello Canvas!</h1>
</body>
</html>
HTML
Check how your gateway is bound:
cat ~/.openclaw/openclaw.json | jq '.gateway.bind'
Then construct the URL:
http://127.0.0.1:18793/__openclaw__/canvas/<file>.htmlhttp://<hostname>:18793/__openclaw__/canvas/<file>.htmlFind your Tailscale hostname:
tailscale status --json | jq -r '.Self.DNSName' | sed 's/\.$//'
openclaw nodes list
Look for Mac/iOS/Android nodes with canvas capability.
canvas action:present node:<node-id> target:<full-url>
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
canvas action:navigate node:<node-id> url:<new-url>
canvas action:snapshot node:<node-id>
canvas action:hide node:<node-id>
Cause: URL mismatch between server bind and node expectation.
Debug steps:
cat ~/.openclaw/openclaw.json | jq '.gateway.bind'lsof -i :18793curl http://<hostname>:18793/__openclaw__/canvas/<file>.htmlSolution: Use the full hostname matching your bind mode, not localhost.
Always specify node:<node-id> parameter.
Node is offline. Use openclaw nodes list to find online nodes.
If live reload isn't working:
liveReload: true in configThe canvas host serves from /__openclaw__/canvas/ prefix:
http://<host>:18793/__openclaw__/canvas/index.html → ~/clawd/canvas/index.html
http://<host>:18793/__openclaw__/canvas/games/snake.html → ~/clawd/canvas/games/snake.html
The /__openclaw__/canvas/ prefix is defined by CANVAS_HOST_PATH constant.
hide it or navigate away