TeamSync PDF Viewer SDK
🚀 Why TeamSync PDF Viewer?
Traditional commercial PDF viewers force developers into expensive per-domain licenses, opaque sales calls, and heavy server-side processing dependencies. TeamSync PDF Viewer is built from the ground up to solve these pain points.
- 💰 Zero-Cost, Transparent Licensing: Uncapped usage, no per-server fees, and no commercial paywalls. 100% free and open-source under CPAL 1.0.
- ⚡ 100% Client-Side WebAssembly: Documents never leave the browser sandbox. Process, redact, and render PDFs entirely on the client.
- 🔌 Universal WebViewer API: Clean, intuitive
WebViewer({...}) API interface that makes integrating into your web applications effortless.
- 🎨 Headless & Customizable: Built for modern React 19 SPA lifecycles. No bloated iFrames to fight—customize toolbars, sidebars, context menus, and controls natively.
📦 Installation via NPM
Install the package into your React / TypeScript project:
# Using npm
npm install teamsync-pdf-viewer
# Using yarn
yarn add teamsync-pdf-viewer
# Using pnpm
pnpm add teamsync-pdf-viewer
Installing from GitHub Packages (Alternative)
If installing from GitHub Packages registry:
- Create or update your
.npmrc file:@angelbot-ai:registry=https://npm.pkg.github.com
- Install via npm:
npm install teamsync-pdf-viewer
📖 Official Documentation & Wiki
Explore detailed SDK guides, parameter options, code snippets, and architecture deep dives:
✨ Uncompromised Feature Set
Everything you need to build collaborative, secure document workflows.
🎨 Smart Markup & Annotations
- Full Drawing Toolkit: Freehand ink (
brush), highlighters, geometric shapes (rectangles, ellipses), arrows, and lines.
- Notes & Callouts: Sticky notes, callout text boxes with directional arrows, and text annotations.
- Interactive Hyperlinks: Create internal page-jump links (
#page=N) or external web URL links directly on document selections.
🛡️ Secure Redaction
- Binary-Level Data Obliteration: We don't just place black boxes over text—redactions are permanently rasterized and burned into the underlying PDF vector structure.
- Text Layer Sanitization: Redacted text is automatically stripped from the DOM
textLayer and PDF content streams, preventing copy/paste extraction and search indexing.
- Automatic Regex Redactions: Programmatically locate and redact sensitive PII in a single click.
- Discard Unapplied Redactions: Easily discard individual pending redactions or bulk-discard all unapplied redaction marks before committing.
📐 Dynamic Layout & Viewport Controls
- Fit to Width & Fit to Page: Container-aware dynamic scaling calculations for responsive reading on any screen size.
- Synchronized Page Rotation: 360° page rotation with real-time vector coordinate transforms so annotations rotate seamlessly with document content.
🔍 High-DPI Canvas Rendering & Search
- Retina 60 FPS Zoom & Pan: High-DPI
devicePixelRatio scaling eliminates blurred text. Micro-debounced rendering enables buttery-smooth 60 FPS trackpad pinching and 360° mouse drag panning.
- Contextual Document Search: Instant client-side text search with real-time match highlighting, result jumping, and match counting.
💧 Dynamic Forensic Watermarking
- Programmatic, non-destructive watermarks rendered on the fly (single centered or full-page tiled) with customizable text, color, opacity, font size, and rotation.
💻 Developer SDK Usage
Standard WebViewer Initialization
Drop the SDK into any container element with a single function call:
import { WebViewer } from 'teamsync-pdf-viewer';
import 'teamsync-pdf-viewer/style.css';
WebViewer({
initialDoc: '/sample.pdf',
initialScale: 1.0, // 100% natural size
enableAnnotations: true,
permissions: {
canRedact: true,
canAddAnnotations: true
},
watermark: {
text: 'CONFIDENTIAL',
mode: 'single',
size: 48,
opacity: 0.1,
color: '#dc2626'
}
}, document.getElementById('viewer-container')).then((instance) => {
console.log('TeamSync PDF Viewer is ready!', instance);
// Programmatic Viewport Controls
instance.UI.fitWidth();
instance.UI.fitPage();
// Export annotated PDF buffer
instance.Core.documentViewer.getDocument().getFileData().then((pdfBytes) => {
console.log('Exported PDF byte length:', pdfBytes.length);
});
});
Native React Component Usage
For native React integration, use the <DocumentViewer /> component:
import { DocumentViewer } from 'teamsync-pdf-viewer';
import 'teamsync-pdf-viewer/style.css';
function App() {
return (
<div style={{ width: '100vw', height: '100vh' }}>
<DocumentViewer
initialDoc="/contract.pdf"
scale={1.0}
enableAnnotations={true}
permissions={{ canRedact: true, canAddAnnotations: true }}
/>
</div>
);
}
🛠️ Local Development Quick Start
1. Clone & Install
git clone https://github.com/angelbot-ai/TeamSync-PDF-Viewer.git
cd TeamSync-PDF-Viewer
npm install
2. Launch Dev Server
npm run dev
Open http://localhost:5173 in your browser to launch the live SDK viewer.
🔌 Extensible Plugin Architecture
TeamSync PDF Viewer features a decoupled Plugin Architecture. Core PDF rendering, smart annotations, redaction engines, and search remain lightweight and modular in the main engine, while enterprise extensions plug in as independent modules.
┌─────────────────────────────────────────────────────────┐
│ TeamSync PDF Viewer Core │
│ (Page Rendering, Annotations, Redactions, Search) │
└───────────────────────────┬─────────────────────────────┘
│ Plugins Registry API
┌───────────────────────────▼─────────────────────────────┐
│ Custom Extension │
│ (Custom Modals, Action Buttons, Export Hooks) │
└─────────────────────────────────────────────────────────┘
import { WebViewer } from 'teamsync-pdf-viewer';
import { myCustomPlugin } from './myCustomPlugin';
WebViewer({
initialDoc: '/sample.pdf',
plugins: [
myCustomPlugin({ enableFeature: true })
]
}, document.getElementById('viewer-container'));
🏛️ Architecture & Tech Stack
- Core Engine: HTML5, TypeScript, WebAssembly (PDF.js + pdf-lib)
- UI & State: React 19, Lucide Icons, Pure CSS Modules
- Build System: Vite 8 & Oxlint (Sub-500ms tree-shakable builds)
TeamSync-PDF-Viewer/
├── src/
│ ├── components/ # Native React UI (Header, DocumentViewer, Sidebars, Modals)
│ ├── hooks/ # Search & Keyboard shortcut hooks
│ ├── utils/ # Redaction algorithms, rotation transforms & vector helpers
│ ├── plugins/ # Plugin API interfaces & registry
│ ├── index.ts # Main SDK package exports
│ ├── main.tsx # WebViewer SDK entry point & public API bridge
│ └── App.tsx # Demo Application Shell
├── public/ # Static PDF assets & PDF.js workers
└── docs/images/ # High-res UI documentation screenshots
📄 License
Distributed under the CPAL 1.0 (Common Public Attribution License).
100% Free and Open Source for personal and commercial usage.
TeamSync PDF Viewer Engine • Engineered with ❤️ for the Open Web.
TeamSync PDF Viewer 是一个开源、100% 客户端的 React 应用 PDF 查看器 SDK，具备批注、安全脱敏、取证水印和搜索功能，基于 WebAssembly（PDF.js + pdf-lib）构建。