Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub ยท Developer Tools
Canvas Os 1.0.1
Canvas as an app platform. Build, store, and run rich visual apps on the OpenClaw Canvas.
skill openclawclawhub Free
Canvas as an app platform. Build, store, and run rich visual apps on the OpenClaw Canvas.
โฌ 0 downloads โ
0 stars Unverified but indexed
Install for OpenClaw
Quick setup
- Download the package from Yavira.
- Extract the archive and review SKILL.md first.
- Import or place the package into your OpenClaw setup.
Package facts
- Download mode
- Yavira redirect
- Package format
- ZIP package
- Source platform
- Tencent SkillHub
- What's included
- CANVAS-LOADING.md, README.md, SKILL.md, _meta.json, canvas-inject.py, close-app.sh
Validation
- Use the Yavira download entry.
- Review SKILL.md after the package is downloaded.
- Confirm the extracted package contains the expected setup assets.
Install with your agent
Agent handoff
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
- Download the package from Yavira.
- Extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the extracted folder.
New install
I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete.
Upgrade existing
I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run.
Trust & source
Release facts
- Source
- Tencent SkillHub
- Verification
- Indexed source record
- Version
- 1.0.0
Provenance
- Publisher
- Knightluozichu
- Source page
- View original listing
- Canonical URL
- Open canonical page
Documentation
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
CommandWhat 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: MethodWhen to UseProsConsLocalhost ServerComplex apps, external assetsFull browser featuresRequires port managementDirect HTML InjectionQuick displays, demosInstant, no server neededNo external assets, size limitData URLsSmall contentSelf-containedUnreliable 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({...})"
Method 2: Direct HTML Injection (For Quick Displays)
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.
App API Convention
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 */ } };
Two-Way Communication
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'); };
Dashboard
Stats cards, progress bars, lists. Self-contained HTML. Default port: 9876 API: dashboard.setRevenue(), dashboard.setProgress(), dashboard.notify()
Tracker
Habits/tasks with checkboxes and streaks. Self-contained HTML. Default port: 9877 API: tracker.setItems(), tracker.addItem(), tracker.toggleItem()
Quick Display (A2UI)
For temporary displays without a full app: openclaw nodes canvas a2ui push --node "$NODE" --text " ๐ QUICK STATUS Revenue: \$500 Users: 100 Done! "
Port Assignments
App TypeDefault PortDashboard9876Tracker9877Timer9878Display9879Custom9880+
Design System
:root { --bg-primary: #0a0a0a; --bg-card: #1a1a2e; --accent-green: #00d4aa; --accent-blue: #4a9eff; --accent-orange: #f59e0b; --text-primary: #fff; --text-muted: #888; --border: #333; }
Best Practices
Self-contained HTML โ Inline CSS/JS for portability Dark theme โ Match OpenClaw aesthetic Expose app API โ Let agent update via window.app.* Use IDs โ On elements the agent will update Live clock โ Shows the app is alive Deep links โ For two-way communication
Troubleshooting
App opens in browser instead of Canvas? Make sure you're using openclaw nodes canvas navigate, not just open Canvas navigate targets the Canvas panel specifically "Not Found" on Canvas? File paths don't work: Canvas blocks file:/// URLs for security (sandboxing) Data URLs may fail: Use direct HTML injection via canvas eval + document.write() instead For localhost: Verify server is running: curl http://localhost:[PORT]/ Check port is correct Use http://localhost: not openclaw-canvas:// (URL scheme has issues) Canvas shows "Not Found" even with correct URL? This is a security boundary: Canvas can't access local filesystem Solution: Use Method 2 (Direct HTML Injection) from "Opening an App" section Or serve via localhost (Method 1) App not updating? Check window.app API is defined: openclaw nodes canvas eval --js "typeof window.app" Verify JS eval syntax: single quotes inside double quotes Server port already in use? Kill existing: lsof -ti:[PORT] | xargs kill -9
canvas-inject.py
Python 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").
Requirements
OpenClaw with Canvas support (macOS app) Python 3 (for http.server) A paired node with canvas capability
Category context
Code helpers, APIs, CLIs, browser automation, testing, and developer operations.
Source: Tencent SkillHub
Largest current source with strong distribution and engagement signals.
Package contents
Included in package
3 Docs2 Scripts1 Config
- SKILL.md
- CANVAS-LOADING.md
- README.md
- canvas-inject.py
- close-app.sh
- _meta.json