Pdf2Pics
Pdf2Pics is a project that was created to explore methods to enhance client-side PDF rendering performance.
Technologies
Frontend:
- TypeScript, React, Next.js, PDF.js
- PWA Implementation: Offline capability through Service Workers.
- Web Performance: Dedicated Web Workers for multithreading.
- State Management:
zustandfor scalable and maintainable application state. - Animations:
motionfor smooth and engaging user interactions.
Deployment & Infrastructure:
- Deployment: Dockerized for portability, hosted on DigitalOcean.
- CI/CD: Custom automated pipeline for building and deploying Docker images with every release.
- Version Control: Git.
Key Highlights
- Fast & Efficient Multithreading: Renders multiple PDF pages simultaneously for exceptional performance.
- Offline-First Experience: Once loaded, Pdf2Pics functions seamlessly without an internet connection.
- Privacy-Focused: All processing occurs on the client side, ensuring sensitive data remains private.
Key Features
- Blazing-Fast Multithreading Rendering:
- Optimized with Web Workers API to handle multiple pages concurrently without freezing the UI.
- Capable of rendering large documents quickly, offering a smooth user experience.
- Offline-First Capabilities:
- Designed as a Progressive Web App to function reliably without a network connection. Users can install it as a native app for a seamless offline experience.
- Client-Side Processing:
- Keeps all operations local, ensuring data privacy and eliminating the need for server-side dependencies.
Challenges & Achievements
While PDF.js supports rendering pages using a single web worker, it is limited to rendering one page at a time. This constraint leads to suboptimal performance for projects that require displaying multiple pages simultaneously.
To address this, I modified PDF.js to enable instantiation fully within web workers, making it possible to create multiple workers that independently render pages. This parallelized approach significantly enhanced rendering efficiency.
This solution delivered a 3x performance improvement, reducing the rendering time for a 496-page document from ~15 seconds to ~5 seconds. This optimization stemmed from addressing the inherent limitations of PDF.js by enabling parallel page rendering within multiple web workers.