varkido

Posted on Sep 24

How I Built 170+ Free Online Tools That Run Entirely in the Browser

#showdev #webdev #javascript #php

The Problem I Was Trying to Solve

Every time I needed a quick online tool — whether it was formatting JSON, compressing an image, or generating meta tags — I had to deal with the same frustrating experience:

Sign up with an email I don't want to give
Upload my files to a server I don't trust
Get hit with ads and paywalls
Deal with slow, cluttered interfaces

I'm a developer. I know these tools can be built to run entirely in the browser. So I built them myself.

What is Varkido?

Varkido is a collection of 170+ free online tools for developers, SEO specialists, and designers. Every tool runs entirely in your browser — no uploads, no server processing, no signup.

The three principles behind it:

Privacy first — Your files never leave your device
Zero friction — No signup, no email, no cookies required
Actually free — No premium tiers, no ads, no limits

What Tools Are Included?

The collection spans several categories:

Image Tools (20+)

Image compressor (PNG, JPG, WebP)
Image blur with region selection
Pixelate tool with adjustable block size
Color picker with eyedropper
Palette generator
SVG viewer and optimizer
Sprite generator

SEO Tools (30+)

Schema markup generator
Meta tag generator
SERP snippet preview
Open Graph generator
FAQ schema builder
Robots.txt generator

Developer Tools (40+)

JSON formatter and validator
Regex tester
Diff checker
Base64 encoder/decoder
URL encoder/decoder
HTML/CSS/JS minifier
JWT decoder

Text & Data Tools (30+)

Word and character counter
Case converter
Text diff
CSV to JSON converter
Markdown preview

Generators (20+)

Password generator
QR code generator
UUID generator
Lorem ipsum generator

Plus more: security tools, time/date utilities, and conversion tools.

The Tech Stack

I intentionally kept things simple:

Backend: Pure PHP 8.2, no frameworks, no Composer
Frontend: Vanilla JavaScript, Canvas API, no React/Vue
Hosting: Standard shared hosting
CDN: Cloudflare (free tier)
Caching: Native PHP + Cloudflare

Why no frameworks? Because:

Faster page loads (no framework overhead)
Easier to maintain (no dependency updates)
Lower hosting cost (runs anywhere PHP runs)
Better for learning (you understand what's happening)

For image processing, I use the Canvas API directly. For file parsing, I use native browser APIs like FileReader, TextDecoder, and Blob.

The Client-Side Approach

The most important design decision was making everything client-side.

Here's the essential pattern for image processing:

const reader = new FileReader();
reader.onload = (e) => {
  const img = new Image();
  img.onload = () => {
    const canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);

    ctx.filter = 'blur(10px)';
    ctx.drawImage(canvas, 0, 0);

    canvas.toBlob((blob) => {
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'result.png';
      a.click();
    });
  };
  img.src = e.target.result;
};
reader.readAsDataURL(file);

No server. No upload. No privacy concerns.

SEO Considerations

From day one, I knew SEO would be critical for a tool site. So I set up:

Sitemap.xml with all 185 pages (dynamic)
Schema.org markup on every page
Open Graph images generated dynamically per tool
Proper meta tags on every page
Fast page load (98/100 PageSpeed on mobile, 100/100 on desktop)

The result: within days of launch, the site appeared in Google AI Overviews for relevant queries — before even ranking in traditional search results.

What I Learned

1. Client-side is more powerful than people think.
The Canvas API, File API, and modern JS can handle complex tasks that people assume require a server.

2. Simplicity wins for maintenance.
No frameworks means no broken dependencies. The site has been running for months without needing updates.

3. SEO is not optional for tool sites.
You can build the best tool in the world, but if no one finds it, it doesn't matter.

4. Privacy is a feature.
Users genuinely care about not uploading their files to random servers. Leading with this has been a differentiator.

5. Slow and steady growth is fine.
Product Hunt launches, Reddit posts, and organic search all contribute. No single channel is a silver bullet.

Try It

If you find any of these tools useful, Varkido is available at:

👉 varkido.com

170+ free tools, all running in your browser.

I'd love to hear your feedback — what tools would you like to see added? Drop a comment below!

If you found this useful, consider giving it a ❤️ or 🦄. It helps other developers discover the site.

DEV Community