The Browser Is Your Server — Building File Tools Without a Backend

What if I told you that most file processing tools don't need a server?

Image compression, PDF editing, video conversion, 3D file viewing — I built all of these without a single server-side processing call. Here's the full picture of what's possible in 2026.

Why "No Server" Matters

The obvious benefit is cost. But there's something more important: privacy.

When you upload a file to a web service, you're trusting that service with your data. Most people don't think about this — until they're compressing a contract, editing a private photo, or converting a confidential document.

Client-side processing eliminates this concern entirely. The file never leaves the device.

The Technology Stack

Canvas API — Image Processing

The browser has had a powerful image processing engine built in for years. Most developers don't realize its full capabilities.

// Load image
const img = new Image();
img.src = URL.createObjectURL(file);
img.onload = () => {
  const canvas = document.createElement("canvas");

  // Resize
  canvas.width = targetWidth;
  canvas.height = targetHeight;

  const ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0, targetWidth, targetHeight);

  // Export as JPEG with quality control
  canvas.toBlob(blob => {
    // blob is your compressed/resized image
  }, "image/jpeg", 0.85); // 0.85 = 85% quality
};

What you can do with Canvas API:

• Resize images (pixel dimensions)
• Compress images (quality control)
• Convert formats (JPG, PNG, WebP)
• Crop images
• Apply basic filters (brightness, contrast)
• Rotate and flip
• Extract pixel color values
• Generate image histograms

Zero dependencies. Ships with every browser.

pdf-lib — PDF Manipulation

pdf-lib is a pure JavaScript PDF library that runs entirely in the browser.

import { PDFDocument } from "pdf-lib";

// Merge PDFs
const mergedPdf = await PDFDocument.create();
for (const file of files) {
  const bytes = await file.arrayBuffer();
  const pdf = await PDFDocument.load(bytes);
  const pages = await mergedPdf.copyPages(pdf, pdf.getPageIndices());
  pages.forEach(page => mergedPdf.addPage(page));
}
const mergedBytes = await mergedPdf.save();

// Split PDF (extract pages 2-5)
const sourcePdf = await PDFDocument.load(sourceBytes);
const newPdf = await PDFDocument.create();
const pages = await newPdf.copyPages(sourcePdf, [1, 2, 3, 4]); // 0-indexed
pages.forEach(page => newPdf.addPage(page));

// Rotate pages
const pdf = await PDFDocument.load(bytes);
pdf.getPages().forEach(page => {
  page.setRotation(degrees(90));
});

What you can do with pdf-lib:

• Merge multiple PDFs
• Split PDFs (extract page ranges)
• Rotate pages
• Add text, images, and shapes
• Compress (remove metadata, optimize)
• Password protection

FFmpeg.wasm — Video and Audio Processing

This is the impressive one. The entire FFmpeg binary, compiled to WebAssembly.

import { FFmpeg } from "@ffmpeg/ffmpeg";
import { fetchFile } from "@ffmpeg/util";

const ffmpeg = new FFmpeg();
await ffmpeg.load();

// Write input file to virtual filesystem
await ffmpeg.writeFile("input.mp4", await fetchFile(videoFile));

// Run any FFmpeg command
await ffmpeg.exec([
  "-i", "input.mp4",
  "-crf", "28",           // Quality (0=lossless, 51=worst)
  "-preset", "fast",      // Encoding speed
  "output.mp4"
]);

// Read result
const data = await ffmpeg.readFile("output.mp4");
const blob = new Blob([data.buffer], { type: "video/mp4" });

What you can do with FFmpeg.wasm:

• Compress video
• Convert between formats (MP4, MOV, WebM, AVI, MKV)
• Extract audio from video
• Convert video to GIF
• Trim video
• Adjust audio volume
• Convert audio formats (MP3, WAV, OGG, FLAC)

Gotcha: You need specific HTTP headers for the multithreading to work:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

Three.js — 3D File Viewing

Three.js lets you render 3D graphics using WebGL. Combined with format-specific loaders, you can open 3D files directly in the browser.

import * as THREE from "three";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
import { STLLoader } from "three/examples/jsm/loaders/STLLoader";
import { PLYLoader } from "three/examples/jsm/loaders/PLYLoader";

// Load any 3D file
const loaderMap = {
  ".obj": OBJLoader,
  ".fbx": FBXLoader,
  ".stl": STLLoader,
  ".ply": PLYLoader,
};

const ext = filename.split(".").pop().toLowerCase();
const LoaderClass = loaderMap[`.${ext}`];
const loader = new LoaderClass();

loader.load(objectURL, (model) => {
  scene.add(model);
});

What you can do with Three.js:

• View OBJ, FBX, STL, PLY, GLB, DAE, BVH files
• Rotate, zoom, pan models
• Adjust lighting
• Play animations (FBX, BVH)
• Display point cloud color data (PLY)

Putting It Together

I built ToolZip — 52 browser-based utility tools — using this stack. The full list includes:

• Image: compress, resize, crop, rotate, convert (HEIC, WebP, AVIF, etc.)
• PDF: merge, split, compress, rotate, convert to/from images
• Video: compress, convert format, extract audio, create GIF
• Audio: trim, convert, compress, adjust volume
• 3D: view 8 different formats
• Developer: JSON formatter, Base64, QR code, color tools, JWT decoder, regex tester

The entire thing runs on Vercel's free tier. Monthly cost: $0 (plus ~$15/year for the domain).

The Limits

Client-side processing isn't always the answer:

RAM constraints: A 4GB video file will likely crash the browser tab. Files over ~500MB get risky.

Speed: Browser processing is slower than server processing. A 100MB video might take 5 minutes on a mid-range phone. On a server with a good CPU, it'd take 30 seconds.

No AI features: Background removal, object detection, upscaling — these need server-side AI. There are WebGL-based ML models (TensorFlow.js), but they're not competitive with GPU-accelerated server inference yet.

When to Use Server-Side Instead

• Files > 500MB
• Real-time collaboration features
• AI-powered features
• When processing speed is critical
• When you need to store results

The Takeaway

For a huge class of file tools — the ones where users just want to quickly convert, compress, or inspect a file — the browser is sufficient. And it's not just "sufficient" — the privacy advantage is a genuine differentiator.

Most users who've tried ToolZip mention they appreciate that nothing is uploaded. Some say it's the reason they chose it over alternatives.

The browser is more powerful than most developers give it credit for. Before spinning up a server, ask: does this really need one?

---

ToolZip — Browser-based file tools. No uploads, no accounts, free.