agentleFS
Sign inStart free
AtomicBot-aiAtomicBot-ai/atomicbot/skills/canvas/SKILL.md

canvas

Skill325 starsChanged 7 months agoMITView on GitHub

Display 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: The canvas host server binds based on gateway.bind setting: Key insight: The canvasHostHostForBridge is derived from bridgeHost. When bound to Tailscale, nodes receive URLs like: This is why localhost URLs don't work - the node receives the Tailscale hostname from the bridge! In the active OpenClaw config file ($OPENCLAWCONFIGPATH, default ~/.openclaw/openclaw.json): When liveReload:…

We split this skill into the rules it gives an agent

15 rules. 0 are common, 6 are distinctive, and 9 are very specific to this project.

  • 0

    Common

    Most of the 37 edited versions we read keep these.

  • 6

    Distinctive

    This author's own choices. Worth a look.

  • 9

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Very specific:

    When liveReload: true (default), the canvas host:

    line 78
  2. Very specific:

    Place files in the canvas root directory (default ~/clawd/canvas/):

    line 90
  3. Distinctive:

    Check how your gateway is bound:

    line 106
  4. Very specific:

    Look for Mac/iOS/Android nodes with canvas capability.

    line 130
  5. Very specific:

    Check server bind: CONFIG_PATH="${OPENCLAW_CONFIG_PATH:-${OPENCLAW_STATE_DIR:-$HOME/.openclaw}/openclaw.json}".

    line 160
  6. Very specific:

    Check what port canvas is on: lsof -i :18793

    line 161
  7. Very specific:

    Test URL directly: curl http://<hostname>:18793/__openclaw__/canvas/<file>.html

    line 162
  8. Distinctive:

    Solution: Use the full hostname matching your bind mode, not localhost.

    line 164
  9. Very specific:

    Always specify node:<node-id> parameter.

    line 168
  10. Distinctive:

    If live reload isn't working:

    line 176
  11. Very specific:

    Check liveReload: true in config

    line 178
  12. Distinctive:

    Ensure file is in the canvas root directory

    line 179
  13. Distinctive:

    Check for watcher errors in logs

    line 180
  14. Distinctive:

    Keep HTML self-contained (inline CSS/JS) for best results

    line 195
  15. Very specific:

    Use the default index.html as a test page (has bridge diagnostics)

    line 196

“Common” is measured: kept by at least 6 in 10 of the 37 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
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 ModeServer Binds ToCanvas URL Uses
loopback127.0.0.1localhost (local only)
lanLAN interfaceLAN IP address
tailnetTailscale interfaceTailscale hostname
autoBest availableTailscale > 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

ActionDescription
presentShow canvas with optional target URL
hideHide the canvas
navigateNavigate to a new URL
evalExecute JavaScript in the canvas
snapshotCapture screenshot of canvas

Configuration

In the active OpenClaw config file ($OPENCLAW_CONFIG_PATH, default ~/.openclaw/openclaw.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/):

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:

CONFIG_PATH="${OPENCLAW_CONFIG_PATH:-${OPENCLAW_STATE_DIR:-$HOME/.openclaw}/openclaw.json}"
cat "$CONFIG_PATH" | 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:

tailscale status --json | jq -r '.Self.DNSName' | sed 's/\.$//'

3. Find connected nodes

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: CONFIG_PATH="${OPENCLAW_CONFIG_PATH:-${OPENCLAW_STATE_DIR:-$HOME/.openclaw}/openclaw.json}"; cat "$CONFIG_PATH" | 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

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free