Canvas Skill

Display HTML content on connected Clawdbot nodes via a local HTTP server.

Updated Mar 3, 2026
One-click install
npx skills add https://github.com/feiji77-2/openclaw --skill canvas-skill-feiji77-2
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Canvas Skill
Source: https://github.com/feiji77-2/openclaw/tree/main/skills/canvas
Command: npx skills add https://github.com/feiji77-2/openclaw --skill canvas-skill-feiji77-2

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill allows you to display HTML content on connected Clawdbot nodes (Mac, iOS, Android), enabling visual outputs like dashboards, games, or interactive demos.

Core Features & Use Cases

  • Cross-Platform Display: Renders web content on various connected devices.
  • Interactive Visualizations: Ideal for showing dashboards, games, or generated HTML.
  • Development Aid: Live reload feature speeds up development by automatically updating content.

Quick Start

Use the canvas skill to present the 'my-game.html' file on the connected Mac 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 mobile and desktop devices?

To display HTML content on connected devices, this Skill uses a local HTTP server and bridge communication to render web content like dashboards or games across Mac, iOS, and Android nodes.

Can I run JavaScript and take snapshots of web content on remote nodes?

Yes, you can evaluate JavaScript and take snapshots of web content on connected nodes. The Skill supports these actions natively via its bridge communication protocol.

Does cross-platform web content display require Tailscale for connectivity?

Integrating with Tailscale is used to enable cross-device connectivity for displaying web content. It facilitates the network bridge between your local HTTP server and connected nodes.

How do I set up live reload for web content development on connected devices?

You can use the live reload feature to speed up development by automatically updating HTML content on connected devices. Present your file, and the Skill handles the automatic refresh.

What is the best way to present a local HTML file on a Mac node?

The best way to present a local HTML file on a Mac node is to use the canvas Skill, which serves the file via a local HTTP server and renders it through bridge communication.

What types of interactive visualizations can I render on connected Clawdbot nodes?

You can render interactive visualizations such as web dashboards, games, or generated HTML pages on connected Clawdbot nodes. The Skill supports rendering these visual outputs across platforms.