Two ways to use it
The editor, in your browser. Nothing to install. Paste a screenshot, drop a file in, or open one, mark it up, export a PNG. Open it here.
The Chrome extension. Adds the part a web page can't do on its own: capturing an entire scrolling page with one shortcut, straight into the editor. Install it below.
Installing the extension
It isn't on the Chrome Web Store, so you load it yourself. Takes about a minute, and it means no review process, no fee, and no silent updates. Chrome 109 or newer.
- Download the zip and unzip it. You'll get a folder called shotmark. Put it somewhere you won't delete by accident, the extension runs from that folder.
- Open chrome://extensions in Chrome. You'll have to type or paste that, links to it don't work.
- Turn on Developer mode with the toggle in the top right.
- Click Load unpacked and select the shotmark folder. Select the folder itself, not a file inside it.
- That's it. The Shotmark icon appears in your toolbar. Pin it if you want it visible.
If Chrome says the shortcuts don't work, it usually means another extension already claimed them, or the combination is reserved. Go to chrome://extensions/shortcuts and rebind them to whatever you like.
Capturing
| ⌘⇧S | Capture the full page, including everything below the fold, and open it in the editor |
| ⌘⇧Y | Capture just the visible area |
| ⌘⇧E | Open the editor with whatever image is already on your clipboard |
| Toolbar icon | Same as the full-page capture |
On Windows and Linux, use Ctrl instead of ⌘. While a full-page capture is running, the toolbar icon shows a percentage so you know it's working.
In the editor
| A | Arrow |
| R | Rectangle |
| E L | Ellipse, line |
| H | Highlighter, arms yellow automatically |
| N | Numbered step badge. Click to drop 1, 2, 3 and so on |
| B | Redact, as a solid bar or pixelated |
| C | Crop. ↵ to apply, esc to cancel |
| F | Frame, for padding, background, rounded corners and a shadow |
| V esc | Back to the select tool |
| ⌘V ⌘O | Paste from the clipboard, or open an image file |
| ⌘Z ⌘⇧Z | Undo, redo |
| ⌘S | Export a PNG |
| ⌘⇧C | Copy the finished image to the clipboard |
A few things that make it faster once you know them. Hold ⇧ while dragging to constrain to a square or to 45 degrees. Arrow keys nudge a selection by 1px, or 10px with shift. ⌘D duplicates, ⌘] and ⌘[ change stacking order.
Step badges renumber themselves. Delete number 2 and the old 3 becomes 2. Nothing is baked into the pixels until you export, so every annotation stays editable for as long as the tab is open.
Redaction, and why the default is a bar
If you blur client information in screenshots, use a solid bar rather than pixelate. Pixelated text can often be recovered when the font and the pixel grid are guessable. A solid bar replaces the pixels, so there is nothing underneath to pull back out.
That's why Shotmark defaults to the bar. Pixelate is there if you want the look, but the bar is the one that's actually safe.
Nothing is uploaded
The editor runs entirely in your browser. There is no server, no account and no storage. Close the tab and it's gone. The extension asks for three permissions and no host access at all: the current tab, the ability to run the capture script in it, and clipboard read for the paste shortcut.
Why it exists
Putting one arrow on a screenshot meant three apps. One to capture the full page, one to annotate it, then paste it wherever it was actually going. Every single time.
What kept me in that loop wasn't the steps. It was assuming that building the alternative would be a project. It was about 30 minutes.
Got a loop like that in your own week? Most of what I build for clients started as a job somebody was doing by hand every week. The audit is free, and if there's nothing worth automating I'll tell you that.