A tiny (3.6kb minified) vanilla JavaScript library made for in-browser HTML prototyping (as part of the UX process) that visually shows where the user clicks/taps on-screen using CSS3 transforms and transitions. TouchPoint is highly customizable, mobile ready and great for screencasting, screen recording, user testing and presentations.

TouchPoint.js in action

Installation

Download and include touchpoint.js or touchpoint.min.js in the <head> or at the end of the <body> (recommended) in your HTML document. There are no dependencies:

          <script src="touchpoint.min.js"></script>
        

Quick Start/How to Use

After you load the script you simply initialize TouchPoint and add an event listener to whichever DOM element you want TouchPoint to show over:

          <script>
              TouchPoint.init(window);
          </script>
        

That's it!

Start clicking away on the page to see it in action.

Documentation

Please view the README file on the Github repo for full documentation of the API.