canvas

Present HTML pages on connected OpenClaw node canvases and capture screenshots.

1|Updated Jun 9, 2026
One-click install
npx skills add https://github.com/JEROME-PRAKASH-L/openclaw --skill canvas-jerome-prakash-l
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: canvas
Source: https://github.com/JEROME-PRAKASH-L/openclaw/tree/main/skills/canvas
Command: npx skills add https://github.com/JEROME-PRAKASH-L/openclaw --skill canvas-jerome-prakash-l

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Displaying live HTML content on connected Mac, iOS, and Android devices requires manually hosting files, constructing reachable URLs, and debugging why remote nodes fail to load pages. This Skill manages the full canvas workflow from hosting to verification. ## Core Features & Use Cases - Canvas Presentation: Present, hide, and navigate HTML pages served from the canvas host root on connected node WebViews. - Remote Debugging: Run JavaScript with eval and capture screenshots with snapshot to verify what a node actually renders. - URL and Network Troubleshooting: Diagnose localhost, LAN, and Tailscale reachability issues tied to gateway.bind and gateway.port settings. - Use Case: Build a snake game HTML file, place it under the canvas host root, present it on a paired iPhone over Tailscale, and snapshot the result to confirm it renders. ## Quick Start Ask the assistant to present the file index.html from the canvas host root on the connected node and take a snapshot to confirm it loaded.

Frequently Asked Questions about canvas

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I show an HTML page on a connected OpenClaw node?

Place the HTML file under the canvas host root directory, then use the present action with the URL /__openclaw__/canvas/<file>.html on the gateway host and port. The node app renders the URL in its WebView.

How do I capture a screenshot of a node canvas?

Use the snapshot action to capture a screenshot of the current canvas on the node. This is the recommended way to verify that presented content actually rendered on the remote device.

Why does a remote node fail to load a localhost canvas URL?

Localhost URLs only work for nodes on the same machine as the Gateway. For remote nodes, set gateway.bind to lan or tailnet so the generated URL uses a LAN IP or Tailscale host the node can reach.

Can I run JavaScript inside the canvas on a node?

Yes, the eval action executes JavaScript in the current canvas WebView on the node. This is useful for inspecting page state or debugging rendering issues remotely.

Why is live reload not working for canvas files?

Live reload requires liveReload set to true in the canvas host config and the file must be written under the configured host root. Verify both conditions, then reload or re-present the URL.