Documentation

MockHop captures web pages and helps you mark them up. Open Browse & Capture, grab a screenshot at the viewport sizes you care about, then drop arrows, rectangles, highlights, and review cards on top — and export a clean PNG.

Installation

Download the DMG from the MockHop page, open it, and drag MockHop.app into your Applications folder. Then double-click to launch. Or install from the Mac App Store, which updates itself the usual way — see License for how the two builds differ. macOS 15 or later is required, on Apple Silicon.

Documents

Each MockHop document is an annotation canvas — a set of captures and the arrows, shapes, and notes you've added on top of them. Documents are saved as a single file you can store anywhere — alongside the project, in iCloud, in a shared folder.

• File → New (⌘N) opens a fresh, empty document.
• File → Open… (⌘O) opens an existing document.
• File → Save (⌘S) writes changes to disk.
• File → Open Recent lists the documents you've worked in lately.

Getting content onto the canvas

A blank document shows every way to put something on the canvas. Pick whichever fits the moment:

• Browse & Capture — browse to a page and snap it at any size, right from MockHop.
• Safari extension (Chrome too, on the direct download) — capture a page's live state — logged in, filled out — right from the browser you're already using.
• Paste an image (⌘V) — drop a copied screenshot straight onto the canvas.
• Quick Capture (direct download only) — a marquee screenshot from any app, fired from the menu bar or a global shortcut.

Browse & Capture

Browse & Capture is MockHop's built-in browser — one of two ways to get a page onto the canvas, alongside the Safari and Chrome extensions. Open it from the empty canvas or the toolbar's globe icon. It has a real browser on the left and a Viewport Sizes sidebar on the right.

• Type a URL in the address bar, press Return, and the page loads inline. Use the back, forward, and reload buttons to navigate.
• Click the clock icon to open History — a list of recently visited pages you can jump back to, with a Clear History item.
• Browse & Capture is shared across every open document — captures land back on whichever document had focus when you opened it, and that document's window comes forward once a run finishes. You can switch documents and keep browsing in between.
• It stays open across captures — close it and reopen it later and your tabs are still there.

Browser tabs

Open multiple URLs at once and bounce between them.

• ⌘T — open a new tab.
• ⌘⇧W — close the current tab.
• Click the + next to the tab strip to add a tab; click the × on a tab to close it; drag tabs to reorder them.
• Right-click a link to Open Link in New Tab.
• Each tab keeps its own history and viewport state, so you can prep a few pages and capture them in sequence.

Viewport sizes

The Viewport Sizes sidebar lists the breakpoints you want to capture at. Tick each size you want included; tap the size pill to edit it. A summary in the header shows how many sizes are enabled.

• Defaults cover Widescreen, Laptop, Tablet, and Mobile.
• Click + Add size to add a custom width × height; drag rows to reorder them.
• One Capture (⌘K) run produces a screenshot at every enabled size, all landing on the canvas at once.

Full page vs visible

A segmented control at the bottom of the Viewport Sizes sidebar chooses what gets snapshotted:

• Full page — the entire scroll height of the page, stitched into a single tall image. Fixed and sticky elements (headers, cookie banners) are captured once, not duplicated in every band.
• Visible — only the part currently in the viewport.

A tag-icon toggle next to it labels each capture with its breakpoint name, so screenshots stay identifiable once they're on the canvas.

Quick Capture (menu bar)

Quick Capture is a system-wide screenshot-and-annotate flow you can fire from any app. It's available in the direct-download build only — the Mac App Store's sandbox doesn't allow the system screen-capture call it relies on. Turn it on in Settings › Quick Capture and pick whether to show the menu-bar item, set a global shortcut, or both. The default shortcut is ⌃⇧⌘5.

Triggering Quick Capture starts a marquee selection. Press Esc to cancel. When you finish the selection, a floating window appears above whatever app you were in:

• The window title is “App Screenshot” — automatically named after the app you captured from.
• The full MockHop tool set is available in the floating window — same drawing, the same single-key shortcuts, the same undo / redo / nudge / duplicate behavior.
• An auto-filled context note pre-fills with the source app, browser version (when applicable), browser viewport, screen resolution, and OS version. Edit freely.
• ⌘G — grow the window to fill your screen, proportionally scaling the screenshot; press again to restore it. The image stays centered.

Four ways to send the result:

• Send to MockHop — opens a brand-new MockHop document containing the screenshot, your annotations, and the caption text positioned beneath them.
• Save… — saves a PNG (and a sibling .txt with the caption) to disk. The save dialog is a sheet attached to the floating window so it never gets buried.
• Share… — hands the rendered PNG to macOS's share sheet (Mail, Messages, AirDrop, etc.).
• Copy (⌘C) — puts PNG, TIFF, plain text, and an RTFD attributed string on the clipboard. Paste into a rich-text app (TextEdit, Notes, Pages, Mail) and image + caption land inline; paste into Figma or Slack and you get just the image.

The Combine into one image toggle merges the caption into a single PNG instead of writing image and text separately. Your last choice persists across captures.

Closing the floating window with the red stoplight cancels the whole flow.

Tools

The canvas has a toolbar of drawing tools. Pick a tool and drag on the canvas to draw. Each tool has a single-key shortcut (only fires while the canvas — not a text editor — has focus).

• Selection (V) — click to pick; drag to move; marquee-select multiple.
• Rectangle (R) — drag to draw an outlined rectangle.
• Ellipse (O) — drag to draw an outlined ellipse.
• Arrow (A) — drag from start to end; arrowhead at the release point. Per-end arrowheads can be toggled from the floating toolbar after creation.
• Line (L) — straight line, no arrowhead.
• Callout (C) — a line with a circle or rectangle banner at one end. The floating toolbar after creation toggles between circle / rectangle and slides the banner size.
• Cross / Prohibition (X) — drag to draw a square; the floating toolbar then picks one of three glyphs: a plain X, an X-in-circle, or a circle-with-slash no-symbol.
• Crosshair (H) — drop a pair of guide lines through a point for pixel-precise alignment checks. A 4× magnifier loupe follows the cursor while the tool is active: resize it with 1 / 2, change its zoom with , / ., and toggle a pixel grid overlay with P. With a crosshair placed, press V or H to cycle it between vertical-only, horizontal-only, and both axes.
• Text (T) — click to place a caret or drag for a wrapping text box; type, then click out.
• Note (N) — drop a pre-styled review card; pick critical / warning / approval from the floating toolbar.
• Color swatch — opens a color picker that applies to subsequent strokes / fills, and to the current selection.
• Line width / Font size — sliders that control stroke thickness or text size for the next shape and any selected shape. Text items auto-fit width and height to the new font size unless you've manually resized them.

Hold ⇧ while drawing for proportional shapes (square / circle), snap-to-axis lines, and balanced X glyphs.

While a non-pointer tool is active, clicking on an existing item picks it and switches back to the pointer — so swapping between drawing and tweaking flows naturally.

Selection

• Click an element to select it. ⇧-click to add or remove from the selection.
• Drag to move; drag a handle to resize.
• ⌘D — duplicate selection.
• ⌫ / Delete — delete selection.
• ⌘A — select everything on the canvas.
• ⌘C / ⌘X / ⌘V — copy, cut, paste between documents.

Review cards & leaders

Review cards are pre-styled callouts for the three things you most often need to flag: something critical, a warning, or an approval. They look intentional on any screenshot, so feedback stays readable.

• Drop a card with the Note tool (N); type your note in place. Width and height auto-fit the wrapped text at the current font size.
• Pick a level: Critical, Warning, or Approval — each one styles the card with a clear color and icon.
• A small numbered badge sits on the top-left corner of every note, in document order — so a reviewer can refer to “note 3” in conversation. Numbering re-flows automatically when notes are added, removed, or reordered.
• Selected notes show a leader pull-tab just past their right edge. Drag from it to materialize an arrow leader pointing wherever you drop the cursor; drag the same handle later to move the leader's endpoint. The arrow's start auto-reflows to the closest point on the note's edge as you move the note around.
• Drag to move; resize from the corners. Manually resizing flips off auto-fit on whichever axis you dragged.

Callouts & prohibition

Two compact tools for pointing at something without a card.

• Callout (C) — a single line with a circle or rectangle banner at the cursor end. After creation, the floating toolbar toggles the banner shape and slides its size from 16 to 1200pt. Last-used size persists, so consecutive callouts feel consistent.
• Cross / Prohibition (X) — a quick way to flag “don't” on a screenshot. Drag for a square; the floating toolbar picks plain X, X-in-circle, or the no-symbol circle-with-slash glyph. Hold ⇧ while drawing to get a perfectly balanced symbol from a sloppy diagonal.

Crop tool

The crop tool trims a screenshot non-destructively — you can re-crop or restore the full image at any time.

• Select an image and choose Crop in the floating toolbar.
• Drag the handles to set the crop region, or drag a new region from scratch.
• Press Return to confirm, Esc to cancel.
• To restore the original, pick the image and use Reset crop.

Layering & snapping

When elements overlap, change their stacking order with the Arrange menu:

• ⌘] — bring forward one step.
• ⌘⇧] — bring to front.
• ⌘[ — send backward one step.
• ⌘⇧[ — send to back.

The same menu has Snap to Edges (⌘/), a toggle that snaps shapes to nearby edges and centers while you drag or resize them.

Zoom, fit & display

• Use the zoom slider in the toolbar to zoom in / out.
• ⌘0 — fit all content to the viewport. The Fit button does the same thing.
• View → Hard Pixels (⌘⇧P) — turns off image smoothing so captures render at crisp, blocky pixel edges instead of interpolated ones. Useful when you're checking exact pixel boundaries in a screenshot; applies to exports too.

Saving, sharing, exporting

MockHop saves the document — every capture and every annotation — as one file. To hand the rendered canvas to someone who doesn't have MockHop, the toolbar's right cluster has three icon buttons:

• Save (also File → Export as PNG…, ⌘⇧E) — opens the standard save panel; writes a high-resolution PNG with all annotations baked in.
• Share — hands the rendered PNG to macOS's share sheet (Mail, Messages, AirDrop, etc.).
• Copy (⌘⇧C) — puts PNG and TIFF on the clipboard so the result pastes cleanly into apps that prefer either.

All three are disabled when the canvas is empty.

License

The direct download is a free trial — every feature unlocked, no watermark. After a 7-day grace period, MockHop shows a quick license reminder every 5th capture; dismiss it and keep working, or buy a one-time license from MockHop → Buy License… and activate it via Enter License…. Activation needs the internet briefly, then works offline. The Mac App Store version is paid through Apple's standard pipeline — no separate license key, no trial.

Keyboard Shortcuts

Application

Browse & Capture

Tools

Single-key shortcuts only fire while the canvas — not a text editor — has focus.

Crosshair loupe

Active only while the Crosshair tool is in use.

Canvas

Layering & snapping