@steipete/canvas

Your own personal AI assistant. Any OS. Any Platform. The lobster way. 🦞

View in AI SkillSafe app
1411106 downloads
0 stars
0 demos
SKILL.md
namecanvas
descriptionPresent HTML on connected OpenClaw node canvases, navigate/eval/snapshot, and debug canvas host URLs.
metadata{ "openclaw": { "emoji": "🖼️" } }

Canvas

Use canvas to show HTML on connected Mac/iOS/Android nodes.

Model

  • Canvas host serves files from plugins.entries.canvas.config.host.root.
  • Canvas routes live on the Gateway HTTP port (gateway.port, default 18789).
  • Node bridge sends canvas URLs to connected node apps.
  • Node apps render URLs in a WebView.
  • Host name follows gateway.bind: loopback local only, LAN IP for LAN, Tailscale host for tailnet, auto picks best route.
  • Localhost URLs only work for a node on the same machine.
  • Paired nodes normally receive node-scoped pluginSurfaceUrls.canvas capability URLs; prefer those when available.

Config

Active config: $OPENCLAW_CONFIG_PATH or ~/.openclaw/openclaw.json.

{
  "plugins": {
    "entries": {
      "canvas": {
        "config": {
          "host": {
            "enabled": true,
            "root": "~/.openclaw/canvas",
            "liveReload": true
          }
        }
      }
    }
  },
  "gateway": { "bind": "auto" }
}

Actions

  • present: show canvas, optional URL.
  • hide: hide canvas.
  • navigate: open new URL.
  • eval: run JavaScript in current canvas.
  • snapshot: capture screenshot.

Workflow

  1. Ensure Canvas plugin host is enabled.
  2. Put HTML/CSS/JS under plugins.entries.canvas.config.host.root or the default state canvas dir.
  3. Use a route reachable by the target node.
  4. Present the hosted URL: /__openclaw__/canvas/<file>.html.
  5. Use snapshot when the user needs proof.

URL shape

http://<gateway-host>:<gateway.port>/__openclaw__/canvas/index.html
http://<gateway-host>:<gateway.port>/__openclaw__/canvas/games/snake.html

Path mapping:

  • /__openclaw__/canvas/index.html -> <canvas host root>/index.html
  • /__openclaw__/canvas/games/snake.html -> <canvas host root>/games/snake.html

Troubleshooting

  • Node sees localhost but is remote: fix gateway.bind or public URL, regenerate URL.
  • LAN node cannot load: verify same network, firewall, Gateway port, and auth/capability URL.
  • Tailnet node cannot load: verify Tailscale status and advertised host.
  • Blank page: open URL locally, check browser console, then snapshot node.
  • Live reload missing: verify liveReload and file write under root.

Embed badges

Add these to your README to show the skill's verification status.

SkillSafe verified badge
Verified badge
[![SkillSafe verified badge](https://api.skillsafe.ai/v1/badge/@steipete/canvas/verified)](https://skillsafe.ai/skill/@steipete/canvas/)
Installs badge
Installs badge
[![Installs badge](https://api.skillsafe.ai/v1/badge/@steipete/canvas/installs)](https://skillsafe.ai/skill/@steipete/canvas/)
Scan badge
Scan badge
[![Scan badge](https://api.skillsafe.ai/v1/badge/@steipete/canvas/scan)](https://skillsafe.ai/skill/@steipete/canvas/)
Eval pass rate badge
Eval pass rate
[![Eval pass rate badge](https://api.skillsafe.ai/v1/badge/@steipete/canvas/eval)](https://skillsafe.ai/skill/@steipete/canvas/)