Can I use external libraries in Browser Canvas?

Yes, React mode includes many libraries pre-bundled, and Vanilla mode supports external libraries via import maps and standard CDN scripts.

What is the difference between React and Vanilla modes?

React mode uses App.jsx with pre-bundled shadcn/ui components for rapid prototyping, while Vanilla mode uses index.html for portable, standards-based code.

How does Claude communicate with the rendered UI?

Claude can read interaction logs from _log.jsonl, take automated screenshots, and use two-way state synchronization via a shared _state.json file.

Is there validation for the generated code?

Yes, the skill automatically provides feedback on ESLint errors, invalid Tailwind classes, accessibility issues, and runtime crashes directly to Claude.

Does it support data visualization?

Absolutely. It includes Recharts in React mode and supports Chart.js in Vanilla mode, making it ideal for creating charts, graphs, and dashboards.

Browser Canvas

Name: Browser Canvas
Author: parkerhancock

byparkerhancock

•

Herramientas de Diseño

Renders interactive React and Vanilla HTML interfaces in a browser window with real-time hot-reloading and state synchronization.

Browser Canvas enables Claude to create and iterate on visual interfaces by rendering code directly in a browser environment. It supports a React mode with pre-bundled shadcn/ui components and Recharts for complex dashboards, as well as a portable Vanilla HTML mode for standards-based artifacts. With features like hot-reload, two-way state synchronization via WebSocket, and automatic validation for accessibility and linting, it provides a seamless bridge between text-based code generation and live frontend development.

Características Principales

01Pre-bundled shadcn/ui components, Lucide icons, and Recharts for data visualization.

02Instant hot-reloading for React (App.jsx) and Vanilla (index.html) modes.

032 GitHub stars

04Integrated logging and screenshot capabilities for debugging and verification.

05Bi-directional state synchronization between Claude and the browser via JSON.

06Automatic validation feedback including ESLint, Tailwind, and accessibility checks.

Casos de Uso

01Creating portable, standards-based HTML artifacts for documentation or standalone tools.

02Rapidly prototyping interactive dashboards and data visualization tools.

03Building and testing complex multi-step forms with real-time feedback.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add parkerhancock/browser-canvas canvas

For use in Claude.ai and ChatGPT

Download Skill