Support model: best-effort, no response-time guarantee
Privacy
No telemetry is intentionally added in this extension.
Your files remain in your local VS Code workspace.
Features
Custom editor — .visual.html files open in a visual inspector by default, rendering a live preview alongside a structured layer tree.
Layer panel — Browse the element hierarchy with tag names, classes, and IDs at a glance.
Click-to-select — Click any element in the layer panel to highlight and reveal the corresponding line in the source editor (when open side-by-side).
Live sync — Edits made in the source text editor are reflected in the visual inspector immediately.
Viewport presets — Switch between Desktop, Tablet (768px), and Mobile (375px) views to preview responsive layouts.
Zoom controls — Zoom in/out (25%–200%) with increment buttons and a reset control.
Open Source Text — Use the toolbar button or Visual Inspector: Open Source Text command to open the raw .visual.html file beside the inspector.
Usage
Open any .visual.html file in VS Code — the Visual Inspector opens automatically.
Use the layer panel on the left to browse elements.
Click an element to jump to its line in the source (requires the source file to be open beside the inspector).
To open the source alongside the inspector, click the $(go-to-file) icon in the editor toolbar or run Visual Inspector: Open Source Text from the Command Palette.
