JavaScript Drag, Resize & Multi-touch Gestures
Empower your web applications with intuitive and powerful interactions on any device. Free, open source, and built for modern browsers.
import gesticulate from 'gesticulate'
gesticulate('.item').draggable({
inertia: true,
listeners: {
move (event) {
// Update element position
event.target.style.transform =
`translate(${event.dx}px, ${event.dy}px)`
}
}
})
Packed with Power, Light on Complexity
Everything you need to build rich interactions — nothing you don't.
Open Source
Free to use, modify, and distribute. Built by a community of 300+ contributors worldwide.
Snap & Restrict
Powerful modifiers to guide interactions — snap to grids, restrict movement to boundaries.
Inertial Throwing
Realistic physics-based animations for draggable elements — just like native apps.
Multi-touch Ready
Handle multiple simultaneous interactions on touch devices seamlessly.
Unified API
Same API for mouse and touch — write once, run everywhere.
Auto Scroll
Scroll containers or the document automatically during interactions.
HTML & SVG Support
Works flawlessly with standard HTML elements and SVG graphics.
Zero Dependencies
No jQuery, no frameworks — just 12kb of pure, tree-shakeable JavaScript.
How it Works & Live Examples
Gesticulate takes a different approach to most libraries — it gives you all the pointer event data you need to move elements, letting you decide exactly what feedback your users get. Explore the examples below to see its capabilities.
Read the Full DocumentationDragging
Simple, powerful dragging with optional inertia and auto-scroll. Just handle the move event and update your element.
inertia: true,
modifiers: [
// restrict inside parent
],
autoScroll: true,
listeners: {
move: dragMoveListener
}
})
Drag and Drop
Define drop zones with fine-grained control over accept criteria and overlap percentages. Full event lifecycle included.
accept: '#yes-drop',
overlap: 0.75,
listeners: {
ondrop: handleDrop
}
})
Snapping
Snap elements to grids or custom points with powerful modifiers. Combine with restriction for perfect UX.
modifiers: [
gesticulate.modifiers.snap({
targets: [gesticulate.snappers.grid({
x: 30, y: 30
})]
})
]
})
Resizing
Full-edge resizing with aspect ratio lock, minimum size constraints, and inertia support.
edges: { left: true, right: true,
bottom: true, top: true },
listeners: {
move (event) { /* update */ }
}
})
Multi-touch Rotation
Enable two-finger rotation on touchscreen devices — perfect for image editors or canvas apps.
gesticulate('#rotate-area').gesturable({
listeners: {
move (event) {
// update element rotation
}
}
})
Pinch-to-zoom
Native-feeling pinch zoom for touch devices. Combine with dragging for the full gesture experience.
listeners: {
move (event) {
// update scale and position
}
}
}).draggable({ /* ... */ })
Tap, Doubletap & Hold
Rich gesture recognition for taps, double taps, and long-press hold events — perfect for mobile-first UIs.
.on('tap', function() { // toggle class })
.on('doubletap', function() { // toggle class })
.on('hold', function() { // toggle class })
Use in SVG files
Gesticulate works inside SVG documents, including those loaded via <object> tags. Full support for SVG transforms.
gesticulate('#svg-element')
.draggable({
listeners: {
move: updateSVGTransform
}
})
Ready to Build Something Great?
Join 34,000+ developers who use Gesticulate to create intuitive, responsive interfaces.
Loved by Developers
"This library is a game changer for building interactive interfaces. The API is clean, the performance is great, and it just works across all devices. Highly recommend!"
"We migrated our entire whiteboard feature from a proprietary solution to Gesticulate. It was a weekend project that saved us thousands in licensing fees. The docs are superb."
"The multi-touch support alone is worth it. Our mobile app feels native now. Gesticulate is the first library I reach for when UI interactions come up in discussions."
Frequently Asked Questions
Yes! Gesticulate is MIT-licensed, which means you can use it in any commercial project, modify it, and even redistribute it without any fees or attribution requirements.
Absolutely. Gesticulate is framework-agnostic. It works as a vanilla JS library, and we have official bindings for React, Vue, and Svelte, plus a community-maintained Angular wrapper.
Gesticulate core (drag, resize, gestures) is only 12kb gzipped. Tree-shaking means if you only need dragging, you'll ship even less. No external dependencies.
All modern browsers: Chrome 49+, Firefox 52+, Safari 10+, Edge 15+, and iOS Safari 10+. For older browsers, we provide a polyfill that adds about 4kb.