PDF Annotator — User Guide

🚀 Getting Started

PDF Annotator is a free, browser-based tool that lets you draw, highlight, and annotate any PDF or image file. Everything runs locally in your browser — your documents are never uploaded to any server.

Step 1 — Open the App

Navigate to the app in any modern browser (Chrome, Safari, Firefox, Edge). No installation or account is required.

Step 2 — Load a File

You can open a file in two ways:

• Drag and drop a PDF or image file onto the large drop zone in the middle of the screen.
• Click the Upload File button in the top-right and choose a file from your computer.

Supported formats: PDF, PNG, JPG/JPEG, WEBP, GIF, BMP.

🖥️ Interface Overview

The interface has three main areas:

• Top Bar — File upload, zoom controls, export (with ⚡ Vector / 🖼 Raster mode badge), presentation mode, and settings gear icon.
• Left Sidebar — All annotation tools, color picker, stroke/text/opacity sliders, auto-delete timer, undo/redo, and clear-all.
• Document Stage — Your PDF or image pages displayed vertically, ready to annotate. Each page card shows a Page N badge (top-left) and, when it has annotations, an indigo annotation count badge (top-right) so you can see at a glance which pages have work on them.

🛠️ All Tools Explained

Select any tool from the left sidebar or use its keyboard shortcut. The active tool is shown with a dark background.

Select Tool — In Detail

The Select tool (S) is the most powerful tool in the app:

• Click an annotation to select it (blue dashed ring).
• Drag the selected annotation to move it.
• Resize — corner handles (or arrow endpoints) appear on selection. Drag any to resize.
• Delete — press Delete or Backspace to remove the selected annotation(s).
• Undo move/resize — ⌘Z / Ctrl+Z.

Multi-Select

• Shift+click any annotation to add it to the selection. Click again to deselect it.
• Drag on empty space to draw a selection rectangle — all annotations fully inside will be selected when you release.
• With multiple annotations selected, drag any one of them to move the entire group.
• Delete removes all selected annotations at once. Each is individually undoable.
• Resize handles only appear when exactly one annotation is selected.

Draw (Pen) — Brush Types

The pen tool creates pressure-sensitive variable-width strokes. When the pen is active, a Brush Type panel appears in the sidebar with 5 styles:

• Pen — smooth ink-like filled polygon, responds to stylus pressure. Key: 1
• Marker — flat chisel-tip line at 88% opacity. Key: 2
• Spray — soft airbrushed stroke with Gaussian blur. Key: 3
• Chalk — rough textured stroke with fractal noise displacement. Key: 4
• Pencil — fine hairline with subtle grain. Key: 5

Press keys 1–5 to switch brush type without touching the sidebar. Strokes are stored as filled SVG polygons for the sharpest export quality.

Highlight Tool — In Detail

Drag to draw a semi-transparent filled rectangle. The actual drawn opacity is always your chosen opacity × 35%, so a fully-opaque yellow highlight renders at 35% opacity — mimicking a real highlighter pen.

Arrow Tool — In Detail

After selecting the Arrow tool, a sub-panel appears in the sidebar letting you choose the arrow style:

• Single-sided (End) — arrowhead only at the end point (default)
• Single-sided (Start) — arrowhead only at the start point
• Double-sided — arrowheads at both ends
• Plain Line — no arrowheads, just a line

Drag from start to end to place the arrow. You can resize arrow endpoints with the Select tool later.

Text Tool — In Detail

Click anywhere on the document to place a text input box.

• Type your note and press Enter (or click outside) to commit.
• Press Shift+Enter to insert a newline — the text box grows automatically.
• Press Escape to cancel without placing anything.
• Use the Text size slider (12–48 px) to set the font size before placing.
• Text has a white outline so it stays readable over dark backgrounds.
• After committing, switch to Select to reposition or resize the text block.

Laser Pointer — In Detail

The Laser tool (L) shows a pulsing red dot wherever your cursor is. It is designed for live presentations:

• Nothing is ever saved — no annotation is created.
• The dot fades automatically 600 ms after you lift the pointer, or 1.2 s after stopping movement.
• Works on touch screens — tap and drag to use as a live pointer.

Eraser Tool — In Detail

The eraser uses hit-testing — drag your pointer over the page and any annotation your cursor passes through is removed. The eraser is smart enough to detect:

• Pen strokes — by checking if the cursor is within 14 px of any stroke segment
• Shapes and highlights — by checking bounding box overlap
• Arrows — by checking distance to the line segment
• Text labels — by checking bounding box of the text

🔍 Zoom & Pinch-to-Zoom

Use the zoom buttons in the top bar to adjust how large the document appears:

• − (Zoom Out) — reduce by 15%
• Percentage display — shows current zoom level (e.g., 115%)
• + (Zoom In) — increase by 15%
• Fit — automatically scales the document to fit the visible stage width

Zoom range: 55% to 250%. Annotations always stay correctly aligned at any zoom level.

Touch & Trackpad Zoom

• Two-finger pinch on iPad, Android, or any touch screen zooms the document in real time.
• Ctrl/Cmd + scroll wheel (or macOS trackpad pinch) also zooms on desktop.

🎨 Colors, Stroke Style & Shape Fill

Color Picker

The sidebar shows a palette of 9 preset colors. Click any swatch to activate it. Below the swatches is a custom color input — click it to open the native browser color picker.

Stroke Width

Controls the base thickness for pen strokes, shape outlines, and arrow lines. Range: 1–18 px.

Stroke Style (Dashed / Dotted)

When the Rectangle, Circle, or Arrow tool is active, a Stroke Style panel appears in the sidebar:

• — Solid (default) — continuous line
• - - Dashed — evenly spaced dashes, scales with stroke width
• ··· Dotted — tight round dots, scales with stroke width

The dash style is saved with the annotation and reproduced faithfully in the exported PDF.

Shape Fill

When Rectangle or Circle is active, a toggle switches between Outline only and Filled. Filled shapes use the current color as the fill color.

Text Size

Controls the font size of text annotations. Range: 12–48 px. Only visible when the Text tool is active.

Opacity

Controls transparency for all annotation types. Range: 10%–100%. For highlights, this value is multiplied by 0.35 to produce a natural highlight effect.

📋 Copy & Paste

Duplicate any annotation instantly:

1. Switch to the Select tool (S) and click the annotation you want to copy.
2. Press ⌘C (Mac) or Ctrl+C (Windows) to copy it to the in-memory clipboard.
3. Press ⌘V / Ctrl+V to paste — a clone appears at +12 px offset and is automatically selected.
4. Drag the pasted clone into position.

↩️ Undo & Redo

PDF Annotator maintains a full history of all your drawing actions:

• Undo — removes the last annotation added, or reverses the last move/resize
• Redo — re-applies an undone action
• History is per session — it is not stored in local storage (refreshing the page clears it)

Use the sidebar Undo / Redo buttons, or the keyboard shortcuts below.

⏱️ Auto-Delete

The Auto-Delete feature is perfect for live presentations — annotations draw attention to content and then disappear automatically so the slide stays clean.

To enable:

1. Check the Auto-delete checkbox in the sidebar panel.
2. Drag the timer slider to set the delay (1–10 seconds).

Once enabled, every new annotation you draw starts a countdown. When the timer expires the annotation fades away. Auto-delete affects only new annotations — existing annotations are unaffected.

📄 Exporting Your Work

Click the Export button in the top bar to download a flattened copy of your annotated document as a PDF file.

What happens during export

The export pipeline differs depending on your source file:

PDF source — fully vector ✨

1. The original PDF is loaded unchanged — existing page content and text are preserved.
2. Each annotation is drawn directly onto the PDF page using native pdf-lib vector primitives: pen strokes via drawSvgPath, shapes via drawRectangle / drawEllipse, arrows via drawLine, and text via drawText.
3. The result is a true vector PDF — shapes stay crisp at any zoom level, text is searchable, and the file stays small.
4. The final PDF is downloaded as annotated-yourfilename.pdf.

Image source — raster overlay

1. A new PDF page is created with your image as the background.
2. All annotations are rasterized to a 2× resolution PNG and embedded as an overlay on top.
3. The final PDF is downloaded as annotated-yourfilename.pdf.

Exporting an Image

When the loaded file is an image (PNG, JPG, etc.), the export creates a brand-new PDF with your image as the background and the annotations overlaid on top.

📽️ Presentation Mode

Presentation mode turns your annotated PDF or image into a full-screen slideshow — great for presenting notes, marked-up slides, or reviewed documents.

How to use

1. Click Present in the top bar (available for both PDFs and images).
2. The interface switches to a full dark overlay showing one page at a time.
3. Use the left/right arrow buttons to navigate between pages.
4. The page counter at the top shows your current position (e.g., "3 / 12").
5. Press Esc or click the ✕ button to exit.

✏️ Live Draw Mode

Click the Live Draw button in the presentation top bar to enable ephemeral on-screen drawing:

• Draw freely on the current slide — strokes appear in real time.
• Nothing is saved — strokes are completely ephemeral and never written to the annotation store.
• Strokes clear automatically when you navigate to the next or previous page.
• An inline colour picker, width slider, and 🗑️ Clear button appear when Live Draw is active.
• Turn Live Draw off to return to read-only presentation browsing.

⚙️ Settings

Click the gear icon ⚙️ in the top-right of the top bar to open the settings panel. Changes take effect immediately but are only saved to your browser when you click Save preferences.

Display

• Show page numbers — toggles the "Page N" badge visible on each page card in the document stage.

Storage

• Remember annotations locally — when checked (default), your annotations are saved in the browser's localStorage and restored automatically the next time you open the same file. When unchecked, drawings are only kept for the current session.

Defaults on Startup

Set the initial values that will be active when the app first loads:

• Default tool (pen, select, highlight, etc.)
• Default color
• Default stroke width
• Default text size
• Default opacity

Reset Defaults

Reverts all settings fields to their factory values without saving — useful for previewing the defaults before committing.

Clear All Browser Data

Deletes everything stored by the app in your browser: all saved annotations for all files, and all saved preferences. You will be prompted to confirm before any data is deleted.

⌨️ Keyboard Shortcuts

💡 Tips & Tricks

• Apple Pencil / Stylus — PDF Annotator reads real pressure data from stylus input on iPad and Android tablets via the PointerEvent API. Use varying pressure to create natural-looking ink strokes.
• Annotating images — drag any PNG, JPG, WEBP, GIF, or BMP file into the app. Annotate it exactly as you would a PDF, then export as a flattened annotated PDF.
• Multiple pages — each PDF page is independent. Annotations on page 2 do not affect page 1. When exporting, all pages with annotations are processed.
• Fine-tuning with Select — after drawing, switch to the Select tool to fine-tune the position and size of any annotation without redrawing it.
• Transparency stack — lower the opacity slider to stack multiple semi-transparent highlights for a gradient effect.
• Live presentation tip — enable Auto-Delete at 3–5 seconds, switch to pen mode, and draw circles or arrows to highlight content. They disappear automatically after a few seconds.
• Saving work — annotations are saved automatically as you draw. To transfer to another browser or device, use the Export button to create a flattened PDF.
• Keyboard-first workflow — tap P to draw, S to select/move, E to erase, ⌘Z to undo — all without touching the sidebar.

❓ Frequently Asked Questions