Skip to content

pakcli/offline-pdf-editor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

17 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐Ÿงฐ Offline Client-Side PDF Editor

An offline-first, browser-based PDF utility built in React. It runs entirely inside your browser's local sandbox โ€” your documents never leave your device. No cloud servers, no account registration, no subscriptions, and zero tracking.


๐Ÿ—บ๏ธ Product Workflow (Alur Aplikasi)

graph TD
    A[Upload Local PDF] --> B[Parse PDF.js locally to memory ArrayBuffer]
    B --> C[Render pages on HTML5 Canvas preview]
    C --> D{Choose Action}
    D -->|Merge| E[Queue 2โ€“10 PDF files & arrange order]
    D -->|Reorder| F[Drag thumbnails in interactive grid]
    D -->|Extract Pages| G[Click pages visually OR type page range]
    D -->|Extract Images| H[Scan PDF binary stream for embedded images]
    D -->|Overlay| I[Draw links / Add text, images, or PNG stamps]
    E --> J[Compile operations with pdf-lib]
    F --> J
    G --> J
    H --> J
    I --> J
    J --> K[Save Version in temporal history tree]
    K --> L[Generate local browser Blob URL]
    L --> M[Download file directly from RAM to device]
Loading

โšก What is the Local Client & How It Works?

What is it? (Apa itu?)

A Local Client architecture means that all computation tasks โ€” document rendering, image processing, and PDF binary modifications โ€” are performed directly on the user's machine inside the browser's execution sandbox. Unlike traditional web apps, there is no backend API processing your files.

How does it work? (Bagaimana cara kerjanya?)

  1. File Ingestion: When you load a PDF, the browser reads the file locally via the HTML5 File Reader API, storing it in RAM as an ArrayBuffer.
  2. Local Rendering: The application uses Mozilla's PDF.js library to parse and paint page layouts directly onto HTML5 <canvas> elements.
  3. Delta Operation Logs: Edits (page sorting, adding stamps/text) are tracked as lightweight JSON delta frames rather than copying entire PDF blobs โ€” keeping memory usage minimal, especially on mobile.
  4. Client-Side Compilation: When you hit "Apply & Save", pdf-lib applies the queued operations onto the original byte array inside the browser.
  5. Direct RAM Download: A local blob: URI maps to the browser's RAM buffer. When you download, the file is transferred instantly from memory to local storage.

๐ŸŽฏ Features

โœ‚๏ธ Extract Pages

  • Visual page grid: All PDF pages are rendered as a clickable thumbnail grid.
  • Click-to-select: Click any page to toggle its selection. A purple checkmark overlay highlights selected pages.
  • Two-way binding: Selecting pages in the grid auto-updates the Page Range text input (e.g. 1, 3-5, 7), and editing the text field immediately updates the visual checkmarks.
  • Column switcher: Adjust the grid layout using the Cols: 1 | 2 | 5 | 10 toggle.

๐Ÿ”€ Reorder Pages

  • Drag-and-drop grid: Drag page thumbnails to rearrange their order using dnd-kit.
  • Fullscreen preview: Tap/click any page thumbnail to open a high-resolution fullscreen preview modal with Previous/Next navigation.
  • Column switcher: Adjust the grid layout using the Cols: 1 | 2 | 5 | 10 toggle.

๐Ÿ“Ž Merge PDFs

  • Multi-file queue: Load 2โ€“10 PDF files and arrange their order in a sortable list.
  • Column switcher: View queued files in 1, 2, 5, or 10 column layouts.
  • Smart card layout: Cards switch between row layout (1โ€“2 cols) and vertical card layout (5โ€“10 cols) to prevent label clipping.

๐ŸŽจ Overlay Editor

  • Links: Draw clickable hyperlink regions over any page area.
  • Text: Add text boxes with custom font size and color.
  • Stamps: Overlay PNG images (e.g. signatures, watermarks) onto pages.
  • Images: Embed raster images directly onto a page.

๐Ÿ–ผ๏ธ Extract Images

  • Scans the PDF binary stream for embedded raster image assets.
  • Displays found images in a downloadable thumbnail grid.
  • Column switcher: Cols: 1 | 2 | 5 | 10.

๐Ÿ• Version History

  • Every "Apply & Save" action creates a snapshot in a Git-like temporal history tree.
  • Quickly revert to any earlier version within the same session.

๐Ÿ”’ Privacy & Offline

  • All operations run inside the browser โ€” zero network requests for file processing.
  • Works fully offline as a PWA after the initial page load.

๐Ÿ“Š Feature Comparison Matrix

Feature / Criteria ๐Ÿงฐ Offline PDF Editor ๐ŸŒ Online Cloud Tools ๐Ÿข Adobe Acrobat Pro
Privacy & Security ๐Ÿ”’ 100% Secure: Files never leave your browser. โš ๏ธ Risk: Files uploaded to third-party servers. ๐Ÿข Local / Cloud: Handled locally or via Adobe Cloud.
Offline Capability ๐Ÿ“ถ Yes: Works fully offline as a PWA once loaded. โŒ No: Requires active internet connection. ๐Ÿ’ป Yes: Native desktop client.
Subscription Cost ๐Ÿ†“ 100% Free: No paywalls, ads, or usage limits. ๐Ÿ’ณ Freemium: Limits on size/frequency; paid plans required. ๐Ÿ’ฐ Expensive: High monthly recurring subscription cost.
Installation ๐ŸŒ Zero Install: Open instantly via web URL. ๐ŸŒ Zero Install: Web-based but bandwidth heavy. ๐Ÿ’ฟ Heavy: Requires gigabytes of disk space.
Mobile Experience ๐Ÿ“ฑ Mobile-First: Smooth touch layouts with drag-and-drop. โš ๏ธ Clunky: Heavy ads, slow uploads on mobile. ๐Ÿ“ฑ Native App: Requires large app store downloads.
Version History ๐Ÿชต Git-like version tree: Track and revert to past states. โŒ None: Single-file outputs with no revert states. ๐Ÿ“ Document History: Basic track-changes log.
Visual Page Selection โœ… Click-to-select grid with live range sync. โŒ Text-input only in most tools. โœ… Available in Pro tier.

๐Ÿ—ฃ๏ธ Supported Languages (Bahasa yang Tersedia)

The application translates instantly across 12 languages:

Flag Language (Local Name) Language (English Name) Code Type
๐Ÿ‡ธ๐Ÿ‡ฆ ุงู„ุนุฑุจูŠุฉ Arabic ar Primary
๐Ÿ‡จ๐Ÿ‡ณ ไธญๆ–‡ Chinese zh Primary
๐Ÿ‡ฌ๐Ÿ‡ง English English en Primary
๐Ÿ‡ฎ๐Ÿ‡ณ เคนเคฟเคจเฅเคฆเฅ€ Hindi hi Primary
๐Ÿ‡ฎ๐Ÿ‡ฉ Bahasa Indonesia Indonesian id Primary
๐Ÿ‡ฎ๐Ÿ‡ช Gaeilge Irish ga Primary
๐Ÿ‡ฏ๐Ÿ‡ต ๆ—ฅๆœฌ่ชž Japanese ja Primary
๐Ÿ‡ฎ๐Ÿ‡ฉ > ๐ŸŒพ Basa Jawa Javanese jv Regional / Local
๐Ÿ‡ฒ๐Ÿ‡พ Bahasa Melayu Malay ms Primary
๐Ÿ‡ท๐Ÿ‡บ ะ ัƒััะบะธะน Russian ru Primary
๐Ÿ‡ช๐Ÿ‡ธ Espaรฑol Spanish es Primary
๐Ÿ‡ป๐Ÿ‡ณ Tiแบฟng Viแป‡t Vietnamese vi Primary

Language can be switched instantly from the language selector in the top navigation bar.


๐Ÿ–ฅ๏ธ UI & Layout

  • Desktop: Fixed sidebar layout. The left sidebar is frozen (non-scrolling) while the main content area scrolls independently.
  • Mobile: Drawer-based navigation with a bottom sheet for tool parameters.
  • Column Grid Toggle: All page/file grids support Cols: 1 | 2 | 5 | 10 to adjust density.
  • Fullscreen Page Preview: Tap any page thumbnail in Reorder mode to open a full-resolution preview modal with Previous/Next navigation.
  • Unsaved Session Warning: Refreshing or closing the tab while a file is open prompts a browser confirmation dialog to prevent accidental data loss.

๐Ÿ› ๏ธ Build and Development

Prerequisites

  • Node.js (v18+)
  • npm

Installation

# Clone the repository
git clone <repository-url>

# Install dependencies
npm install

# Start local development server
npm run dev

# Compile production bundle
npm run build

Tech Stack

Layer Library
UI Framework React 18 + Vite
PDF Rendering PDF.js (Mozilla)
PDF Manipulation pdf-lib
Drag & Drop dnd-kit
Styling Tailwind CSS

๐Ÿ“„ License

This project is open-source. Contributions and forks are welcome.

Releases

No releases published

Packages

 
 
 

Contributors

Languages