Web Dev Tools
Categories

Image Editing & Cropping

Crop, rotate, filter, and edit images in the browser or on the server.

Cropping in the browser

  • ★ react-easy-crop — small, touch-friendly, the default. Returns crop coords; you composite server-side or with canvas.
  • react-image-crop — long-running classic.
  • cropperjs + react-cropper — feature-rich; rotation, scaling, aspect ratios.
  • filerobot-image-editor — full Photoshop-lite editor in the browser; free OSS, paid pro features.
  • doka.io / Pintura — paid commercial editor.

Drawing / image manipulation in the browser

  • Konva + react-konva — 2D canvas framework; build a custom editor.
  • Fabric.js — older, ergonomic for Photoshop-like apps.
  • TUI Image Editor — drop-in editor with filters, text, shapes.

Compression / resizing client-side (before upload)

  • ★ browser-image-compression — small, fast, popular.
  • compressorjs — alternative; canvas-based.
  • pica — high-quality canvas resizer.
  • squoosh-cli / @squoosh/lib — Google's WASM-based codecs (mozjpeg, oxipng, webp, avif).
  • @jsquash/avif, @jsquash/webp — individual WASM codecs.

Server-side image processing

  • ★ sharp — Node binding to libvips. The workhorse for any Node image work — resize, format, composite, watermark, animated GIF/WebP.
  • @cf-wasm/photon — Rust-WASM image lib that runs on Cloudflare Workers (where sharp's native binary won't run).
  • wasm-vips — libvips compiled to WASM; runs anywhere.
  • Jimp — pure JS; slow but no native deps.

Image transformation as a service

  • See File Uploads: Cloudinary, ImageKit, imgproxy, Bunny Optimizer, Cloudflare Images, <Next/Image>.

Background removal / AI editing

  • @imgly/background-removal — runs in the browser via WebGPU.
  • Replicate / Fal.ai — hosted AI image APIs (rembg, GFPGAN, real-ESRGAN, SDXL).
  • @huggingface/inference — wraps Hugging Face hosted models.
  • remove.bg API — single-purpose, paid.

Avatar / face

  • @dicebear/core — generative avatars from a seed; tons of styles.
  • gravatar-url — email → Gravatar URL.
  • Boring Avatars — lovely SVG generative avatars.

Pick this if…

  • Default in-browser crop: react-easy-crop.
  • Full editor inline: filerobot or TUI Image Editor.
  • Compress before upload: browser-image-compression.
  • Server-side resize / convert: sharp (Node) or @cf-wasm/photon (Workers).
  • Background removal client-side: @imgly/background-removal.
  • Generative avatars: Boring Avatars or DiceBear.

Previous

Command Palettes & Keybindings

Next

QR Codes & Barcodes

On this page