Lode dev notes: built-in screenshot markup + PDF content compare

Two features shipped in Lode this week. They look unrelated, but they come from the same motivation: not wanting to leave the file workbench I already have open for one small task.

One is an Annotate mode inside the Viewer — open a PNG and add arrows, highlight boxes, redact sensitive info, crop, resize, and save. The other is PDF content compare — extract text from two PDFs and diff it side-by-side, so you can see exactly what changed in the words between two versions.

Both came out of dogfooding. I spend all day in Lode viewing files, comparing things, and prepping App Store assets — but marking up a screenshot meant jumping to Preview or Skitch, and comparing two study-note PDFs meant converting each to text first. Lode is the window I keep open longest, so both jobs moved in.

Feature 1: screenshot markup inside the Viewer

Lode could already view images. This adds a pencil button to the image view that flips “view” into “edit,” dropping you onto an annotation canvas (the annotate/ bundle is lazy-loaded, so it never weighs down startup).

What it does

• Annotate: arrows, rectangles, ellipses, lines, highlighter, auto-numbered steps (①②③), freehand brush, and text — make “look here” obvious.
• Redact: use the clone stamp (Alt-click sets the source), blur, or pixelate to cover emails, serials, and paths. This is the tool I reach for most before publishing anything.
• Brush feel: Fine / Normal / Rough strokes (6 / 24 / 70 px) plus a size slider and a row of common swatches.
• Select / sample: rectangular marquee, magic wand (contiguous-colour select), eyedropper.
• Crop, resize, rotate: crop off noisy edges; resize to a target size (store screenshots often need exact pixels); rotate 90°.
• Layers & objects: vector annotations are discrete objects — select, duplicate, delete, reorder — with a layers panel; Undo/Redo works at the object level.
• Save: PNG / JPG only, and never cross-format (png in → png out). Defaults to “Save a Copy”; overwriting the original asks first.

Under the hood it’s a hybrid renderer: vector annotations are SVG, retouch (clone/heal) paints onto a raster canvas underneath, and text edits use a real <textarea> overlay — the three layers only get flattened into one bitmap on save. The point is the flow: screenshot → open in Lode → annotate/redact → save, without leaving the app.

Feature 2: PDF content compare (text-extracted diff)

The second feature lives in File Diff mode. Lode’s File Compare used to be a side-by-side diff for text and code; now you can drop two PDFs straight in, and a “PDF text diff (extracted)” label appears with a Text / Visual toggle.

Text mode: Lode uses macOS’s built-in PDFKit to pull the embedded text layer out of each PDF as plain text, then feeds it into the same Monaco diff used for code — red on the left for removed/changed, green on the right for added. The extracted text keeps ## Page 1 page markers (walked out page-by-page by PDFKit) so you know which page a change lands on. Because it reads the text layer and not OCR, a purely scanned/image PDF has no text to extract — a limitation worth knowing.

Visual mode: renders each page to an image, side by side, to compare layout; there’s also a Diff overlay that blends two pages with a difference composite so a shifted layout jumps out. That render path only starts the first time you open Visual.

Why extract text instead of comparing images? Because most of the time you want to know what content changed, not how many pixels differ. Which clause moved, which number in a quote changed, which example sentence a handout swapped — those are text-level questions. Extracting to text makes them clear, and lets you copy and search the result. The example above is a real use: drop two TOEIC study-note PDFs in and immediately see how the “parts of speech” set differs from the “non-white-collar core phrases” set in actual content.

Combined with the existing “Review clipboard…”, you can copy a snippet and diff it against a PDF’s extracted text without saving a file first. (The same pipeline handles Word too: .doc/.docx get text + a rendered PDF, and you can even diff a docx against a pdf.)

Two small dev-note trade-offs

Markup is two layers: vectors stay editable, retouch is baked. Arrows, text, and boxes are SVG objects, so you can reselect, move, and cleanly undo them — but clone stamp, blur, and pixelate are inherently pixel operations, painted onto the raster canvas beneath. One easy-to-miss detail: blur is rendered with padding, because otherwise the selection’s edge would leak the original sharp pixels underneath — for a redaction tool that’s a giveaway. The magic wand also caches a full-image RGBA buffer, or every click would re-rasterize hundreds of MB.

PDF compare stands on macOS PDFKit and defaults to text. There’s no bundled third-party PDF engine — extracting text, counting pages, and rendering pages all call the system’s PDFKit (which is why it’s macOS-only, and also why it’s sandbox-clean and App Store-shippable). And “compare PDFs” defaults to extracted text rather than pixel-diffing two rendered pages, because the latter is nearly useless for “what content changed”: a different font or one kerning tweak paints everything red. Extract text, keep page numbers, run a Monaco diff — that maps to the real question. Switch to Visual when you genuinely need layout. Defaulting to the most common need was the plan from the start.

Both features share one spirit: cut the number of times you jump out for one small thing. Lode has always aimed to be a native, buy-once macOS file workbench — view, compare, search, Git — and now “mark up a screenshot on the way past” and “compare a PDF on the way past” too.

Learn about Lode · Free download