The project's README from github.com/angelbot-ai/TeamSync-PDF-Viewer. As one markdown file: README.md.

No paywalls. No vendor lock-in. No server dependencies.
Try the Interactive Live Demo or integrate the high-performance PDF Viewer SDK directly into your React applications.
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.
WebViewer({...}) API interface that makes integrating into your web applications effortless.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
If installing from GitHub Packages registry:
.npmrc file:@angelbot-ai:registry=https://npm.pkg.github.com
npm install teamsync-pdf-viewer
Explore detailed SDK guides, parameter options, code snippets, and architecture deep dives:
WebViewerOptions & SDKPermissions.Everything you need to build collaborative, secure document workflows.
brush), highlighters, geometric shapes (rectangles, ellipses), arrows, and lines.#page=N) or external web URL links directly on document selections.textLayer and PDF content streams, preventing copy/paste extraction and search indexing.devicePixelRatio scaling eliminates blurred text. Micro-debounced rendering enables buttery-smooth 60 FPS trackpad pinching and 360° mouse drag panning.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);
});
});
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>
);
}
git clone https://github.com/angelbot-ai/TeamSync-PDF-Viewer.git
cd TeamSync-PDF-Viewer
npm install
npm run dev
Open http://localhost:5173 in your browser to launch the live SDK viewer.
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'));
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
Distributed under the CPAL 1.0 (Common Public Attribution License).
100% Free and Open Source for personal and commercial usage.