{
  "schemaVersion": "1.0",
  "item": {
    "slug": "canvas",
    "name": "Canvas",
    "source": "tencent",
    "type": "skill",
    "category": "通讯协作",
    "sourceUrl": "https://clawhub.ai/lura2/canvas",
    "canonicalUrl": "https://clawhub.ai/lura2/canvas",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/canvas",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=canvas",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "SKILL.md"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "Download the package from Yavira.",
        "Extract it into a folder your agent can access.",
        "Paste one of the prompts below and point your agent at the extracted folder."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
        },
        {
          "label": "Upgrade existing",
          "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-23T16:43:11.935Z",
      "expiresAt": "2026-04-30T16:43:11.935Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard",
        "contentDisposition": "attachment; filename=\"4claw-imageboard-1.0.1.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/canvas"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/canvas",
    "agentPageUrl": "https://openagent3.xyz/skills/canvas/agent",
    "manifestUrl": "https://openagent3.xyz/skills/canvas/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/canvas/agent.md"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "Download the package from Yavira.",
      "Extract it into a folder your agent can access.",
      "Paste one of the prompts below and point your agent at the extracted folder."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
      },
      {
        "label": "Upgrade existing",
        "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "Canvas Skill",
        "body": "Display HTML content on connected OpenClaw nodes (Mac app, iOS, Android)."
      },
      {
        "title": "Overview",
        "body": "The canvas tool lets you present web content on any connected node's canvas view. Great for:\n\nDisplaying games, visualizations, dashboards\nShowing generated HTML content\nInteractive demos"
      },
      {
        "title": "Architecture",
        "body": "┌─────────────────┐     ┌──────────────────┐     ┌─────────────┐\n│  Canvas Host    │────▶│   Node Bridge    │────▶│  Node App   │\n│  (HTTP Server)  │     │  (TCP Server)    │     │ (Mac/iOS/   │\n│  Port 18793     │     │  Port 18790      │     │  Android)   │\n└─────────────────┘     └──────────────────┘     └─────────────┘\n\nCanvas Host Server: Serves static HTML/CSS/JS files from canvasHost.root directory\nNode Bridge: Communicates canvas URLs to connected nodes\nNode Apps: Render the content in a WebView"
      },
      {
        "title": "Tailscale Integration",
        "body": "The canvas host server binds based on gateway.bind setting:\n\nBind ModeServer Binds ToCanvas URL Usesloopback127.0.0.1localhost (local only)lanLAN interfaceLAN IP addresstailnetTailscale interfaceTailscale hostnameautoBest availableTailscale > LAN > loopback\n\nKey insight: The canvasHostHostForBridge is derived from bridgeHost. When bound to Tailscale, nodes receive URLs like:\n\nhttp://<tailscale-hostname>:18793/__openclaw__/canvas/<file>.html\n\nThis is why localhost URLs don't work - the node receives the Tailscale hostname from the bridge!"
      },
      {
        "title": "Actions",
        "body": "ActionDescriptionpresentShow canvas with optional target URLhideHide the canvasnavigateNavigate to a new URLevalExecute JavaScript in the canvassnapshotCapture screenshot of canvas"
      },
      {
        "title": "Configuration",
        "body": "In ~/.openclaw/openclaw.json:\n\n{\n  \"canvasHost\": {\n    \"enabled\": true,\n    \"port\": 18793,\n    \"root\": \"/Users/you/clawd/canvas\",\n    \"liveReload\": true\n  },\n  \"gateway\": {\n    \"bind\": \"auto\"\n  }\n}"
      },
      {
        "title": "Live Reload",
        "body": "When liveReload: true (default), the canvas host:\n\nWatches the root directory for changes (via chokidar)\nInjects a WebSocket client into HTML files\nAutomatically reloads connected canvases when files change\n\nGreat for development!"
      },
      {
        "title": "1. Create HTML content",
        "body": "Place files in the canvas root directory (default ~/clawd/canvas/):\n\ncat > ~/clawd/canvas/my-game.html << 'HTML'\n<!DOCTYPE html>\n<html>\n<head><title>My Game</title></head>\n<body>\n  <h1>Hello Canvas!</h1>\n</body>\n</html>\nHTML"
      },
      {
        "title": "2. Find your canvas host URL",
        "body": "Check how your gateway is bound:\n\ncat ~/.openclaw/openclaw.json | jq '.gateway.bind'\n\nThen construct the URL:\n\nloopback: http://127.0.0.1:18793/__openclaw__/canvas/<file>.html\nlan/tailnet/auto: http://<hostname>:18793/__openclaw__/canvas/<file>.html\n\nFind your Tailscale hostname:\n\ntailscale status --json | jq -r '.Self.DNSName' | sed 's/\\.$//'"
      },
      {
        "title": "3. Find connected nodes",
        "body": "openclaw nodes list\n\nLook for Mac/iOS/Android nodes with canvas capability."
      },
      {
        "title": "4. Present content",
        "body": "canvas action:present node:<node-id> target:<full-url>\n\nExample:\n\ncanvas action:present node:mac-63599bc4-b54d-4392-9048-b97abd58343a target:http://peters-mac-studio-1.sheep-coho.ts.net:18793/__openclaw__/canvas/snake.html"
      },
      {
        "title": "5. Navigate, snapshot, or hide",
        "body": "canvas action:navigate node:<node-id> url:<new-url>\ncanvas action:snapshot node:<node-id>\ncanvas action:hide node:<node-id>"
      },
      {
        "title": "White screen / content not loading",
        "body": "Cause: URL mismatch between server bind and node expectation.\n\nDebug steps:\n\nCheck server bind: cat ~/.openclaw/openclaw.json | jq '.gateway.bind'\nCheck what port canvas is on: lsof -i :18793\nTest URL directly: curl http://<hostname>:18793/__openclaw__/canvas/<file>.html\n\nSolution: Use the full hostname matching your bind mode, not localhost."
      },
      {
        "title": "\"node required\" error",
        "body": "Always specify node:<node-id> parameter."
      },
      {
        "title": "\"node not connected\" error",
        "body": "Node is offline. Use openclaw nodes list to find online nodes."
      },
      {
        "title": "Content not updating",
        "body": "If live reload isn't working:\n\nCheck liveReload: true in config\nEnsure file is in the canvas root directory\nCheck for watcher errors in logs"
      },
      {
        "title": "URL Path Structure",
        "body": "The canvas host serves from /__openclaw__/canvas/ prefix:\n\nhttp://<host>:18793/__openclaw__/canvas/index.html  → ~/clawd/canvas/index.html\nhttp://<host>:18793/__openclaw__/canvas/games/snake.html → ~/clawd/canvas/games/snake.html\n\nThe /__openclaw__/canvas/ prefix is defined by CANVAS_HOST_PATH constant."
      },
      {
        "title": "Tips",
        "body": "Keep HTML self-contained (inline CSS/JS) for best results\nUse the default index.html as a test page (has bridge diagnostics)\nThe canvas persists until you hide it or navigate away\nLive reload makes development fast - just save and it updates!\nA2UI JSON push is WIP - use HTML files for now"
      }
    ],
    "body": "Canvas Skill\n\nDisplay HTML content on connected OpenClaw nodes (Mac app, iOS, Android).\n\nOverview\n\nThe canvas tool lets you present web content on any connected node's canvas view. Great for:\n\nDisplaying games, visualizations, dashboards\nShowing generated HTML content\nInteractive demos\nHow It Works\nArchitecture\n┌─────────────────┐     ┌──────────────────┐     ┌─────────────┐\n│  Canvas Host    │────▶│   Node Bridge    │────▶│  Node App   │\n│  (HTTP Server)  │     │  (TCP Server)    │     │ (Mac/iOS/   │\n│  Port 18793     │     │  Port 18790      │     │  Android)   │\n└─────────────────┘     └──────────────────┘     └─────────────┘\n\nCanvas Host Server: Serves static HTML/CSS/JS files from canvasHost.root directory\nNode Bridge: Communicates canvas URLs to connected nodes\nNode Apps: Render the content in a WebView\nTailscale Integration\n\nThe canvas host server binds based on gateway.bind setting:\n\nBind Mode\tServer Binds To\tCanvas URL Uses\nloopback\t127.0.0.1\tlocalhost (local only)\nlan\tLAN interface\tLAN IP address\ntailnet\tTailscale interface\tTailscale hostname\nauto\tBest available\tTailscale > LAN > loopback\n\nKey insight: The canvasHostHostForBridge is derived from bridgeHost. When bound to Tailscale, nodes receive URLs like:\n\nhttp://<tailscale-hostname>:18793/__openclaw__/canvas/<file>.html\n\n\nThis is why localhost URLs don't work - the node receives the Tailscale hostname from the bridge!\n\nActions\nAction\tDescription\npresent\tShow canvas with optional target URL\nhide\tHide the canvas\nnavigate\tNavigate to a new URL\neval\tExecute JavaScript in the canvas\nsnapshot\tCapture screenshot of canvas\nConfiguration\n\nIn ~/.openclaw/openclaw.json:\n\n{\n  \"canvasHost\": {\n    \"enabled\": true,\n    \"port\": 18793,\n    \"root\": \"/Users/you/clawd/canvas\",\n    \"liveReload\": true\n  },\n  \"gateway\": {\n    \"bind\": \"auto\"\n  }\n}\n\nLive Reload\n\nWhen liveReload: true (default), the canvas host:\n\nWatches the root directory for changes (via chokidar)\nInjects a WebSocket client into HTML files\nAutomatically reloads connected canvases when files change\n\nGreat for development!\n\nWorkflow\n1. Create HTML content\n\nPlace files in the canvas root directory (default ~/clawd/canvas/):\n\ncat > ~/clawd/canvas/my-game.html << 'HTML'\n<!DOCTYPE html>\n<html>\n<head><title>My Game</title></head>\n<body>\n  <h1>Hello Canvas!</h1>\n</body>\n</html>\nHTML\n\n2. Find your canvas host URL\n\nCheck how your gateway is bound:\n\ncat ~/.openclaw/openclaw.json | jq '.gateway.bind'\n\n\nThen construct the URL:\n\nloopback: http://127.0.0.1:18793/__openclaw__/canvas/<file>.html\nlan/tailnet/auto: http://<hostname>:18793/__openclaw__/canvas/<file>.html\n\nFind your Tailscale hostname:\n\ntailscale status --json | jq -r '.Self.DNSName' | sed 's/\\.$//'\n\n3. Find connected nodes\nopenclaw nodes list\n\n\nLook for Mac/iOS/Android nodes with canvas capability.\n\n4. Present content\ncanvas action:present node:<node-id> target:<full-url>\n\n\nExample:\n\ncanvas action:present node:mac-63599bc4-b54d-4392-9048-b97abd58343a target:http://peters-mac-studio-1.sheep-coho.ts.net:18793/__openclaw__/canvas/snake.html\n\n5. Navigate, snapshot, or hide\ncanvas action:navigate node:<node-id> url:<new-url>\ncanvas action:snapshot node:<node-id>\ncanvas action:hide node:<node-id>\n\nDebugging\nWhite screen / content not loading\n\nCause: URL mismatch between server bind and node expectation.\n\nDebug steps:\n\nCheck server bind: cat ~/.openclaw/openclaw.json | jq '.gateway.bind'\nCheck what port canvas is on: lsof -i :18793\nTest URL directly: curl http://<hostname>:18793/__openclaw__/canvas/<file>.html\n\nSolution: Use the full hostname matching your bind mode, not localhost.\n\n\"node required\" error\n\nAlways specify node:<node-id> parameter.\n\n\"node not connected\" error\n\nNode is offline. Use openclaw nodes list to find online nodes.\n\nContent not updating\n\nIf live reload isn't working:\n\nCheck liveReload: true in config\nEnsure file is in the canvas root directory\nCheck for watcher errors in logs\nURL Path Structure\n\nThe canvas host serves from /__openclaw__/canvas/ prefix:\n\nhttp://<host>:18793/__openclaw__/canvas/index.html  → ~/clawd/canvas/index.html\nhttp://<host>:18793/__openclaw__/canvas/games/snake.html → ~/clawd/canvas/games/snake.html\n\n\nThe /__openclaw__/canvas/ prefix is defined by CANVAS_HOST_PATH constant.\n\nTips\nKeep HTML self-contained (inline CSS/JS) for best results\nUse the default index.html as a test page (has bridge diagnostics)\nThe canvas persists until you hide it or navigate away\nLive reload makes development fast - just save and it updates!\nA2UI JSON push is WIP - use HTML files for now"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/lura2/canvas",
    "publisherUrl": "https://clawhub.ai/lura2/canvas",
    "owner": "lura2",
    "version": "1.0.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/canvas",
    "downloadUrl": "https://openagent3.xyz/downloads/canvas",
    "agentUrl": "https://openagent3.xyz/skills/canvas/agent",
    "manifestUrl": "https://openagent3.xyz/skills/canvas/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/canvas/agent.md"
  }
}