Chapter 18: Live Canvas

Live Canvas is OpenClaw's real-time visual collaboration surface. When users need more than text — diagrams, flowcharts, whiteboards, sketches, or annotated images — Live Canvas gives the agent a shared space to draw, and gives users a URL to view and interact with it. This chapter explains how to enable, configure, and use Live Canvas effectively.

What Is Live Canvas?

Live Canvas is a browser-based whiteboard that:

The AI agent can write to (generate diagrams, charts, and annotated content)
Multiple users can view simultaneously in real time
Users can contribute their own drawings and annotations
Persists for the duration of a session (or permanently if configured)
Can be embedded in any website or shared via a public link

When the agent creates something on the canvas, it sends a link in the chat:

I've created a system architecture diagram for you:
🎨 View canvas: https://canvas.openclaw.local/c/abc123

Clicking the link opens the canvas in the browser. No account required — just the link.

Enabling Live Canvas

Add the canvas block to your openclaw.json:

{
  "canvas": {
    "enabled": true,
    "baseUrl": "https://canvas.yourdomain.com",
    "storageType": "memory",
    "sessionExpiry": 3600,
    "allowUserEditing": true,
    "exportFormats": ["png", "svg", "pdf"],
    "maxCanvasesPerSession": 10,
    "maxFileSizeMB": 25
  }
}

Field	Default	Description
`baseUrl`	—	Public URL where canvas sessions are served
`storageType`	`memory`	`memory`, `file`, or `redis`
`sessionExpiry`	`3600`	Seconds of inactivity before canvas expires (0 = never)
`allowUserEditing`	`true`	Whether users can draw on the canvas themselves
`exportFormats`	`["png"]`	Available download formats
`maxCanvasesPerSession`	`10`	Max canvases a single session can create
`maxFileSizeMB`	`25`	Max file size for image uploads

What the Agent Can Draw

The agent uses a structured drawing API. When a user asks for something visual, the agent automatically decides what to render.

Flowcharts and Diagrams

User: Draw a flowchart of our user registration process

The agent generates a flowchart using Mermaid syntax and renders it on the canvas:

flowchart TD
    A[User visits signup page] --> B[Fills out form]
    B --> C{Email already exists?}
    C -->|Yes| D[Show error message]
    C -->|No| E[Create account]
    E --> F[Send verification email]
    F --> G[User verifies email]
    G --> H[Account activated]

System Architecture

User: Show me a diagram of a microservices architecture with an API gateway

The agent renders a network diagram with labeled boxes, arrows, groups (frontend / backend / database layers), and connection labels.

Sequence Diagrams

User: Diagram the OAuth 2.0 authorization code flow

sequenceDiagram
    participant User
    participant App
    participant AuthServer
    participant API

    User->>App: Click "Login with Google"
    App->>AuthServer: Redirect with client_id, scope
    AuthServer->>User: Show consent screen
    User->>AuthServer: Grant permission
    AuthServer->>App: Redirect with auth code
    App->>AuthServer: Exchange code for tokens
    AuthServer->>App: Access token + refresh token
    App->>API: Request with access token
    API->>App: Protected resource

Data Charts

User: Chart our monthly sales: Jan 120k, Feb 145k, Mar 98k, Apr 167k

The agent creates a bar or line chart with labeled axes, a title, and value annotations.

Mind Maps

User: Create a mind map of topics I need to learn to become a backend developer

The agent creates a radial mind map with the central topic, branches, and sub-topics.

Annotated Images

Users can upload an image (a screenshot, wireframe, or diagram), and the agent draws annotations, arrows, and text labels on it:

User: [uploads a screenshot of a UI]
User: Point out all the usability issues you see

The agent circles problem areas, adds numbered labels, and lists issues in the chat.

Canvas Commands

Users interact with the canvas through chat commands:

Command	Effect
`/canvas new`	Start a fresh blank canvas
`/canvas clear`	Erase everything on the current canvas
`/canvas save`	Save the canvas permanently (survives session end)
`/canvas export png`	Download the canvas as a PNG image
`/canvas export svg`	Download as SVG (scalable, editable)
`/canvas export pdf`	Download as a PDF document
`/canvas share`	Get a read-only link for external sharing
`/canvas link`	Get the current canvas URL again
`/canvas history`	List all canvases created in this session
`/canvas open abc123`	Reopen a previous canvas by ID

Multi-User Collaboration

When multiple users are in the same workspace and a canvas is active, they all see the same canvas and edits appear in real time — like a shared Google Doc, but for drawings.

{
  "canvas": {
    "enabled": true,
    "collaboration": {
      "enabled": true,
      "showCursors": true,
      "userColors": true,
      "maxConcurrentEditors": 10,
      "lockTimeout": 5000
    }
  }
}

Each user's cursor appears in a different color with their name label. The agent's cursor is displayed separately (usually with the OpenClaw logo).

Editing modes:

Free draw — Users can draw freehand lines
Shape mode — Add rectangles, circles, and arrows
Text mode — Add text labels
Select mode — Move and resize existing elements
Erase mode — Remove specific elements

Drawing Tools Available to Users

When allowUserEditing: true, users can open the canvas URL and use:

Tool	Shortcut	Description
Pen	`P`	Freehand drawing
Line	`L`	Straight lines with arrow options
Rectangle	`R`	Boxes and frames
Circle	`C`	Circles and ellipses
Text	`T`	Add labels and notes
Sticky note	`N`	Colored notes with text
Image	`I`	Upload an image to the canvas
Select	`S`	Move, resize, delete elements
Eraser	`E`	Erase specific parts

Persistent Canvases

By default, canvases expire with the session. To keep canvases permanently:

{
  "canvas": {
    "storageType": "file",
    "storagePath": "~/.openclaw/canvas",
    "sessionExpiry": 0
  }
}

Setting sessionExpiry: 0 means canvases never expire automatically. They stay available indefinitely unless manually deleted.

Manage canvases from the CLI:

# List all saved canvases
openclaw canvas list

# List canvases for a specific workspace
openclaw canvas list --workspace team

# Open a canvas in the browser
openclaw canvas open abc123

# Delete a canvas
openclaw canvas delete abc123

# Export a canvas
openclaw canvas export abc123 --format png --output ~/Desktop/diagram.png

Persistent Storage with Redis

For multi-instance deployments (multiple OpenClaw processes), store canvas state in Redis:

{
  "canvas": {
    "storageType": "redis",
    "sessionExpiry": 86400
  }
}

Redis must be configured in the main gateway config:

{
  "redis": {
    "url": "redis://localhost:6379"
  }
}

Canvas sessions stored in Redis have keys of the form canvas:session:{id} and can be inspected:

redis-cli keys "canvas:*"
redis-cli ttl "canvas:session:abc123"

Embedding the Canvas

The canvas is served as a standard web page and can be embedded in any website using an iframe:

<iframe
  src="https://canvas.yourdomain.com/c/abc123?embed=true"
  width="100%"
  height="600"
  frameborder="0"
  allow="clipboard-write"
></iframe>

The embed=true parameter hides the toolbar and header for a clean embedded experience. The clipboard-write permission allows users to copy the canvas image.

Add readonly=true for a view-only embed (no editing):

<iframe
  src="https://canvas.yourdomain.com/c/abc123?embed=true&readonly=true"
  width="100%"
  height="600"
></iframe>

Configuring the Canvas Server Separately

For high-availability deployments, run the canvas server as a separate process:

openclaw canvas-server --port 4000 --redis-url redis://localhost:6379

Then point your main gateway to it:

{
  "canvas": {
    "enabled": true,
    "serverUrl": "http://canvas-server:4000",
    "baseUrl": "https://canvas.yourdomain.com"
  }
}

This lets you:

Scale the canvas server independently from the gateway
Run multiple canvas servers behind a load balancer
Keep canvas state in Redis shared across all instances

Canvas in Docker Compose

Add the canvas server as a separate service:

services:
  openclaw:
    image: openclaw/openclaw:1.4.2
    environment:
      - CANVAS_SERVER_URL=http://canvas:4000
      - CANVAS_BASE_URL=https://canvas.yourdomain.com

  canvas:
    image: openclaw/canvas-server:1.4.2
    restart: unless-stopped
    ports:
      - "4000:4000"
    environment:
      - REDIS_URL=redis://redis:6379
    depends_on:
      - redis

Troubleshooting

Canvas link not opening: Check that baseUrl in your config is publicly accessible. If running locally, use http://localhost:3000/canvas and ensure the port is not blocked by a firewall.

Canvas disappears after restart: Change storageType from memory to file or redis. Memory storage is wiped on restart.

Multi-user edits not syncing: The canvas uses WebSocket for real-time sync. Ensure your reverse proxy passes WebSocket connections:

proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';

Agent not drawing diagrams: Ensure the canvas skill is enabled in your workspace:

{ "skills": ["canvas", "web-search", "memory"] }

Next: Chapter 19 — iOS Node — How to run an OpenClaw node on an iPhone or iPad so your gateway stays online from a mobile device.