Documentation

MockHop captures web pages and helps you mark them up. Open the built-in browser, 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. macOS 15 or later is required, on Apple Silicon.

Documents

Each MockHop document holds a set of captures and the annotations 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 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.

The Capture and Annotate tabs

Every document has two tabs: Capture on the left and Annotate on the right. Switch between them at any time:

• ⌘1 — Capture tab.
• ⌘2 — Annotate tab.

Capture is where you drive the browser and grab screenshots. Annotate is where those screenshots land on a canvas you can mark up.

Built-in browser

The Capture tab embeds a real browser. Type a URL, press Return, and the page loads inline.

• Use the back, forward, and reload buttons in the address row to navigate.
• Click History to revisit a page you've loaded recently.
• Click the import icon to bring URLs in from a list.

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.
• 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.
• One Capture run produces a screenshot at every enabled size, all on the canvas at once.

Full page vs visible

Toggle in the capture options to choose what gets snapshotted:

• Full page — the entire scroll height of the page, stitched into a single tall image.
• Visible — only the part currently in the viewport.

Pull URLs from your real browser

If you've already navigated somewhere in Safari, Chrome, or Arc, MockHop can grab that URL directly — no copy / paste.

• Click the Browser → Get URL action; pick the source browser; the front-tab URL flows in.
• The page loads in MockHop's built-in browser, ready to capture.

Capture an open browser window

Sometimes the page only renders correctly in your real browser — you're logged in, an extension is active, or a CDN behaves differently. MockHop can screenshot a window from any browser without taking it over.

• Choose the window picker action and pick the open browser window.
• MockHop captures that window's content into the canvas.
• Useful when you want a clean shot of authenticated pages or specific browser states.

Quick Capture (menu bar)

Quick Capture is a system-wide screenshot-and-annotate flow you can fire from any app. 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.
• Clicking the expand button (top-right of the title bar) grows the window to fill your screen and proportionally scales the screenshot. 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 Annotate tab 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.
• 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

When elements overlap, change their stacking order with the keyboard:

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

Zoom & fit

• 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 as ⌘0.

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 — 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.

Keyboard Shortcuts

Application

Tabs

Capture

Tools

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

Canvas

Layering