Proto Snapshot
Snapshot HTML UI prototypes to PNG inside VS Code. Auto-generates Markdown references.
Features
- Auto-discovers elements by
id prefix (configurable)
- Renders with Playwright + your system Chrome/Edge — no extra download
- Snapshot all or pick specific elements via QuickPick
- Generates
*-screenshots.md with image references
- Reads
title attribute for human-readable headings
- Supports prefix, multi-prefix, and regex pattern matching
- Windows multi-drive scanning (C:/D:/E:/F:)
Usage
| Trigger |
Action |
Right-click .html in Explorer |
Snapshot All / Snapshot Selected... |
Command Palette Ctrl+Shift+P |
Search Snapshot |
| Editor title bar |
Snapshot button on .html files |
Pattern Matching
Set via Ctrl+Shift+P → Set Proto ID Pattern... or protoSnapshot.idPattern in settings.
| Pattern |
Matches |
ui- |
id="ui-*" |
ui-,proto-,comp- |
Any of the prefixes (default) |
/ui-(menu\|dialog)/ |
Full regex |
"" (empty) |
All elements with an id |
Use title attribute for friendly headings in the generated Markdown:
<div id="ui-context-menu" title="Context Menu">...</div>
→ generates ### Context Menu instead of ### ui-context-menu
Requirements
One of: Chrome / Edge / Chromium installed. (Windows, macOS, Linux)
Use Cases
PR / Design Review
Snapshot every component, commit PNGs + auto-generated *-screenshots.md. Reviewers see the full UI in GitHub/GitLab without opening a browser.
Product Spec Documents
Embed screenshots in markdown specs. Update the prototype HTML, re-snapshot — all images refresh automatically.
Component Library Docs
Maintain one HTML file with id="comp-btn", id="comp-modal", etc. Snapshot Selected to update only changed components.
Multi-Team Handoff
Designer writes ui-prototypes.html with id="ui-*" and title attributes. Developer right-clicks → Snapshot All → gets PNGs + Markdown ready for the wiki.
Configuration
| Setting |
Default |
Description |
protoSnapshot.idPattern |
"ui-,proto-" |
ID matching pattern |
protoSnapshot.generateMd |
true |
Auto-generate *-screenshots.md |
protoSnapshot.outputFormat |
"png" |
png or jpeg |
protoSnapshot.omitBackground |
false |
Transparent background (PNG) |
protoSnapshot.serverPort |
8765 |
HTTP server port |
protoSnapshot.showNotification |
true |
Completion notification |
Development
npm install
npm run compile
# F5 to launch Extension Development Host
