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

#javascript #webdev #beginners #tools

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