Does it support CSS and JavaScript?

Absolutely. The Canvas skill serves full web content including CSS and JS from your specified root directory, allowing for complex interactive applications.

How do I view my content on a mobile device?

Ensure your node is connected via the OpenClaw mobile app and use the 'present' action with the specific node ID and target URL generated by the canvas host.

Live reload is a feature that automatically refreshes the WebView on all connected nodes whenever you save changes to your HTML files in the canvas root directory.

Can I use this for remote development?

Yes, by setting the gateway bind to 'tailnet', you can securely serve content from your local machine to nodes across different networks using Tailscale hostnames.

How do I take a screenshot of the canvas?

You can use the 'snapshot' action directed at a specific node ID to capture the current state of the rendered canvas.

OpenClaw Canvas

Name: OpenClaw Canvas
Author: xiaxingxiaowei1983

byxiaxingxiaowei1983

0•

游戏开发

Renders dynamic HTML content, interactive visualizations, and real-time dashboards across connected Mac, iOS, and Android devices.

The Canvas skill for OpenClaw provides a powerful bridge between Claude Code and external device screens, allowing developers to instantly preview and interact with web-based content. It handles the orchestration of local or remote servers—including Tailscale integration—to serve HTML, CSS, and JavaScript files directly to a native WebView on connected nodes. With built-in support for live reloading, JavaScript evaluation, and snapshots, it is an essential tool for testing frontend designs, building interactive game prototypes, or monitoring data via real-time dashboards.

主要功能

01Tailscale integration for seamless remote content delivery across networks

02Multi-platform HTML rendering on Mac, iOS, and Android nodes

03Interactive JavaScript execution and canvas state snapshotting

040 GitHub stars

05Automated live reload for rapid frontend development and iteration

06Flexible gateway binding supporting loopback, LAN, and Tailnet modes

使用场景

01Instant prototyping and testing of web-based games and UI components

02Displaying real-time data visualizations and monitoring dashboards

03Creating interactive documentation or live demos on physical mobile devices

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xiaxingxiaowei1983/openclaw canvas

For use in Claude.ai and ChatGPT