Agent skill

canvas

View SKILL.md on GitHub Repository
Stars 355,710
Forks 72,004

Install this agent skill to your Project

npx add-skill https://github.com/openclaw/openclaw/tree/main/skills/canvas

SKILL.md

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 now

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

openclaw/openclaw

openclaw-test-heap-leaks

Investigate `pnpm test` memory growth, Vitest worker OOMs, and suspicious RSS increases in OpenClaw using the `scripts/test-parallel.mjs` heap snapshot tooling. Use when Codex needs to reproduce test-lane memory growth, collect repeated `.heapsnapshot` files, compare snapshots from the same worker PID, distinguish transformed-module retention from real data leaks, and fix or reduce the impact by patching cleanup logic or isolating hotspot tests.

355,710 72,004
Explore
openclaw/openclaw

parallels-discord-roundtrip

Run the macOS Parallels smoke harness with Discord end-to-end roundtrip verification, including guest send, host verification, host reply, and guest readback.

355,710 72,004
Explore
openclaw/openclaw

security-triage

Triage GitHub security advisories for OpenClaw with high-confidence close/keep decisions, exact tag and commit verification, trust-model checks, optional hardening notes, and a final reply ready to post and copy to clipboard.

355,710 72,004
Explore
openclaw/openclaw

openclaw-release-maintainer

Maintainer workflow for OpenClaw releases, prereleases, changelog release notes, and publish validation. Use when Codex needs to prepare or verify stable or beta release steps, align version naming, assemble release notes, check release auth requirements, or validate publish-time commands and artifacts.

355,710 72,004
Explore
openclaw/openclaw

openclaw-ghsa-maintainer

Maintainer workflow for OpenClaw GitHub Security Advisories (GHSA). Use when Codex needs to inspect, patch, validate, or publish a repo advisory, verify private-fork state, prepare advisory Markdown or JSON payloads safely, handle GHSA API-specific publish constraints, or confirm advisory publish success.

355,710 72,004
Explore
openclaw/openclaw

openclaw-pr-maintainer

Maintainer workflow for reviewing, triaging, preparing, closing, or landing OpenClaw pull requests and related issues. Use when Codex needs to validate bug-fix claims, search for related issues or PRs, apply or recommend close/reason labels, prepare GitHub comments safely, check review-thread follow-up, or perform maintainer-style PR decision making before merge or closure.

355,710 72,004
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results