Display HTML, CSS, and JS content on connected NyxClaw nodes via a host server.
Install
mkdir -p .claude/skills/canvas-estebanrfp && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/14415" && unzip -o skill.zip -d .claude/skills/canvas-estebanrfp && rm skill.zipInstalls to .claude/skills/canvas-estebanrfp
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Display HTML content on connected NyxClaw nodes (Mac app, iOS, Android).Key capabilities
- →Present HTML content on connected devices
- →Display games or visualizations
- →Show generated HTML content
- →Execute JavaScript in the canvas
- →Capture screenshots of the canvas
- →Navigate to new URLs within the canvas
How it works
The skill uses a Canvas Host server to serve HTML content, which is then relayed through a Node Bridge to a connected device's WebView for rendering. It supports live reloading for development.
Inputs & outputs
When to use canvas
- →Displaying custom dashboards
- →Rendering game UI
- →Presenting interactive product demos
About this skill
Canvas Skill
Display HTML content on connected NyxClaw nodes (Mac app, iOS, Android).
Overview
The canvas tool lets you present web content on any connected node's canvas view. Great for:
- Displaying games, visualizations, dashboards
- Showing generated HTML content
- Interactive demos
How It Works
Architecture
┌─────────────────┐ ┌──────────────────┐ ┌─────────────┐
│ Canvas Host │────▶│ Node Bridge │────▶│ Node App │
│ (HTTP Server) │ │ (TCP Server) │ │ (Mac/iOS/ │
│ Port 18793 │ │ Port 18790 │ │ Android) │
└─────────────────┘ └──────────────────┘ └─────────────┘
- Canvas Host Server: Serves static HTML/CSS/JS files from
canvasHost.rootdirectory - Node Bridge: Communicates canvas URLs to connected nodes
- Node Apps: Render the content in a WebView
Tailscale Integration
The canvas host server binds based on gateway.bind setting:
| Bind Mode | Server Binds To | Canvas URL Uses |
|---|---|---|
loopback | 127.0.0.1 | localhost (local only) |
lan | LAN interface | LAN IP address |
tailnet | Tailscale interface | Tailscale hostname |
auto | Best available | Tailscale > LAN > loopback |
Key insight: The canvasHostHostForBridge is derived from bridgeHost. When bound to Tailscale, nodes receive URLs like:
http://<tailscale-hostname>:18793/__nyxclaw__/canvas/<file>.html
This is why localhost URLs don't work - the node receives the Tailscale hostname from the bridge!
Actions
| Action | Description |
|---|---|
present | Show canvas with optional target URL |
hide | Hide the canvas |
navigate | Navigate to a new URL |
eval | Execute JavaScript in the canvas |
snapshot | Capture screenshot of canvas |
Configuration
In ~/.nyxclaw/nyxclaw.json:
{
"canvasHost": {
"enabled": true,
"port": 18793,
"root": "/Users/you/clawd/canvas",
"liveReload": true
},
"gateway": {
"bind": "auto"
}
}
Live Reload
When liveReload: true (default), the canvas host:
- Watches the root directory for changes (via chokidar)
- Injects a WebSocket client into HTML files
- Automatically reloads connected canvases when files change
Great for development!
Workflow
1. Create HTML content
Place files in the canvas root directory (default ~/clawd/canvas/):
cat > ~/clawd/canvas/my-game.html << 'HTML'
<!DOCTYPE html>
<html>
<head><title>My Game</title></head>
<body>
<h1>Hello Canvas!</h1>
</body>
</html>
HTML
2. Find your canvas host URL
Check how your gateway is bound:
cat ~/.nyxclaw/nyxclaw.json | jq '.gateway.bind'
Then construct the URL:
- loopback:
http://127.0.0.1:18793/__nyxclaw__/canvas/<file>.html - lan/tailnet/auto:
http://<hostname>:18793/__nyxclaw__/canvas/<file>.html
Find your Tailscale hostname:
tailscale status --json | jq -r '.Self.DNSName' | sed 's/\.$//'
3. Find connected nodes
nyxclaw nodes list
Look for Mac/iOS/Android nodes with canvas capability.
4. Present content
canvas action:present node:<node-id> target:<full-url>
Example:
canvas action:present node:mac-63599bc4-b54d-4392-9048-b97abd58343a target:http://peters-mac-studio-1.sheep-coho.ts.net:18793/__nyxclaw__/canvas/snake.html
5. Navigate, snapshot, or hide
canvas action:navigate node:<node-id> url:<new-url>
canvas action:snapshot node:<node-id>
canvas action:hide node:<node-id>
Debugging
White screen / content not loading
Cause: URL mismatch between server bind and node expectation.
Debug steps:
- Check server bind:
cat ~/.nyxclaw/nyxclaw.json | jq '.gateway.bind' - Check what port canvas is on:
lsof -i :18793 - Test URL directly:
curl http://<hostname>:18793/__nyxclaw__/canvas/<file>.html
Solution: Use the full hostname matching your bind mode, not localhost.
"node required" error
Always specify node:<node-id> parameter.
"node not connected" error
Node is offline. Use nyxclaw nodes list to find online nodes.
Content not updating
If live reload isn't working:
- Check
liveReload: truein config - Ensure file is in the canvas root directory
- Check for watcher errors in logs
URL Path Structure
The canvas host serves from /__nyxclaw__/canvas/ prefix:
http://<host>:18793/__nyxclaw__/canvas/index.html → ~/clawd/canvas/index.html
http://<host>:18793/__nyxclaw__/canvas/games/snake.html → ~/clawd/canvas/games/snake.html
The /__nyxclaw__/canvas/ prefix is defined by CANVAS_HOST_PATH constant.
Tips
- Keep HTML self-contained (inline CSS/JS) for best results
- Use the default index.html as a test page (has bridge diagnostics)
- The canvas persists until you
hideit or navigate away - Live reload makes development fast - just save and it updates!
When not to use it
- →When localhost URLs are used with Tailscale integration
- →When the node is not connected
- →When the `node` parameter is not specified
Limitations
- →localhost URLs don't work with Tailscale integration
How it compares
This skill enables displaying web content directly on connected devices, offering a way to render interactive UIs or dashboards beyond standard terminal output.
Compared to similar skills
canvas side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| canvas (this skill) | 0 | 3mo | Review | Intermediate |
| playwright-mcp | 33 | 6mo | No flags | Intermediate |
| dev-browser | 53 | 4mo | Review | Intermediate |
| chrome-devtools | 41 | 7mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
playwright-mcp
sfc-gh-dflippo
Browser testing, web scraping, and UI validation using Playwright MCP. Use this skill when you need to test Streamlit apps, validate web interfaces, test responsive design, check accessibility, or automate browser interactions through MCP tools.
dev-browser
SawyerHood
Browser automation with persistent page state. Use when users ask to navigate websites, fill forms, take screenshots, extract web data, test web apps, or automate browser workflows. Trigger phrases include "go to [url]", "click on", "fill out the form", "take a screenshot", "scrape", "automate", "test the website", "log into", or any browser interaction request.
chrome-devtools
mrgoonie
Browser automation, debugging, and performance analysis using Puppeteer CLI scripts. Use for automating browsers, taking screenshots, analyzing performance, monitoring network traffic, web scraping, form automation, and JavaScript debugging.
simple-fetch
yoloshii
Basic MCP skill demonstrating CLI-based execution pattern for fetching URL content
agent-browser
vercel-labs
Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction.
browser-tools
Whamp
Lightweight Chrome automation toolkit with shared configuration, JSON-first output, and six focused scripts for starting, navigating, inspecting, capturing, evaluating, and cleaning up browser sessions.