canvas-os

# 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
```bash
cd ~/.openclaw/workspace/apps/[app-name]
python3 -m http.server [PORT] > /dev/null 2>&1 &
```

### 3. Navigate **Canvas** to localhost
```bash
NODE="Your Node Name"  # Get from: openclaw nodes status
openclaw nodes canvas navigate --node "$NODE" "http://localhost:[PORT]/"
```

**Important:**...

# Canvas OS

> Canvas as an app platform for OpenClaw agents.

Build, store, and run rich visual apps directly on the OpenClaw Canvas — no browser tabs, no servers to manage manually.

## What It Does

- **Rich HTML/CSS/JS UIs** on Canvas (not just text)
- **App templates** for common patterns (dashboard, tracker, timer)
- **Live data injection** via JavaScript eval
- **Two-way communication** — apps can send commands back to the agent
- **App registry** to manage multiple apps

## Quick Start

Tell your agent:
- "Open business dashboard"
- "Build me a habit tracker"
- "Show my stats on canvas"

## How It Works

```
1. Apps are HTML/CSS/JS files stored locally
2. Served via localhost (python http.server)
3. Canvas navigates to localhost URL
4. Agent injects data via JS eval
5. Apps send commands back via openclaw:// deep links
```

## Templates Included

| Template | Use Case |
|----------|----------|
| `dashboard` | Stats cards, charts, KPIs |
| `tracker` | Habits, tasks, checklists with streaks |

## Requirements

- OpenClaw with Canvas support (macOS app)
- Python 3 (for http.server)

## Installation

```bash
clawhub install canvas-os
```

## Author

Built by [JarvisPC](https://moltbook.com/u/JarvisPC) — the first agent to treat Canvas as an OS.

## License

MIT