PDF Annotator Online — Draw, Highlight and Add Notes

You need to write a remark in a contract's margin, circle a clause, highlight a paragraph or type data into a form. The "Annotate" tool in pdfredX lets you draw and write right over the PDF page in the browser: text, shapes, arrows, pen, highlighter — everything goes onto the sheet and is baked into the finished file. Nothing is uploaded to a server.

Step 01. Open the page in the editor

Load a PDF on pdfredx.com and open the page you need in the editor (FAB) — for example, with the ✏️ button on the card. The page is rendered in the tab through PDF.js, and the markup lies over it. Nothing goes to a server.

Step 02. Choose an annotation tool

The editor panel has a full set for annotations:

• ✏️ Text — click and type: this is how you add text to a PDF, label fields, write data into a form. Color and size are adjustable.
• 🖊️ Pen — free-hand drawing; line thickness can be changed. This is the way to "draw on a PDF" like on paper.
• 🖍️ Highlighter — a yellow semi-transparent highlight of important lines.
• Shapes — rectangle, circle, ellipse, triangle (fill or outline).
• Lines — a straight line and a polyline (arrows, pointers).

Made a mistake — Ctrl+Z undoes the last action; ESC or a right-click cancels the current drawing without turning the tool off.

Step 03. Save the PDF with notes

Press "Save" — all the marks are baked into the page at full resolution, and the result shows in the gallery. Then "Create PDF" assembles the file: you get a PDF with the added text and notes. The download goes straight from the browser. Free, no registration, no server queue.

How it works under the hood

The markup is drawn through Fabric.js over the page image. Each tool creates an object on the canvas (text is a fabric.IText, the pen a free path, shapes are fabric.Rect/Circle, and so on). On save, saveFab exports the canvas with the objects into the page image at native resolution and updates the editUrl. The original (origUrl) is not changed — edits go only into editUrl, so the editor can be reopened and continued.

Known limitations

Annotations are baked into the page. In the finished PDF the marks are part of the sheet image, not a separate editable layer: they can't be moved or deleted as objects in another viewer. Until you press "Save," everything stays editable in the FAB.

Form filling is visual. Text is typed over a field as an annotation; these are not interactive PDF AcroForm fields but overlaid text (for printing and sending a scan — exactly what's needed).

The result is raster. The document's own text can't be selected in the exported file — the page becomes an image with your marks.

Need to hide data irreversibly rather than mark it? That is the Redact Text tool. And to place a mark on all pages at once — Watermark.

Try it right now — pdfredx.com, no registration, your files stay with you.

Marking up a contract before sending it, leaving comments on a mockup, writing remarks into a report — this is routine collaborative work with documents. But an ordinary online PDF editor for drawing and comments asks you to first upload the document to its server. That is, a contract with terms and data travels to someone else's machine just for a couple of marks. Let's look at how to annotate a PDF online without handing the file over anywhere.

Where the document goes on server-side editors

When you open a PDF in a typical online markup editor, the file travels in full to a remote machine. From there it follows the service's policy, which few people ever read:

• the document is stored in a contractor's temporary storage (AWS, GCP, Azure);
• it is processed on someone else's server;
• it is kept from a few hours to several days "for reliability";
• it is logged together with metadata — IP, time, file name and size.

For collaborative review this is especially galling: you're only placing comments and arrows — a purely visual operation — yet the price is full access to the contract's contents by an outside service.

Local annotation: the document never leaves the tab

pdfredX is a PDF editor for drawing and comments that doesn't upload the file anywhere. That is a consequence of the architecture, and you can verify it.

The file is read locally. PDF.js opens the document in the tab and draws the page to a Canvas. There is no network request carrying your file.

Markup happens in the tab's memory. Text, pen, highlighter, shapes, arrows — all of these are objects over the page, operations on data that is already loaded. Nothing is sent anywhere.

The finished file is built on the client. The annotated PDF is formed right in the tab and lands in "Downloads," rather than flying to a server and back.

It works offline. Load the contract, turn off the internet and mark it up — everything keeps working. The network is only needed to load the app once.

In practice: open the page, choose text/pen/highlighter, insert a comment or circle a clause and save. The document stays with you the whole time — convenient both for sensitive contracts and for internal mockup review.

What we cannot guarantee — an honest disclaimer

Client-side processing protects a document from being sent to external servers, but it is not a shield against every threat, and promising otherwise would be dishonest.

Malware or a keylogger on the device. If the machine is compromised, a program can read files off the disk bypassing the browser entirely.

Browser extensions with broad permissions. An extension with "read data on all sites" access can, in theory, see the tab's contents. For sensitive documents, work in a profile without third-party extensions or in a private window.

The saved file stays on your disk. If the device is not protected by encryption, files can be read by third parties with physical access.

We provide isolation at the level of the browser tab. The rest is on the user's side.

Mark up and comment on a PDF without uploading it to a server — pdfredx.com, free, no registration.

There are two fundamentally different ways to annotate a PDF. The native path is to add objects into the PDF structure as a separate annotation layer (the Annotations spec: underlines, notes and shapes stay vector and editable in any viewer). The raster path is to draw the markup on Canvas over the page image and "imprint" it. pdfredX takes the second path. Let's break down how the annot tool is built: why a Fabric.js drawing layer instead of native annotations, how the tools work, and why everything is baked into the page.

The architectural choice: native annotations vs. a Canvas layer

Native PDF annotations. Written into the file structure as separate objects (/Annots): text, highlights and shapes stay vector and editable — they can be moved and deleted in a third-party viewer. The plus is flexibility; the minus for a browser with no backend is that it needs a full PDF parser/writer, and annotation behavior varies between viewers.

A Canvas layer (the pdfredX path). The tool is built into the FAB editor, where the page is already rendered by PDF.js into an image. The markup is drawn with the same Canvas 2D through Fabric.js over the page and fuses with it into a single raster. The price is that annotations lose their "editability" in other viewers; the gain is a predictable look for everyone (marks appear the same everywhere and can't be accidentally moved) and full privacy (everything in the tab).

The implementation, piece by piece

Tools as Fabric objects

Each markup tool creates an object on the canvas:

• Text → fabric.IText (an editable block, color/size/selection);
• Pen → a free path (freeDrawingBrush, thickness fabPenWidth);
• Highlighter → a semi-transparent yellow stroke (opacity ~0.38);
• Shapes → fabric.Rect / Circle / Ellipse / Triangle (fill or outline by fabFillMode);
• Lines → a straight line (fabric.Line, Shift = snap to angles) and a polyline (points by clicks).

Switching the tool (setFabTool) sets the cursor and drawing mode; every destructive action goes through fabPushUndo() — a stack depth of 30, undo by Ctrl+Z.

Cancel without leaving the tool

ESC and a right-click cancel the current action but do not turn the tool off — you can immediately draw again in the right spot. This is deliberate (frequent editing): the canvas is created with fireRightClick:true + stopContextMenu:true, and a right-click sends mouse:down with button===2 → fabCancelCurrentActionOnly().

Baking into the page

On save, saveFab first removes the service selection objects (lasso dashes/overlays), then exports the canvas into an image with a native-resolution multiplier:

fabRemoveSelectionHelpers();               // remove temporary dashes/overlays
const multiplier = fabNativeW / fabCanvas.getWidth();
const dataUrl = fabCanvas.toDataURL({ format:'jpeg', quality:0.92, multiplier });
items[fabItemId].editUrl = dataUrl;         // edits go into editUrl only

The annotations fuse with the page at full resolution, so lines and text don't blur. Additionally, the objects are saved into fabJson — on reopening the editor they "come alive" through enlivenObjects, so the markup can be re-edited (until Cropper is applied, which resets fabJson).

Trade-offs and the limits of the approach

Annotations are not native. In the finished PDF they are part of the page raster, not an editable /Annots layer; they can't be moved in another viewer.

Form filling is an overlay. Text lies over a field rather than in an interactive AcroForm field; for printing and sending a scan that's enough.

A raster result. The document's own text can't be selected after export.

What's next

Export to a native annotation layer for purely digital PDFs — an optional branch, so marks stay editable in a third-party viewer when the source allows it.

Sticky notes — collapsible comments with author and time for collaborative review.

Want to test it — open a page in the editor on pdfredx.com, draw with the pen and text, save. No registration, no file upload to a server.