HomeProductsDevMesh DevShot X
DevShot X — Capture. Annotate. Attach.

DevMesh DevShot X

A native macOS capture, recording, and annotation app — wired into your DevMesh kanban. Hit a hotkey, drag a rectangle, drop the result onto a task. No tab switch.

cleanshot.swift — Xcode
func capture(rect: CGRect) {
// SCContentFilter
let filter = SCContentFilter(...)
let stream = SCStream(filter: filter)
stream.startCapture()
}
devmesh.app/app
TODO · 4
DEVM-83
Wire OAuth handler
DEVM-82
Patch SQLi
DEVM-81
Rotate Stripe key
DOING · 2
DEVM-80
Refactor modal
DEVM-79
Fix retry logic
DEVM-78
Viewport-fit board
DONE · 3
DEVM-77
Commit badges
DEVM-76
Auto-bind tasks
DEVM-75
Group color hash
The Concept

What Is
DevShot X?

DevShot X is a CleanShot-X-style capture and recording tool, rebuilt around a single idea: screenshots are work artifacts. They’re bug repros, design reviews, status updates, support tickets — and they almost never live next to the tasks they belong to.

DevShot X bridges that gap. The app speaks devshot:// deep-links and shares a macOS Keychain login with the rest of DevMesh. A kanban card can launch a capture pre-bound to itself; the resulting PNG attaches when you save.

Built on Tauri 2: ~12 MB bundle, native performance, the same React + Tailwind frontend stack as DevMesh and ADE. Capture, hotkeys, and OCR run in Rust and a Swift sidecar — power where you need it, web ergonomics where you don’t.

DevShot X — Editor · Screenshot 2026-05-02 14.07.png
pen
arrow
rect
text
Sign in to DevMesh
Enter your email to receive a magic link
Send magic link
The Flow

From hotkey to attached

Five steps, none of them a context switch.

01

Hit a hotkey

⌘⇧4 for area, ⌘⇧5 for window, ⌘⇧3 for full display. Bindings configurable in Settings; conflicts detected before save.

02

Frame and shoot

Drag the selection with a live W×H readout. Hover a window to snap to its bounds. Esc cancels, Return confirms.

03

Catch the HUD

A thumbnail appears bottom-left of the primary display. Drag it into Slack, Notion, Mail. Click to open the editor. Auto-dismisses in 8s.

04

Annotate if you want

Pen, arrow, rectangle, blur, spotlight, window-chrome. Save composites onto the image and refreshes the HUD with the edited file.

05

Land it on a task

If the capture was launched from a devshot:// deep-link, the saved PNG attaches to the bound DevMesh task automatically. No upload step, no copy-paste of links.

The Edge

Six reasons it earns its slot

CleanShot X has the bar. We match it on capture quality and undercut it where it matters: the screenshot knows about your work.

01

Every capture mode you reach for

Area drag, single window, full display, scrolling stitch, repeat-last-area. Hotkeys match macOS muscle memory: ⌘⇧3 / ⌘⇧4 / ⌘⇧5.

⌘⇧4   area drag with W×H readout
⌘⇧5   click a window — clean shot
⌘⇧6   repeat last area, no overlay
02

Record video, audio, webcam — composed

ScreenCaptureKit pipes into AVAssetWriter. System audio + microphone tracked separately. Webcam bubble is a floating window composited into the export.

H.264 / HEVC · 60fps cap
gifski export · palette quality slider
trim before export with in/out scrub
03

Annotation that gets out of the way

Pen, arrow, rectangle, ellipse, text, numbered steps. Blur, pixelate, spotlight. Window-chrome composer for marketing-grade exports — rounded corners, drop shadow, gradient backdrop.

04

OCR built in

Drag a region, get the text. macOS Vision via a tiny Swift sidecar. Joined text on the clipboard plus a panel of detected blocks for selective copy.

VNRecognizeTextRequest .accurate
automaticallyDetectsLanguage = true
result → clipboard + toast
05

Floating HUD, drag-to-drop everywhere

Bottom-left thumbnail after every capture. Drag into Slack, Notion, Mail, Finder. Click to open the editor. Hover pauses auto-dismiss; drop fires the close 200ms later.

06

Wired into DevMesh

devshot:// deep-links pre-bind a capture to a task. Shared macOS Keychain with DevBoard and ADE — sign in once, every app sees it. Loopback HTTP fallback for unsigned dev builds.

devshot://capture
  ?taskId=DEVM-83
  &kind=area
↳ next capture auto-attaches
REC00:00
Display 1
System Audio
Mic
Webcam
STOP
Recording

Record what matters,
mux it cleanly.

ScreenCaptureKit feeds AVAssetWriter directly. System audio and microphone are separate AVAssetWriterInputs — mute either from the recording HUD without re-encoding.

Webcam bubble is a floating circular window with a AVCaptureVideoPreviewLayer; resizable, repositionable, composited into the export as a second video input.

Click highlights and key-cap overlays draw into the composited layer, not as system overlays — no extra permission prompts, no flicker on monitor switches. Trim with an in/out scrubber before export. GIF pipeline runs frames through gifski with a live size estimate.

Under The Hood

The stack

Native where it counts. Web ergonomics where they don’t. Eight choices that keep the bundle small and the fps high.

01

Tauri 2 · Rust 1.75+ · React 18 + TypeScript + Tailwind in the webview.

02

Capture via `scap` + `screencapturekit-rs`; image ops via `image` crate.

03

Global hotkeys via `tauri-plugin-global-shortcut`; tray icon via Tauri 2 native API.

04

OCR via macOS Vision through a small Swift sidecar binary.

05

Auth tokens in `tauri-plugin-stronghold` (encrypted, cross-platform).

06

Deep links via `tauri-plugin-deep-link` — owns `devshot://`.

07

Auto-update via `tauri-plugin-updater` with EdDSA-signed releases.

08

Distribution: signed + notarized DMG via tauri-action; ~12 MB bundle vs Electron's 120 MB.

FAQ

Frequently asked questions

Hotkey to capture. Drag to attach.

DevShot X is in private beta on the DevMesh dogfood build. Join the waitlist and get the first signed DMG when v1 lands.