Easter egg

4 views

3 min

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 info	Source	Example
Word count	window.getSelection().toString()	3 words
Character count	text.length	18 characters
Position	Fixed bottom center	Subtle 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.

2. Add the script in Footer code

(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' : '';
});

good to know

The selectionchange event fires every time the selection changes, including partial selections while dragging. That’s normal and doesn’t cause any performance issues. If you only want to trigger at the end of the selection (mouseup), replace selectionchange with mouseup.

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.

Good to know

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Learn more

4.9/5 • 97 reviews

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

Let's discuss