Juj — Component Inspector
Visually inspect and edit React + SCSS components on your running dev site, directly from VS Code. Click any element to see its source file and SCSS classes, then edit values live.
Features
- Click to select — click any element in the Juj browser to see its resolved SCSS classes and computed values
- Live SCSS editing — change property values and save instantly; HMR picks up the change without a reload
- Add class — clicked a classless element? Give it a name and Juj writes both the
className attribute in JSX and the matching rule in SCSS
- Sibling reorder — move JSX siblings up or down without touching source files manually
- Library guard — identifies when a clicked component lives in
node_modules so you know it's read-only
- Auto port detection — finds your dev server automatically; no config needed for standard setups
Requirements
- A React project with a running local dev server (Vite, Next.js, CRA, etc.)
- SCSS Modules (
.module.scss) co-located with your components
Usage
- Start your dev server (
npm run dev or equivalent)
- Open the Juj panel from the Activity Bar (left sidebar)
- Run Juj: Open browser from the Command Palette (
Ctrl+Shift+P / Cmd+Shift+P)
- Click any element on the page — the panel shows its SCSS classes with editable fields
Apps with auth (Ory tunnel, etc.)
If your app uses an auth tunnel like ory tunnel, login redirects bounce the page from your dev origin to the tunnel's origin (e.g. localhost:4000). VS Code webviews can't embed those redirect targets — the page goes blank inside the Juj panel because the tunnel's responses carry X-Frame-Options.
Workaround: log in once via VS Code's Simple Browser (Command Palette → Simple Browser: Show, point it at your dev URL). The session cookie lands in VS Code's shared cookie jar; the Juj panel then loads authenticated without ever needing to follow the redirect.
You only need to do this once per VS Code session.
Commands
| Command |
Description |
Juj: Open browser |
Opens your dev site in the Juj inspector panel |
Juj: Open selected SCSS file |
Opens the companion SCSS file beside the browser |
Juj: Free dev port |
Kills any process blocking your dev server port |
Juj: Copy inspector script |
Copies the inspector script to clipboard for manual console use |
Configuration
For most projects, Juj works out of the box. If you use a component library that you want Juj to treat as read-only, create .inspector.config.json in your workspace root:
{
"libraryPackageNames": ["@your-org/design-system"]
}
Juj will show the file path for library components but skip the SCSS editor, since those files aren't yours to edit.
How it works
Juj starts a local proxy in front of your dev server and injects a click-interceptor script into the page. When you click an element, the script reads its source location from V8's source maps, which Juj maps back to a file in your workspace. From there it finds the companion SCSS file, parses the class rules, and populates the editor panel — all without you leaving VS Code.
