Parkerhancock Browser Canvas
parkerhancock-browser-canvas is a Claude Code plugin for the Build phase that renders React UIs in a browser window with hot-reload for agent-assisted interface work.
by parkerhancock · github.com/parkerhancock/browser-canvas
Render React dashboards, forms, and charts in a live browser window with hot-reload while the agent iterates on UI code.
Add it to Claude Code
Install the plugin in Claude Code. One command, paste-ready.
/plugin install parkerhancock-browser-canvas@parkerhancock/browser-canvasBuilt to be called by your agent
Skillselion is itself an MCP server. Your agent can pull this entry and a paste-ready install config straight from the API - no copy-paste.
Retrieve this entry with skillselion.get_details("plugin:parkerhancock/browser-canvas") and the paste-ready config with skillselion.get_install_config("plugin:parkerhancock/browser-canvas").
What it does
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. Solo builders 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 validate-phase 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.
Highlights
- 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
Why builders use it
Iterating React UIs with an agent is slow when you cannot see dashboards, forms, or charts update in a live browser as files change.
You install the browser-canvas plugin and get a hot-reloading React preview window aligned with agent edits on interactive interfaces.
At a glance
- Type - Plugin in Frontend & UI.
- Adoption - 0 installs, 5 stars, 0 votes.
FAQ
Who is parkerhancock-browser-canvas for?
Solo builders 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.
Comments
Share how you use parkerhancock-browser-canvas, gotchas, or tips for other indie builders.
No comments yet - be the first to share how you use it.