skills.rest
AmirulAndalib
AmirulAndalibCOMMUNITY
Explore all skills by this author →
GitHub

canvas

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

Updated Jun 19, 2026
Search Tags:#html#canvas#snapshot#gateway#webview#openclaw#remote display
One-click install
npx skills add https://github.com/AmirulAndalib/Vilvona-AI --skill canvas-amirulandalib
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canvas
Source: https://github.com/AmirulAndalib/Vilvona-AI/tree/main/skills/canvas
Command: npx skills add https://github.com/AmirulAndalib/Vilvona-AI --skill canvas-amirulandalib

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Displaying custom HTML interfaces on remote Mac, iOS, and Android nodes requires manually configuring hosts, URLs, and debugging connectivity issues across different network setups. ## Core Features & Use Cases - Canvas Presentation: Show, hide, and navigate HTML pages rendered in WebViews on connected node devices. - Remote Debugging: Evaluate JavaScript in the active canvas and capture screenshots to verify what nodes actually display. - Network-Aware Hosting: Serve canvas files through the Gateway HTTP port with host resolution for loopback, LAN, and Tailscale routes. - Use Case: Build a snake game HTML file, place it under the canvas host root, present it on a paired iOS device, and snapshot the result to confirm rendering. ## Quick Start Ask the assistant to present the file index.html from the canvas host root on the connected node and then take a snapshot to verify it rendered.

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, enable the canvas plugin host in openclaw.json, then use the present action with the URL /__openclaw__/canvas/<file>.html on the gateway port.

How to capture a screenshot of a canvas on a remote node?▼

Use the snapshot action after presenting the canvas. It captures a screenshot of the current canvas content on the node, which is useful for verifying what the user actually sees.

Why does a node show a blank page or fail to load the canvas URL?▼

Localhost URLs only work for nodes on the same machine. For remote nodes, set gateway.bind to lan or tailscale so the host resolves to a reachable address, and verify firewall rules and the gateway port.

Can I run JavaScript inside a canvas on a connected device?▼

Yes, the eval action executes JavaScript in the current canvas WebView on the node. This supports debugging and dynamic interaction with the presented page.

Does canvas live reload work when editing HTML files?▼

Live reload works when liveReload is set to true in the canvas host config and files are written under the configured host root. Verify both conditions if updates do not appear.

Related Skills

Explore More Software Engineering Skills→
JEROME-PRAKASH-LJEROME-PRAKASH-L
1

canvas

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

Community
Intermediate
elizaOSelizaOS
19.0k

canvas

Display HTML content on connected Otto nodes across Mac, iOS, and Android.

Official
Intermediate
flemzordflemzord
6

canvas

Renders HTML content on connected OpenClaw nodes via a local canvas host and bridge.

Community
Intermediate
panaversitypanaversity

configuring-better-auth

Configure centralized OAuth 2.1/OIDC authentication with Better Auth and MCP.

Official
Advanced