canvas-os-1-0-1Canvas as an app platform. Build, store, and run rich visual apps on the OpenClaw Canvas.
Install via ClawdBot CLI:
clawdbot install Knightluozichu/canvas-os-1-0-1Canvas as an app platform. Build, store, and run rich visual apps on the OpenClaw Canvas.
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.
| 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 |
Key principle: Apps run on Canvas, not in a browser tab. Canvas is your UI window.
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
~/.openclaw/workspace/apps/[app-name]/
├── index.html # The UI (self-contained recommended)
├── data.json # Persistent state
└── manifest.json # App metadatacd ~/.openclaw/workspace/apps/[app-name]
python3 -m http.server [PORT] > /dev/null 2>&1 &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.
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.
What this does: Displays the app on Canvas (the visual panel), not in a browser tab.
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({...})"When to use: File paths don't work in Canvas (security sandboxing). Data URLs can be unreliable. Use this for instant displays without localhost.
# Example using canvas tool
canvas.present(url="about:blank", target=node_name)
html_content = """<!DOCTYPE html>
<html>
<head>
<style>
body { background: #667eea; color: white; padding: 40px; }
.card { background: white; color: #333; padding: 30px; border-radius: 16px; }
</style>
</head>
<body>
<div class="card">
<h1>Your Content Here</h1>
</div>
</body>
</html>"""
# Escape backticks and inject
js_code = f"""document.open();
document.write(`{html_content}`);
document.close();"""
canvas.eval(javaScript=js_code, target=node_name)Key limitation: File paths (file:///path/to/file.html) are blocked in Canvas for security. Always use localhost or direct injection.
Every app should expose a window.app or window.[appname] object:
window.app = {
// Update values
setValue: (key, val) => {
document.getElementById(key).textContent = val;
},
// Bulk update
loadData: (data) => { /* render all */ },
// Notifications
notify: (msg) => { /* show toast */ }
};Apps send commands back via deep links:
function sendToAgent(message) {
window.location.href = `openclaw://agent?message=${encodeURIComponent(message)}`;
}
// Button click → agent command
document.getElementById('btn').onclick = () => {
sendToAgent('Refresh my dashboard');
};Stats cards, progress bars, lists. Self-contained HTML.
dashboard.setRevenue(), dashboard.setProgress(), dashboard.notify()Habits/tasks with checkboxes and streaks. Self-contained HTML.
tracker.setItems(), tracker.addItem(), tracker.toggleItem()For temporary displays without a full app:
openclaw nodes canvas a2ui push --node "$NODE" --text "
📊 QUICK STATUS
Revenue: \$500
Users: 100
Done!
"| App Type | Default Port |
|----------|--------------|
| Dashboard | 9876 |
| Tracker | 9877 |
| Timer | 9878 |
| Display | 9879 |
| Custom | 9880+ |
:root {
--bg-primary: #0a0a0a;
--bg-card: #1a1a2e;
--accent-green: #00d4aa;
--accent-blue: #4a9eff;
--accent-orange: #f59e0b;
--text-primary: #fff;
--text-muted: #888;
--border: #333;
}window.app.*App opens in browser instead of Canvas?
openclaw nodes canvas navigate, not just open"Not Found" on Canvas?
file:/// URLs for security (sandboxing)canvas eval + document.write() insteadcurl http://localhost:[PORT]/http://localhost: not openclaw-canvas:// (URL scheme has issues)Canvas shows "Not Found" even with correct URL?
App not updating?
openclaw nodes canvas eval --js "typeof window.app"Server port already in use?
lsof -ti:[PORT] | xargs kill -9Python helper for direct HTML injection (Method 2).
# Example usage in Python
from canvas_inject import inject_html_to_canvas
html = open("my-dashboard.html").read()
commands = inject_html_to_canvas(html, node_name="Your Node")
# Then use canvas tool with these commands
canvas.present(**commands["step1_present"])
canvas.eval(**commands["step2_inject"])Or just follow the pattern manually (see Method 2 in "Opening an App").
Generated Mar 1, 2026
Financial analysts use Canvas OS to display live market data, revenue charts, and performance metrics on a visual dashboard. The app updates in real-time via agent-injected data, allowing for quick decision-making without switching browser tabs. This is ideal for monitoring stock portfolios or sales figures during meetings.
Project managers build custom apps to track tasks, deadlines, and team progress with interactive checkboxes and visual progress bars. The app runs on Canvas, enabling seamless updates from the agent and two-way communication for task completions. This streamlines workflow in agile development or marketing campaigns.
Healthcare providers create apps to show patient vitals, appointment schedules, and alerts in a secure, self-contained interface on Canvas. Data is injected in real-time from medical systems, offering a focused view for nurses or doctors without browser distractions. It enhances patient care in hospitals or clinics.
Educators design apps for interactive lessons, quizzes, and visual aids that run on Canvas during virtual classes. Students can engage with content directly, and the agent updates data based on responses. This supports remote learning or training sessions with rich HTML/CSS/JS elements.
Retail managers use Canvas OS to display inventory levels, sales trends, and restock alerts in a visual app. The agent injects live data from POS systems, allowing for quick adjustments and oversight. This optimizes stock management in stores or e-commerce operations.
Offer a subscription-based service where businesses pay monthly to access pre-built templates and tools for creating custom Canvas apps. Revenue comes from tiered plans based on app complexity and support, targeting small to medium enterprises needing visual dashboards. This model leverages the skill's app-building capabilities for recurring income.
Provide one-time or ongoing consulting to integrate Canvas OS into existing workflows, such as setting up real-time data displays or custom app development. Revenue is generated through project fees and maintenance contracts, appealing to industries like finance or healthcare. This model capitalizes on the skill's technical requirements and best practices.
Create a marketplace where developers sell ready-to-use app templates (e.g., dashboards, trackers) for Canvas OS, with revenue from one-time purchases or commissions. Target users include freelancers and teams looking to quickly deploy visual apps without coding from scratch. This model monetizes the skill's template ecosystem and design system.
💬 Integration Tip
Use localhost server for complex apps to ensure full browser features, and expose a window.app API for seamless agent data injection and two-way communication.
Display and control HTML content on connected Mac, iOS, or Android nodes via a web-based canvas with live reload and remote actions.
生成和编辑各种类型的图表（drawio、mermaid、excalidraw）。支持流程图、时序图、类图、ER图、思维导图、架构图、网络拓扑图等常见图表类型。能够根据自然语言描述创建新图表，也能读取并修改已有的 drawio/mermaid/excalidraw 文件。使用独立的 MCP server (mcp-diagram-generator) 生成图表文件，减少 token 消耗并保证输出一致性。支持自动配置管理，默认输出路径为项目目录下的 diagrams/{format}/，支持自定义路径和自动创建目录。
Create, export, and manage Canva designs via the Connect API. Generate social posts, carousels, and graphics programmatically.
Create software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams, sequence diagrams, flowcharts, ERDs, C4 architecture diagrams, state diagrams, git graphs, and other diagram types. Triggers include requests to diagram, visualize, model, map out, or show the flow of a system.
Generate and render diagrams from Mermaid syntax into PNG, SVG, or PDF using customizable themes and various diagram types.
Generate diagrams from descriptions with Mermaid, PlantUML, or ASCII for architecture, flows, sequences, and data models.