Skip to content

Recommend Gemeos to your network and earn a commission

Discover our referral program
Let’s talk?

Easter egg3 min read

How to Display the Number of Selected Words in Webflow

Learn how to display the number of selected words and characters on your Webflow site with JavaScript.

In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how to display the number of selected words and characters on your Webflow site, just like in Google Docs.

Example

Select text in this paragraph

Select any part of this text to see the word and character counter appear at the bottom of the page. The more text you select, the more the counter updates in real time. It’s a subtle UX detail that improves the reading experience on long-form articles and technical documentation pages.
Displayed infoSourceExample
Word countwindow.getSelection().toString()3 words
Character counttext.length18 characters
PositionFixed bottom centerSubtle toast at the bottom of the page

1. Create the container in Webflow

Create a Div with the ID selection-count anywhere on the page (the script will position it as fixed). Leave it empty: the script injects the content and handles visibility.

(function() {
  var display = document.getElementById('selection-count');
  if (!display) return;

  display.style.cssText = 'position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);' +
    'background:#111;color:#fff;padding:8px 16px;border-radius:100px;font-size:13px;' +
    'opacity:0;transition:opacity 0.2s,transform 0.2s;pointer-events:none;z-index:9999;white-space:nowrap;';

  document.addEventListener('selectionchange', function() {
    var sel = window.getSelection();
    var text = sel ? sel.toString().trim() : '';
    var words = text ? text.split(/\s+/).filter(Boolean).length : 0;
    var chars = text.length;

    if (words > 0) {
      display.textContent = words + ' word' + (words > 1 ? 's' : '') + ' · ' + chars + ' characters';
      display.style.opacity = '1';
      display.style.transform = 'translateX(-50%) translateY(0)';
    } else {
      display.style.opacity = '0';
      display.style.transform = 'translateX(-50%) translateY(20px)';
    }
  });
})();

3. Alternative: display it in an existing element

To show the counter in an element in your layout instead of a fixed toast:

document.addEventListener('selectionchange', function() {
  var text = window.getSelection().toString().trim();
  var words = text ? text.split(/\s+/).filter(Boolean).length : 0;
  var el = document.getElementById('selection-count');
  if (el) el.textContent = words > 0 ? words + ' selected words' : '';
});

Conclusion

A small UX detail that shows real care for the reading experience. Use cases:

  • Technical articles with code to copy
  • Documentation or legal pages
  • Writing tools or text editors

Select text in this paragraph

Select any part of this text to see the word and character counter appear. The more text you select, the more the counter increases. It’s a subtle UX detail that improves the reading experience on long-form articles.

Published on May 20, 2026

Sandro DA SILVA

Growth Marketer, Webflow expert, and jack-of-all-trades. Sandro handles commercial operations, ensures projects run smoothly, and addresses marketing-related issues (SEO, Tracking, Copywriting, etc).

You might be interested in these tutorials

Related tutorials

See all

You're going to working with us, guaranteed

Ready to launch your business?

get a quote

Let’s f*****G GO !!