Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
steipete avatar

Canvas

  • 46 installs
  • 385k repo stars
  • Updated August 3, 2026
  • steipete/clawdis

Helps with ai & agent building tasks during AI-assisted development.

About

canvas is a Claude Code skill for ai & agent building. It helps solo builders move faster with AI-assisted coding.

  • canvas
  • AI & Agent Building
  • AI-coding skill

Canvas by the numbers

  • 46 all-time installs (skills.sh)
  • Ranked #7,539 of 16,556 AI & Agent Building skills by installs in the Skillselion catalog
  • Data as of Aug 3, 2026 (Skillselion catalog sync)
npx skills add https://github.com/steipete/clawdis --skill canvas

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs46
repo stars385k
Last updatedAugust 3, 2026
Repositorysteipete/clawdis

What it does

Helps with ai & agent building tasks during AI-assisted development.

Files

SKILL.mdMarkdownGitHub ↗

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.

Related skills

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.