Canvas — OpenClaw Skill
Display HTML content, games, visualizations, and dashboards on connected devices from your AI agent.
What This Skill Does
The Canvas skill lets your OpenClaw AI agent present HTML content on any connected device -- Mac, iPhone, iPad, or Android. It serves web content through a local HTTP server and pushes it to connected nodes, which render it in a native WebView. Your agent can generate games, data visualizations, interactive dashboards, charts, or any self-contained web page and display it instantly on your screen.
The architecture consists of three components: a Canvas Host server (port 18793) that serves static HTML/CSS/JS files, a Node Bridge that communicates canvas URLs to connected devices, and the Node Apps on each device that render the content. This means your agent can create an HTML file, tell the canvas to present it, and see it appear on your phone or laptop within seconds.
Live reload is built in -- when enabled, the canvas host watches for file changes and automatically refreshes all connected canvases via WebSocket. The skill also supports Tailscale integration for cross-network rendering, JavaScript execution within the canvas, navigation between pages, and screenshot capture of displayed content.
Example Prompts
"Create a snake game and show it on my Mac"
"Build a dashboard showing my GitHub activity this week and display it on canvas"
"Generate a bar chart of monthly sales data and present it on my iPad"
"Show the weather forecast as a visual card on canvas"
"Take a screenshot of what is currently on the canvas"
"Navigate the canvas to my project status page"
"Create an interactive timer with start/stop controls and display it"
"Hide the canvas display"
Requirements
- canvasHost enabled in OpenClaw configuration
- At least one connected OpenClaw node (Mac, iOS, or Android app)
- Optional: Tailscale for cross-network device connectivity
On KiwiClaw: Pre-installed. Canvas is configured and ready to use with connected node devices.
Self-hosted: Enable the canvas host in ~/.openclaw/openclaw.json by setting canvasHost.enabled: true and configuring a root directory for HTML files.
Setup on KiwiClaw
- Open your KiwiClaw dashboard
- Navigate to Skills in your agent settings
- Enable the Canvas skill
- Connect at least one device via the OpenClaw Mac, iOS, or Android app
- Ask your agent to create and display content -- "Build a simple clock and show it on canvas"
Setup Self-Hosted
- Enable canvas in
~/.openclaw/openclaw.json: setcanvasHost.enabled: true,canvasHost.port: 18793, andcanvasHost.rootto your HTML directory - Enable live reload:
canvasHost.liveReload: true - Configure gateway bind mode:
gateway.bind: "auto" - Connect a node device and verify with
openclaw nodes list - Test: place an HTML file in the canvas root and present it
Related Skills
- Coding Agent -- generate the HTML/JS code that Canvas displays
- OpenAI Image Generation -- generate images to embed in canvas content
- Weather -- display weather data as a visual dashboard
- GitHub Issues -- visualize issue status on a canvas dashboard
FAQ
What can the Canvas skill display?
The Canvas skill can display any HTML content rendered in a WebView on connected devices. This includes games, data visualizations, interactive dashboards, charts, generated web pages, and any self-contained HTML/CSS/JS content your agent creates.
Which devices support the Canvas skill?
Canvas content renders on any connected OpenClaw node app -- Mac, iOS, and Android. The content is served by a local HTTP server and displayed in a native WebView. Tailscale integration allows cross-network rendering when devices are on different networks.
Does the Canvas skill support live reload during development?
Yes. When liveReload is enabled in the configuration (it is on by default), the canvas host watches the root directory for file changes and automatically reloads connected canvases via WebSocket. Save a file and it updates instantly on all connected devices.
Can my agent take screenshots of what is displayed on the canvas?
Yes. The Canvas skill includes a snapshot action that captures a screenshot of the current canvas content on a connected node. This is useful for generating reports, archiving visual output, or verifying that content renders correctly.