canvasDisplay and control HTML content on connected Mac, iOS, or Android nodes via a web-based canvas with live reload and remote actions.
Install via ClawdBot CLI:
clawdbot install lura2/canvasDisplay 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>.htmlThis 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>
HTMLCheck how your gateway is bound:
cat ~/.openclaw/openclaw.json | jq '.gateway.bind'Then construct the URL:
http://127.0.0.1:18793/openclaw/canvas/.html http://:18793/openclaw/canvas/.html Find your Tailscale hostname:
tailscale status --json | jq -r '.Self.DNSName' | sed 's/\.$//'openclaw nodes listLook 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.htmlcanvas 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://:18793/openclaw/canvas/.html Solution: Use the full hostname matching your bind mode, not localhost.
Always specify node: 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.htmlThe /openclaw/canvas/ prefix is defined by CANVAS_HOST_PATH constant.
hide it or navigate awayGenerated Feb 19, 2026
Sales teams can display live HTML-based product demos on connected mobile devices during client meetings. This allows for real-time interaction with visualizations or configurators, enhancing engagement and understanding without requiring pre-installed apps on client devices.
Operations managers in manufacturing or logistics can present live dashboards showing metrics like production rates or shipment tracking on tablets across a facility. The live reload feature ensures updates are instantly visible, supporting quick decision-making based on current data.
Teachers or trainers can share interactive HTML lessons, quizzes, or simulations on students' devices in a classroom setting. By hosting content locally, it works offline and reduces latency, making it ideal for hands-on learning environments.
Design or engineering teams can use the canvas to display prototypes, diagrams, or code visualizations during remote meetings. Tailscale integration enables secure access across distributed locations, allowing real-time feedback and iteration.
Event organizers can set up kiosks or booths with HTML-based games, surveys, or informational content on tablets. The snapshot action allows capturing user interactions or feedback for post-event analysis.
Offer a cloud-managed version of the canvas host with enhanced features like analytics, user management, and premium templates. Charge monthly or annual fees per node or user, targeting businesses needing scalable cross-platform display solutions.
Sell on-premise licenses to large organizations for internal use, such as in training or operations. Include customization, support, and integration services, with pricing based on the number of nodes or concurrent users.
Provide a free basic version for individual developers or small teams, with paid upgrades for advanced actions like snapshot analytics, priority support, or additional security features. Monetize through in-app purchases or tiered plans.
๐ฌ Integration Tip
Ensure your gateway bind mode matches the network environment; for remote access, use Tailscale integration to avoid localhost issues and test URLs with curl before presenting.
็ๆๅ็ผ่พๅ็ง็ฑปๅ็ๅพ่กจ๏ผdrawioใmermaidใexcalidraw๏ผใๆฏๆๆต็จๅพใๆถๅบๅพใ็ฑปๅพใERๅพใๆ็ปดๅฏผๅพใๆถๆๅพใ็ฝ็ปๆๆๅพ็ญๅธธ่งๅพ่กจ็ฑปๅใ่ฝๅคๆ นๆฎ่ช็ถ่ฏญ่จๆ่ฟฐๅๅปบๆฐๅพ่กจ๏ผไน่ฝ่ฏปๅๅนถไฟฎๆนๅทฒๆ็ drawio/mermaid/excalidraw ๆไปถใไฝฟ็จ็ฌ็ซ็ MCP server (mcp-diagram-generator) ็ๆๅพ่กจๆไปถ๏ผๅๅฐ token ๆถ่ๅนถไฟ่ฏ่พๅบไธ่ดๆงใๆฏๆ่ชๅจ้ ็ฝฎ็ฎก็๏ผ้ป่ฎค่พๅบ่ทฏๅพไธบ้กน็ฎ็ฎๅฝไธ็ diagrams/{format}/๏ผๆฏๆ่ชๅฎไน่ทฏๅพๅ่ชๅจๅๅปบ็ฎๅฝใ
Create, export, and manage Canva designs via the Connect API. Generate social posts, carousels, and graphics programmatically.
Create software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams, sequence diagrams, flowcharts, ERDs, C4 architecture diagrams, state diagrams, git graphs, and other diagram types. Triggers include requests to diagram, visualize, model, map out, or show the flow of a system.
Generate diagrams from descriptions with Mermaid, PlantUML, or ASCII for architecture, flows, sequences, and data models.
Generate and render diagrams from Mermaid syntax into PNG, SVG, or PDF using customizable themes and various diagram types.
Generate beautiful, hand-drawn Mermaid diagrams with robust syntax (quoted labels, ELK layout). Use this skill when the user asks for "diagram", "flowchart", "sequence diagram", or "visualize this process".