Canvas Skill

Display HTML content on OpenClaw nodes via a local HTTP server and node bridge.

93|20|Updated Jan 31, 2026

Search Tags:#cross-platform #visualization #canvas #web content #display #live reload

Ready to run

npx skills add https://github.com/seedprod/openclaw-prompts-and-skills --skill canvas-skill-seedprod

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Canvas Skill
Source: https://github.com/seedprod/openclaw-prompts-and-skills/tree/main/.claude/skills/canvas
Command: npx skills add https://github.com/seedprod/openclaw-prompts-and-skills --skill canvas-skill-seedprod

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill enables the visualization of web-based content, such as dashboards, games, or interactive demos, directly on connected devices like Mac, iOS, and Android applications, bridging the gap between web content and native device display.

Core Features & Use Cases

Cross-Platform Display: Renders HTML/CSS/JS content on various OpenClaw nodes (Mac, iOS, Android).
Interactive Content: Supports displaying games, visualizations, and interactive demos.
Live Reload: Facilitates rapid development by automatically updating displayed content upon file changes.
Use Case: Developers can instantly preview interactive web components or visualizations on target devices during the development cycle.

Quick Start

Present the 'my-game.html' file on the node with ID 'mac-63599bc4-b54d-4392-9048-b97abd58343a'.

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 iOS and Android devices?▼

To display HTML content on connected iOS and Android devices, this Skill serves it via a local HTTP server and a node bridge, allowing you to present web visualizations directly on target hardware.

Can I preview interactive web components on Mac during development?▼

Yes, you can preview interactive web components on Mac nodes. The Skill renders HTML/CSS/JS content and supports a live reload feature to automatically update displayed content upon file changes.

Do I need Tailscale to present web content on local network nodes?▼

You do not strictly need Tailscale, as nodes can access content using LAN IPs. However, integrating with Tailscale provides network connectivity, allowing nodes to access content served from the canvas host using Tailscale hostnames.

What actions can I perform on web content displayed across connected nodes?▼

Supported actions for web content displayed across connected nodes include presenting, hiding, navigating, evaluating JavaScript, and taking snapshots of the canvas.

How does live reload work for interactive demos on connected nodes?▼

Live reload works by automatically updating the displayed interactive demos on connected nodes whenever the underlying web content files change, facilitating rapid development cycles without manual refreshes.