Parkerhancock Browser Canvas
- 9 repo stars
- Updated January 21, 2026
- parkerhancock/browser-canvas
parkerhancock-browser-canvas is a Claude Code plugin that renders React UIs in a browser window with hot-reload for agent-assisted interface work.
About
parkerhancock-browser-canvas is a Claude Code plugin that ships one skill for opening a browser canvas where React interfaces render with hot-reload as you and the agent edit files. developers use it when static code review is not enough—you want to see dashboards, charts, forms, and other interactive UI update immediately during build. The workflow fits frontend-heavy SaaS and internal tools, and it doubles as a prototype surface when you need a clickable React mock without deploying. It does not replace production hosting, visual regression suites, or design-system governance; it is a local visual loop for faster iteration. On Skillselion, place it on build/frontend with multi-phase scope so discoverers also find it when scoping prototypes, while the canonical shelf stays frontend implementation.
- Single focused plugin for browser-canvas skill
- Live React UI in a browser window with hot-reload
- Suited to dashboards, charts, forms, and interactive interfaces
- Visual feedback loop while writing or refactoring components
- Agent-driven UI work without manual dev-server juggling
Parkerhancock Browser Canvas by the numbers
- Data as of Jul 7, 2026 (Skillselion catalog sync)
/plugin install parkerhancock-browser-canvas@parkerhancock/browser-canvasAdd your badge
Show developers this plugin is listed on Skillselion. Paste this into your README.
| repo stars | ★ 9 |
|---|---|
| Last updated | January 21, 2026 |
| Repository | parkerhancock/browser-canvas ↗ |
What it does
Render React dashboards, forms, and charts in a live browser window with hot-reload while the agent iterates on UI code.
Who is it for?
Best when you're creating React dashboards, forms, or charts and want immediate visual feedback inside Claude Code sessions.
Skip if: Non-React stacks, mobile-native UI, or teams that only need API/backend work without a browser preview skill.
What you get
You install the browser-canvas plugin and get a hot-reloading React preview window aligned with agent edits on interactive interfaces.
- One browser-canvas Claude Code plugin
- Hot-reloading React UI preview during agent sessions
- Faster visual iteration for dashboards, forms, charts, and interactive UIs
By the numbers
- Plugin count: 1
- Repository: parkerhancock/browser-canvas
- Described as a Claude Code skill for React UI with hot-reload
Recommended Plugins
0xdesign Design PluginDesign exploration plugins for Claude Code743
Adlsdztony Claude Marketplace1 plugin2
Alexanderop Claude Skill Vue DevelopmentA Claude Code Agent Skill for Vue.js development with TypeScript, emphasizing testing-first development, functional patterns, and maintainable architecture.27
Alonw0 Web Asset GeneratorClaude skill to generate favicons, app icons, and social media images from logos, text, or emojis.469
Ankish8 Storybook NpmLocal plugins for myOperator UI2
Antvis Chart Visualization Skills⛏️ Turning data into a visual language for better thinking with Skills.446How it compares
Frontend preview skill with hot-reload, not a full hosting platform or generic plugin marketplace.
FAQ
Who is Parkerhancock Browser Canvas for?
Developers and frontend-focused developers using Claude Code on React apps who need a live browser canvas while the agent writes or refactors UI code.
When should I use Parkerhancock Browser Canvas?
Use it during build frontend work or validate prototyping when you want hot-reloaded React previews for dashboards, charts, forms, and interactive interfaces.
How do I add Parkerhancock Browser Canvas to my agent?
Register parkerhancock/browser-canvas as a Claude Code plugin, install the single bundled skill, then invoke it when editing React UI files that should render in the browser canvas.