Canvas

What This Skill Does

The Canvas skill, provided by OpenClaw, allows you to display HTML content on the screens of connected OpenClaw nodes. These nodes can be devices running the OpenClaw application on macOS, iOS, or Android. This capability transforms your connected devices into dynamic displays for a variety of content, ranging from interactive games and data visualizations to dashboards and simple HTML pages. It's an effective tool for showcasing generated content, running interactive demos, or simply presenting information in a visually engaging way.

Installation

To install the Canvas skill, use the following command in your OpenClaw environment:

clawhub install openclaw/openclaw/skills/canvas

This command will download and enable the Canvas skill, making its functionalities available for use.

Use Cases

The Canvas skill is highly versatile and can be used in numerous scenarios:

• Interactive Dashboards: Display real-time data visualizations and analytics directly on your devices.
• Web-Based Games: Run simple browser games or interactive experiences on any connected node.
• Product Demos: Showcase interactive prototypes or web applications to clients or team members.
• Educational Tools: Present learning materials, simulations, or interactive exercises.
• Content Sharing: Easily share generated HTML content, such as reports or custom interfaces.
• Development & Debugging: Quickly preview HTML, CSS, and JavaScript changes on target devices during development.

Example Prompts

Here are some example prompts you can use to interact with the Canvas skill:

1. "Show me the my-game.html file on all connected devices."
2. "Navigate the canvas on my Mac to https://example.com/dashboard."
3. "Hide the canvas view on my phone."

Tips & Limitations

• Configuration is Key: Ensure your openclaw.json is configured correctly, especially the gateway.bind setting. The canvasHost.root path must point to a valid directory containing your HTML files. The default path is ~/clawd/canvas/.
• Networking: The Canvas skill relies on a local HTTP server and a TCP bridge. Ensure your network configuration (especially firewall settings) allows communication between the OpenClaw host and the connected nodes. Tailscale integration simplifies this, but understanding the binding modes (loopback, lan, tailnet, auto) is crucial for seamless connectivity.
• Live Reload: For development, enable liveReload: true in your openclaw.json. This feature automatically reloads the canvas content when changes are detected in the root directory, significantly speeding up the development workflow.
• URL Construction: When accessing content, be mindful that the URL will use the hostname or IP address determined by the gateway.bind setting, not necessarily localhost.
• Content Security: As you are serving HTML content, ensure that any external resources loaded by your HTML files are trusted and secure.
• Performance: Complex HTML, JavaScript, or large assets might impact the performance of the rendering on the connected nodes, depending on the device's capabilities.