Canvas Skill

Render HTML, JSON, or Markdown content to connected swarmstr UI clients via WebSocket events.

Updated Mar 2, 2026

Search Tags:#ui #markdown #html #dashboard #real-time #visualization #canvas

Ready to run

npx skills add https://github.com/chebizarro/swarmstr --skill canvas-skill-chebizarro

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Canvas Skill
Source: https://github.com/chebizarro/swarmstr/tree/main/skills/canvas
Command: npx skills add https://github.com/chebizarro/swarmstr --skill canvas-skill-chebizarro

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables AI agents to push dynamic content directly to connected swarmstr UI clients in real-time, bridging the gap between agent computation and user visualization.

Core Features & Use Cases

Live Content Display: Render HTML, JSON, or Markdown content instantly on subscribed UIs.
Interactive Dashboards: Visualize real-time data, charts, or games.
Dynamic Reporting: Stream formatted Markdown reports as they are generated.

Quick Start

Use the canvas skill to update the 'main' canvas with the provided HTML content.

Frequently Asked Questions about Canvas Skill

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

FAQPage Schema

How do I display real-time content updates from an AI agent to a UI dashboard?▼

To display real-time content updates, the Canvas Skill pushes HTML, JSON, or Markdown to named in-memory canvas surfaces via WebSocket events. This enables AI agents to render interactive dashboards and live data views on connected UI clients.

Can I stream Markdown reports dynamically as they are generated by an agent?▼

You can stream Markdown reports dynamically using the canvas_update tool. The Canvas Skill renders formatted Markdown content instantly to subscribed UI clients, allowing users to view reports as the agent generates them in real-time.

Does the Canvas Skill require WebSocket connections to push live data to clients?▼

Yes, the Canvas Skill requires WebSocket connections to push live data to connected swarmstr UI clients. This WebSocket mechanism enables the real-time delivery of HTML, JSON, or Markdown content to interactive dashboards.

What is the best way to visualize live agent computation results on a dashboard?▼

The best way to visualize live agent computation results is by using the Canvas Skill to push content to named in-memory canvas surfaces. It bridges agent computation and user visualization by rendering HTML or JSON updates instantly via WebSocket events.

How do I render HTML content to a specific canvas surface for an interactive view?▼

To render HTML content to a specific canvas surface, use the canvas_update tool to push updates to a named in-memory canvas. The Canvas Skill then displays the provided HTML content instantly on subscribed swarmstr UI clients.

Are there limitations to using in-memory canvas surfaces for real-time UI updates?▼

In-memory canvas surfaces provide real-time UI updates but are temporary and require active WebSocket connections to maintain state. This approach is suited for interactive dashboards and live data views rather than persistent data storage.