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…

245 ·GitHub
TeamSync-PDF-Viewer
Что это?TeamSync PDF Viewer — опенсорсный SDK для просмотра PDF в React-приложениях, полностью клиентский (100% на стороне браузера), с аннотациями, защищённым редактированием (redaction), форензик-водяными знаками и поиском; построен на WebAssembly (PDF.js + pdf-lib).
Это отдельное приложение или то, что встраивается в мой проект?Это headless SDK или компонент, встраиваемый в React/TypeScript-приложение через вызов API WebViewer({...}) или нативный React-компонент, — а не отдельная программа для чтения PDF.
Как добавить его в свой React-проект?Установите пакет из npm в свой React/TypeScript-проект (или из GitHub Packages через файл .npmrc), затем инициализируйте его вызовом WebViewer({...}) или вставьте нативный React-компонент.
Нужен ли ему бэкенд-сервер или API-ключи?Нет — он работает целиком на клиенте, используя WebAssembly (PDF.js + pdf-lib) внутри песочницы браузера, без зависимости от серверной обработки.
Работает ли он с любой конфигурацией React?Он создан специально под современные SPA-жизненные циклы React 19 и сознательно не использует iframe ради полного контроля над стилями, поэтому старые версии React или вставки на основе iframe могут не подойти напрямую.
Куда попадают мои PDF-документы при использовании?Документы обрабатываются целиком в браузере через WebAssembly и никогда не покидают песочницу браузера — этапа загрузки на сервер нет.
Лицензия такая же разрешительная, как MIT?Используется CPAL 1.0 (Common Public Attribution License), а не обычная MIT/Apache, но она бесплатна и для личного, и для коммерческого использования без платы за каждый домен.
Какие инструменты аннотирования есть из коробки?Рисование от руки (перо/кисть), маркеры, геометрические фигуры, стрелки и линии, стикеры, выносные текстовые блоки, а также кликабельные внутренние переходы на страницы и внешние гиперссылки.
Насколько надёжно работает редактирование (redaction)?Вырезанные фрагменты навсегда растрируются в векторной структуре PDF, а удалённый текст изымается из текстового слоя DOM и потоков содержимого, так что его нельзя скопировать или найти поиском; также поддерживается автоматическое удаление персональных данных (PII) по регулярным выражениям.
Умеет ли он ставить водяные знаки?Да, поддерживаются динамические форензик-водяные знаки, отрисовываемые на лету одной меткой по центру или плиткой на всю страницу, с настраиваемым текстом, цветом, прозрачностью, размером и поворотом.
Можно ли расширять его своими функциями?Да, у него развязанная плагинная архитектура — ядро рендеринга, аннотаций, redaction и поиска остаётся лёгким, а корпоративные расширения подключаются как независимые модули.
What are similar projects?pdfcraft, bentopdf, pdfcraft, PDFPatcher, react-pdf, Stirling-PDF, pdfcn, nativePDF-structurer
Which topics is it in?pdf-processing, watermark, pdf-editor, pdf-tools, pdf-viewer, annotation, webassembly, npm-package, privacy-first, document-processing, search, plugin-system
Creator
angelbot-ai
Size
6.8 MB
Stars
245
Updated
CommitOct 04Releasev2.1.0Sep 27
Age
2mo
Commits · 90 Days