⚡ PixelForge

A fast, 100% browser-based, privacy-first image editing & conversion studio.

---

🌟 Overview

PixelForge is a modern, high-performance web application designed to convert, compress, resize, and perform AI-powered background removal on images—entirely inside your browser.

No files are ever uploaded to a remote server. Your privacy is 100% guaranteed because all heavy processing runs locally using WebAssembly (WASM), Canvas API, and Web Workers.

---

✨ Key Features

• 🔒 100% Private & Browser-Based: All processing happens locally. Zero data collection, zero server uploads.
• 🤖 AI Background Removal: Instant background removal powered by in-browser ONNX WebAssembly model.
• 🔄 Multi-Format Image Converter: Seamlessly convert between PNG, JPG, WEBP, AVIF, SVG, HEIC, TIFF, PDF, and Base64.
• 🗜️ Smart Image Compressor: Reduce file sizes significantly while maintaining visual quality.
• 📐 Precision Resizer: Resize images by custom dimensions or percentage scale.
• 📦 Bulk Batch Processing: Upload multiple files at once and download all converted assets as a single .ZIP archive.
• ⚡ Ultra Fast & Offline Capable: Instant previews and sub-second processing.

---

📂 Supported Formats

Format	Import	Export	Description
PNG	✅	✅	Portable Network Graphics
JPG / JPEG	✅	✅	Joint Photographic Experts Group
WEBP	✅	✅	Web Picture Format
AVIF	✅	✅	AV1 Image File Format
SVG	✅	✅	Scalable Vector Graphics
HEIC / HEIF	✅	✅	High Efficiency Image Format (iPhone)
TIFF / TIF	✅	✅	Tagged Image File Format
PDF	✅	✅	Single & Multi-Page Document
Base64	✅	✅	Data URI string for developers

---

🛠️ Tech Stack

• Core Framework: React 19
• Routing & SSR Engine: TanStack Start + TanStack Router
• Bundler & Build Tool: Vite 8 + Nitro Engine
• Styling & UI: Tailwind CSS v4 + Radix UI Primitives + Lucide Icons
• In-Browser Processing Libraries:
  • @imgly/background-removal (In-browser WASM AI)
  • heic-to (HEIC image decoder)
  • utif (TIFF format parser)
  • jspdf (PDF generation)
  • jszip (Client-side ZIP packaging)
• Language: TypeScript

---

🚀 Getting Started

Prerequisites

Ensure you have Node.js 18+ or Bun installed on your system.

Local Development Setup

1. Clone the repository:

   git clone https://github.com/Mudassirdbs/PixelForge.git
   cd PixelForge

2. Install dependencies:

   npm install

3. Start the local dev server:

   npm run dev

   Open your browser at http://localhost:3000.

4. Build for production:

   npm run build

5. Preview production build locally:

   npm run preview

---

☁️ Deployment

PixelForge is optimized to run on serverless & edge platforms out of the box:

Cloudflare Pages (Recommended)

1. Import Mudassirdbs/PixelForge on Cloudflare Pages.
2. Set Build Command: npm run build
3. Set Output Directory: .output/public

Vercel

1. Import Mudassirdbs/PixelForge on Vercel.
2. Vercel automatically detects the Nitro engine. Click Deploy.

---

📜 License

Distributed under the Apache License 2.0. See LICENSE for more information.

---

👤 Author

Mudassir Asghar

• GitHub: @Mudassirdbs