Canvas Skill

• Je wilt dat een AI-agent een gegenereerde HTML-pagina (dashboard, spel, visualisatie) in realtime naar je Mac, iPhone of Android-apparaat pusht.
• Je maakt een prototype van interactieve HTML-inhoud en hebt live-reload nodig — sla een bestand op en het verbonden canvas wordt automatisch bijgewerkt.
• Je hebt de agent nodig om op afstand JavaScript uit te voeren binnen een actieve WebView (bijv. grafiekgegevens bijwerken zonder volledige herlaad).
• Je wilt een schermafbeelding maken van gerenderde canvas-inhoud vanuit een agentworkflow.

• Je gebruikt geen OpenClaw-nodes — deze skill is uitsluitend voor het OpenClaw Mac/iOS/Android-ecosysteem.
• Je inhoud openbaar of aan niet-Tailscale-peers moet aanbieden; de server is alleen bedoeld voor lokale/LAN/Tailscale-toegang.
• Je een volledige browser wilt insluiten of willekeurige externe URL's wilt weergeven — de canvas-host serveert alleen bestanden vanuit een geconfigureerde lokale hoofdmap.

Vijf afzonderlijke acties — present, hide, navigate, eval en snapshot — geven agents nauwkeurige controle over wat er op een node wordt weergegeven. Presenteer een URL, wissel inhoud uit via navigate, voer JavaScript uit zonder herladen, of maak een schermafbeelding — allemaal vanuit één enkele Canvas Skill.

Wanneer liveReload: true (de standaard), bewaakt de canvas-host de hoofdmap via chokidar en injecteert een WebSocket-client in HTML-bestanden. Het opslaan van een bestand vernieuwt direct alle verbonden canvassen, waardoor iteratieve HTML-generatie snel verloopt.

De HTTP-server kan binden aan loopback, een LAN-interface, een Tailscale-interface, of automatisch kiezen. De juiste hostnaam wordt automatisch via de bridge doorgestuurd naar nodes, zodat inhoud correct wordt geladen ongeacht de netwerktopologie.

De eval-actie stelt agents in staat om willekeurige JavaScript uit te voeren binnen de live canvas WebView. Dit maakt dynamische updates mogelijk — nieuwe gegevens naar een grafiek sturen, animaties activeren of de DOM-toestand uitlezen — zonder naar een nieuwe pagina te navigeren.

De snapshot actie maakt een schermafbeelding van het huidige canvas op een opgegeven node en retourneert deze naar de agent, waardoor visuele inspectie of registratie van gerenderde inhoud mogelijk wordt.

Een agent genereert een HTML-dashboard dat gegevens samenvat (bijv. verkoopcijfers, systeemstatistieken) en schrijft dit naar ~/clawd/canvas/dashboard.html. Vervolgens roept het canvas action:present aan gericht op je Mac-knooppunt, waarna het dashboard onmiddellijk verschijnt in de Canvas Skill-weergave.

Plaats een op zichzelf staand HTML5-spel in de canvas-root en laat de agent het vervolgens presenteren op een verbonden iPhone-knooppunt. De agent kan later hide aanroepen of overschakelen naar een andere demo, zonder handmatige stappen op het apparaat.

Presenteer een grafiekpagina eenmalig en gebruik vervolgens herhaalde eval-acties om nieuwe datapunten in de actieve JavaScript-context te plaatsen. De grafiek wordt live bijgewerkt zonder de pagina te herladen, wat handig is voor monitoring of real-time agentuitvoer.

Houd tijdens de ontwikkeling het canvas open op een verbonden node en bewerk HTML-bestanden in de canvas-root. Elke opslag activeert een automatische herlaad, waardoor je direct visuele feedback krijgt zonder handmatig te vernieuwen of opdrachten opnieuw uit te voeren.