Canvas OS

Canvas as an app platform. Build, store, and run rich visual apps on the OpenClaw Canvas.

Philosophy

You are an OS. Canvas is the window. Apps are built locally and run on Canvas.

Rich HTML/CSS/JS UIs — not just text. Full interactivity, animations, live data.

Quick Commands

Command	What Jarvis Does
"Open [app]"	Start server, navigate Canvas, inject data
"Build me a [type]"	Create app from template, open it
"Update [element]"	Inject JS to modify live
"Show [data] on canvas"	Quick A2UI display
"Close canvas"	Stop server, hide Canvas

How It Works

Key principle: Apps run on Canvas, not in a browser tab. Canvas is your UI window.

Canvas Loading Methods

Canvas has security restrictions that block file path access. Three methods work:

Method	When to Use	Pros	Cons
Localhost Server	Complex apps, external assets	Full browser features	Requires port management
Direct HTML Injection	Quick displays, demos	Instant, no server needed	No external assets, size limit
Data URLs	Small content	Self-contained	Unreliable on some systems

❌ Does NOT work: file:///path/to/file.html (blocked by Canvas security)

📖 See: CANVAS-LOADING.md for detailed guide + troubleshooting

Helper script: canvas-inject.py — Formats HTML for direct injection

1. Apps are HTML/CSS/JS files

~/.openclaw/workspace/apps/[app-name]/
├── index.html    # The UI (self-contained recommended)
├── data.json     # Persistent state
└── manifest.json # App metadata

2. Serve via localhost

cd ~/.openclaw/workspace/apps/[app-name]
python3 -m http.server [PORT] > /dev/null 2>&1 &

3. Navigate Canvas to localhost

NODE="Your Node Name"  # Get from: openclaw nodes status
openclaw nodes canvas navigate --node "$NODE" "http://localhost:[PORT]/"

Important: This opens the app on Canvas (the visual panel), NOT in a browser.

4. Agent injects data via JS eval

openclaw nodes canvas eval --node "$NODE" --js "app.setData({...})"

Note: The openclaw-canvas:// URL scheme has issues in current OpenClaw versions. Use http://localhost: instead.

Opening an App

What this does: Displays the app on Canvas (the visual panel), not in a browser tab.

Method 1: Localhost Server (Recommended for Complex Apps)

Full sequence:

NODE="Your Node Name"
PORT=9876
APP="my-app"

# 1. Kill any existing server on the port
lsof -ti:$PORT | xargs kill -9 2>/dev/null

# 2. Start server
cd ~/.openclaw/workspace/apps/$APP
python3 -m http.server $PORT > /dev/null 2>&1 &

# 3. Wait for server
sleep 1

# 4. Navigate Canvas
openclaw nodes canvas navigate --node "$NODE" "http://localhost:$PORT/"

# 5. Inject data
openclaw nodes canvas eval --node "$NODE" --js "app.loadData({...})"

canvas-os

Install via CLI (Recommended)