تشغيل أي مهارة في Manus بنقرة واحدة

ابدأ الآن

canvas

النجوم٢

التفرعات٠

آخر تحديث٥ يونيو ٢٠٢٦ في ١٠:٠٦

Present HTML on connected OpenClaw node canvases, navigate/eval/snapshot, and debug canvas host URLs.

التثبيت

التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.

تشغيل في Manus

المصدر

Chethan616

Chethan616/Dex

فتح مستودع GitHub عرض مستودعات المنشئ

تنزيل

تشغيل في Manus

المهن ذات الصلةSOC

استنادا إلى تصنيف SOC المهني

مصممو واجهات الويب والرقميةمهن الحاسوب والرياضيات·SOC 15-1255

SKILL.md

readonly

name	canvas
description	Present 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: $DEX_CONFIG_PATH or ~/.dex/openclaw.json.

{
  "plugins": {
    "entries": {
      "canvas": {
        "config": {
          "host": {
            "enabled": true,
            "root": "~/.dex/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

Ensure Canvas plugin host is enabled.
Put HTML/CSS/JS under plugins.entries.canvas.config.host.root or the default state canvas dir.
Use a route reachable by the target node.
Present the hosted URL: /__openclaw__/canvas/<file>.html.
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.

المزيد من هذا المستودع

نفس المستودع

windows-desktop-control

Chethan616/Dex

Drive native Windows app GUIs (Office, Settings, Calculator, file dialogs, Photoshop, anything Win32) via UFO2 and the Windows accessibility tree. NOT for browser tasks -- use run_browser_task instead.

2026-06-222

browser-control

Chethan616/Dex

Drive a real web browser (Chromium via Playwright + browser-use) to accomplish tasks inside web pages -- forms, scraping, multi-page flows, web-based tests. Use for ANY task that interacts with rendered HTML.

2026-06-142

node-inspect-debugger

Chethan616/Dex

Debug Node.js with node inspect, --inspect, breakpoints, CDP, heap, and CPU profiles.

2026-06-052

crabbox

Chethan616/Dex

Use the Crabbox wrapper for OpenClaw remote validation across Linux, macOS, Windows, and WSL2, including delegated Blacksmith Testbox proof. Report the actual provider and id.

2026-06-052

openclaw-debugging

Chethan616/Dex

Debug OpenClaw model, provider, tool-surface, code-mode, streaming, and live/Crabbox behavior by choosing the right logs, probes, and proof path before changing code.

2026-06-052

openclaw-parallels-smoke

Chethan616/Dex

Run, rerun, debug, or interpret OpenClaw Parallels install, onboarding, gateway smoke, and upgrade checks.

2026-06-052

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: $DEX_CONFIG_PATH or ~/.dex/openclaw.json.

{ "plugins": { "entries": { "canvas": { "config": { "host": { "enabled": true, "root": "~/.dex/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

Ensure Canvas plugin host is enabled.

Put HTML/CSS/JS under plugins.entries.canvas.config.host.root or the default state canvas dir.

Use a route reachable by the target node.

Present the hosted URL: /__openclaw__/canvas/<file>.html.

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.