🖱️🤏 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
• Swipe (All directions, single / multiple fingers)
• 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!

It's the Age of Agents

Copy and paste the following prompt to OpenCode, Claude Code, Cursor or even a chat bot, replace the placeholder to your task, let it handle everything for you:

I'm using `pointeract`, a library to detect user gestures, which can be considered as a modern alternative to Hammer.js. Read the documentation and help me with my requirements.

**"Get Started" Page in Documentation Website**: https://pointeract.consensia.cc/get-started (fetch more internal links when needed)

**Requirements**:

<!-- your requirements here -->

JSON Canvas Viewer is also available on Context7 with an exceptionally high score of 94. If you're using it, you can skip the above prompt and simply ask the agent:

Query `pointeract` on Context7.

Or don't care about this at all, the agents are smart enough to search on Context7 themselves.

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