Getting Started with Canvas in OpenClaw

Canvas is a visual workspace built into the OpenClaw macOS app that allows agents to display interactive HTML, CSS, and JavaScript interfaces directly on your desktop. It's ideal for creating lightweight UIs, dashboards, and interactive widgets that live alongside your normal workflow.

What Canvas Does

Canvas provides a resizable, borderless panel that appears near your menu bar. It can:

• Display local HTML files from your agent's workspace
• Show live-updating web content
• Run custom JavaScript visualizations
• Host A2UI interfaces for agent interactions
• Auto-reload when content changes

The panel remembers its size and position between uses, and only one Canvas instance is visible at a time.

Accessing Canvas

Canvas lives in the ~/Library/Application Support/OpenClaw/canvas/ directory, organized by session. Content is served via the openclaw-canvas:// URL scheme:

• openclaw-canvas://main/ serves content from the main session
• openclaw-canvas://main/assets/ serves static assets
• openclaw-canvas://main/widgets/ could serve custom widgets

If no index.html is present, Canvas shows a default scaffold page.

Controlling Canvas

Agents control Canvas through the Gateway API with commands like:

canvas present --node <id>
canvas navigate --node <id> --url "/"
canvas eval --node <id> --js "document.title"
canvas snapshot --node <id>

The navigate command accepts local canvas paths, HTTPS URLs, or file:// references. The eval command can run JavaScript in the Canvas context, and snapshot captures the current view as an image.

A2UI Integration

Canvas fully supports A2UI v0.8, allowing agents to push dynamic interfaces that update in real time. Agents can send A2UI messages to create surfaces, update components, and manage data models. A simple test:

canvas a2ui push --node <id> --text "Hello from A2UI"

This makes Canvas ideal for status monitors, interactive prompts, and visual feedback during agent operations.

Security

Canvas is designed with security in mind:

• Directory traversal is blocked - content must stay within the session directory
• Local content uses a custom URL scheme without requiring a loopback server
• External websites are only loaded when explicitly requested
• Canvas can be disabled in Settings if not needed

Use Cases

Canvas excels at:

• Real-time system monitors
• Interactive approval prompts
• Data visualization dashboards
• Quick reference guides
• Agent status displays

For developers, Canvas provides a straightforward way to build agent-adjacent interfaces without full application development.