canvas

Display HTML content and execute JavaScript on OpenClaw node canvases.

18|1|Updated Jun 12, 2026
One-click install
npx skills add https://github.com/vignesh2027/Vilvona-AI --skill canvas-vignesh2027
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: canvas
Source: https://github.com/vignesh2027/Vilvona-AI/tree/main/skills/canvas
Command: npx skills add https://github.com/vignesh2027/Vilvona-AI --skill canvas-vignesh2027

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill allows users to present HTML content on connected OpenClaw node canvases, simplifying the navigation, evaluation, and debugging of canvas host URLs.

Core Features & Use Cases

  • HTML Display: Show HTML on connected Mac/iOS/Android node canvases.
  • Navigation and Evaluation: Navigate to new URLs, evaluate JavaScript, and capture screenshots within canvases.
  • Debugging: Debug canvas host URLs and troubleshoot issues with canvas rendering.
  • Use Case: Imagine you want to demonstrate a web application on a remote node. Use this Skill to present the application's HTML content on the canvas and interact with it directly.

Quick Start

Present the HTML content from 'example.html' on the canvas.

Frequently Asked Questions about canvas

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

FAQPage Schema
How do I display HTML content on an OpenClaw node canvas?

To display HTML content on an OpenClaw node canvas, you need a Skill that manages file serving and WebSocket communication to present the HTML directly within the WebView environment. It handles the rendering and interaction for connected Mac, iOS, or Android nodes.

Can I evaluate JavaScript and navigate to new URLs within a node canvas?

Yes, you can evaluate JavaScript and navigate to new URLs within a node canvas. The Skill handles WebSocket communication and JavaScript execution, allowing you to interact directly with the web content presented on the canvas for debugging or demonstration purposes.

What is the best way to debug HTML rendering issues on networked canvases?

The best way to debug HTML rendering issues on networked canvases is to use a Skill tailored for troubleshooting canvas host URLs. It allows you to navigate, evaluate JavaScript, and capture screenshots to identify and resolve rendering problems on connected nodes.

Does this HTML canvas visualization work with Mac, iOS, and Android nodes?

Yes, HTML canvas visualization works with Mac, iOS, and Android nodes. The Skill is designed to present HTML content and handle interactions across these connected OpenClaw node canvases, simplifying navigation and evaluation across different platforms.

Why do I need WebSocket communication for displaying HTML on a node canvas?

WebSocket communication is needed for displaying HTML on a node canvas to maintain a persistent connection between the host and the WebView environment. This allows real-time navigation, JavaScript execution, and content updates during debugging and demonstration sessions.

How do I capture screenshots of web applications presented on remote canvases?

To capture screenshots of web applications on remote canvases, use a Skill that manages the WebView environment on OpenClaw nodes. It handles file serving and interaction, allowing you to take screenshots of the HTML content currently displayed for debugging purposes.