Modern, lightweight, robust and extensible user gesture recognizer.
npm install pointeract
Demo
β’
Documentation
β’
npm
Pointeract is a tiny JavaScript/TypeScript utility library focusing on one thing - handling user interactions with DOM elements, e.g. multitouch and touchpad.
With the unique strength of versatile typings in TypeScript and its dynamic nature, Pointeract have achieved a highly _modular, extendable 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.
- π£ 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.
Install Pointeract using your favorite package manager:
``shnpm
$ npm add pointeract
Or include the following lines directly in your HTML file:
`html
`This link ships the latest ESM version by default.
Then simply grab the core class and a module:
`TypeScript
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
Interact.js and Hammer.js`, but Pointeract is different.| Criteria | Pointeract | Hammer.js | Interact.js |
| :-------------------------------------------------------- | :---------------------------------------------------: | :----------------------------------------------: | :-------------------------------------------------: |
| Written in TypeScript? | β
| β | β
|
| Tree-shakeable? | β
| β | β |
| Total Bundle Size (Minified + Gzipped) | π 3KB | 7KB | 28KB |
| Last Updated | π Actively Maintained | 2015 | 2023 |
| Features | Pointer and Wheel Related + Some Utils | Pointer Related | π Pointer and Wheel Related + Comprehensive Utils |
| Robust? (See Testing) | β
| β Element Jerks | β Element Ignores the Second Touch |
| Extensible? | β
| β | β |
This project welcomes anyone that have 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.
- Start a new thread in Discussions if you have feature requests or questions, please avoid posting them in Issues.
- Report a vulnerability if you find one, please do not disclose it publicly.
Copyright Β©οΈ 2025-2026 Hesprs (HeΜsperus) | Apache License 2.0