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

🛠️ 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. Here is everything it can do:

• Click an annotation to select it. A blue dashed ring appears around it.
• Drag the selected annotation to move it to a new position on the page.
• Resize — when an annotation is selected, small white square handles appear at each corner (or at the endpoints for arrows). Grab and drag any handle to resize.
• Delete — with an annotation selected, press Delete or Backspace to remove it.
• Undo move/resize — press ⌘Z (Mac) or Ctrl+Z (Windows) to undo the last move or resize operation.

Draw (Pen) Tool — In Detail

The pen tool creates pressure-sensitive variable-width strokes. On a regular mouse the width varies slightly based on speed; on a stylus or Apple Pencil the full pressure data from the device is used to create natural-looking ink.

• Strokes are stored as filled SVG polygons, not simple lines, giving them a smooth ink-like appearance.
• Use the Stroke width slider to control the base thickness (1–18 px).
• Use the Opacity slider to create semi-transparent strokes for underlining or subtle marks.

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 it. Press Escape to cancel without adding text.

• Use the Text size slider (12–48 px) to control the font size.
• Text annotations have a white outline/stroke so they remain readable over dark backgrounds.
• After committing, use the Select tool to reposition or resize the text label.

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 Controls

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 because coordinates are stored in the document's native coordinate space.

🎨 Colors, Stroke & Style

Color Picker

The sidebar shows a palette of 9 preset colors (black, red, orange, yellow, green, cyan, blue, purple, pink). Click any swatch to activate it. The active color is shown with an outline ring and slight scale-up.

Below the swatches is a custom color input — click it to open the native browser color picker and choose any color you like.

Stroke Width

Controls the base thickness for pen strokes, shape outlines, and arrow lines. Range: 1–18 px. Pen strokes are additionally modulated by stylus pressure on top of this base width.

Text Size

Controls the font size of text annotations. Range: 12–48 px.

Opacity

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

↩️ 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

1. All annotations for each page are serialized to a high-resolution SVG string.
2. The SVG is rasterized onto a 2× resolution offscreen canvas (for sharpness on retina displays).
3. The resulting PNG image is embedded over each page of the original PDF using the pdf-lib library.
4. 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 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 (only available when a PDF is loaded).
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 presentation mode.

⚙️ 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