𝗛𝗼𝘄 𝘁𝗼 𝗕𝘂𝗶𝗹𝗱 𝗮 𝗕𝗿𝗼𝘄𝘀𝗲𝗿 𝗗𝗼𝗰𝘂𝗺𝗲𝗻𝘁 𝗔𝗻𝗻𝗼𝘁𝗮𝘁𝗶𝗼𝗻 𝗦𝘁𝘂𝗱𝗶𝗼
Teams working with contracts, invoices, or evidence need more than a simple viewer. They need a way to assemble pages from different sources without uploading sensitive files to a server.
You can build a client-side document annotation studio using TypeScript, Vite, and Dynamsoft tools.
This app allows you to:
- Open PDFs and images.
- Append new files to an existing document instead of replacing it.
- Capture pages directly from a scanner.
- Add movable redaction marks and approval stamps.
- Delete unwanted pages.
- Export finished documents as PDF, PNG, JPEG, or TIFF.
Technical Stack:
- Node.js 18+
- Dynamsoft Document Viewer (DDV) v4
- Dynamic Web TWAIN (DWT)
- Vite and TypeScript
Key Logic:
Instead of replacing the current file, use doc.loadSource(source, index) to append pages. This lets you create a single document from multiple different images and PDFs.
For scanners, use the Dynamic Web TWAIN bridge. Since browsers lack a standard scanner API, DWT provides the connection to the hardware. You can convert scanned images into a PDF blob and add them to your viewer instantly.
For security, use redaction annotations. You can create a black rectangle over sensitive text. Users can move or resize this mark before applying it permanently to the document.
Exporting is flexible. You can choose different PDF modes:
- Annotation mode: Keeps marks editable.
- Flatten mode: Burns marks into the page.
- Image mode: Converts pages into images.
This approach keeps all processing on the client side. Your data stays private and secure.