Canvas Skill

Present HTML content on connected OpenClaw nodes via HTTP server and TCP bridge.

Updated Feb 15, 2026
One-click install
npx skills add https://github.com/badbsallyy/openclaw-source-code --skill canvas-skill-badbsallyy
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Canvas Skill
Source: https://github.com/badbsallyy/openclaw-source-code/tree/main/openclaw-sourcecode.zip/skills/canvas
Command: npx skills add https://github.com/badbsallyy/openclaw-source-code --skill canvas-skill-badbsallyy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill allows you to display custom HTML content on connected OpenClaw nodes, enabling rich visualizations, interactive demos, and web-based applications across devices.

Core Features & Use Cases

  • Cross-Platform Display: Renders HTML content on Mac, iOS, and Android nodes.
  • Live Reload: Automatically updates content in real-time during development when files change.
  • Use Case: Displaying a live data dashboard, a simple web game, or an interactive tutorial directly on a connected device's screen.

Quick Start

Use the canvas skill to present the HTML file 'my-game.html' on the specified node.

Frequently Asked Questions about Canvas Skill

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

FAQPage Schema
How do I display HTML content on connected cross-platform nodes?

To display HTML content on connected cross-platform nodes, you can use this Skill to present web-based applications, visualizations, and interactive demos on Mac, iOS, and Android devices. It renders custom HTML files directly on the target screens.

Can I automatically reload HTML files on a node when they change during development?

Yes, you can automatically reload HTML files on a node when they change during development. The Skill features live reload capabilities, automatically updating the displayed content in real-time across connected nodes whenever the source files are modified.

Does this Skill support evaluating JavaScript and capturing screenshots on target nodes?

Yes, this Skill supports evaluating JavaScript and capturing screenshots on target nodes. It enables actions like presenting, hiding, navigating, executing JavaScript code, and taking screenshots directly on the connected cross-platform devices.

How does the HTML presentation communicate between the local server and connected devices?

HTML presentation communicates between the local server and connected devices through an integrated local HTTP server and a TCP bridge. This communication mechanism facilitates the transmission of commands and content updates to the connected nodes for display.

What is the best way to show an interactive web demo on an iOS or Android device?

The best way to show an interactive web demo on an iOS or Android device is by using this Skill to present your HTML file. It directly renders the web-based application or interactive tutorial onto the connected mobile device's screen.