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.

Acerca de

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

Pre-bundled shadcn/ui components, Lucide icons, and Recharts for data visualization.
Instant hot-reloading for React (App.jsx) and Vanilla (index.html) modes.
2 GitHub stars
Integrated logging and screenshot capabilities for debugging and verification.
Bi-directional state synchronization between Claude and the browser via JSON.
Automatic validation feedback including ESLint, Tailwind, and accessibility checks.

Casos de Uso

Creating portable, standards-based HTML artifacts for documentation or standalone tools.
Rapidly prototyping interactive dashboards and data visualization tools.
Building and testing complex multi-step forms with real-time feedback.

Acerca de

Características Principales

Pre-bundled shadcn/ui components, Lucide icons, and Recharts for data visualization.
Instant hot-reloading for React (App.jsx) and Vanilla (index.html) modes.
2 GitHub stars
Integrated logging and screenshot capabilities for debugging and verification.
Bi-directional state synchronization between Claude and the browser via JSON.
Automatic validation feedback including ESLint, Tailwind, and accessibility checks.

Casos de Uso

Creating portable, standards-based HTML artifacts for documentation or standalone tools.
Rapidly prototyping interactive dashboards and data visualization tools.
Building and testing complex multi-step forms with real-time feedback.