canvas

Name: canvas
Availability: InStock
Author: Acosmi

Render HTML/React artifacts, capture screenshots, and evaluate JavaScript in sandboxed Canvas sessions.

6|Updated Feb 26, 2026

Search Tags:#html #javascript #visualization #canvas #screenshot #render

Ready to run

npx skills add https://github.com/Acosmi/CrabClaw --skill canvas-acosmi

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: canvas
Source: https://github.com/Acosmi/CrabClaw/tree/main/docs/skills/tools/ui/canvas
Command: npx skills add https://github.com/Acosmi/CrabClaw --skill canvas-acosmi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Canvas provides a lightweight, visual preview of HTML/React artifacts by rendering content in a sandboxed panel, capturing screenshots, and executing JavaScript as needed to validate UI output.

Core Features & Use Cases

Render HTML/React artifacts in a visual panel for quick verification.
Take screenshots of rendered content to share design reviews or QA notes.
Execute and evaluate JavaScript within the sandbox to test dynamic behavior of UI components.

Quick Start

Render a given HTML snippet in the Canvas panel to preview visuals and capture a screenshot when needed.

Frequently Asked Questions about canvas

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

FAQPage Schema

How do I render HTML and take screenshots for UI validation?▼

You can render HTML and take screenshots for UI validation by using a sandboxed Canvas panel to preview artifacts, execute JavaScript, and capture visual output for rapid design reviews and prototyping.

Can I execute JavaScript in a sandbox to test dynamic UI components?▼

Yes, you can execute and evaluate JavaScript within a sandboxed Canvas panel to test dynamic behavior of UI components. This allows you to validate interactive HTML or React artifacts during visual verification tasks.

What is the best way to visually verify React artifacts during a design review?▼

The best way to visually verify React artifacts during a design review is to render them in a sandboxed visual panel. You can capture screenshots of the rendered content to share QA notes and validate UI output quickly.

Does Canvas work with HTML prototyping for rapid visual verification?▼

Canvas works directly with HTML prototyping by rendering code snippets in a visual panel for rapid visual verification. It applies to UI prototyping and design reviews by providing a lightweight preview of your HTML artifacts.

Why do I need a sandboxed environment to render HTML previews and evaluate JavaScript?▼

You need a sandboxed environment to render HTML previews and evaluate JavaScript safely without affecting the main application. It isolates the render, screenshot, and evaluate actions to ensure secure UI validation.

What are the limitations of using Canvas for HTML visualization and screenshots?▼

Canvas is limited to rendering HTML and React artifacts, taking screenshots, and evaluating JavaScript for UI validation. It requires a sandboxed environment with specific actions and returns structured results, making it unsuitable for non-visual backend tasks.