canvas

The Canvas Skill enables the display of web content on any connected OpenClaw node's canvas view. It leverages a Canvas Host Server that serves static HTML/CSS/JS files, a Node Bridge that communicates canvas URLs, and Node Apps that render the content in a WebView. Tailscale integration allows for seamless content delivery across different network configurations.

This skill is ideal for presenting games, visualizations, dashboards, generated HTML content, and interactive demos on connected devices. Live reload functionality facilitates rapid development by automatically updating canvases upon file changes. The skill provides actions for presenting, hiding, navigating, evaluating JavaScript, and capturing snapshots of the canvas.

What It Does

Presents web content on connected OpenClaw nodes (Mac, iOS, Android). It sets up a local HTTP server to serve HTML, CSS, and JavaScript files and communicates the URL to the connected nodes for rendering.

When To Use

Use this skill when you need to display web-based content on OpenClaw nodes, such as interactive dashboards, games, visualizations, or any other HTML-based interface. It's especially useful for demos and development due to the live reload feature.

Limitations

Installation

1. Ensure you have OpenClaw installed and configured.
2. Verify the `canvasHost` section in your `~/.openclaw/openclaw.json` file is properly configured, including the `root` directory pointing to your HTML content.
3. Check that the `gateway.bind` setting is appropriate for your network setup (e.g., `auto`, `tailnet`, `lan`).

1. Open your OpenClaw project in Cursor.
2. Navigate to your `~/.openclaw/openclaw.json` configuration file.
3. Configure the `canvasHost` settings, including `enabled`, `port`, `root`, and `liveReload`.
4. Configure the `gateway.bind` setting to match your desired network configuration. 

1. Install OpenClaw following the instructions on the OpenClaw GitHub repository.
2. Create a directory to serve as your canvas root (e.g., `~/clawd/canvas`).
3. Configure the `canvasHost.root` setting in your `~/.openclaw/openclaw.json` file to point to this directory.
4. Ensure your nodes are connected and have canvas capability using `openclaw nodes list`.