skills.rest
seedprod
seedprodCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/seedprod/openclaw-prompts-and-skills --skill canvas-skill-seedprod
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
sky770825sky770825

canvas

Serve and display HTML content across connected OpenClaw client devices.

Community
Intermediate
LuisvelMarketerLuisvelMarketer
1

Canvas Skill

Present HTML content on Genoma nodes via an HTTP server and node bridge.

Community
Intermediate
malue-aimalue-ai
36

canvas

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

Official
Intermediate
sitharaj88sitharaj88
1

generate-native-bridge

Generate native platform bridges for React Native, Flutter, and Kotlin Multiplatform apps.

Community
Advanced