🖱️🤏 lightweight, robust and extensible human gesture detector

Demo • Documentation • npm

What's Pointeract?

Pointeract is a tiny JavaScript/TypeScript utility library focusing on one thing - handling user interactions with DOM elements, e.g. multitouch and touchpad.

Powered by SynthKernel architecture, Pointeract has achieved a highly modular, extensible and efficient architecture. Its core bundle size is only 1KB minified + gzipped, functionalities come from also byte-sized modules. It's fully tree-shakable, the fewer modules you use, the smaller your bundle is.

Advantages

• 🐣 Tiny: With base 1KB minified and gzipped, 1-2KB for normal usage.
• 💪 Robust: Excels at complex gestures where most interaction libraries fail, Why?
• 🧩 Extensible: Extend Pointeract effortlessly via our module API.
• 🔌 Flexible during Runtime: Options are updated reactively. Stop/start any module during runtime.
• 🛡️ Safe: Not modifying the DOM (except the PreventDefault module). Meticulous clean up prevents memory leaks.

Get Started

Install Pointeract using your favorite package manager:

# npm
npm add pointeract

# pnpm
pnpm add pointeract

# yarn
yarn add pointeract

# bun
bun add pointeract

Or include the following lines directly in your HTML file:

<script type="module">
  import { Pointeract } from 'https://unpkg.com/pointeract';
</script>

This link ships the latest ESM version by default.

Then simply grab the core class and a module:

import { Pointeract, Drag } from 'pointeract';

new Pointeract({ element: yourElement }, [Drag])
    .start()
    .on('drag', e => console.log(e));

Congratulations! You can now press your mouse or finger to the element and move, the console will log events like a waterfall.

Read next: dive into the usage of Pointeract in Use Pointeract.

Currently Supported Features

• Click (Double Click, Triple Click, Quadruple Click, Any Click)
• Drag
• Pan and Zoom via Mouse Wheel (ctrl/shift key binding, touchpad support)
• Pan and Zoom via Multitouch (Pan, Pinch)
• One-line Prevent Default
• Smooth Everything (drag / pan / zoom / any interaction involving numbers)

Those interactions are shipped via modules, which can be composed from a single drag-and-drop to a canvas app.

Missing your desired interaction? Write your own module!

How Pointeract Stands Out?

There're already plenty of interaction libraries out there, most famous ones are d3-drag + d3-zoom, Interact.js and Hammer.js, but Pointeract is different.

Criteria	Pointeract	D3 Drag + D3 Zoom	Hammer.js	Interact.js
Written in TypeScript?	✅	❌	❌	✅
Tree-shakeable?	✅	❌	❌	❌
Total Bundle Size (Minified + Gzipped)	👑 3KB	17KB	7KB	28KB
Last Updated	👑 Actively Maintained	2021	2015	2023
Versatility	Pointer and Wheel Related + Some Utils	👑 Pointer and Wheel Related + Ecosystem	Pointer Related	Pointer Related + Comprehensive Utils
Support	👑 Mouse, Mouse Wheel, Touch, and Touchpad	⚠️ No Touchpad Support	⚠️ No Touchpad or Mouse Wheel Support	⚠️ No Touchpad or Mouse Wheel Support
Robust (Passes Monkey Test)	✅	✅	❌ Element Jerks	❌ Element Ignores the Second Touch
Extensible?	✅	❌	❌	❌

Get Involved

This project welcomes anyone that has ideas to improve it.

• Open a pull request for a new module, event standard, documentation update, and so on.
• Open an issue if you find a bug or have a feature request.
• Start a new thread in Discussions if you have feature requests or questions want to discuss.
• Report a vulnerability if you find one, please do not disclose it publicly.

Copyright and License

Copyright ©️ 2025-2026 Hesprs (Hēsperus) | Apache License 2.0