A powerful tool for rendering and managing interactive HTML content across connected OpenClaw device nodes.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install canvas
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install canvas using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Canvas Skill?
The Canvas Skill enables developers to project web-based content—ranging from complex data visualizations to interactive games—directly onto connected OpenClaw nodes. By leveraging a dedicated Canvas Host server and a Node Bridge, this skill transforms any Mac, iOS, or Android device into a dynamic display for generated HTML content.
It serves as an essential component for developers building multi-device AI agents within the Openclaw Skills ecosystem, providing a seamless way to visualize output beyond simple text. Whether you are building internal dashboards or interactive demos, the Canvas Skill bridges the gap between your local development environment and remote hardware displays.
Canvas Skill Use Cases
- Visualizing real-time data dashboards on secondary mobile devices or tablets.
- Displaying AI-generated HTML games or interactive demos for immediate preview.
- Presenting rich UI components and web-based tools across a distributed node network.
- Capturing snapshots of rendered web content for documentation or debugging purposes.
How Canvas Skill Works
- The Canvas Host Server initiates a local HTTP server (default port 18793) to serve static assets from a designated root directory.
- Users place HTML, CSS, and JavaScript files into the configured root directory on the host machine.
- The Node Bridge communicates the specific Canvas URL to connected hardware nodes via a TCP server.
- The destination Node App on Mac, iOS, or Android receives the URL and renders the content within a native WebView component.
- Developers use the Openclaw Skills command interface to trigger actions like navigate, eval, or snapshot to control the remote display state.
Canvas Skill Setup
Configure your ~/.openclaw/openclaw.json to enable the host and set the root directory:
{
"canvasHost": {
"enabled": true,
"port": 18793,
"root": "/Users/you/clawd/canvas",
"liveReload": true
},
"gateway": {
"bind": "auto"
}
}
Create your first canvas file in the root directory:
mkdir -p ~/clawd/canvas/
cat > ~/clawd/canvas/index.html << 'HTML'
<!DOCTYPE html>
<html>
<body><h1>Hello Openclaw Skills</h1></body>
</html>
HTML
Present the content to a connected node:
canvas action:present node:<node-id> target:http://<hostname>:18793/__openclaw__/canvas/index.html
Canvas Skill Data Schema & Taxonomy
The skill organizes data via a structured URL-to-File mapping governed by the Canvas Host prefix.
| Component | Value / Description |
|---|---|
| URL Prefix | /__openclaw__/canvas/ |
| Default Root | ~/clawd/canvas/ |
| Live Reload | WebSocket-based auto-refresh injected into HTML |
| Network Bind | Supports loopback, lan, and tailnet modes |
Canvas Skill Advanced Features
- Automated Live Reload: Watches for file changes using chokidar and automatically refreshes all connected canvases via WebSockets.
- Tailscale Integration: Seamlessly routes content through Tailscale hostnames for secure, global node communication without manual IP configuration.
- Remote Script Execution: The eval action allows for the remote execution of JavaScript within the active canvas context.
- Canvas Snapshots: Remotely capture a screenshot of the current canvas state from a specific node for verification or logging.
- Multi-Node Orchestration: Target specific nodes by ID to present unique content across a variety of hardware simultaneously.
SKILL.md
Loading
Related Openclaw Skills
EasyBuy Skillpack
A suite of automation tools for Amazon including order scraping, price alerts, and automated customer support messaging.
Skill Install Guardian
A professional-grade security auditing tool designed to inspect and block malicious third-party code, plugins, and packages before they are installed in your environment.
News Fetcher
A high-efficiency AI skill designed to bypass paywalls and retrieve full-text news articles from major global publishers.
Curiosity Engine
A sophisticated reasoning framework that implements curiosity-driven behaviors to force agents to challenge assumptions and explore information gaps.
Win Mouse Native
A high-performance Windows automation skill for native mouse control using user32.dll system calls.
Renderful AI
A crypto-friendly API integration for generating professional-grade AI images and videos using state-of-the-art models.
Featured*
