React UI Component Browser
One-click component insertion with auto-imports, live preview, and organized category browsing.
The challenge
Developers need a quick way to browse, preview, and insert React UI components without leaving the editor.
The approach
Created a VS Code extension with tree view browser, live webview preview, quick insert functionality, and auto-discovery of components from configurable paths.
How React UI Component Browser is put together
A VS Code extension that indexes a component folder on disk, previews components in a webview and writes import-aware code into the active editor.
- commands
- 7
- tree views + 1 webview
- 2
01 · VS Code UI
client
Components tree
tree view
client
Quick Snippets
tree view
client
Preview panel
webview
02 · Extension host
gateway
Extension host
7 commands
service
Component scanner
glob + prop parsing
service
Component inserter
merges imports
03 · Workspace
object store
Component folder
set in settings
client
Active editor
8 connections
- Components tree→Extension hostselect
- Quick Snippets→Extension hostinsert snippet
- Preview panel→Extension hostinsert · copy
- Extension host→Preview panelrender · async
- Extension host→Component scanner
- Component scanner→Component folderglob · read
- Extension host→Component inserter
- Component inserter→Active editoredit + import
Request flow · Browsing and inserting a component
- 1The scanner globs the configured folder and parses each file’s props into the tree.
- 2Selecting a component opens the webview preview with its variants.
- 3Insert posts back to the host; the inserter adds the usage at the cursor and merges the import into an existing one when present.
Design decisions
- Props from source
- Props are parsed from the component files themselves, so the browser stays accurate without a separate manifest.
- Import merging
- Inserting a second component from the same module extends the existing import instead of adding a duplicate line.
Trade-offs & known limits
- Prop parsing is pattern-based rather than a full TypeScript AST, so unusual prop declarations may be missed.
Have something similar in mind?
I'm open for freelance and contract work — let's talk about what you're building.