DEV Community: toolzip

Working with ZIP Files Entirely in the Browser Using JSZip

toolzip — Sat, 03 Oct 2026 03:30:44 +0000

ZIP compression in the browser used to require a server round-trip. JSZip changed that. Here's a practical guide to creating and extracting ZIPs client-side.

Creating a ZIP

import JSZip from 'jszip';

async function createZip(files) {
  const zip = new JSZip();

  for (const file of files) {
    const buffer = await file.arrayBuffer();
    zip.file(file.name, buffer, { compression: 'DEFLATE', compressionOptions: { level: 6 } });
  }

  const blob = await zip.generateAsync({
    type: 'blob',
    compression: 'DEFLATE',
    compressionOptions: { level: 6 }
  });

  return blob;
}

Compression level 6 is the DEFLATE default — a good balance between size and speed. Level 9 gives ~5% better compression but takes noticeably longer in the browser.

Extracting a ZIP

async function extractZip(file) {
  const zip = await JSZip.loadAsync(file);
  const entries = [];

  zip.forEach((relativePath, zipEntry) => {
    if (!zipEntry.dir) {
      entries.push({ path: relativePath, entry: zipEntry });
    }
  });

  return entries;
}

async function downloadEntry(zipEntry, filename) {
  const blob = await zipEntry.async('blob');
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

File Size Limits

Browser memory is the real constraint. A 500MB ZIP will likely crash the tab. For large files, you need a streaming approach — JSZip supports generateInternalStream() for this, but it's more complex.

For typical use (documents, images, small assets), staying under 100MB works fine.

What Doesn't Compress

Already-compressed files (JPG, PNG, MP4, MP3) gain almost nothing from DEFLATE. Sometimes they get slightly larger. A useful optimization: detect these types and skip compression:

const SKIP_COMPRESSION = ['jpg', 'jpeg', 'png', 'mp4', 'mp3', 'webp', 'gif', 'zip', 'gz'];

function shouldCompress(filename) {
  const ext = filename.split('.').pop().toLowerCase();
  return !SKIP_COMPRESSION.includes(ext);
}

Live at toolzip.app/tools/zip-tool — no upload, no server.

Generating Thumbnail Images in the Browser with Canvas API

toolzip — Fri, 02 Oct 2026 03:43:56 +0000

Generating Thumbnail Images in the Browser with Canvas API

Blog thumbnail generators are usually server-side — send text, get back an image. I built one that runs entirely in the browser using Canvas. Here's what's actually hard about it.

Korean Web Font Loading

Korean fonts are large (often 3–10MB for a complete character set). Loading them for Canvas requires waiting for them to be ready:

async function loadWebFonts() {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700;900&display=swap';
  document.head.appendChild(link);
  await document.fonts.ready;
}

document.fonts.ready waits for all pending font loads to complete. Without this, Canvas renders text with the fallback font.

Text Wrapping

Canvas fillText() doesn't wrap. You have to implement it:

function getWrappedLines(ctx, text, maxWidth) {
  const words = text.split(' ');
  const lines = [];
  let current = '';

  for (const word of words) {
    const test = current ? `${current} ${word}` : word;
    if (ctx.measureText(test).width > maxWidth && current) {
      lines.push(current);
      current = word;
    } else {
      current = test;
    }
  }
  if (current) lines.push(current);
  return lines;
}

Important: measure line count before drawing the background box, not after. Otherwise the text overflows the box.

Blurred Image Background

Taking a user's photo and using it as a blurred background is the most visually impressive feature:

async function drawBlurredBackground(ctx, imageFile, width, height, blur, dimOpacity) {
  const img = await loadImage(imageFile);
  const scale = Math.max(width / img.width, height / img.height);
  const sw = img.width * scale;
  const sh = img.height * scale;
  const sx = (width - sw) / 2;
  const sy = (height - sh) / 2;

  ctx.filter = `blur(${blur}px)`;
  ctx.drawImage(img, sx, sy, sw, sh);
  ctx.filter = 'none';

  // Darken overlay
  ctx.fillStyle = `rgba(0,0,0,${dimOpacity})`;
  ctx.fillRect(0, 0, width, height);
}

High-Resolution Download

The canvas preview is scaled down for display (0.5x). For download, render at full resolution:

function downloadFullRes(previewCanvas, targetWidth, targetHeight, format) {
  const out = document.createElement('canvas');
  out.width = targetWidth;
  out.height = targetHeight;
  const ctx = out.getContext('2d');
  // Scale up from preview
  ctx.scale(targetWidth / previewCanvas.width, targetHeight / previewCanvas.height);
  ctx.drawImage(previewCanvas, 0, 0);
  ctx.setTransform(1, 0, 0, 1, 0, 0);

  out.toBlob(blob => {
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = `thumbnail.${format}`;
    a.click();
  }, format === 'jpg' ? 'image/jpeg' : 'image/png', 0.95);
}

Try it at toolzip.app/tools/thumbnail-maker.

Building a Live SVG Editor in the Browser — Syntax Highlighting Without a Library

toolzip — Thu, 01 Oct 2026 02:39:35 +0000

Building a Live SVG Editor in the Browser — Syntax Highlighting Without a Library

A live SVG editor sounds simple: textarea on the left, preview on the right, update on change. In practice, there are several sharp edges.

Rendering SVG Safely

The naive approach — innerHTML = userInput — is an XSS vector. SVG can contain <script> tags and event handlers.

The safer approach uses DOMParser:

function renderSVG(svgString, container) {
  const parser = new DOMParser();
  const doc = parser.parseFromString(svgString, 'image/svg+xml');

  const parserError = doc.querySelector('parsererror');
  if (parserError) {
    return { ok: false, error: parserError.textContent };
  }

  // Remove script elements
  doc.querySelectorAll('script').forEach(el => el.remove());

  // Remove event handlers
  doc.querySelectorAll('*').forEach(el => {
    [...el.attributes].forEach(attr => {
      if (attr.name.startsWith('on')) el.removeAttribute(attr.name);
    });
  });

  container.innerHTML = '';
  container.appendChild(doc.documentElement.cloneNode(true));
  return { ok: true };
}

Export to PNG

SVG → PNG conversion in the browser requires an intermediate step through an <img> element:

async function svgToPng(svgString, width, height) {
  const blob = new Blob([svgString], { type: 'image/svg+xml' });
  const url = URL.createObjectURL(blob);

  return new Promise((resolve) => {
    const img = new Image();
    img.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = width;
      canvas.height = height;
      canvas.getContext('2d').drawImage(img, 0, 0, width, height);
      URL.revokeObjectURL(url);
      resolve(canvas.toDataURL('image/png'));
    };
    img.src = url;
  });
}

ViewBox and Zoom

SVG has its own coordinate system defined by viewBox. When you zoom, you're scaling the container, not changing the viewBox. This keeps the SVG coordinates stable:

function setZoom(containerEl, scale) {
  containerEl.style.transform = `scale(${scale})`;
  containerEl.style.transformOrigin = 'top left';
}

Snippet Insertion

For quick edits, I added insert buttons for common shapes. The trick is inserting at the cursor position in the textarea:

function insertAtCursor(textarea, snippet) {
  const start = textarea.selectionStart;
  const end = textarea.selectionEnd;
  const before = textarea.value.slice(0, start);
  const after = textarea.value.slice(end);
  textarea.value = before + snippet + after;
  textarea.selectionStart = textarea.selectionEnd = start + snippet.length;
  textarea.dispatchEvent(new Event('input'));
}

Live at toolzip.app/tools/svg-preview.

How to Load and Preview Custom Fonts in the Browser Without CSS

toolzip — Wed, 30 Sep 2026 06:43:29 +0000

Loading a custom font file (TTF, OTF, WOFF, WOFF2) in the browser without a stylesheet sounds like it shouldn't work. But the FontFace API makes it possible — and it's surprisingly clean.

The FontFace API

Most developers know @font-face in CSS. Fewer know you can do the same thing entirely in JavaScript:

async function loadFontFromFile(file) {
  const fontName = `custom-${Date.now()}`;
  const arrayBuffer = await file.arrayBuffer();
  const font = new FontFace(fontName, arrayBuffer);
  await font.load();
  document.fonts.add(font);
  return fontName;
}

Once added to document.fonts, you can use the font name anywhere in CSS or Canvas.

Supporting Multiple Formats

WOFF and WOFF2 files are compressed web fonts. TTF and OTF are the raw formats. The browser handles all of them through FontFace — you don't need to specify the format, unlike in CSS @font-face.

const SUPPORTED = ['ttf', 'otf', 'woff', 'woff2'];

function getExtension(file) {
  return file.name.split('.').pop().toLowerCase();
}

function isValidFont(file) {
  return SUPPORTED.includes(getExtension(file));
}

Rendering Weight Variations

Not all fonts include all weights. When you set font-weight: 900 and the font only has regular, the browser synthesizes bold — which usually looks bad.

To show only what's actually available, I check which weights render differently:

async function detectAvailableWeights(fontName) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const testChar = 'A';
  const available = [];

  for (const weight of [100, 200, 300, 400, 500, 600, 700, 800, 900]) {
    ctx.font = `${weight} 48px "${fontName}"`;
    const metrics = ctx.measureText(testChar);
    // Compare width — different weights render at different widths
    available.push({ weight, width: metrics.width });
  }
  return available;
}

Letter Spacing and Line Height on Canvas

CSS letter-spacing and line-height don't apply to Canvas — you have to implement them manually.

For letter spacing, measure and reposition each character:

function drawTextWithSpacing(ctx, text, x, y, spacing) {
  let curX = x;
  for (const char of text) {
    ctx.fillText(char, curX, y);
    curX += ctx.measureText(char).width + spacing;
  }
}

The Comparison View

The most useful feature turned out to be rendering all nine weights side by side. Users can instantly see which weights their font actually supports.

Try it at toolzip.app/tools/font-preview — drag in any TTF, OTF, WOFF, or WOFF2 file.

Building a CSS Gradient Generator in the Browser — Linear, Radial, and Conic

toolzip — Tue, 29 Sep 2026 03:11:17 +0000

Building a CSS Gradient Generator in the Browser — Linear, Radial, and Conic

Most CSS gradient generators do the basics: pick two colors, get a linear-gradient. I wanted to build one that handles all three gradient types, real-time preview, Tailwind output, and a pattern overlay system — all without touching a server.

Here's what I learned.

The Three Gradient Types

CSS supports three gradient functions, and they behave very differently under the hood.

Linear gradients are the simplest. You define an angle and color stops:

background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);

Radial gradients spread from a center point outward:

background: radial-gradient(circle, #0ea5e9 0%, #10b981 100%);

Conic gradients are the most unusual — they rotate around a center point like a color wheel:

background: conic-gradient(from 0deg, #ef4444, #eab308, #22c55e);

The Canvas Preview Problem

The tricky part wasn't generating the CSS string — it was rendering an accurate live preview using Canvas.

Canvas doesn't understand CSS gradients directly. You have to use createLinearGradient(), createRadialGradient(), or... figure out conic yourself, because createConicGradient() has limited browser support.

For conic gradients, I ended up rendering them as a series of thin pie slices:

function drawConic(ctx, cx, cy, radius, stops) {
  const total = Math.PI * 2;
  stops.forEach((stop, i) => {
    const startAngle = stop.position * total;
    const endAngle = (stops[i + 1]?.position ?? 1) * total;
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.arc(cx, cy, radius, startAngle, endAngle);
    ctx.fillStyle = stop.color;
    ctx.fill();
  });
}

Not perfect for smooth gradients, but good enough for a preview at typical screen sizes.

Converting Angle to Canvas Coordinates

CSS uses clockwise degrees from the top (0deg = up). Canvas uses counterclockwise radians from the right. The conversion is non-obvious:

function cssAngleToCanvas(deg, width, height) {
  const rad = ((deg - 90) * Math.PI) / 180;
  const x1 = width / 2 - Math.cos(rad) * width / 2;
  const y1 = height / 2 - Math.sin(rad) * height / 2;
  const x2 = width / 2 + Math.cos(rad) * width / 2;
  const y2 = height / 2 + Math.sin(rad) * height / 2;
  return { x1, y1, x2, y2 };
}

Generating Tailwind Output

Tailwind uses directional utilities (to-r, to-br) rather than angles. I map the nearest 45-degree increment:

const dirMap = {
  0: 'to-t', 45: 'to-tr', 90: 'to-r', 135: 'to-br',
  180: 'to-b', 225: 'to-bl', 270: 'to-l', 315: 'to-tl'
};
const nearest = Math.round(angle / 45) * 45;
const dir = dirMap[nearest] ?? 'to-br';

For arbitrary colors, Tailwind needs bracket notation: from-[#6366f1].

SVG Pattern Overlay

I added five overlay patterns (dots, grid, diagonal, wave, triangles) rendered as repeating Canvas patterns. The trick is building a small offscreen canvas tile and using createPattern():

function buildDotPattern(ctx, color) {
  const tile = document.createElement('canvas');
  tile.width = 20; tile.height = 20;
  const tc = tile.getContext('2d');
  tc.fillStyle = color + '44';
  tc.beginPath();
  tc.arc(10, 10, 2, 0, Math.PI * 2);
  tc.fill();
  return ctx.createPattern(tile, 'repeat');
}

What I'd Do Differently

Add interpolation mode (sRGB vs okLAB) — colors mix very differently
Support mesh gradients (currently only possible via SVG filters)
Let users drag color stops on a visual bar instead of sliders

The tool is live at toolzip.app/tools/gradient-generator — no install, no upload, runs entirely in your browser.

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

toolzip — Mon, 28 Sep 2026 05:59:20 +0000

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.

Everything You Can Do With Canvas API (That You Probably Didn't Know)

toolzip — Sun, 27 Sep 2026 06:14:49 +0000

Most developers use Canvas API for one thing: drawing shapes or rendering charts. That's maybe 10% of what it can do.

Here's what else is possible — and how to use it for real-world file processing.

1. Image Compression

Canvas gives you direct control over JPEG quality when exporting.

function compressImage(file, quality = 0.85) {
  return new Promise((resolve) => {
    const img = new Image();
    const url = URL.createObjectURL(file);

    img.onload = () => {
      const canvas = document.createElement("canvas");
      canvas.width = img.naturalWidth;
      canvas.height = img.naturalHeight;

      const ctx = canvas.getContext("2d");

      // Fill white background for JPEG (no transparency)
      ctx.fillStyle = "#ffffff";
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      ctx.drawImage(img, 0, 0);
      URL.revokeObjectURL(url);

      canvas.toBlob(resolve, "image/jpeg", quality);
    };

    img.src = url;
  });
}

// Usage
const blob = await compressImage(file, 0.8); // 80% quality

The quality parameter (0-1) is only meaningful for JPEG and WebP. PNG is lossless — quality has no effect.

2. Format Conversion

async function convertFormat(file, targetFormat) {
  const mimeTypes = {
    jpg: "image/jpeg",
    png: "image/png",
    webp: "image/webp",
  };

  const img = await loadImage(file);
  const canvas = document.createElement("canvas");
  canvas.width = img.naturalWidth;
  canvas.height = img.naturalHeight;

  const ctx = canvas.getContext("2d");

  // White background needed when converting PNG with alpha to JPEG
  if (targetFormat === "jpg") {
    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  }

  ctx.drawImage(img, 0, 0);

  return new Promise(resolve => {
    canvas.toBlob(resolve, mimeTypes[targetFormat], 0.92);
  });
}

HEIC conversion is trickier — you need a library like heic2any to decode HEIC first, then Canvas handles the re-encoding.

3. Pixel-Level Manipulation

getImageData() gives you direct access to every pixel as RGBA values.

function applyGrayscale(canvas) {
  const ctx = canvas.getContext("2d");
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data; // Uint8ClampedArray: [R,G,B,A, R,G,B,A, ...]

  for (let i = 0; i < data.length; i += 4) {
    const r = data[i];
    const g = data[i + 1];
    const b = data[i + 2];
    // Luminance formula
    const gray = 0.299 * r + 0.587 * g + 0.114 * b;
    data[i] = data[i + 1] = data[i + 2] = gray;
    // data[i + 3] is alpha — leave it alone
  }

  ctx.putImageData(imageData, 0, 0);
}

The same pattern works for:

Brightness/contrast adjustment
Channel separation (R, G, B, Alpha channels separately)
Color inversion
Threshold / posterization
Custom filters

4. Extracting Color Palettes

Sample pixels at regular intervals to find dominant colors.

function extractPalette(canvas, sampleRate = 10) {
  const ctx = canvas.getContext("2d");
  const { width, height } = canvas;
  const imageData = ctx.getImageData(0, 0, width, height);
  const data = imageData.data;

  const colorMap = new Map();

  for (let y = 0; y < height; y += sampleRate) {
    for (let x = 0; x < width; x += sampleRate) {
      const i = (y * width + x) * 4;
      const a = data[i + 3];
      if (a < 128) continue; // Skip transparent pixels

      // Quantize to reduce color count
      const r = Math.round(data[i] / 32) * 32;
      const g = Math.round(data[i + 1] / 32) * 32;
      const b = Math.round(data[i + 2] / 32) * 32;
      const key = `${r},${g},${b}`;

      colorMap.set(key, (colorMap.get(key) || 0) + 1);
    }
  }

  // Sort by frequency
  return [...colorMap.entries()]
    .sort((a, b) => b[1] - a[1])
    .slice(0, 10)
    .map(([key]) => {
      const [r, g, b] = key.split(",").map(Number);
      return { r, g, b, hex: `#${r.toString(16).padStart(2,"0")}${g.toString(16).padStart(2,"0")}${b.toString(16).padStart(2,"0")}` };
    });
}

5. Reading Pixel Values on Click

canvas.addEventListener("click", (e) => {
  const rect = canvas.getBoundingClientRect();

  // Account for CSS scaling
  const scaleX = canvas.width / rect.width;
  const scaleY = canvas.height / rect.height;

  const x = Math.round((e.clientX - rect.left) * scaleX);
  const y = Math.round((e.clientY - rect.top) * scaleY);

  const ctx = canvas.getContext("2d");
  const pixel = ctx.getImageData(x, y, 1, 1).data;

  const r = pixel[0], g = pixel[1], b = pixel[2], a = pixel[3];
  const hex = `#${r.toString(16).padStart(2,"0")}${g.toString(16).padStart(2,"0")}${b.toString(16).padStart(2,"0")}`;

  console.log(`RGBA: ${r}, ${g}, ${b}, ${a}`);
  console.log(`HEX: ${hex}`);
});

Critical gotcha: Always account for CSS scaling. If your canvas is 800px wide but displayed at 400px via CSS, clicking at pixel 200 in screen coordinates maps to pixel 400 in canvas coordinates. Forgetting this causes infuriating off-by-factor-of-two bugs.

6. Transparent Background Visualization

To show transparency like Photoshop's checkerboard:

function drawCheckerboard(ctx, width, height, size = 10) {
  for (let y = 0; y < height; y += size) {
    for (let x = 0; x < width; x += size) {
      ctx.fillStyle = ((x / size + y / size) % 2 === 0) ? "#cccccc" : "#ffffff";
      ctx.fillRect(x, y, size, size);
    }
  }
}

// Draw checkerboard first, then image on top
drawCheckerboard(ctx, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0);

7. Histogram Generation

function generateHistogram(canvas) {
  const ctx = canvas.getContext("2d");
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;

  const histogram = {
    r: new Array(256).fill(0),
    g: new Array(256).fill(0),
    b: new Array(256).fill(0),
    luma: new Array(256).fill(0),
  };

  for (let i = 0; i < data.length; i += 4) {
    if (data[i + 3] < 128) continue; // Skip transparent
    histogram.r[data[i]]++;
    histogram.g[data[i + 1]]++;
    histogram.b[data[i + 2]]++;
    const luma = Math.round(0.299 * data[i] + 0.587 * data[i+1] + 0.114 * data[i+2]);
    histogram.luma[luma]++;
  }

  return histogram;
}

Performance Considerations

getImageData is slow. It triggers a GPU-to-CPU transfer. For large images, do pixel operations in batches or use OffscreenCanvas in a Web Worker.

createImageBitmap is faster than new Image() for loading. Use it when processing multiple images.

willReadFrequently hint:

const ctx = canvas.getContext("2d", { willReadFrequently: true });

This tells the browser to optimize for frequent getImageData calls. Makes a meaningful difference on large images.

Canvas API is the most underestimated browser API. For image processing that doesn't require AI or server resources, it handles most use cases.

These techniques power the image tools at ToolZip — browser-based file utilities.

PDF Manipulation in the Browser With pdf-lib — A Practical Guide

toolzip — Sat, 26 Sep 2026 13:09:21 +0000

PDF manipulation used to mean server-side tools. pdf-lib changed that.

It's a pure JavaScript library that runs in Node.js and the browser. No native dependencies. No server calls. Here's what you can do with it.

Setup

npm install pdf-lib

Or from CDN:

<script src="https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js"></script>

1. Merge PDFs

import { PDFDocument } from "pdf-lib";

async function mergePDFs(files) {
  const merged = await PDFDocument.create();

  for (const file of files) {
    const bytes = await file.arrayBuffer();
    const pdf = await PDFDocument.load(bytes);
    const pageIndices = pdf.getPageIndices(); // [0, 1, 2, ...]
    const pages = await merged.copyPages(pdf, pageIndices);
    pages.forEach(page => merged.addPage(page));
  }

  const mergedBytes = await merged.save();
  return new Blob([mergedBytes], { type: "application/pdf" });
}

2. Split PDF (Extract Page Range)

async function splitPDF(file, startPage, endPage) {
  // startPage and endPage are 1-indexed (human-friendly)
  const bytes = await file.arrayBuffer();
  const sourcePdf = await PDFDocument.load(bytes);

  const newPdf = await PDFDocument.create();

  // Convert to 0-indexed array
  const pageIndices = [];
  for (let i = startPage - 1; i < endPage; i++) {
    pageIndices.push(i);
  }

  const pages = await newPdf.copyPages(sourcePdf, pageIndices);
  pages.forEach(page => newPdf.addPage(page));

  const bytes = await newPdf.save();
  return new Blob([bytes], { type: "application/pdf" });
}

3. Rotate Pages

import { PDFDocument, degrees } from "pdf-lib";

async function rotatePDF(file, rotation, pageIndices = null) {
  // rotation: 90, 180, 270
  const bytes = await file.arrayBuffer();
  const pdf = await PDFDocument.load(bytes);
  const pages = pdf.getPages();

  const targetPages = pageIndices 
    ? pageIndices.map(i => pages[i])
    : pages; // rotate all if no specific pages

  targetPages.forEach(page => {
    const currentRotation = page.getRotation().angle;
    page.setRotation(degrees((currentRotation + rotation) % 360));
  });

  const rotatedBytes = await pdf.save();
  return new Blob([rotatedBytes], { type: "application/pdf" });
}

4. Add Text Annotations

import { PDFDocument, StandardFonts, rgb } from "pdf-lib";

async function addWatermark(file, text) {
  const bytes = await file.arrayBuffer();
  const pdf = await PDFDocument.load(bytes);
  const font = await pdf.embedFont(StandardFonts.HelveticaBold);

  pdf.getPages().forEach(page => {
    const { width, height } = page.getSize();
    const fontSize = 60;
    const textWidth = font.widthOfTextAtSize(text, fontSize);

    page.drawText(text, {
      x: (width - textWidth) / 2,
      y: height / 2,
      size: fontSize,
      font,
      color: rgb(0.8, 0.8, 0.8), // light gray
      opacity: 0.3,
      rotate: degrees(45),
    });
  });

  const bytes = await pdf.save();
  return new Blob([bytes], { type: "application/pdf" });
}

5. Embed Images Into PDF

import { PDFDocument } from "pdf-lib";

async function addImageToPDF(pdfFile, imageFile, pageIndex = 0) {
  const pdfBytes = await pdfFile.arrayBuffer();
  const imageBytes = await imageFile.arrayBuffer();

  const pdf = await PDFDocument.load(pdfBytes);

  // Embed image (supports PNG and JPEG)
  let image;
  if (imageFile.type === "image/png") {
    image = await pdf.embedPng(imageBytes);
  } else {
    image = await pdf.embedJpg(imageBytes);
  }

  const page = pdf.getPage(pageIndex);
  const { width, height } = page.getSize();

  // Scale image to fit page width
  const scale = width / image.width;
  const scaledWidth = image.width * scale;
  const scaledHeight = image.height * scale;

  page.drawImage(image, {
    x: 0,
    y: height - scaledHeight,
    width: scaledWidth,
    height: scaledHeight,
  });

  const resultBytes = await pdf.save();
  return new Blob([resultBytes], { type: "application/pdf" });
}

6. Create PDF From Scratch

import { PDFDocument, StandardFonts, rgb } from "pdf-lib";

async function createPDF(content) {
  const pdf = await PDFDocument.create();
  const font = await pdf.embedFont(StandardFonts.Helvetica);

  const page = pdf.addPage([595, 842]); // A4 in points
  const { width, height } = page.getSize();

  page.drawText(content, {
    x: 50,
    y: height - 100,
    size: 12,
    font,
    color: rgb(0, 0, 0),
    lineHeight: 18,
    maxWidth: width - 100,
  });

  const bytes = await pdf.save();
  return new Blob([bytes], { type: "application/pdf" });
}

What pdf-lib Cannot Do

Be upfront about limitations:

Cannot render PDF to image. For that, use PDF.js (pdfjs-dist).

Cannot read existing text reliably. Text extraction from PDFs is notoriously unreliable. Use pdf.js or server-side tools for OCR.

Cannot parse form fields well. The library has basic AcroForm support, but complex interactive forms may not work as expected.

No font subsetting. If you embed a custom font, the entire font file is embedded. For CJK fonts (Chinese, Japanese, Korean), this means potentially 5-10MB per font.

Combining pdf-lib With PDF.js

For "read then modify" workflows, combine both libraries:

// pdf.js for reading/rendering
import * as pdfjs from "pdfjs-dist";

// pdf-lib for modifying
import { PDFDocument } from "pdf-lib";

// Render page to canvas with pdf.js
const pdfDoc = await pdfjs.getDocument(url).promise;
const page = await pdfDoc.getPage(1);
const viewport = page.getViewport({ scale: 1.5 });
await page.render({ canvasContext: ctx, viewport }).promise;

// Modify with pdf-lib
const doc = await PDFDocument.load(bytes);
// ... modifications

Performance Notes

For large PDFs (100+ pages), PDFDocument.load() can take several seconds. Consider:

// Show loading state
setLoading(true);
// Process in next tick to avoid blocking UI
await new Promise(resolve => setTimeout(resolve, 0));
const pdf = await PDFDocument.load(bytes);
setLoading(false);

For very large files, consider using a Web Worker to avoid blocking the main thread.

pdf-lib powers the PDF tools at ToolZip — PDF merge, split, rotate, and more, all client-side.

Running 52 Web Tools for Free on Vercel — A Real Cost Breakdown

toolzip — Fri, 25 Sep 2026 12:29:38 +0000

My web service has been running for months. It serves thousands of users. It processes images, PDFs, videos, and 3D files.

My monthly hosting bill: $0.

Here's the actual breakdown of how this is possible.

The Stack

Next.js — React framework with built-in API routes
Vercel — Hosting and deployment
Vercel KV — Redis-based key-value store (for blog posts)
Client-side processing — The key to keeping costs at zero

Why Client-Side Processing Is the Real Answer

The reason most "free tier" projects eventually hit limits is that they do heavy processing on the server. Image resizing, video conversion, file format changes — these eat CPU time and bandwidth.

I moved all of that to the browser.

When a user compresses an image, the processing happens on their device. My server never sees the file. This means:

No CPU costs
No bandwidth costs for file transfer
No storage costs
Better privacy for users

Vercel Free Tier — What You Actually Get

Resource	Free Limit
Bandwidth	100 GB/month
Serverless Function Execution	100 GB-hours/month
Build minutes	6,000/month
Custom domains	Unlimited
HTTPS	Automatic
Preview deployments	Unlimited

For a tool-based site where actual data processing happens client-side, 100GB/month is plenty. You're only serving HTML, CSS, JavaScript — not processing files.

The Additional Services I Use (All Free)

Vercel KV (Redis):

Free tier: 30,000 requests/month, 256MB storage
I use it to store blog posts
Monthly cost: $0

Google Analytics:

Free, always
Replaced by Vercel Analytics for some metrics

Cloudflare (DNS only):

Free DNS management
Handles domain routing

The One Actual Cost

Domain: ~$15/year ($1.25/month).

That's it.

The Architecture That Makes This Work

User's browser
    ↓ (downloads JS/CSS/HTML once)
Vercel CDN (static files)
    ↓ (rare: API calls for blog content)
Vercel Serverless Functions
    ↓
Vercel KV (Redis)

File processing: entirely in browser
No file ever touches the server

What Serverless Functions Handle

Almost nothing file-related. My serverless functions only handle:

Blog post CRUD (reads/writes to Vercel KV)
Admin authentication (cookie-based)

That's it. For a site doing image compression, PDF editing, video conversion — zero server load from actual tool usage.

When You'll Hit Limits

The free tier will stop working for you when:

Bandwidth: You start serving large files from your server. If you're downloading 50MB files from your CDN frequently, 100GB goes fast.

Function execution: You add heavy server-side processing. Even moderate image processing at scale will exhaust 100 GB-hours/month quickly.

KV storage: You store a lot of data. 256MB is enough for text content but not file storage.

When to Upgrade

I'd upgrade when:

Monthly active users exceed ~10,000 with server-side processing
I add features that require server computation
Revenue justifies the $20/month Pro plan

The Honest Limitations

Commercial use restrictions: Vercel's free tier has commercial use restrictions. If you're generating revenue, check their terms carefully.

No persistent connections: Serverless functions can't maintain WebSocket connections or long-running processes.

Cold starts: Serverless functions sleep when not in use. First request after idle period has latency.

Region limits: Free tier has limited region options for function execution.

What I'd Do Differently

One thing I'd do from day one: set up spending alerts on any pay-as-you-go services. Even if you're on free tiers, some services (like certain databases) will charge for overages without warning.

The Broader Point

The combination of:

Client-side processing (no server load from tools)
Vercel free tier (generous for static + serverless)
Free-tier databases (Vercel KV, Neon, Supabase)

...means you can build and run a serious web service for essentially free, at least until you hit meaningful scale.

For side projects and early-stage products, this removes a significant barrier. You don't need to worry about server costs until you have users — and by then, you can afford to pay.

This is the architecture behind ToolZip — 52 browser-based file tools running on Vercel's free tier.

WebAssembly in Practice — What It Is, When to Use It, and When Not To

toolzip — Thu, 24 Sep 2026 12:00:47 +0000

WebAssembly gets talked about like it's magic. It's not. It's a specific tool with specific use cases. Here's the honest picture.

What WebAssembly Actually Is

WebAssembly (WASM) is a binary instruction format that runs in a sandboxed VM in the browser (and other environments). It's not a language — it's a compilation target.

You write code in C, C++, Rust, Go, or other languages. You compile it to WASM. The browser runs the WASM at near-native speed.

C / C++ / Rust / Go
        ↓ compile
   WebAssembly (.wasm)
        ↓ load
   Browser (V8/SpiderMonkey)
        ↓ run
   Near-native performance

What "Near-Native Speed" Actually Means

WASM runs at roughly 70-90% of native speed for compute-intensive tasks. That's the marketing pitch.

The reality is more nuanced:

WASM is faster than JavaScript for:

Tight numerical loops
Heavy math operations
Image/audio/video processing
Cryptography

WASM is NOT faster than JavaScript for:

DOM manipulation
Calling JavaScript APIs
Memory allocation patterns that don't match WASM's linear memory model
Tasks where JS JIT has already optimized well

The bottleneck is often the bridge. Every time WASM calls a JavaScript function or vice versa, there's an overhead cost. For algorithms that frequently cross the JS/WASM boundary, this can eliminate the performance advantage.

Real-World Use Cases

FFmpeg.wasm — Video Processing

The canonical example. FFmpeg is 500,000+ lines of C, compiled to WASM.

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

const ffmpeg = new FFmpeg();
await ffmpeg.load(); // ~30MB download, cached after first load

await ffmpeg.writeFile("input.mp4", await fetchFile(videoFile));
await ffmpeg.exec(["-i", "input.mp4", "-crf", "28", "output.mp4"]);
const result = await ffmpeg.readFile("output.mp4");

Performance: 3-5x slower than native FFmpeg on the same hardware. For a 100MB video, expect 2-5 minutes in browser vs 20-40 seconds server-side. Acceptable for privacy-sensitive use cases.

SQLite in the Browser

import initSqlJs from "sql.js";

const SQL = await initSqlJs({
  locateFile: file => `https://cdn.jsdelivr.net/npm/sql.js@1.10.2/dist/${file}`
});

const db = new SQL.Database();
db.run("CREATE TABLE users (id INTEGER, name TEXT)");
db.run("INSERT INTO users VALUES (1, 'Alice'), (2, 'Bob')");

const result = db.exec("SELECT * FROM users");

Useful for: local-first apps, offline data, processing SQLite database files users upload.

Image Codecs

Encoding AVIF, JPEG XL, and other modern formats requires codec libraries that aren't in browsers yet. WASM fills the gap.

// @jsquash/avif uses WASM to encode AVIF
import encode from "@jsquash/avif/encode";

const avifData = await encode(imageData, { quality: 70 });

PDF Parsing

Libraries like pdf.js use WASM for performance-critical parsing.

The SharedArrayBuffer Requirement

Multithreaded WASM (using Web Workers + shared memory) requires:

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

Without these headers, SharedArrayBuffer is unavailable, and many WASM libraries fall back to single-threaded mode (or break entirely).

Setting headers in Next.js:

// next.config.js
module.exports = {
  async headers() {
    return [{
      source: "/(.*)",
      headers: [
        { key: "Cross-Origin-Opener-Policy", value: "same-origin" },
        { key: "Cross-Origin-Embedder-Policy", value: "require-corp" },
      ],
    }];
  },
};

This breaks some third-party scripts and iframes. Audit your dependencies.

Loading WASM — Size and Caching

WASM files can be large. FFmpeg.wasm core: ~30MB. SQLite: ~1MB. Codec libraries: 1-5MB.

Strategies:

Load lazily (only when user needs the feature)
Show progress during load
Cache aggressively (WASM files rarely change)
Use CDN with long cache headers

// Show loading state
const [wasmLoaded, setWasmLoaded] = useState(false);

// Load only when needed
const handleProcess = async () => {
  if (!wasmLoaded) {
    await ffmpeg.load();
    setWasmLoaded(true);
  }
  // ... process
};

When NOT to Use WebAssembly

When JavaScript is fast enough. JSON parsing, DOM manipulation, most business logic — JS JIT handles these well.

When the WASM/JS bridge overhead dominates. If your algorithm makes thousands of small calls between WASM and JS, the overhead compounds.

When bundle size matters more than performance. A 5MB WASM file for a 10ms operation is not worth it.

When a pure JS library exists and performs acceptably. pdf-lib (pure JS) is slower than a WASM-based PDF library but avoids the complexity.

The Rust + WASM Path

If you're writing a new WASM module (not using existing compiled libraries), Rust has the best WASM toolchain.

// src/lib.rs
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u32 {
    match n {
        0 => 0,
        1 => 1,
        _ => fibonacci(n - 1) + fibonacci(n - 2),
    }
}

wasm-pack build --target web

import init, { fibonacci } from "./pkg/my_module.js";

await init();
console.log(fibonacci(40)); // Fast!

Summary

Use Case	Use WASM?
Video processing	Yes
Audio processing	Yes
Image codec encoding	Yes
Heavy math/simulation	Yes
SQLite in browser	Yes
JSON parsing	No (JS is fine)
DOM manipulation	No
Simple calculations	No
Business logic	Probably not

WASM is a powerful tool for a specific class of problems — existing native code that needs to run in the browser, or compute-intensive algorithms where JS JIT isn't enough. For most web application logic, JavaScript is the right choice.

FFmpeg.wasm powers the video and audio tools at ToolZip.

The Complete Guide to File Handling in the Browser

toolzip — Wed, 23 Sep 2026 03:15:51 +0000

Building a browser-based file tool means understanding the browser's file APIs. There are more of them than you'd expect, and they interop in non-obvious ways.

The File Object

A File object is what you get from <input type="file"> or a drag-and-drop event. It extends Blob.

const file = input.files[0];

console.log(file.name);     // "photo.jpg"
console.log(file.size);     // bytes: 2457600
console.log(file.type);     // "image/jpeg"
console.log(file.lastModified); // timestamp

Reading File Content

You have four ways to read a file. Each returns a different format.

As Text

const text = await file.text();
// Use for: JSON, CSV, markdown, source code

As ArrayBuffer

const buffer = await file.arrayBuffer();
// Use for: binary files, passing to WASM libraries
// ArrayBuffer is a fixed-length binary buffer

As Data URL (Base64)

// Old way (callback-based)
const reader = new FileReader();
reader.onload = (e) => {
  const dataURL = e.target.result;
  // "data:image/jpeg;base64,/9j/4AAQSkZJRg..."
};
reader.readAsDataURL(file);

// For use as image src, email attachments

As Object URL

const url = URL.createObjectURL(file);
// "blob:https://example.com/a1b2c3d4..."

// Use as src for <img>, <video>, <audio>
img.src = url;

// IMPORTANT: Revoke when done to free memory
URL.revokeObjectURL(url);

Drag and Drop

const dropZone = document.getElementById("drop-zone");

dropZone.addEventListener("dragover", (e) => {
  e.preventDefault(); // Required to allow drop
  dropZone.classList.add("active");
});

dropZone.addEventListener("dragleave", () => {
  dropZone.classList.remove("active");
});

dropZone.addEventListener("drop", (e) => {
  e.preventDefault();
  dropZone.classList.remove("active");

  const files = Array.from(e.dataTransfer.files);
  handleFiles(files);
});

File Type Validation

Don't rely on file.type alone — it's derived from the filename extension, which can be wrong or missing.

function validateFile(file, allowedTypes) {
  // Check MIME type
  if (!allowedTypes.includes(file.type)) {
    return false;
  }

  // Also check extension
  const ext = file.name.split(".").pop().toLowerCase();
  const allowedExts = {
    "image/jpeg": ["jpg", "jpeg"],
    "image/png": ["png"],
    "image/webp": ["webp"],
    "application/pdf": ["pdf"],
  };

  return allowedExts[file.type]?.includes(ext) ?? false;
}

For true validation, read the file's magic bytes:

async function isPDF(file) {
  const buffer = await file.slice(0, 4).arrayBuffer();
  const bytes = new Uint8Array(buffer);
  // PDF magic bytes: %PDF = 0x25 0x50 0x44 0x46
  return bytes[0] === 0x25 && bytes[1] === 0x50 
      && bytes[2] === 0x44 && bytes[3] === 0x46;
}

Blob — The Output Format

When you've processed a file and want to offer it for download, you'll create a Blob.

// Create Blob from string
const blob = new Blob(["Hello, world!"], { type: "text/plain" });

// Create Blob from ArrayBuffer (e.g., from WASM processing)
const blob = new Blob([arrayBuffer], { type: "video/mp4" });

// Create Blob from canvas
canvas.toBlob((blob) => {
  // blob is ready
}, "image/jpeg", 0.85);

Triggering Downloads

function downloadBlob(blob, filename) {
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = filename;

  // Must append to document for Firefox
  document.body.appendChild(a);
  a.click();

  // Cleanup
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

Memory Management

This is where most file tool implementations leak memory.

// Every createObjectURL needs a matching revokeObjectURL
const url = URL.createObjectURL(blob);
img.src = url;

img.onload = () => {
  // Revoke AFTER the image has loaded
  URL.revokeObjectURL(url);
};

// Bad: revoke before load completes
URL.revokeObjectURL(url); // ❌ image might not display
img.src = url;

For long-lived URLs (preview images that stay on screen), track them and revoke on component unmount:

// React hook
function useObjectURL(blob) {
  const [url, setUrl] = useState(null);

  useEffect(() => {
    if (!blob) return;
    const objectURL = URL.createObjectURL(blob);
    setUrl(objectURL);

    return () => URL.revokeObjectURL(objectURL); // cleanup
  }, [blob]);

  return url;
}

Large File Processing

For files over ~100MB, don't load the whole thing into memory at once.

// Process in chunks
async function processLargeFile(file, chunkSize = 1024 * 1024) { // 1MB chunks
  let offset = 0;

  while (offset < file.size) {
    const chunk = file.slice(offset, offset + chunkSize);
    const buffer = await chunk.arrayBuffer();

    await processChunk(buffer);
    offset += chunkSize;

    // Update progress
    const progress = Math.min(100, Math.round((offset / file.size) * 100));
    setProgress(progress);
  }
}

File System Access API (Modern Browsers)

Chrome 86+ supports direct filesystem access:

// Pick a file
const [fileHandle] = await window.showOpenFilePicker({
  types: [{ 
    description: "Images", 
    accept: { "image/*": [".jpg", ".png", ".webp"] } 
  }],
});
const file = await fileHandle.getFile();

// Write back to the same file
const writable = await fileHandle.createWritable();
await writable.write(processedBlob);
await writable.close();

This is powerful for editors — users can open, edit, and save without downloading a new file.

React Pattern for File Tools

function FileTool() {
  const [file, setFile] = useState(null);
  const [result, setResult] = useState(null);
  const inputRef = useRef(null);

  const onDrop = useCallback((e) => {
    e.preventDefault();
    const dropped = e.dataTransfer.files[0];
    if (dropped) setFile(dropped);
  }, []);

  const process = async () => {
    if (!file) return;
    const output = await processFile(file);
    setResult(output);
  };

  // Cleanup URLs on unmount
  useEffect(() => {
    return () => {
      if (result?.url) URL.revokeObjectURL(result.url);
    };
  }, [result]);

  return (
    <div
      onDrop={onDrop}
      onDragOver={(e) => e.preventDefault()}
    >
      {!file ? (
        <div onClick={() => inputRef.current?.click()}>
          Drop file here or click to select
          <input
            ref={inputRef}
            type="file"
            style={{ display: "none" }}
            onChange={(e) => setFile(e.target.files[0])}
          />
        </div>
      ) : (
        <>
          <div>{file.name} ({formatBytes(file.size)})</div>
          <button onClick={process}>Process</button>
        </>
      )}

      {result && (
        <a href={result.url} download={result.name}>
          Download
        </a>
      )}
    </div>
  );
}

These patterns are used throughout ToolZip — 52 browser-based file processing tools.

Next.js SEO That Actually Works — Beyond Meta Tags

toolzip — Tue, 22 Sep 2026 02:45:39 +0000

Most Next.js SEO guides stop at meta tags. That's table stakes. Here's what actually moves rankings.

1. Dynamic Sitemap

A static sitemap.xml misses dynamically generated pages. Generate it at build time from your data.

// app/sitemap.ts
import { MetadataRoute } from "next";

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const baseUrl = "https://yourdomain.com";

  // Static pages
  const staticPages = [
    { url: baseUrl, priority: 1.0 },
    { url: `${baseUrl}/tools`, priority: 0.9 },
    { url: `${baseUrl}/blog`, priority: 0.8 },
  ];

  // Dynamic tool pages
  const tools = await getToolsFromRegistry();
  const toolPages = tools.map(tool => ({
    url: `${baseUrl}/tools/${tool.slug}`,
    lastModified: new Date(),
    priority: 0.85,
  }));

  // Dynamic blog posts
  const posts = await getBlogPosts();
  const blogPages = posts.map(post => ({
    url: `${baseUrl}/blog/${post.slug}`,
    lastModified: new Date(post.updatedAt),
    priority: 0.7,
  }));

  return [...staticPages, ...toolPages, ...blogPages];
}

2. JSON-LD Structured Data

Meta tags tell search engines what a page is about. Structured data tells them the type of content, enabling rich results (FAQ dropdowns, breadcrumbs, how-to steps in search results).

// For a FAQ page or tool page with FAQs
function FAQStructuredData({ faqs }: { faqs: Array<{q: string, a: string}> }) {
  const schema = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": faqs.map(faq => ({
      "@type": "Question",
      "name": faq.q,
      "acceptedAnswer": {
        "@type": "Answer",
        "text": faq.a
      }
    }))
  };

  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
    />
  );
}

// For a WebApplication (tool page)
const toolSchema = {
  "@context": "https://schema.org",
  "@type": "WebApplication",
  "name": "Image Compressor",
  "applicationCategory": "UtilityApplication",
  "operatingSystem": "Web Browser",
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "USD"
  },
  "description": "Compress images in your browser. No upload required."
};

// For a blog post
const articleSchema = {
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": post.title,
  "author": {
    "@type": "Person",
    "name": "Author Name"
  },
  "datePublished": post.publishedAt,
  "dateModified": post.updatedAt,
};

3. Metadata API (Next.js 13+)

// app/tools/[slug]/page.tsx
import { Metadata } from "next";

export async function generateMetadata({ 
  params 
}: { 
  params: { slug: string } 
}): Promise<Metadata> {
  const tool = await getTool(params.slug);

  return {
    title: `${tool.name} — Free Online Tool`,
    description: tool.description,
    keywords: tool.keywords,
    openGraph: {
      title: tool.name,
      description: tool.description,
      type: "website",
      url: `https://yourdomain.com/tools/${tool.slug}`,
      images: [{
        url: `https://yourdomain.com/og/${tool.slug}.png`,
        width: 1200,
        height: 630,
      }],
    },
    twitter: {
      card: "summary_large_image",
      title: tool.name,
      description: tool.description,
    },
    alternates: {
      canonical: `https://yourdomain.com/tools/${tool.slug}`,
    },
  };
}

4. Open Graph Images

Auto-generated OG images dramatically improve click-through rates from social sharing.

// app/og/[slug]/route.tsx
import { ImageResponse } from "next/og";

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const title = searchParams.get("title") || "Tool";

  return new ImageResponse(
    (
      <div style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        width: "100%",
        height: "100%",
        background: "#0f172a",
        color: "#ffffff",
        fontFamily: "sans-serif",
      }}>
        <div style={{ fontSize: 64, fontWeight: 700 }}>{title}</div>
        <div style={{ fontSize: 28, color: "#94a3b8", marginTop: 16 }}>
          Free · No Upload · Browser-Based
        </div>
      </div>
    ),
    { width: 1200, height: 630 }
  );
}

5. robots.txt

// app/robots.ts
import { MetadataRoute } from "next";

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: "*",
      allow: "/",
      disallow: ["/admin/", "/api/"],
    },
    sitemap: "https://yourdomain.com/sitemap.xml",
  };
}

6. Core Web Vitals

Google uses CWV as a ranking signal. Key issues in Next.js apps:

LCP (Largest Contentful Paint):

// Prioritize hero images
<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority // Preloads — use only for above-fold images
/>

CLS (Cumulative Layout Shift):
Always specify image dimensions. Dynamic content should have reserved space.

// Bad — causes CLS when image loads
<img src="/image.jpg" />

// Good — dimensions reserved
<Image src="/image.jpg" width={800} height={400} alt="..." />

INP (Interaction to Next Paint):
Heavy client-side processing blocks the main thread. Use Web Workers for intensive operations.

7. Hreflang for Multilingual Sites

If you serve content in multiple languages:

export async function generateMetadata(): Promise<Metadata> {
  return {
    alternates: {
      languages: {
        "en": "https://yourdomain.com/en/tools/image-compress",
        "ko": "https://yourdomain.com/ko/tools/image-compress",
      },
    },
  };
}

8. Canonical URLs

Prevent duplicate content penalties from query parameters:

// Always set canonical explicitly
alternates: {
  canonical: `https://yourdomain.com/tools/${slug}`,
  // Without this, ?ref=twitter etc. create duplicate pages
}

What Actually Made a Difference

After running a tool site with 79 indexed pages:

JSON-LD FAQ markup — Showed up as FAQ rich results in Google within 2 weeks of submission
Dynamic sitemap — Tool pages got indexed 3x faster after submitting
Canonical URLs — Eliminated duplicate indexing issues from URL parameters
Page titles with keywords — "Image Compressor Free Online" outperforms "Image Compressor"

Meta description doesn't affect ranking directly but affects click-through rate. Write for humans, not bots.

These techniques are in production at ToolZip — 79 indexed pages across tools and blog content.