Canvas Skill
Display HTML content on connected OpenClaw nodes (Mac app, iOS, Android).
Best use case
Canvas Skill is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Display HTML content on connected OpenClaw nodes (Mac app, iOS, Android).
Teams using Canvas Skill should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/canvas/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How Canvas Skill Compares
| Feature / Agent | Canvas Skill | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Display HTML content on connected OpenClaw nodes (Mac app, iOS, Android).
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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
## How It Works
### Architecture
```
┌─────────────────┐ ┌──────────────────┐ ┌─────────────┐
│ Canvas Host │────▶│ Node Bridge │────▶│ Node App │
│ (HTTP Server) │ │ (TCP Server) │ │ (Mac/iOS/ │
│ Port 18793 │ │ Port 18790 │ │ Android) │
└─────────────────┘ └──────────────────┘ └─────────────┘
```
1. **Canvas Host Server**: Serves static HTML/CSS/JS files from `canvasHost.root` directory
2. **Node Bridge**: Communicates canvas URLs to connected nodes
3. **Node Apps**: Render the content in a WebView
### Tailscale Integration
The 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!
## Actions
| 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 |
## Configuration
In `~/.openclaw/openclaw.json`:
```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!
## Workflow
### 1. Create HTML content
Place files in the canvas root directory (default `~/clawd/canvas/`):
```bash
cat > ~/clawd/canvas/my-game.html << 'HTML'
<!DOCTYPE html>
<html>
<head><title>My Game</title></head>
<body>
<h1>Hello Canvas!</h1>
</body>
</html>
HTML
```
### 2. Find your canvas host URL
Check how your gateway is bound:
```bash
cat ~/.openclaw/openclaw.json | jq '.gateway.bind'
```
Then construct the URL:
- **loopback**: `http://127.0.0.1:18793/__openclaw__/canvas/<file>.html`
- **lan/tailnet/auto**: `http://<hostname>:18793/__openclaw__/canvas/<file>.html`
Find your Tailscale hostname:
```bash
tailscale status --json | jq -r '.Self.DNSName' | sed 's/\.$//'
```
### 3. Find connected nodes
```bash
openclaw nodes list
```
Look for Mac/iOS/Android nodes with canvas capability.
### 4. Present content
```
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
```
### 5. Navigate, snapshot, or hide
```
canvas action:navigate node:<node-id> url:<new-url>
canvas action:snapshot node:<node-id>
canvas action:hide node:<node-id>
```
## Debugging
### White screen / content not loading
**Cause:** URL mismatch between server bind and node expectation.
**Debug steps:**
1. Check server bind: `cat ~/.openclaw/openclaw.json | jq '.gateway.bind'`
2. Check what port canvas is on: `lsof -i :18793`
3. Test URL directly: `curl http://<hostname>:18793/__openclaw__/canvas/<file>.html`
**Solution:** Use the full hostname matching your bind mode, not localhost.
### "node required" error
Always specify `node:<node-id>` 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:
1. Check `liveReload: true` in config
2. Ensure file is in the canvas root directory
3. Check for watcher errors in logs
## URL Path Structure
The 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.
## 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 nowRelated Skills
opentwitter
Twitter/X data via the 6551 API. Supports user profiles, tweet search, user tweets, follower events, deleted tweets, and KOL followers.
opennews
Crypto news search, AI ratings, trading signals, and real-time updates via the OpenNews 6551 API. Supports keyword search, coin filtering, source filtering, AI score ranking, and WebSocket live feeds.
agent-reach
Give your AI agent eyes to see the entire internet. Read and search across Twitter/X, Reddit, YouTube, GitHub, Bilibili, XiaoHongShu, Instagram, LinkedIn, Boss直聘, RSS, and any web page — all from a single CLI. Use when: (1) reading content from URLs (tweets, Reddit posts, articles, videos), (2) searching across platforms (web, Twitter, Reddit, GitHub, YouTube, Bilibili, XiaoHongShu, Instagram, LinkedIn, Boss直聘), (3) user asks to configure/enable a platform channel, (4) checking channel health or updating Agent Reach. Triggers: "search Twitter/Reddit/YouTube", "read this URL", "find posts about", "搜索", "读取", "查一下", "看看这个链接", "帮我配", "帮我添加", "帮我安装".
searxng-search
使用自建SearXNG搜索引擎搜索互联网内容。触发词：搜索、查一下、帮我查、查找、搜一下、帮我搜索。
multi-search-engine
Multi search engine integration with 17 engines (8 CN + 9 Global). Supports advanced search operators, time filters, site search, privacy engines, and WolframAlpha knowledge queries. No API keys required.
weather
Get current weather and forecasts via wttr.in or Open-Meteo. Use when: user asks about weather, temperature, or forecasts for any location. NOT for: historical weather data, severe weather alerts, or detailed meteorological analysis. No API key needed.
wacli
Send WhatsApp messages to other people or search/sync WhatsApp history via the wacli CLI (not for normal user chats).
voice-call
Start voice calls via the OpenClaw voice-call plugin.
video-frames
Extract frames or short clips from videos using ffmpeg.
trello
Manage Trello boards, lists, and cards via the Trello REST API.
tmux
Remote-control tmux sessions for interactive CLIs by sending keystrokes and scraping pane output.
things-mac
Manage Things 3 via the `things` CLI on macOS (add/update projects+todos via URL scheme; read/search/list from the local Things database). Use when a user asks OpenClaw to add a task to Things, list inbox/today/upcoming, search tasks, or inspect projects/areas/tags.