TandaAir
TandaAir (Indonesian for "Watermark") is a privacy-first, browser-based watermarking application. Its primary purpose is to allow users to add customizable text watermarks to images (JPEG, PNG) and PDF documents, all without ever uploading a single file to any server.
Every step of the processing pipeline, from reading the file, rendering a preview, applying the watermark, to producing the downloadable output, happens entirely inside the user's browser. This makes the application suitable for handling confidential or sensitive documents where data must never leave the user's device.
The application is built as a single-page web application using Next.js 15 with the App Router, React 19, TypeScript, Tailwind CSS, and Zustand for state management. It also functions as an installable Progressive Web App (PWA), capable of working offline once initially loaded.
Technology Stack
Key Features
- •Drag-and-drop file upload supporting JPEG, PNG, and PDF files up to 50 MB
- •Real-time watermark preview with debounced rendering and zoom controls (50%, 75%, 100%)
- •Five distinct watermark styles: Center, Diagonal, Tiled, Full Fade, and Corner
- •Full configuration controls for opacity, font size, rotation, and color with hex input validation
- •Complete cross-format conversion between JPG, PNG, and PDF
- •EXIF metadata preservation for JPEG images including orientation, camera info, and GPS data
- •Download with real-time progress bar, cancellation support, and timeout protection
- •Zero network uploads, all processing happens 100% client-side in the browser
Privacy-First Architecture
TandaAir's architecture is fundamentally designed around privacy. No file data ever leaves the browser. There are no API endpoints, no cloud storage integrations, and no server-side processing. The application does not include any analytics scripts, tracking pixels, or cookie-based monitoring. The only data persisted is the user's watermark configuration in localStorage. A prominent green "100% Private" badge is always visible, and a comprehensive privacy policy is accessible via modal.
- ■Zero network uploads, files never leave the browser
- ■No analytics, tracking, or cookies
- ■Local-only storage for configuration preferences
- ■Strict Content-Security-Policy and security headers
- ■Referrer-Policy set to no-referrer
Architecture Highlights
Image Processing Engine
Handles the complete pipeline for watermarking raster images: EXIF extraction, orientation correction, canvas drawing, watermark application, output encoding, and EXIF re-embedding. Supports cancellation checkpoints and progress reporting throughout the pipeline.
PDF Processing Engine
Adds watermarks as native PDF text directly into each page using pdf-lib. Includes encryption detection, a 200-page limit for resource protection, per-page font size optimization, and support for all five watermark styles. Handles PDF-to-image conversion via PDF.js rendering.
Web Worker Support
An imageWorker.ts Web Worker offloads watermark rendering from the main thread using the OffscreenCanvas API, ensuring the UI remains responsive even when processing large images. Falls back gracefully if OffscreenCanvas is not supported.
State Management
All application state lives in a single Zustand store with persistence middleware. File state (raw File object, preview URL, processing status) is kept in memory, while watermark configuration (text, style, opacity, rotation, font size, color, output format) is persisted to localStorage across sessions.