Canvas Skill

Render web-based interfaces on connected OpenClaw nodes via a local HTTP server.

Updated Mar 26, 2026
One-click install
npx skills add https://github.com/tedtv1007-ctrl/milk-skills-library --skill canvas-skill-tedtv1007-ctrl
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Canvas Skill
Source: https://github.com/tedtv1007-ctrl/milk-skills-library/tree/main/canvas
Command: npx skills add https://github.com/tedtv1007-ctrl/milk-skills-library --skill canvas-skill-tedtv1007-ctrl

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the challenge of remotely displaying dynamic web content, dashboards, or interactive visualizations on connected OpenClaw nodes (Mac, iOS, Android) without manual screen sharing.

Core Features & Use Cases

  • Remote Presentation: Instantly push HTML/CSS/JS content to any connected device.
  • Live Development: Automatically reload content on connected nodes whenever local files are saved.
  • Interactive Control: Execute JavaScript and capture snapshots of the remote canvas for monitoring or debugging.
  • Use Case: A developer can push a custom dashboard to a wall-mounted iPad, or a user can trigger a game or visualization on a secondary Mac node via simple voice or text commands.

Quick Start

Use the canvas skill to present the file named dashboard.html on the node with the 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 interactive web content on a remote device without manual screen sharing?

To display web content remotely, you need a configured canvas host directory and an active node bridge connection. Once connected, you can push HTML/CSS/JS files to any OpenClaw node on your local network or Tailscale mesh.

How do I push a custom HTML dashboard to a wall-mounted iPad?

Pushing a custom HTML dashboard to a wall-mounted iPad is done by presenting the file to the specific node using its unique ID. The skill facilitates cross-platform UI automation and content delivery to connected iOS, Mac, or Android nodes.

Can I execute JavaScript and capture snapshots of a remote web canvas for debugging?

Yes, you can execute JavaScript and capture snapshots of the remote canvas for monitoring or debugging. This interactive control feature allows you to evaluate commands directly on the connected node's presented web content.

Does live development automatically reload web content on connected nodes when local files are saved?

Live development automatically reloads web content on connected nodes whenever local files are saved. This streamlines the development workflow by instantly reflecting local file changes on the remote display without manual refresh commands.

Do I need a Tailscale mesh to render web interfaces on OpenClaw nodes?

You do not need a Tailscale mesh, as the skill operates across local networks as well. However, a configured canvas host directory and an active node bridge connection are required to execute presentation and navigation commands on connected nodes.