Canvas Skill

Present local HTML content on connected OpenClaw nodes via WebView rendering.

Updated Apr 8, 2026
One-click install
npx skills add https://github.com/JOHNNYWHITEMIKE/openclaw --skill canvas-skill-johnnywhitemike
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Canvas Skill
Source: https://github.com/JOHNNYWHITEMIKE/openclaw/tree/main/openclaw/.openclaw/openclaw/skills/canvas
Command: npx skills add https://github.com/JOHNNYWHITEMIKE/openclaw --skill canvas-skill-johnnywhitemike

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Canvas Skill solves the problem of quickly displaying rich, interactive web content on connected OpenClaw devices without building separate native UI screens.

Core Features & Use Cases

  • Present HTML on device canvases: Render any HTML/CSS/JS file from the canvas host in the node’s WebView.
  • Control the canvas at runtime: Show, hide, navigate to new URLs, or execute JavaScript for in-page interactivity.
  • Capture and iterate fast with live reload: Automatically reload the canvas when files change, and take screenshots when needed.
  • Use cases: Game demos, dashboards, visualization pages, and interactive prototypes driven by a single local web folder.

Quick Start

Place your file in the canvas root (for example, ~/clawd/canvas/), then present it to a specific node using: canvas action:present node:<node-id> target:<full-url-to-your-html-file>.

Frequently Asked Questions about Canvas Skill

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I display local HTML content on connected devices without building native UI?

To display local HTML content on connected devices, use the Canvas Skill to present HTML/CSS/JS files from a canvas host URL directly into the WebView of connected OpenClaw nodes. This renders interactive web content without separate native screens.

Can I execute JavaScript and navigate URLs in a WebView during a live presentation?

Yes, you can control the WebView during a live presentation by executing JavaScript and navigating to new URLs. The Canvas Skill supports runtime manipulation, allowing you to trigger in-page interactivity and direct the canvas to specific targets.

Does live reload work for HTML files when presenting interactive demos across Mac and iOS?

Live reload works across Mac, iOS, and Android nodes for interactive demos. The Canvas Skill automatically reloads the WebView canvas when local HTML files change, enabling rapid iteration and instant updates on all connected devices.

What is the best way to capture screenshots of a local web folder during a remote presentation?

The best way to capture screenshots of a local web folder during a remote presentation is using the Canvas Skill. It renders your local HTML files on connected nodes and supports screenshot capture directly from the WebView.

How do I present an interactive dashboard to a specific OpenClaw node?

To present an interactive dashboard to a specific OpenClaw node, place your HTML file in the canvas root directory and use the command: canvas action:present node:<node-id> target:<full-url-to-your-html-file>.

Why does my connected node fail to fetch the correct HTML file from the canvas host?

Your connected node fails to fetch the correct HTML file when the canvas host is not reachable or properly bound. Ensure the canvas host is bound according to gateway.bind settings and uses the __openclaw__/canvas/ path for correct file retrieval.