I built a free browser-based character counter — here's what I learned

Harsha Dev — Mon, 22 Jun 2026 05:54:52 +0000

I've been building WebToolSync —
a collection of free, privacy-focused browser tools that run entirely
client-side. No uploads, no servers, no tracking.

One of the first tools I built was a character counter. Sounds simple,
right? It mostly is — but I ran into a few things worth sharing.

Why browser-only?

Most online tools send your text to a server to process it. That's fine
for public content, but if you're pasting a client email, a private document,
or sensitive copy — you probably don't want that leaving your machine.

Browser-only means the text never leaves your tab. Zero network requests
after the page loads.

The tricky parts

Counting "characters" is not always counting characters

JavaScript's .length property counts UTF-16 code units, not Unicode
code points. Emojis like 🔥 are actually 2 units long in JS:

"🔥".length // → 2, not 1

For most use cases (Twitter limits, meta descriptions, SMS) this doesn't
matter. But it's worth knowing if you're building something that needs
to be precise.

Real-time counting needs debouncing on large inputs

If someone pastes 50,000 words, recalculating on every keystroke is
wasteful. A simple debounce of 100-200ms keeps it snappy:

let timer;
textarea.addEventListener('input', () => {
  clearTimeout(timer);
  timer = setTimeout(updateCount, 150);
});

"With spaces" vs "without spaces" matters more than you'd think

Copywriters, students submitting essays, and social media managers all
think about character limits differently. Adding both counts (with and
without spaces) doubled the usefulness of the tool overnight.

Platform character limits I added as a reference

Platform	Limit
Twitter/X post	280
Instagram caption	2,200
LinkedIn post	3,000
YouTube title	100
Meta description	160
SMS (single)	160

What's next

Still adding tools — currently have 25 including a JSON formatter,
percentage calculator, image compressor, and PDF utilities.

If you've built browser-only tools, I'd love to hear what edge cases
you ran into. Drop them in the comments.

👉Try the character counter here(https://webtoolsync.com/text-tools/character-counter) link

How I Built a 25-Tool Next.js Micro-SaaS in 24 Hours (and let an Hermes AI Agent handle my SEO)

Harsha Dev — Mon, 11 May 2026 22:17:08 +0000

Hey DEV community! 👋

As a developer and digital marketer, I got sick of using random, ad-stuffed websites every time I needed to quickly format JSON, calculate a margin, or compress an image. Even worse, I hated the idea of uploading sensitive PDFs or client code to third-party servers just to split a page or convert a format.

So, I decided to build my own privacy-first solution. In just 24 hours, I built and launched WebToolSync.

It's a free suite of 25+ browser utilities designed for developers, creators, and operators.

🛠️ The Tech Stack
I wanted this to be lightning-fast and incredibly secure, so here is the architecture I went with:

Frontend/Backend: Next.js (App Router)

Hosting: Hostinger VPS (Ubuntu)

Process Manager: PM2 (to keep the Node server alive)

Reverse Proxy: Nginx

Security: Certbot / Let's Encrypt for auto-renewing SSL

The "Secret Sauce": Client-Side Processing
The biggest feature of WebToolSync isn't what it does, but where it does it.

For the Image Converters (JPG to PNG, Compressors) and the PDF Tools (Split, Merge, Rotate), everything happens locally inside the user's browser. By utilizing modern browser APIs and client-side processing, zero files are ever uploaded to a server. This means zero latency, no file size limits, and 100% data privacy.

The Wild Part: Delegating SEO to an Autonomous Agent
Building 25 tools in a day is fun. Writing 800 words of SEO-optimized content and FAQ schema for 25 different tool pages? Not fun.

Instead of doing it manually, I spun up Hermes-Agent (an autonomous local LLM) directly on my VPS via SSH. I gave it access to my Next.js codebase and literally gave it the prompt: "Rewrite my SeoContent.tsx component to include 500+ words of educational content and Schema markup for all 25 tools so it ranks on Google."

I sat back and watched the terminal as the AI navigated my directories, read my Next.js components, realized it made a truncation error, automatically deployed a sub-agent to fix its own mistake, and successfully rebuilt my codebase.

Try It Out
I'm building this entirely in public. You can check out the live site here:
👉 WebToolSync.com

I also recorded a full breakdown of how I built the SaaS without writing traditional code on my YouTube channel if you want to see the exact workflow!

I'd love to hear your feedback on the UI/UX. What tool should I add to the platform next? Let me know in the comments!

DEV Community: Harsha Dev

I built a free browser-based character counter — here's what I learned

How I Built a 25-Tool Next.js Micro-SaaS in 24 Hours (and let an Hermes AI Agent handle my SEO)