Canvas Skill
Display interactive HTML content, games, and dashboards on connected OpenClaw Mac, iOS, and Android nodes.
# Canvas Skill Display interactive HTML content, games, and dashboards on connected OpenClaw Mac, iOS, and Android nodes. The Canvas Skill lets your AI agent present rich HTML content — games, visualizations, dashboards, and interactive demos — directly on the screen of any connected OpenClaw node (Mac app, iOS, or Android).Instead of text-only responses, your agent can render fully interactive web content in a WebView on remote devices. Present a generated game, push a live data dashboard, or display a custom UI — all controlled programmatically through simple agent actions. ## How It Works The Canvas Skill uses a three-tier architecture to deliver web content to connected devices:Canvas Host Server — An HTTP server (port 18793) serves static HTML, CSS, and JS files from a local root directory (~/clawd/canvas/ by default).Node Bridge — A TCP server (port 18790) communicates canvas URLs to connected OpenClaw node apps.Node App — The Mac, iOS, or Android OpenClaw app receives the URL and renders the content in a WebView.The skill also supports Tailscale integration: when your gateway is bound to a Tailscale or LAN interface, nodes receive the correct hostname automatically so content loads across devices and networks. Live reload watches your canvas directory and instantly refreshes connected canvases whenever you save a file — making development fast and seamless. ## Key Features Present HTML Content — Push any HTML file from your canvas root to display on a connected node's screen.Live Reload — Automatically reloads connected canvases when files change, powered by a file watcher and injected WebSocket client.JavaScript Execution — Use the eval action to run JavaScript directly inside the canvas WebView.Screenshot Capture — Capture a snapshot of the currently displayed canvas with the snapshot action.Multi-Network Support — Supports loopback, LAN, Tailscale, and auto-bind modes so content reaches nodes on any network topology.Navigation Control — Navigate to new URLs or hide the canvas entirely without restarting the server. ## Requirements OpenClaw Node App — Required. At least one connected OpenClaw node (Mac, iOS, or Android) with canvas capability. Use openclaw nodes list to find available nodes.Tailscale — Optional. Required only when accessing nodes across networks (non-local). Enables Tailscale hostname-based canvas URLs so remote nodes can load content correctly. ## Use Cases AI-Generated Games — Have your agent generate a playable HTML game and instantly display it on your Mac or phone screen.Live Dashboards — Push real-time data visualizations or monitoring dashboards to a connected device's canvas view.Interactive Demos — Present agent-created interactive prototypes or UI mockups directly on a device for review.Development Preview — Use live reload to iterate on HTML/CSS/JS content and see changes instantly reflected on connected nodes. ## Installation Install via: `npx clawhub@latest install canvas`