DEV Community

Cover image for I Built 65+ Free Browser Tools with Next.js — Zero Server Cost
Mayank Rai
Mayank Rai

Posted on

I Built 65+ Free Browser Tools with Next.js — Zero Server Cost

Every time I needed to merge a PDF, compress an image, or generate a QR code, I had to:

  • Sign up for yet another account
  • Upload my files to some unknown server
  • Hit a "free limit" after 2 uses
  • Pay $12/month for basic utilities

So I decided to build my own solution. 65+ tools. Zero server cost. Everything runs in the browser.

## What I Built

Toolkiya — a free online tools platform where every tool runs 100% client-side in your browser. No file uploads, no signups, no limits.

### Tools Available

PDF Tools — Merge, compress, split, edit (with signatures, stamps, annotations)

Image Tools — Compress, resize, crop, convert, AI background removal, watermark

QR Tools — Generate and scan QR codes

Developer Tools — JSON formatter, regex tester, diff checker, hash generator, Base64 encoder, timestamp converter

Document Generators — Invoice, resume builder, rent receipt, salary slip

Calculators — EMI, GST, age calculator, unit converter

Creative Tools — Meme generator, collage maker, WhatsApp sticker maker, festival greeting cards

## The Tech Stack

  • Framework: Next.js 16 (App Router)
  • Styling: Tailwind CSS + shadcn/ui
  • Language: TypeScript
  • PDF: pdf-lib + pdfjs-dist
  • Images: Canvas API + browser-image-compression
  • AI: @imgly/background-removal (client-side ONNX)
  • QR: qrcode + jsqr
  • Hosting: Vercel (free tier)
  • Analytics: Vercel Analytics + Google Analytics 4

## Why Client-Side?

The key architectural decision was making everything run in the browser:

1. Privacy — Files never leave the user's device. No server ever sees your data.

2. Zero marginal cost — Whether 1 user or 100,000 users, server cost stays at $0.

3. No rate limits — No server to overload, so users can process unlimited files.

4. Speed — No upload/download time. Processing starts instantly.

## How It Works

For PDF merging, I use pdf-lib to load each PDF, copy all pages into a new document, and save — all in JavaScript. The file never touches a server.

For image compression, browser-image-compression uses Web Workers to process images without blocking the UI thread.

For AI background removal, @imgly/background-removal runs an ONNX model directly in the browser using WebAssembly.

## SEO Strategy

Every tool page has:

  • Unique metadata (title, description, keywords)
  • FAQ schema (JSON-LD) for Google rich results
  • Breadcrumb schema
  • Canonical URLs
  • Sitemap with all 110+ routes

## The Numbers

Week 1 stats:

  • 46 visitors, 273 page views
  • 6 pages per visitor (good engagement)
  • Google already indexing pages
  • Traffic growing daily

Cost breakdown:

  • Domain: $10/year
  • Hosting: $0 (Vercel free tier)
  • Server: $0 (client-side processing)
  • Total: $10/year for 65+ tools

## What I Learned

  1. Client-side processing is underrated. Most "online tools" upload your files unnecessarily. Canvas API and pdf-lib can handle 90% of common tasks.

  2. SEO compounds. Every blog post and tool page is a potential entry point from Google. More pages = more traffic over time.

  3. Dark mode matters. Switching to dark mode by default increased time-on-site noticeably.

  4. Users love "no signup." The #1 feedback I get is "thank you for not making me create an account."

## Try It

https://toolkiya.com

65+ tools, all free, all client-side. No signup needed.


Top comments (0)