The Developer's Guide to OpenClaw Canvas & Node Integration

Canvas is OpenClaw's lightweight UI surface for rendering HTML, A2UI, and interactive components on macOS devices. When paired with node integration, Canvas transforms from a local display into a powerful remote execution platform, enabling agents to interact with the physical world through companion devices.

How Canvas and Nodes Work Together

Canvas operates through a session-based file system under ~/Library/Application Support/OpenClaw/canvas/. Each session has its own directory where HTML, CSS, and JavaScript files are stored and served via the custom openclaw-canvas:// URL scheme. When a node is paired with a Gateway, the Canvas commands become remotely accessible through the node interface.

The integration works through the Gateway's WebSocket protocol, which allows agents to invoke Canvas operations on remote nodes. This creates a secure bridge between the agent running on the Gateway and the Canvas panel running on the paired device, with all communication flowing through the authenticated WebSocket connection.

Key Integration Points

Canvas Commands via Node API

The node API exposes several Canvas operations that agents can invoke remotely:

• canvas.present - Show the Canvas panel
• canvas.hide - Hide the Canvas panel
• canvas.navigate - Navigate to a local path or external URL
• canvas.eval - Execute JavaScript in the Canvas context
• canvas.snapshot - Capture a screenshot of the current Canvas state

These commands are accessible through the nodes CLI or directly via the node invoke system, allowing for programmatic control of the Canvas from agent scripts.

A2UI Integration

A2UI provides a declarative interface for building UIs that render within Canvas. When integrated with nodes, A2UI messages can be pushed to remote devices, enabling rich interactive experiences. The current implementation supports A2UI v0.8 messages including:

• beginRendering
• surfaceUpdate
• dataModelUpdate
• deleteSurface

This allows agents to build dynamic interfaces that update in real-time on remote devices, creating seamless user experiences across the OpenClaw ecosystem.

Security Model

The integration maintains strict security boundaries:

1. Canvas scheme blocks directory traversal attacks
2. Local content uses a custom URL scheme without requiring a loopback server
3. External HTTP/HTTPS URLs are only accessible when explicitly navigated
4. All node communications require device pairing and authentication

This ensures that remote Canvas operations cannot access unauthorized system resources while still providing the flexibility needed for legitimate use cases.

Practical Implementation

To implement Canvas-node integration in your projects:

1. Ensure both Gateway and node are properly paired
2. Use the nodes canvas CLI commands or node invoke system to control remote Canvas instances
3. Serve static assets from the session's Canvas directory
4. Use A2UI for dynamic interface updates
5. Capture snapshots for visual feedback and debugging

The integration enables powerful workflows like remote monitoring, interactive presentations, and distributed UI applications, all controlled through OpenClaw's agent framework.