Skip to content
Get packs

Moveable

A JavaScript library that adds drag, resize, rotate and related handles to web page elements.

GitHub Download 0.53.0
Stars
10.8k
Forks
661
Licence
MIT
Language
TypeScript
Last update
2.4 years ago
Type
Library

No commits in over a year — check for forks or alternatives before adopting.

What it is

Moveable is a TypeScript library that lets a web page visitor move, resize, scale, rotate, and warp HTML or SVG elements with on-screen handles. Developers attach it to an element and turn on the behaviors they want, such as draggable or rotatable. It also has optional snapping, grouping of multiple targets, and pinch gestures.

  • Add draggable and resizable boxes to a page-building or slide-editing interface
  • Let users rotate and scale images or shapes inside a web-based design tool
  • Group several elements and move them together
  • Use snapping guidelines to align elements while a user drags them

Great for

  • Front-end developers building editors or interactive canvases in the browser
  • Teams using React, Vue, Angular, Svelte, or Lit who want a wrapper package for their framework
  • Projects that need manipulable SVG elements or 3D-transformed elements
  • Developers who want snapping guidelines when positioning elements

Not ideal for

  • People who need a finished design tool without writing code, since this is a library for developers
  • Projects that cannot add a JavaScript dependency, since it requires a browser environment and npm or a script tag
  • Simple static pages where a plain CSS transition would be enough
Step-by-step guide: how to use MoveableInstall, first run, examples, tips and FAQs
Moveable alternativesinteract.js vs MoveableFabric.js vs Moveable

How to get it

  1. 1

    Install with a package manager

    You'll need: Node.js and npm (or a bundler) for the npm install route

    Install from npm

    npm i moveable
  2. 2

    Run it

    • Install the package with npm i moveable.
    • Import Moveable from "moveable" in your JavaScript or TypeScript file.
    • Create a new Moveable instance, passing a container element and an options object with a target element.
    • Enable the behaviors you want, such as draggable: true and resizable: true, and view the result in your page.
  3. 3

    Get the most out of it

    • Enable pinchable to combine gesture behaviors, as the README's example shows
    • Use the Group guide in the handbook to move multiple targets together
    • Use the custom CSS guide in the handbook to style control handles
    • Read the README on making custom ables if the built-in behaviors do not fit your needs
    • Use the API documentation for the full list of options

Downloads

Source code (.zip)master branch · straight from GitHubRelease 0.53.0Release notes and sourceOfficial website & docsdaybrush.com/moveable/

Strengths

  • Covers many interaction types (drag, resize, scale, rotate, warp, pinch, group, snap) in one library, according to the README
  • Ships wrapper packages for several frameworks in the same repository
  • MIT licensed with a published API documentation site and a handbook

Trade-offs

  • The README is a feature overview; setup details beyond the basic example are in the separate handbook, which was not included here
  • Requires working knowledge of JavaScript and the DOM to integrate
  • Latest release listed is 0.53.0 and the last push date is 2024-06-03, so check current maintenance status before adopting

How it compares

ProjectStarsTypeLevelUpdatedBest for
moveable (this)10.8kLibraryintermediate2.4 years agoFront-end developers building editors or interactive canvases in the browser
interact.js12.9kLibraryintermediate3 months agoWeb developers building drag-and-drop interfaces
fabric.js31.5kLibraryintermediate4 days agoWeb developers building interactive canvas editors or drawing tools
draggable18.5kLibraryintermediate11 months agoFront-end developers who want full control over how drag and drop feels and behaves
dnd-kit17.8kLibraryintermediate5 days agoDevelopers building sortable lists or grids in a React, Vue, Svelte, or Solid app
muuri10.9kLibraryintermediate2.5 years agoFront-end developers building card or photo grids that need drag and drop or filtering

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.