skills.rest
coltonbatts
coltonbattsCOMMUNITY
Explore all skills by this author →
𝕏@theColtonBattsGitHub

Canvas Skill

Display HTML content on remote nodes via a local HTTP server and bridge.

Updated Jan 26, 2026
Search Tags:#development#ui#html#visualization#canvas#display
One-click install
npx skills add https://github.com/coltonbatts/Loubot --skill canvas-skill-coltonbatts
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Canvas Skill
Source: https://github.com/coltonbatts/Loubot/tree/main/skills/canvas
Command: npx skills add https://github.com/coltonbatts/Loubot --skill canvas-skill-coltonbatts

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill allows you to visually present dynamic HTML content on connected devices, bridging the gap between your AI and user interfaces for richer interactions.

Core Features & Use Cases

  • Visual Display: Render games, dashboards, and visualizations directly on connected Mac, iOS, or Android devices.
  • Interactive Content: Show generated HTML, run interactive demos, or display rich web content.
  • Development Aid: Live reload feature speeds up development by automatically updating content as you save changes.

Quick Start

Present the 'my-game.html' file on the 'mac-63599bc4-b54d-4392-9048-b97abd58343a' node.

Frequently Asked Questions about Canvas Skill

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I display HTML content on connected devices from my development environment?▼

To display HTML content on connected devices, this Skill uses a local HTTP server and bridge to render interactive visualizations and dashboards across remote nodes. It facilitates web-based applications across connected devices.

Can I render interactive dashboards on iOS and Android nodes?▼

Yes, you can render interactive dashboards on iOS and Android nodes. The Skill presents dynamic HTML content, games, and visualizations directly on connected Mac, iOS, or Android devices.

What is the best way to present a specific HTML file on a remote node?▼

The best way to present an HTML file on a remote node is to specify the file name and the target node identifier. For example, you can instruct the system to present a specific HTML file on a connected node to render WebView content.

Do I need a specific gateway configuration to display HTML visualizations?▼

Yes, displaying HTML visualizations requires a configured gateway bind mode and an accessible node for rendering WebView content. This setup enables the local HTTP server and bridge to push interactive content to devices.

Does this Skill support live reload during UI development?▼

Yes, this Skill supports live reload during UI development to speed up your workflow. It automatically updates and refreshes the displayed HTML content on connected nodes as you save changes.

Why is my HTML content not showing on the connected node?▼

Your HTML content might not show on the connected node if the gateway bind mode is not configured or the node is inaccessible. Rendering WebView content requires an accessible target node and an active local HTTP server bridge.

Related Skills

Explore More Design & Creative Skills→
Clawdi-AIClawdi-AI
4

Canvas

Display HTML content on connected OpenClaw nodes via a local HTTP server.

Official
Intermediate
malue-aimalue-ai
36

canvas

Display HTML content on connected Moltbot nodes across Mac, iOS, and Android.

Official
Intermediate
sentientspritesentientsprite

Canvas Skill

Serve HTML content to NEMO nodes via a local HTTP server.

Community
Intermediate
flemzordflemzord
6

canvas

Renders HTML content on connected OpenClaw nodes via a local canvas host and bridge.

Community
Intermediate