canvas-osCanvas as an app platform. Build, store, and run rich visual apps on the OpenClaw Canvas.
Install via ClawdBot CLI:
clawdbot install fraction12/canvas-osCanvas 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
A financial services firm uses Canvas-OS to display live revenue, user growth, and transaction metrics on a centralized visual panel. The dashboard updates automatically via agent-injected data, enabling executives to monitor KPIs without switching browser tabs. It supports interactive charts and alerts for anomalies, enhancing decision-making speed.
A software development team employs Canvas-OS to build a custom task tracker app that shows sprint progress, bug counts, and team assignments. The app runs on Canvas with a localhost server, allowing real-time updates as developers check off items. Two-way communication lets users send commands back to the agent for automated workflows.
An online learning platform uses Canvas-OS to create interactive lessons with animations and quizzes directly on Canvas. Instructors inject new content via direct HTML injection for quick demos, while students interact with elements that trigger feedback. This avoids browser security restrictions and provides a seamless teaching interface.
A clinic deploys Canvas-OS to visualize patient vitals and appointment schedules on a secure Canvas panel. The app pulls data from JSON files and updates in real-time via agent injections, ensuring staff can view critical information without accessing external browsers. It includes notifications for urgent alerts.
A retail chain utilizes Canvas-OS to build an inventory management app that displays stock levels, sales trends, and reorder alerts. The app runs on Canvas with a localhost server, integrating with backend systems to update data dynamically. Employees can quickly view and act on insights through the visual interface.
Offer a subscription-based service where businesses pay monthly to access pre-built Canvas-OS app templates and hosting support. Revenue comes from tiered plans based on app complexity and user count, with additional fees for custom development and integration services. This model targets SMEs needing visual dashboards without in-house coding.
Provide professional services to help enterprises deploy Canvas-OS for specific use cases like real-time monitoring or interactive displays. Revenue is generated through project-based contracts, hourly consulting rates, and ongoing maintenance agreements. This model appeals to large organizations requiring tailored solutions and technical support.
Launch a marketplace where developers can sell or share Canvas-OS app templates, with revenue from commissions on sales and premium features. Offer a free tier for basic apps and charge for advanced templates, analytics, or support. This model encourages community growth and monetizes a library of reusable visual applications.
💬 Integration Tip
Use localhost servers for complex apps to avoid Canvas security restrictions, and expose a standardized app API like window.app for easy agent data injection.
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.