canvas

Render React and HTML files as interactive browser interfaces.

9|1|Updated Jan 7, 2026
One-click install
npx skills add https://github.com/parkerhancock/browser-canvas --skill canvas-parkerhancock
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canvas
Source: https://github.com/parkerhancock/browser-canvas/tree/main/skills/canvas
Command: npx skills add https://github.com/parkerhancock/browser-canvas --skill canvas-parkerhancock

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill enables users to create interactive browser-based user interfaces by manipulating files directly, facilitating rapid prototyping and visualizations without complex integrations.

Core Features & Use Cases

  • Dual Mode Rendering: Supports React (App.jsx) for complex, dynamic interfaces, and Vanilla (index.html) for portable, standards-compliant static pages.
  • File-Triggered UI Generation: Automatically detects file changes and renders the corresponding UI in the browser.
  • Use Case: Quickly prototype a dashboard in React or build simple embedded visualizations by editing HTML files, with instant hot-reload and state synchronization.

Quick Start

Write a React component App.jsx in a new artifact folder, and the system will render it in the browser; or write an index.html file for static content, which will be served directly.

Frequently Asked Questions about canvas

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

FAQPage Schema
How do I prototype interactive browser UIs through file operations?▼

You can prototype interactive browser UIs through file operations by writing a React component (`App.jsx`) or an `index.html` file, which the system automatically detects and renders directly in the browser environment.

Can I use React and HTML for rapid prototyping in the browser?▼

Yes, you can use React and HTML for rapid prototyping in the browser through the dual mode rendering feature, which supports complex dynamic interfaces via `App.jsx` and static pages via `index.html`.

Does this UI prototyping approach support external libraries for data visualization?▼

Yes, this UI prototyping approach supports external libraries for data visualization, ensuring compatibility with React, HTML, CSS, and external libraries for customizable, standards-based data presentation.

What is the difference between React and Vanilla modes for creating dashboards?▼

The difference between React and Vanilla modes for creating dashboards is that React (`App.jsx`) handles complex, dynamic interfaces, while Vanilla (`index.html`) serves portable, standards-compliant static content.

How do I trigger hot-reload and state synchronization for my UI components?▼

You trigger hot-reload and state synchronization for your UI components by editing your HTML or React files, which automatically detects file changes and renders the corresponding updates instantly in the browser.