Snapmark for VS Code

What is Snapmark for VS Code?

Snapmark for VS Code is a VS Code extension designed to help you annotate screenshots before you paste them into AI chat tools. The core workflow is focused: you copy a screenshot, annotate it in the extension, and then paste the annotated image into any AI chat that accepts pasted images.

According to the extension’s description, Snapmark keeps the agent’s window untouched by working through your clipboard. This allows you to blur sensitive regions, add numbered step callouts for UI flows, and resize large screenshots to a more model-friendly size before sharing them in chat.

Key Features

• Clipboard-based workflow: Snapmark sits in your clipboard—copy a screenshot, then use the extension’s shortcut to open the annotator and prepare the image for pasting.
• Blur sensitive regions: It supports blurring areas of the screenshot so values like API keys, tokens, and PII are hidden before the image is pasted into an AI chat.
• Numbered step callouts: You can add ordered markers (e.g., 1, 2, 3) to describe a UI flow in sequence, reducing back-and-forth when explaining multi-step screens.
• Auto-compress on copy: Retina screenshots are resized on the long edge to 1920px when copied, intended to prevent vision models from processing unused pixels.
• Paste into “anything that accepts pasted images”: The extension is presented as tool-agnostic—usable with AI chats that accept pasted images (it lists examples such as Claude Code, GitHub Copilot Chat, and Cursor).
• No telemetry / open source (as stated): The page states the project is free, open source, and no telemetry.

How to Use Snapmark for VS Code

1. Install the extension: Install Snapmark from the VS Code Marketplace (or use the GitHub link shown on the page).
2. Copy a screenshot: Use your OS screenshot tool (examples listed include macOS Ctrl+Shift+⌘4, Windows Win+Shift+S, or any Linux snipper).
3. Open the annotator: After copying, Snapmark detects the clipboard image and enables its status-bar button. Press ⌘⇧A (or Ctrl+Shift+A) to open the annotator.
4. Annotate and prepare the image: Use the available tools to blur sensitive areas and add numbered step callouts as needed. The extension also applies the described resizing behavior when copying.
5. Paste into an AI chat: Use the extension’s “Copy” action and paste the annotated image into an AI chat that accepts pasted images (examples listed on the page include Claude Code, Copilot Chat, and Cursor).

Use Cases

• Redacting credentials before sharing UI: When documenting an application screen that includes API keys, tokens, or personal data, blur those regions first so the pasted screenshot doesn’t expose sensitive information.
• Explaining multi-step interfaces: For a flow such as “configure settings → submit → confirm results,” add numbered markers (1, 2, 3) to tell the model which screen areas correspond to each step.
• Preparing screenshots for vision models without extra pixel cost: If you copy a high-resolution (e.g., Retina) screenshot, rely on Snapmark’s auto-resize to reduce image size so the model processes a 1920px long edge rather than extremely large screenshots.
• Using multiple AI chat tools with the same workflow: Move between different AI chat clients (the page lists Claude Code, Copilot, Cursor, and others) without changing your screenshot annotation process—paste the annotated image wherever it’s accepted.

FAQ

Does Snapmark integrate with specific AI agents?

Snapmark is described as working with “anything else that accepts pasted images.” The page lists examples such as Claude Code, GitHub Copilot, and Cursor, but the key requirement is that the AI chat client accepts pasted images.

What happens to the screenshot during annotation?

The page states that Snapmark lives in your clipboard and does not touch any agent’s window. You annotate the clipboard image in VS Code and then paste the annotated image into the AI chat.

Can I hide sensitive information like API keys and PII?

Yes. Snapmark includes a blur feature intended for sensitive regions, with the page explicitly mentioning API keys, tokens, and PII.

Does Snapmark resize large screenshots?

Yes. The page states that Retina screenshots are resized to 1920px on the long edge when copied.

Alternatives

• Manual screenshot editing tools: Use an image editor (or the OS annotation tools) to blur and label screenshots before pasting. This is more flexible for editing, but it requires switching tools and doesn’t provide the same clipboard-to-annotator workflow inside VS Code.
• Dedicated UI/step annotation tools: Tools that help you mark up screenshots for documentation can serve a similar purpose, but they may not be tailored to the clipboard-first flow and “paste into AI chat” step.
• Other VS Code image/clipboard utilities: Alternatives in the developer tooling space may offer clipboard handling or image manipulation, but may not include the same built-in blur and numbered step workflow described for Snapmark.
• Relying on the AI chat client’s image handling only: If your AI chat can accept pasted screenshots directly, you can skip annotation. This may be less reliable for redacting sensitive content and for guiding models through multi-step UI flows.