Does the Canvas skill support automatic updates during development?

Yes, it includes a Live Reload feature that watches your root directory for changes and automatically refreshes connected canvases when files are saved.

How does the skill handle remote connections over the internet?

The skill integrates with Tailscale, allowing the Canvas Host to bind to a Tailscale interface and serve content to remote nodes using your private mesh network hostname.

What devices can I display content on using the Canvas skill?

You can display content on any connected OpenClaw node, which includes the OpenClaw Mac app as well as iOS and Android mobile applications.

Can I interact with the rendered content programmatically?

Yes, the skill provides actions to navigate to new URLs, execute custom JavaScript via the 'eval' command, and capture snapshots of the current view.

OpenClaw Canvas

Name: OpenClaw Canvas
Author: xiaxingxiaowei1983

byxiaxingxiaowei1983

0•

设计工具

Renders interactive HTML content, visualizations, and dashboards across connected Mac, iOS, and Android nodes.

The OpenClaw Canvas skill enables developers to bridge the gap between AI-generated code and live visual execution by serving HTML, CSS, and JavaScript content to connected devices. It leverages a specialized architecture involving a Canvas Host server and Node Bridge, allowing for real-time interaction, live reloading, and remote snapshots. Whether you are building interactive dashboards, game prototypes, or complex UI visualizations, this skill provides a seamless way to preview and test web-based content directly on native device environments using Tailscale or LAN connections.

主要功能

01Interactive control via JavaScript evaluation and navigation actions

02Visual debugging with automated canvas snapshot capabilities

03Real-time Live Reload functionality for rapid frontend development

04Multi-platform rendering for Mac, iOS, and Android applications

05Tailscale and LAN integration for secure remote device connectivity

060 GitHub stars

使用场景

01Prototyping and testing lightweight web-based games and interactive demos

02Instant previewing of AI-generated web components on physical mobile devices

03Creating and monitoring real-time data dashboards on remote auxiliary screens

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xiaxingxiaowei1983/ai canvas

For use in Claude.ai and ChatGPT