Imgex

Overview

Imgex (formerly Pixmize) is a browser-native progressive web app (PWA) and image/pdf processing platform designed to deliver professional-grade editing capabilities without relying on heavy desktop software or compute-heavy backends.

The core idea behind Imgex was to push the limits of what can be done on the client-moving traditionally server-side or desktop-bound operations directly into the browser. With the recent addition of PWA support, users can now install the application and process assets locally with near-zero latency.

This significantly reduces backend cost, improves scalability, and creates a vastly superior user experience.

Extensive Tool Suite

Imgex provides an expansive suite of tools grouped logically to handle any workflow:

• Basic Tools: Background Remover, Image Cropper, Compressor, Converter, Watermark Tool, Favicon Generator, Merge PDF, Split PDF
• Advanced Tools: Image to Text (OCR), EXIF Stripper, Palette Extractor, Image Vectorizer, Image Splitter, QR Generator, E-Sign PDF, Extract Images
• PDF Suite: Reorder PDF, Rotate PDF, Protect PDF, PDF Metadata, PDF to Image, Image to PDF, PDF to Text, Add Page Numbers

System Design & Architecture

Imgex follows a hybrid client-heavy architecture:

• Client (Next.js & Serwist PWA) handles:

  • Image transformations using Fabric.js (Canvas abstraction)
  • UI state, interaction, and PWA offline caching
  • Optimistic updates and feedback loops

• Backend (Next.js Route Handlers & Convex) handles:

  • Metadata persistence
  • User state and synchronization

• External Services:

  • ImageKit for CDN delivery and optimized assets
  • AI APIs for advanced transformations

This approach minimizes backend load while keeping the system horizontally scalable.

---

Key Engineering Decisions

1. Client-Side Processing over Server-Side

Decision: Move image processing to the browser using Fabric.js.

Why:

• Eliminates repeated upload/download cycles
• Reduces infrastructure cost
• Improves responsiveness

2. Asynchronous UX for Heavy Operations

Decision: Design all transformations as non-blocking operations.

Why:

• Image processing is inherently expensive
• Blocking the main thread degrades UX

Implementation:

• Web Workers for offloading computation
• Progressive loading states
• Optimistic UI updates where possible

---

Challenges

Handling Large Files in a Constrained Environment

Browsers impose strict limits on memory and execution time.

Solution:

• Chunked operations where possible
• Guardrails on input sizes

Maintaining Responsiveness Under Load

Heavy processing can block rendering and degrade UX.

Solution:

• Offloaded computation to Web Workers
• Designed non-blocking interaction patterns

Balancing Accuracy vs Performance (AI Features)

AI operations are expensive and unpredictable.

Solution:

• Delegated only high-value tasks (e.g. background removal) to AI
• Kept simpler transformations client-side

---

Learnings

This project was a deep dive into building performance-critical, client-heavy progressive web applications:

• Designing around the single-threaded nature of JavaScript
• Client-first architecture is powerful, but requires deliberate memory management
• AI integration works best when it's surgical, not a catch-all