TeamSync-PDF-Viewer README

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

TeamSync PDF Viewer SDK

TeamSync PDF Viewer UI

100% Open Source. 100% Client-Side. Enterprise SDK.

License: CPAL-1.0 Live Demo NPM Version React 19 Vite 8 TypeScript

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.


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


📦 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:

  1. Create or update your .npmrc file:
    @angelbot-ai:registry=https://npm.pkg.github.com
    
  2. 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

🛡️ Secure Redaction

📐 Dynamic Layout & Viewport Controls

💧 Dynamic Forensic Watermarking


💻 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

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.


AngelBot AI • TeamSync • https://www.teamsync.com
TeamSync PDF Viewer Engine • Engineered with ❤️ for the Open Web.

TeamSync-PDF-Viewer (angelbot-ai/TeamSync-PDF-Viewer)

Searching Database…

What is this?TeamSync PDF Viewer is an open-source, 100% client-side PDF viewer SDK for React apps, featuring annotations, secure redaction, forensic watermarking, and search, built on WebAssembly (PDF.js + pdf-lib).
Is this a standalone app or something I embed in my own project?It is a headless SDK/component you embed into a React/TypeScript app, either through a WebViewer({...}) API call or a native React component — not a standalone PDF reader app.
How do I add it to my React project?Install the package from npm into your React/TypeScript project (or from GitHub Packages via an .npmrc file), then initialize it with the WebViewer({...}) call or drop in the native React component.
Does this need a backend server or API keys?No — it runs entirely client-side using WebAssembly (PDF.js + pdf-lib) inside the browser sandbox, with no server-side processing dependency.
Does it work with any React setup?It is built specifically for modern React 19 SPA lifecycles and intentionally avoids iframes for full styling control, so older React versions or iframe-based embeds may not be a direct fit.
Where do my PDF documents go when I use this?Documents are processed entirely in the browser via WebAssembly and never leave the browser sandbox — there is no server upload step.
Is the license as permissive as MIT?It uses CPAL 1.0 (Common Public Attribution License), not a plain MIT/Apache license, but it's free for both personal and commercial use with no per-domain fees.
What annotation tools come out of the box?Freehand ink/brush drawing, highlighters, geometric shapes, arrows and lines, sticky notes, callout text boxes, and clickable internal page-jump or external hyperlinks.
How thorough is the redaction?Redactions are permanently rasterized into the PDF's vector structure and the redacted text is stripped from the DOM text layer and content streams so it can't be copy-pasted or searched; it also supports automatic regex-based PII redaction.
Can it watermark documents?Yes, it supports dynamic forensic watermarking rendered on the fly as a single centered mark or full-page tile, with customizable text, color, opacity, size and rotation.
Can I extend it with custom features?Yes, it has a decoupled plugin architecture — the core rendering, annotation, redaction, and search engine stay lightweight while enterprise extensions plug in as independent modules.
Size
6.8 MB
Stars
245
Age
2mo
Commits · 90 Days